/* =========================================================
   LFD Seasons Hub

   A CONTINUATION OF THE HOMEPAGE, not a new visual concept. Every device is one
   the approved homepage already established, and the values are the ones those
   sections use:

     the lead panel    the gallery panel - lfd-home.css:1240-1420
     the archive card  the gallery tile  - lfd-home.css:963-1097
     the micro-label   the header CTA eyebrow and the gallery link
     the gutter        the homepage shell's own contract, restated below

   THE GUTTER CONTRACT IS THE SAME ONE.
   42px, 28px at 1180px, 16px at 767px - identical to lfd/components/home/home.css,
   because the Hub is a page rather than a homepage section and so cannot inherit
   --lfd-home-gutter from the shell. A test asserts the two agree, so they cannot
   drift apart.

   THE SEASON ACCENT
   --lfd-season-accent is set inline per season, and tokens.css already reads it
   through --lfd-color-accent. So a season colour reaches everything accented in
   its subtree without this file knowing what a season is.
   ========================================================= */

.lfd-seasons {
  --lfd-seasons-gutter: 42px;
  --lfd-seasons-line: 1560px;

  display: block;
  box-sizing: border-box;
}

.lfd-seasons * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   The lead - the gallery panel's composition, at page scale
   --------------------------------------------------------- */
.lfd-seasons-lead {
  position: relative;
  padding-block: 76px 86px;
  padding-inline: var(--lfd-seasons-gutter);
  background: #fff;
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
  display: grid;
  /* Panel first, poster second - the gallery's arrangement (lfd-home.css:617),
     with the proportions inverted because here the words are the substance and
     the poster is the accompaniment. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 52px;
  align-items: center;
}

.lfd-seasons-lead-panel {
  position: relative;
  min-inline-size: 0;
  /* Room for the numeral to sit BEHIND the eyebrow and the top of the title,
     which is where the gallery panel puts it (lfd-home.css:1285). Without it the
     numeral floats above the text instead of underlying it. */
  padding-block-start: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lfd-seasons-lead-panel > * {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* The giant pale numeral, exactly the gallery panel's device
   (lfd-home.css:1283-1308). It is the season's NUMBER, so it is announced - the
   eyebrow precedes it in the DOM, which costs nothing because it is absolutely
   positioned. */
.lfd-seasons-numeral {
  position: absolute;
  inset-inline-start: -4px;
  inset-block-start: 0;
  z-index: 0;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(150px, 12vw, 225px);
  line-height: 0.72;
  font-weight: 400;
  letter-spacing: -0.105em;
  color: rgba(0, 0, 0, 0.055);
  white-space: nowrap;
}

/* lfd-home.css:1310-1324 */
.lfd-seasons-eyebrow {
  font-family: Oswald, Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.58);
  white-space: nowrap;
}

/* lfd-home.css:1326-1350, including the 42px rule drawn as a background so it
   sits at the bottom of the padding box. */
.lfd-seasons-title {
  /* The 12ch measure is the composition: it stacks the name into a tight block under the
     numeral, as the gallery panel's title does. But a season name can contain a word LONGER
     than the measure - "INTERNATIONAL" is thirteen characters - and capping the box at 12ch
     then leaves overflow-wrap no choice but to break it mid-word, with no hyphen, which reads
     as a bug rather than as typography.

     min-inline-size wins over max-inline-size when the two disagree, so min-content lets the
     box widen by exactly as much as the longest word needs and not one pixel more. A title
     whose longest word fits in 12ch is unaffected; only the long ones move.

     overflow-wrap is normal, not break-word, and that is deliberate rather than careless.
     With min-content sizing the two are not belt and braces - they contradict each other.
     Measured in Chromium at 1440: min-content resolves to 426.71875px and the same run
     measures 426.72px, a difference of one eight-hundredth of a pixel, and break-word
     dutifully splits the word across two lines every single time. A display title that reads
     "INTERNATION / AL" is worse than one that overhangs its measure by a thousandth of a
     pixel, and min-content is what keeps the overhang to that. */
  max-inline-size: 12ch;
  min-inline-size: min-content;
  margin-block-start: 14px;
  padding-block-end: 24px;
  background-image: linear-gradient(#000, #000);
  background-size: 42px 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  font-family: Oswald, Arial, sans-serif;
  font-size: clamp(42px, 4.1vw, 66px);
  line-height: 0.86;
  font-weight: 700;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  color: #000;
  overflow-wrap: normal;
}

/* Georgia, the editorial contrast the open-call panel and the designers heading
   both use. */
.lfd-seasons-strap {
  margin-block-start: 22px;
  max-inline-size: 34ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #111;
}

/* ---------------------------------------------------------
   Facts - hairline-separated rows, the statistics strip's device
   --------------------------------------------------------- */
.lfd-seasons-facts {
  inline-size: 100%;
  margin-block-start: 30px;
  padding: 0;
}

.lfd-seasons-fact {
  display: grid;
  grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
  gap: 18px;
  padding-block: 12px;
  border-block-start: 1px solid rgba(0, 0, 0, 0.12);
}

.lfd-seasons-fact:last-child {
  border-block-end: 1px solid rgba(0, 0, 0, 0.12);
}

.lfd-seasons-fact dt {
  margin: 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Was rgba(0, 0, 0, 0.5) - #808080, 3.98:1, below AA for 10px type. The token
     resolves to 0.55 black, 4.76:1. */
  color: var(--lfd-color-text-quiet, rgba(0, 0, 0, 0.55));
}

.lfd-seasons-fact dd {
  margin: 0;
  min-inline-size: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #111;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   Action states

   There used to be a separate quiet row of registration states above the calls
   to action. It is gone with the operational state model that fed it: what a
   visitor sees about participation is now the ACTION itself, carrying the word
   the editor set. One fact, one line, nothing to keep in step.

   The treatment is the one the states row had, so the composition reads the
   same: a small Oswald word beside the label, and the season accent plus a dot
   for the one thing on the page a visitor can act on right now.
   --------------------------------------------------------- */
.lfd-seasons-action-state {
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  /* Was rgba(0, 0, 0, 0.45) - #8c8c8c, 3.35:1. At 9px this is the hardest type
     on the card to read and it was the furthest below AA. */
  color: var(--lfd-color-text-quiet, rgba(0, 0, 0, 0.55));
  white-space: nowrap;
}

/* The accent at reading weight, not the poster accent. The gold is 2.93:1 on
   paper - the worst contrast on the page, on the one word that tells a visitor
   they can act. --lfd-color-accent-text is the same gold darkened to 5.20:1 and
   is used ONLY here; the season accent itself, and everything it fills or
   outlines, is untouched. The dot below inherits currentColor, so it follows. */
.lfd-seasons-action--open .lfd-seasons-action-state {
  color: var(--lfd-color-accent-text, #8a671f);
}

.lfd-seasons-action--open .lfd-seasons-action-state::after {
  content: "";
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
}

/* On the black button the muted ink would disappear, so it borrows the button's
   own colour at a lower weight instead. */
.lfd-seasons-action--primary .lfd-seasons-action-state {
  color: rgba(255, 255, 255, 0.72);
}

.lfd-seasons-action--primary:hover .lfd-seasons-action-state,
.lfd-seasons-action--primary:focus-visible .lfd-seasons-action-state {
  color: rgba(0, 0, 0, 0.58);
}

/* An action with no destination is a statement. It keeps the type and the rule
   so the row still scans as one set, but nothing about it invites a click. */
.lfd-seasons-action--inert {
  cursor: default;
  color: var(--lfd-color-text-quiet, rgba(0, 0, 0, 0.55));
  border-block-end-color: rgba(0, 0, 0, 0.22);
}

/* ---------------------------------------------------------
   Actions - the open-call panel's black CTA and the gallery's underlined link
   --------------------------------------------------------- */
.lfd-seasons-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-block-start: 34px;
}

.lfd-seasons-action {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  inline-size: fit-content;
  color: #000;
  border-block-end: 1px solid #000;
  padding: 0 0 7px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--lfd-duration-base, 0.25s) ease,
              transform var(--lfd-duration-base, 0.25s) ease;
}

.lfd-seasons-action:hover,
.lfd-seasons-action:focus-visible {
  opacity: 0.58;
  transform: translateX(4px);
}

/* lfd-home.css:169-190 - the open-call panel's black button. */
.lfd-seasons-action--primary {
  min-block-size: 50px;
  justify-content: center;
  gap: 18px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  padding: 15px 26px;
  font-size: 12px;
  letter-spacing: 0.13em;
}

.lfd-seasons-action--primary:hover,
.lfd-seasons-action--primary:focus-visible {
  background: #fff;
  color: #000;
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   The poster
   --------------------------------------------------------- */
.lfd-seasons-lead-media {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  background: #111;
  aspect-ratio: 4 / 5;
}

.lfd-seasons-lead-media img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.04) saturate(0.98) brightness(1);
}

/* A lead with no poster is one column, not one column and a hole. */
.lfd-seasons-lead:not(:has(.lfd-seasons-lead-media)) {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------
   The archive - the gallery feed's tiles
   --------------------------------------------------------- */
.lfd-seasons-archive {
  padding-block: 70px 86px;
  padding-inline: var(--lfd-seasons-gutter);
  background: #fff;
}

.lfd-seasons-archive-title {
  margin: 0 0 28px;
  font-family: Oswald, Arial, sans-serif;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000;
}

.lfd-seasons-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-seasons-item {
  min-inline-size: 0;
}

/* lfd-home.css:963-1004 - the tile, its inner hairline and its gradient. */
.lfd-seasons-card {
  position: relative;
  block-size: 100%;
  min-block-size: clamp(340px, 26vw, 420px);
  overflow: hidden;
  background: #111;
  isolation: isolate;
}

.lfd-seasons-item-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.lfd-seasons-item-media img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.04) saturate(0.98) brightness(1);
  transition: transform 0.65s ease, filter 0.65s ease;
}

.lfd-seasons-card:hover .lfd-seasons-item-media img,
.lfd-seasons-card:focus-within .lfd-seasons-item-media img {
  transform: scale(1.045);
  filter: contrast(1.1) saturate(1.04) brightness(1.03);
}

/* THE IMAGE TREATMENT. It shapes how the photograph fades; it is NOT what makes the caption
   legible - see .lfd-seasons-item-caption::before below, which is.

   Its final stop moved 0.78 -> 0.45 because the caption now carries its own backing and the two
   composite: 1 - (1 - 0.45)(1 - 0.62) = 0.791, against 0.78 before. The bottom of the card is
   within about one percent of the darkness it has always had, so the approved treatment is
   preserved while the guarantee moves to where the text actually is. */
.lfd-seasons-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.00) 42%,
    rgba(0, 0, 0, 0.20) 68%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.lfd-seasons-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.lfd-seasons-item-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 5;
  padding: 0 18px 20px;
  color: #fff;
}

/* WHITE TEXT OVER AN EDITABLE PHOTOGRAPH, GUARANTEED BY THE BACKDROP RATHER THAN BY THE COLOUR.
   =============================================================================================

   The image here is content: an editor uploads it, and no text colour survives every photograph
   that might arrive. Choosing a darker ink is not available either - this is a white editorial
   caption on a fashion image, which is the approved treatment. So the mechanism has to be the
   backdrop, and it has to hold for the WORST image rather than for the three placeholders
   committed to this repository.

   THE ARITHMETIC. White text needs 4.5:1. Against a pure white image - the worst case there is,
   because nothing composites brighter - a black veil at alpha a leaves a backdrop of
   255(1 - a) per channel, and 4.5:1 requires that to be at most #767676:

       (1.05) / (L + 0.05) >= 4.5   ->   L <= 0.18333   ->   v <= 118.7   ->   a >= 0.5347

   0.62 is the value used, which is 0.085 of headroom over the requirement and lands the worst
   backdrop at #616161 rather than #767676.

   WHY IT IS ON THE CAPTION AND NOT ON THE CARD. The card's own gradient is a percentage of the
   card's height; the caption's height depends on how long a season title is. A percentage stop
   cannot track a wrapping headline, so the card gradient was strong at the very bottom and weak
   where the caption's FIRST line sits - which is exactly where it failed. Measured over a white
   image before this rule existed:

       .lfd-seasons-item-number   2.0505:1   needs 4.5
       .lfd-seasons-item-title    3.1925:1   needs 4.5
       .lfd-seasons-item-meta     passed, because it is the lowest line

   Anchoring the backing to the caption box means it covers the text whatever the text does.

   The 64px bleed upward puts the fade over the photograph instead of over the first line, so
   there is no visible edge across the type. */
.lfd-seasons-item-caption::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: -64px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.00) 0,
    rgba(0, 0, 0, 0.62) 64px
  );
}

/* lfd-home.css:1047-1062 */
.lfd-seasons-item-number {
  display: block;
  inline-size: 28px;
  margin-block-end: 12px;
  padding-block-start: 7px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.86);
  font-family: Oswald, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #fff;
}

.lfd-seasons-item-title {
  display: block;
  margin: 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: break-word;
}

.lfd-seasons-item-link {
  color: inherit;
  text-decoration: none;
}

/* One link per card, stretched over the tile - the news and gallery pattern. */
.lfd-seasons-item-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* --lfd-color-focus, NOT --lfd-color-accent. SC 1.4.11 asks 3:1 of a focus indicator and the
   signature gold is 2.9292:1 on paper - it missed by 0.07, which is not a rounding question when
   the thing being measured is whether a keyboard user can see where they are. The canonical rule
   at design-system/layout.css:368 has always used --lfd-color-focus (#8a671f, 5.1973:1); these
   three components were the ones that did not, so the theme had two focus colours and one of
   them failed. axe has no focus-indicator contrast rule, so nothing was ever going to catch it. */
.lfd-seasons-card:focus-within {
  outline: 2px solid var(--lfd-color-focus, #8a671f);
  outline-offset: 2px;
}

.lfd-seasons-item-link:focus-visible {
  outline: none;
}

.lfd-seasons-item-meta {
  margin: 8px 0 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */
@media (max-width: 1180px) {

  .lfd-seasons {
    --lfd-seasons-gutter: 28px;
  }

  .lfd-seasons-lead {
    padding-block: 68px 78px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 30px;
  }

  .lfd-seasons-archive {
    padding-block: 64px 74px;
  }

  .lfd-seasons-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---------------------------------------------------------
   Mobile - the editorial stack
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .lfd-seasons {
    --lfd-seasons-gutter: 16px;
  }

  .lfd-seasons-lead {
    padding-block: 50px 56px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* No order override: the panel is already first in the DOM, because the words
     are what the visitor came for and a full-width poster above them pushes
     them off the screen. */
  .lfd-seasons-lead-media {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
  }

  .lfd-seasons-lead-panel {
    padding-block-start: 26px;
  }

  .lfd-seasons-numeral {
    font-size: 118px;
  }

  .lfd-seasons-title {
    /* Fluid rather than fixed, because on a phone the panel IS the viewport: there is no
       wider column for min-content to grow into, so the type has to give instead. 10.3vw
       holds 40px from 389px up - every phone from an iPhone 12 mini onwards - and eases to
       33px at 320px, which is where a thirteen-character word stops fitting. */
    font-size: clamp(32px, 10.3vw, 40px);
    line-height: 0.88;
    max-inline-size: none;
    padding-block-end: 22px;
  }

  .lfd-seasons-strap {
    font-size: 19px;
    max-inline-size: none;
  }

  .lfd-seasons-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .lfd-seasons-archive {
    padding-block: 48px 56px;
  }

  .lfd-seasons-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .lfd-seasons-card {
    min-block-size: 260px;
  }

  .lfd-seasons-item-caption {
    padding: 0 14px 16px;
  }

  .lfd-seasons-action--primary {
    inline-size: 100%;
  }
}

/* Two across is the floor: one season per row reads as a list of pages, not an
   archive, and below 400px two 10px-gapped cards still hold their captions.

   Holding them means giving the caption its measure back. At 320px each card is
   139px wide, and 14px of side padding plus 0.07em of tracking leaves 111px for
   the name - measured, not estimated - which is two pixels short of the word
   INTERNATIONAL and so breaks it in half with no hyphen. Trimming the padding to
   10px and the tracking to 0.05em gives the same word 119px to sit in with five
   to spare. Tracking is a proportion of the size everywhere else in this system;
   easing it at the smallest size is what the rest of the system already does. */
@media (max-width: 380px) {

  .lfd-seasons-item-title {
    font-size: 13px;
    letter-spacing: 0.05em;
  }

  .lfd-seasons-item-caption {
    padding: 0 10px 14px;
  }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .lfd-seasons-item-media img,
  .lfd-seasons-action {
    transition: none;
  }

  .lfd-seasons-card:hover .lfd-seasons-item-media img,
  .lfd-seasons-card:focus-within .lfd-seasons-item-media img {
    transform: none;
  }

  .lfd-seasons-action:hover,
  .lfd-seasons-action:focus-visible {
    transform: none;
  }
}