/* Sales Tools homepage only — the collection/brand tile grid below the
   shared header. Reuses .site-nav__link-en/-zh from base.css for a
   consistent look with the rest of the site.

   Frame: the same fixed-corner-radius ring the header itself uses (two
   stacked --ticket-clip layers, see base.css's :root and
   .site-header__frame for the full explanation) — not the 3 separate
   pre-drawn ticket-frame-*.svg files this used to render as plain <img>s.
   That older approach needed 3 exact-ratio SVGs (square/vertical/
   horizontal) because each one's corner curve was baked into its own
   fixed viewBox, scaling proportionally with whatever size the tile
   rendered at — so two tiles of different sizes never actually had the
   same on-screen radius, and neither matched the header, which already
   used a fixed-px clip-path. --ticket-clip's corners are plain px and
   its straight runs are calc(100% - Npx), so the same one shape fits a
   square, a tall rectangle, or a wide banner at any size without
   distortion, and always at the exact same radius as the header. */

.home {
  padding: 24px var(--page-padding) 60px;
}

/* min-width/min-height:0 — a grid item's (in .home-hero/.home-collections)
   default auto minimum size falls back to its content's own min-content
   size when that content can't otherwise shrink, same class of bug fixed
   elsewhere in this file (.home-banner__cell, .home-banner__wordmarks
   img): at a narrow enough viewport this was overflowing a single-column
   .home-hero's own width (one tile computing ~378px wide inside a 280px
   container), pushing the whole page into horizontal scroll. */
.home-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  text-decoration: none;
  color: inherit;
  cursor: default;
}

a.home-tile {
  cursor: pointer;
}

.home-tile__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
  clip-path: var(--ticket-clip);
}

/* Outer ring layer (line color) + inner ring layer (page background,
   inset 1px on every side) — same two-layer technique as
   .site-header__frame/__frame-inner in base.css, see that comment for
   why it's two ordinary shapes instead of one true "hole". Unlike the
   header, there's no 28px border reservation to reach out from here —
   the tile's own box is already the full ticket shape, so these sit at
   inset:0 (frame) / inset:1px (frame-inner) directly. */
.home-tile__frame,
.home-tile__frame-inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--ticket-clip);
}

.home-tile__frame {
  z-index: 1;
  background: var(--color-text);
}

.home-tile__frame-inner {
  inset: 1px;
  z-index: 2;
  background: var(--color-bg);
}

.home-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

.home-hero .home-tile {
  aspect-ratio: 1 / 1;
}

.home-tile--text {
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 10px;
  padding: 52px;
}

.home-tile__title {
  position: relative;
  /* Above .home-tile__hover-bg (3) — see that rule's comment for the
     full stacking order. */
  z-index: 4;
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.8rem;
  margin: 0;
}

.home-tile__subtitle {
  position: relative;
  z-index: 4;
  font-family: 'GenWanMin JP', var(--font-body);
  font-size: 1.8rem;
  margin: 0;
}

/* Hover-fill photo (uploads/home/{slug}.jpg, see README.txt there) —
   invisible until hover, fades in over 0.3s (no zoom/transform, just the
   opacity).

   Positioned and clipped exactly like .home-tile__frame-inner (inset:1px,
   same --ticket-clip shape resolving 1px smaller) rather than full-size —
   that's what keeps the ring visible around the photo instead of the
   photo covering it: the two share one footprint, so the photo simply
   replaces frame-inner's flat fill within it, and never reaches the
   outer 1px band .home-tile__frame draws. That's also why this doesn't
   need the header content's z-index-above-the-ring trick — it's not
   trying to sit above the ring, it just never overlaps it. Sits above
   .home-tile__fill (z-index -1) and .home-tile__frame-inner (2) so a
   missing upload still falls back to the plain placeholder; below the
   title/subtitle text and caption (4), so those stay legible over a
   photo. */
.home-tile__hover-bg {
  position: absolute;
  inset: 1px;
  z-index: 3;
  clip-path: var(--ticket-clip);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.home-tile:hover .home-tile__hover-bg {
  opacity: 1;
}

/* Hover state also swaps the title/subtitle/caption text to a light
   color, since the photo fading in behind it (.home-tile__hover-bg,
   above) is generally dark enough that the default --color-text (a dark
   red) loses contrast against it. */
.home-tile:hover .home-tile__title,
.home-tile:hover .home-tile__subtitle,
.home-tile:hover .home-tile__caption {
  color: #f9f8f2;
}

/* Caption centered to match the SS27-Q2 text tile. */
.home-tile--photo {
  align-items: center;
  justify-content: center;
  padding: 56px;
}

.home-tile__caption {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.home-collections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

.home-collections .home-tile {
  aspect-ratio: 607.87 / 917.7;
}

/* The brand banner — a single pre-drawn illustration (tiger + repeating
   wordmark strips + corner marks) sitting inside the same thin ticket
   ring every other tile uses, ~25px in from it. Unlike those tiles, the
   ring isn't this component's own outline: its own frame (THICK-FRAME.svg)
   is a one-off shape with a much bigger, differently-angled corner
   chamfer than --ticket-clip's ticket-notch, so it can't share a single
   clip-path with the thin ring the way a tile's fill/photo share one
   with their own frame. Nesting two independently-shaped frames instead
   — the thin --ticket-clip ring as this element's own outline (reusing
   .home-tile__frame/-inner as-is, so it's pixel-identical to the header
   and every tile, not just similar), and THICK-FRAME.svg's shape 25px
   further in, on .home-banner__inner. */
.home-banner {
  position: relative;
  padding: 25px;
  box-sizing: border-box;
}

/* width:100% + aspect-ratio (not a padding-derived size) keeps this
   always exactly THICK-FRAME.svg's own ratio (1825.99/871.7) regardless
   of banner width, so the frame image and grid inside never stretch —
   .home-banner's own height simply follows from this via normal layout
   (padding + this element's height), rather than the other way around.
   container-type:size (not inline-size — this needs cqh too, not just
   cqw) is what lets .home-banner__rotator swap its own dimensions on
   mobile/tablet (see that ruleset and the max-width:900px block) by
   reading this element's actual width *and* height, whichever
   orientation they're currently in. */
.home-banner__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1825.99 / 871.7;
  container-type: size;
}

/* Everything that actually draws the banner (the grid, the thick frame
   image) lives in here rather than directly in .home-banner__inner, so
   that content can stay laid out landscape internally — same markup,
   same CSS — at every breakpoint, while this wrapper is the one thing
   that changes: identity on desktop (inset:0, filling .home-banner__inner
   exactly, its own size equal to inner's), rotated 90° into a swapped
   footprint on mobile/tablet (see the max-width:900px block) so the
   whole illustration turns without the grid needing a second, portrait-
   specific version of itself. container-type:inline-size (not on
   .home-banner__inner) is what makes .home-banner__grid's corner-track
   cqw formulas correct in *both* cases: they need this element's own
   width specifically — the landscape width the grid was actually
   designed against — not .home-banner__inner's, which is the (possibly
   portrait, on mobile) outer footprint instead. */
.home-banner__rotator {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}

.home-banner__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 3x3 grid, filled in document order (top-left, top-strip, top-right,
   left, center, right, bottom-left, bottom-strip, bottom-right) — no
   explicit grid-column/-row needed, auto-placement fills exactly this
   shape.

   The corner tracks' calc() is the closed-form solution to "what corner
   size X makes the wordmark row exactly X tall" — not a guess, an actual
   equation solved once and hardcoded here. The row's real height is
   driven by the wordmark logos (9 of them, flex-grown to fill the center
   column edge to edge with an exact 15px gap between each — see
   .home-banner__wordmarks) at whatever width is left after the corner
   columns claim their own share, so "corner width" and "row height" both
   depend on each other. Two earlier attempts at this — a fixed px tuned
   to one reference width, then an auto column + aspect-ratio:1 on the
   corner cells hoping the browser would resolve the circularity — each
   failed differently: the fixed value was square only near that one
   width; aspect-ratio on a mutually-dependent auto track turned out to
   be circular in a way Chromium couldn't actually solve, silently
   falling back to the CSS default replaced-element size (300px) instead
   of erroring. Solving the two equations (corner size in terms of the
   available center width; center width in terms of the corner size) by
   hand for X removes the circularity entirely — X is just a linear
   function of the banner's own width, computed once, not something the
   grid has to iterate towards. cqw (not %, which resolves against
   *height* inside grid-template-rows) is what lets that formula read
   .home-banner__inner's width from a row-sizing property; see that
   ruleset's container-type for why cqw resolves there at all. Reproduce
   with n=9 logos, aspect=155.36/40, gap=pad=15px:
     k = n × aspect; X = (30k + W − 150) / (k + 2), W = container cqw. */
.home-banner__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(24.318px + 2.706cqw) 1fr calc(24.318px + 2.706cqw);
  grid-template-rows: calc(24.318px + 2.706cqw) 1fr calc(24.318px + 2.706cqw);
}

.home-banner__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Grid items default to min-width:auto, which for a percentage-sized
     child (.home-banner__tiger's width:78%) is a circular dependency
     browsers resolve by falling back to that child's full intrinsic
     size (TIGER-ILLUSTRATION.svg's 1500px-wide viewBox, since it has no
     explicit width/height of its own) — ballooning the center column
     and every cell after it in the grid far past the banner's own
     right edge. min-width:0 opts this cell out of that fallback, so the
     percentage actually resolves against the grid track like it looks
     like it should. min-height:0 is the same fix on the other axis, for
     a different culprit: .home-banner__spine's white-space:nowrap makes
     its own min-content height (its full un-wrappable text length, since
     writing-mode:vertical-rl runs the text along the block/height axis)
     unshrinkable, which was inflating the middle "1fr" row to fit it —
     invisible on desktop (that row has plenty of height to spare) but,
     once .home-banner__rotator turns everything 90° on mobile, that
     inflated pre-rotation height becomes extra post-rotation *width*,
     which was quietly growing in lockstep with the spine font-size
     rather than actually being fixed by it. */
  min-width: 0;
  min-height: 0;
}

/* Divider lines between cells — a plain 1px hairline (not a scaling
   --ticket-clip stroke; this frame doesn't use that system), matching
   the site's standard line weight. inset box-shadow, not a real border:
   a border adds its own width on top of whatever size an element already
   needs, so on the top/bottom rows (auto-height, sized by the wordmark
   logos — see .home-banner__grid/__wordmarks) it was quietly inflating
   the row 1px past the height that math accounted for, throwing off both
   the corner cells' squareness and the __tick extensions' alignment to
   the actual divider position. A shadow paints in the same place a
   border would without occupying any layout space, so the row's real
   height goes back to being exactly what the logo math says it is.
   Combined per-cell (not shared across a row/column like the border
   version could be, since box-shadow doesn't merge across separate
   rules the way distinct border-* properties do) — corner cells need
   two lines at once, so they get two comma-separated shadows. */
.home-banner__cell--tl {
  box-shadow:
    inset 0 -1px 0 var(--color-text),
    inset -1px 0 0 var(--color-text);
}

.home-banner__cell--top {
  box-shadow: inset 0 -1px 0 var(--color-text);
}

.home-banner__cell--tr {
  box-shadow:
    inset 0 -1px 0 var(--color-text),
    inset 1px 0 0 var(--color-text);
}

.home-banner__cell--left {
  box-shadow: inset -1px 0 0 var(--color-text);
}

.home-banner__cell--right {
  box-shadow: inset 1px 0 0 var(--color-text);
}

.home-banner__cell--bl {
  box-shadow:
    inset 0 1px 0 var(--color-text),
    inset -1px 0 0 var(--color-text);
}

.home-banner__cell--bottom {
  box-shadow: inset 0 1px 0 var(--color-text);
}

.home-banner__cell--br {
  box-shadow:
    inset 0 1px 0 var(--color-text),
    inset 1px 0 0 var(--color-text);
}

/* Extends each corner cell's own two divider lines 25px further out,
   bridging .home-banner's padding gap so they visibly reach the outer
   thin ring instead of stopping at the thick frame. ::before/::after
   directly on the corner cell (not separate elements positioned by a
   guessed px offset, which is what this replaces — see the git history
   for why that broke at any viewport width other than the one it was
   eyeballed against) is what makes this exact at every width: each tick
   is positioned with right/bottom:100% (or left/top:100%), i.e.
   "immediately outside this cell's own edge," which is wherever that
   edge actually is right now, not wherever it happened to be at some
   reference width. That's also why no explicit z-index is needed here —
   .home-banner__inner (this cell's ancestor) already carries z-index:3,
   so everything painted inside it, ticks included, is already above
   .home-tile__frame-inner's z-index:2 fill as a group. */
.home-banner__cell--tl,
.home-banner__cell--tr,
.home-banner__cell--bl,
.home-banner__cell--br {
  position: relative;
}

.home-banner__cell--tl::before,
.home-banner__cell--tr::before,
.home-banner__cell--bl::before,
.home-banner__cell--br::before,
.home-banner__cell--tl::after,
.home-banner__cell--tr::after,
.home-banner__cell--bl::after,
.home-banner__cell--br::after {
  content: '';
  position: absolute;
  background: var(--color-text);
  pointer-events: none;
}

/* ::before = the horizontal divider's own extension (left on tl/bl,
   right on tr/br); ::after = the vertical divider's (up on tl/tr, down
   on bl/br). */
.home-banner__cell--tl::before,
.home-banner__cell--bl::before,
.home-banner__cell--tr::before,
.home-banner__cell--br::before {
  width: 25px;
  height: 1px;
}

.home-banner__cell--tl::after,
.home-banner__cell--tr::after,
.home-banner__cell--bl::after,
.home-banner__cell--br::after {
  width: 1px;
  height: 25px;
}

.home-banner__cell--tl::before {
  right: 100%;
  bottom: 0;
}

.home-banner__cell--tl::after {
  bottom: 100%;
  right: 0;
}

.home-banner__cell--tr::before {
  left: 100%;
  bottom: 0;
}

.home-banner__cell--tr::after {
  bottom: 100%;
  left: 0;
}

.home-banner__cell--bl::before {
  right: 100%;
  top: 0;
}

.home-banner__cell--bl::after {
  top: 100%;
  right: 0;
}

.home-banner__cell--br::before {
  left: 100%;
  top: 0;
}

.home-banner__cell--br::after {
  top: 100%;
  left: 0;
}

.home-banner__mark {
  width: 45%;
  height: auto;
}

/* Repeating wordmark strip — a fixed count (not a tiled background), so
   there's no risk of a cropped/uneven logo at the row's own edge the way
   tiling at a fixed pixel size could. 15px padding on every side (thick
   frame/divider line above and below, the corner-cell divider left and
   right) plus an exact 15px gap between logos is the actual point of
   this layout — not space-between's "at least this much, more if there's
   room to fill" from before, a real fixed 15px every time. Getting an
   exact gap *and* a full edge-to-edge span at once (rather than one or
   the other) is what .home-banner__wordmarks img's flex-grow does: each
   logo grows to fill whatever's left after the fixed gaps are
   subtracted, so 9 logos always exactly fill the row regardless of the
   banner's own width, with the 15px gaps never stretching to make up
   the difference the way space-between's would. */
.home-banner__wordmarks {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

/* flex:1 1 0 makes every logo grow equally from a zero base, so the
   available width (row width minus padding minus the 8 fixed 15px gaps)
   splits 9 ways evenly; height:auto then turns that resolved width into
   a height via WOODBIRD-LOGO.svg's own intrinsic ratio (browsers derive
   that from an SVG's viewBox even with no explicit width/height on its
   root element, same as any other image format's intrinsic ratio) — no
   explicit aspect-ratio needed here the way TIGER-ILLUSTRATION.svg
   elsewhere needed one worked around. That resolved height is what
   .home-banner__grid's auto row tracks then read to size the whole row —
   the logo's size drives the row's, not the other way around. min-width:0
   for the same reason as .home-banner__cell above: without it, a
   flex-grow item's default min-width:auto would fall back to this img's
   intrinsic width instead of actually shrinking to fit 9-across. */
.home-banner__wordmarks img {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
}

/* Absolutely positioned, inset exactly 50px on every side of the center
   cell (not a percentage width like this used to be, which only ever
   gives a fixed margin by coincidence at one specific cell size) —
   object-fit:contain then fits the tiger's own fixed ratio inside that
   50px-inset box, touching all four sides only if the box happens to
   share its ratio; otherwise it touches the two sides on the
   constraining axis exactly at 50px and clears more than 50px on the
   other, which is the correct, achievable reading of "50px margin" for
   a fixed-ratio image in a box whose own ratio changes with the banner's
   width. */
.home-banner__cell--center {
  position: relative;
}

.home-banner__tiger {
  position: absolute;
  top: 50px;
  left: 50px;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  object-fit: contain;
}

/* Bottom-to-top spine text (vertical-rl reads top-to-bottom by default;
   the 180deg flip is what makes it read bottom-to-top instead). Fixed
   24px, the same on both sides — not scaled to fill the column (an
   earlier version did that, at a different font-size per side since
   "Denmark 2010" and "Hong Kong 1984" are different lengths and need
   different sizes to reach the same rendered height; dropped in favor
   of the two simply matching). */
.home-banner__spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-size: 24px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home-hero,
  .home-collections {
    grid-template-columns: 1fr;
  }

  .home-hero .home-tile,
  .home-collections .home-tile {
    aspect-ratio: 607.87 / 917.7;
  }

  /* Turns the whole banner on its side instead of trying to cram the
     landscape design into a narrow width by shrinking everything (the
     earlier approach here — a smaller corner track, hidden logo repeats,
     a smaller spine font — all tuned by eye, none of it able to keep the
     exact-15px/exact-square guarantees the desktop layout actually has).
     Rotating means none of that: the grid keeps its one real definition
     and every formula in it (corner squares, 15px logo/spine margins,
     50px tiger margin) keeps holding exactly, just sideways — the only
     thing this breakpoint changes is which way is "up".

     .home-banner__inner switches to the swapped (portrait) aspect-ratio,
     so the space this reserves in the page is tall instead of wide.
     .home-banner__rotator — the landscape content itself, unchanged —
     is sized to exactly the opposite (100cqh × 100cqw: .home-banner__inner's
     height becomes the rotator's width and vice versa, "cq" units because
     .home-banner__inner has container-type:size — see that ruleset) and
     then rotated 90° around its own center (the translate half of the
     transform, since rotating a non-square box in place around its
     top-left corner would swing it out of the visible area rather than
     spinning in place). What was the top/bottom (wordmark strips) ends
     up on the left/right; what was left/right (the spine text) ends up
     on top/bottom — exactly "text over/under, logos on the sides". */
  .home-banner__inner {
    aspect-ratio: 871.7 / 1825.99;
  }

  .home-banner__rotator {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* .home-banner__mark (the CHUNG.svg 聴 mark in each corner) is inside
     .home-banner__rotator, so it inherits that 90° turn along with
     everything else in there — fine for the tiger and the (already
     vertical-running) wordmark/spine text, wrong for a single glyph
     that's meant to be read upright. Rotating it -90° here cancels the
     parent's +90° out for this element specifically, without touching
     anything else the rotator carries. */
  .home-banner__mark {
    transform: rotate(-90deg);
  }

  /* Tiger flipped 180° from how the parent's +90° turn otherwise leaves
     it. A 180° turn doesn't swap width/height like a 90°/270° one would,
     so this stays exactly the same portrait footprint within the
     rotator — only the artwork's own up/down orientation changes. */
  .home-banner__tiger {
    transform: rotate(180deg);
  }

  /* Desktop's fixed 24px doesn't fit the space this rotates into: the
     spine text's own *length* (both strings, "Hong Kong 1984" longer
     than "Denmark 2010") is bounded by .home-banner__grid's middle row
     height (pre-rotation) — well over 24px worth of characters' width on
     desktop, but only ~155px at a 320px viewport once .home-banner__cell's
     min-height:0 (above) stopped that row being circularly inflated by
     this same text in the first place. 12px keeps "Hong Kong 1984" — the
     longer, binding string — at a real ~12px margin there, confirmed by
     measuring its actual rendered length against that now-stable row
     size, not just eyeballed. */
  .home-banner__spine {
    font-size: 12px;
  }

  /* Touch devices have no real :hover, so the fade-in-on-hover photo
     (and its matching light text, above) would otherwise never show on
     mobile/tablet — shown at full opacity here always instead. */
  .home-tile__hover-bg {
    opacity: 1;
  }

  /* :has(.home-tile__hover-bg) — only tiles with an actual uploaded photo
     (see home_tile_hover_bg(): a tile with no match renders that element
     as nothing) get the light text. Without this scoping, a tile that's
     still waiting on its photo (e.g. a gender-picker tile before its
     Male/Female image is uploaded) got near-white text on the plain page
     background here — readable on desktop (text stays the default red
     until actually hovered) but invisible on mobile, where this rule is
     unconditional otherwise. */
  .home-tile:has(.home-tile__hover-bg) .home-tile__title,
  .home-tile:has(.home-tile__hover-bg) .home-tile__subtitle,
  .home-tile:has(.home-tile__hover-bg) .home-tile__caption {
    color: #f9f8f2;
  }
}