/* /Views/Home/Index.cshtml.rz.scp.css */
/* Home page (#8): hero carousel and category tiles. Scoped to Views/Home/Index.cshtml.
   The links are tag-helper elements, which CSS isolation does not tag with the scope
   attribute, so their rules go through ::deep from a scoped ancestor. */

/* Hero: edge to edge, its negative margins cancelling the fluid container's padding (half
   the gutter it inherits). */
.home-hero[b-uqhcju36c3] {
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

/* The CSS ratio matches the Cloudinary crop at each width (the <source>s in the view), so
   the slide keeps its height while the image loads. */
.home-hero-img[b-uqhcju36c3] {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  background-color: #222;
}

@media (min-width: 500px) {
  .home-hero-img[b-uqhcju36c3] {
    aspect-ratio: 7 / 5;
  }
}

@media (min-width: 700px) {
  .home-hero-img[b-uqhcju36c3] {
    aspect-ratio: 9 / 5;
  }
}

@media (min-width: 900px) {
  .home-hero-img[b-uqhcju36c3] {
    aspect-ratio: 11 / 5;
  }
}

@media (min-width: 1300px) {
  .home-hero-img[b-uqhcju36c3] {
    aspect-ratio: 5 / 2;
  }
}

/* .carousel-inner clips overflow, so the focus ring is drawn inside the slide: white
   between two dark bands (an overlay above the image), visible on light and dark photos
   alike. The outline alone remains in forced-colors mode, which drops box shadows. */
.home-hero[b-uqhcju36c3]  .home-hero-link {
  position: relative;
}

.home-hero[b-uqhcju36c3]  .home-hero-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.home-hero[b-uqhcju36c3]  .home-hero-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6), inset 0 0 0 6px #fff, inset 0 0 0 9px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Pause/play (WCAG 2.2.2), above Bootstrap's next-slide control. The icon is a play
   triangle, or two pause bars (a double border) while the slideshow is playing. */
.home-hero-toggle[b-uqhcju36c3] {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
}

.home-hero-toggle[hidden][b-uqhcju36c3] {
  display: none;
}

.home-hero-toggle:hover[b-uqhcju36c3] {
  background-color: rgba(0, 0, 0, 0.75);
}

.home-hero-toggle:focus-visible[b-uqhcju36c3] {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.home-hero-toggle-icon[b-uqhcju36c3] {
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 14px;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}

.home-hero-toggle.is-playing .home-hero-toggle-icon[b-uqhcju36c3] {
  margin-left: 0;
  border-style: double;
  border-width: 0 0 0 12px;
  border-color: #fff;
}

/* Tiles: the category name over its hero, as on the old site (its size and weight: twice
   the text size, 500). The link carries the site-wide .photo-frame; the inner box clips
   the hover zoom to the photo. */
.home-tiles[b-uqhcju36c3]  .home-tile {
  color: #fff;
  text-decoration: none;
}

/* A size container, so the caption can scale with the tile (cqi below). */
.home-tile-photo[b-uqhcju36c3] {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.home-tile-img[b-uqhcju36c3] {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  background-color: #222;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.home-tile:hover .home-tile-img[b-uqhcju36c3],
.home-tile:focus-visible .home-tile-img[b-uqhcju36c3] {
  transform: scale(1.03);
  filter: brightness(0.85);
}

.home-tile-title[b-uqhcju36c3] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.5rem;
  text-align: center;
  /* 2em, or less on a tile too narrow for a long name at that size. The longest,
     ASTROPHOTOGRAPHY, is about 10.5em wide, so at 8% of the tile's width it takes 84% of
     it and fits inside the padding on any tile wider than about 100px. */
  font-size: min(2em, 8vw); /* fallback where cqi is unsupported (Safari <16, Chrome <105) */
  font-size: min(2em, 8cqi);
  font-weight: 500;
  text-transform: uppercase;
  /* Lighter than before but kept, so white names stay readable on bright photos. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-tile-img[b-uqhcju36c3] {
    transition: none;
  }

  .home-tile:hover .home-tile-img[b-uqhcju36c3],
  .home-tile:focus-visible .home-tile-img[b-uqhcju36c3] {
    transform: none;
  }
}