/* =========================================================
   LFD homepage gallery - the APPROVED design

   Two passes in lfd-home.css style this section. The panel's values come from
   the SECOND (:1229-1487, "LEFT PANEL FINAL"), which is later and therefore
   wins; the feed's come from the first (:872-1228), which the second never
   touches. Every value carries its line, and where the two disagree the
   overridden one is named.

   The approved panel rules key on :nth-child(1..5), because its children were
   Atomic Elements widgets with no classes of their own - which made inserting a
   widget renumber every rule in the block. With the markup owned they key on
   names, and child order stops being load-bearing.

   NO !important. The approved block needs it on every declaration to beat the
   page builder; this component owns its markup.
   ========================================================= */

/* lfd-home.css:609-625. The 100vw break-out is dropped - the shell section is
   already full width - and the 34/28/16 side padding is the canonical gutter,
   so only vertical rhythm, the grid, the background and the hairlines are here.
   (The approved side padding is 34px at desktop where the page contract is
   42px; that is part of the gutter unification, D4.) */
.lfd-home-gallery-feature {
  position: relative;
  z-index: 2;
  padding-block: 76px 86px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 3fr);
  gap: 52px;
  align-items: center;
  overflow: hidden;
  border-block-start: 1px solid rgba(0, 0, 0, 0.08);
  border-block-end: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.lfd-home-gallery-feature * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Left editorial panel - lfd-home.css:1240-1251
   --------------------------------------------------------- */
.lfd-gallery-panel {
  position: relative;
  min-block-size: 470px;
  padding: 42px 30px 42px 58px;
  border-inline-end: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
  background: transparent;
}

/* Everything in the panel rides above the numeral. lfd-home.css:1265-1266 */
.lfd-gallery-panel > * {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
}

/* lfd-home.css:1283-1308 - the giant pale season numeral. At 5.5% black it is
   1.13:1 on paper against the 3:1 AA asks of text this size, and no passing
   value is still a watermark, so this element is aria-hidden and the number is
   carried as real text inside .lfd-gallery-season-label. See gallery.php for
   why that is a split of jobs and not a suppressed rule. Colour unchanged. */
.lfd-gallery-season-number {
  position: absolute;
  inset-inline-start: -4px;
  inset-block-start: 28px;
  z-index: 0;
  pointer-events: none;
  inline-size: auto;
  max-inline-size: 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);
  text-transform: none;
  white-space: nowrap;
}

/* lfd-home.css:1310-1324. The bottom margin is ZERO, not the 14px at :1309:
   the shared typography rule at :1312-1324 repeats the same
   `> *:nth-child(2)` selector and declares `margin: 0`, and being later it
   wins. The 14px never renders. See docs/home-sections.md - four values in
   this block are clobbered by the block's own later rules, and this is one. */
.lfd-gallery-season-label {
  margin: 0;
  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. The 42px rule under the title is a background-image
   rather than a pseudo-element, because the approved pass had to disable every
   ::before and ::after in the panel (:1253-1262) to clear earlier attempts. */
.lfd-gallery-title {
  max-inline-size: 270px;
  /* Zero, not the 20px at :1330: :1338-1350 repeats the selector later with
     `margin: 0`. The 24px of bottom padding is what separates the title from
     the description, and it is also what places the 42px rule, which is drawn
     at `background-position: left bottom`. */
  margin: 0;
  padding: 0 0 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;
}

/* lfd-home.css:1352-1367 */
.lfd-gallery-text {
  max-inline-size: 300px;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.72);
}

/* lfd-home.css:1369-1420 */
.lfd-gallery-link-wrap {
  margin-block-start: 34px;
}

.lfd-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  inline-size: fit-content;
  color: #000;
  border-block-end: 1px solid #000;
  border-radius: 0;
  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;
  white-space: nowrap;
  transition: opacity var(--lfd-duration-base, 0.25s) ease,
              transform var(--lfd-duration-base, 0.25s) ease;
}

/* :focus-visible added - the approved rule is hover-only. */
.lfd-gallery-link:hover,
.lfd-gallery-link:focus-visible {
  opacity: 0.58;
  transform: translateX(4px);
}

/* ---------------------------------------------------------
   Right gallery feed - lfd-home.css:915-1105
   --------------------------------------------------------- */
.lfd-gallery-list {
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

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

/* lfd-home.css:963-970 */
.lfd-gallery-card {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background: #111;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055);
}

/* lfd-home.css:972-980 */
.lfd-gallery-media {
  position: relative;
  inline-size: 100%;
  block-size: clamp(420px, 34vw, 500px);
  overflow: hidden;
  background: #111;
}

/* lfd-home.css:982-989 - the inner hairline frame. */
.lfd-gallery-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* lfd-home.css:991-1004 - the bottom-weighted gradient. */
.lfd-gallery-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.00) 46%,
    rgba(0, 0, 0, 0.18) 70%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

/* lfd-home.css:1006-1013 */
.lfd-gallery-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-home.css:1015-1021. :focus-within added. */
.lfd-gallery-card:hover .lfd-gallery-media img,
.lfd-gallery-card:focus-within .lfd-gallery-media img {
  transform: scale(1.045);
  filter: contrast(1.1) saturate(1.04) brightness(1.03);
}

/* lfd-home.css:1024-1037 */
.lfd-gallery-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 4;
  padding: 0 16px 18px;
  text-align: start;
}

/* lfd-home.css:1047-1062. In the approved build the numeral is `content` on a
   ::before, with a separate rule per position - five rules to count to five.
   Here it is a real element the renderer numbers, which is also why it can be
   aria-hidden: generated content cannot be. */
.lfd-gallery-index {
  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-home.css:1085-1097. A heading element now, so it needs its own reset. */
.lfd-gallery-name {
  display: block;
  margin: 0;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: #fff;
}

.lfd-gallery-card-link {
  color: inherit;
  text-decoration: none;
}

/* One link per tile, stretched over it. The approved markup has TWO anchors to
   the same URL - one inside .edgtf-pli-image and one inside .edgtf-pli-text
   (portfolio-list/templates/parts/image.php:18 and
   layout-collections/gallery-overlay.php:22) - plus a third on the title. */
.lfd-gallery-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* --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-gallery-card:focus-within {
  outline: 2px solid var(--lfd-color-focus, #8a671f);
  outline-offset: 2px;
}

.lfd-gallery-card-link:focus-visible {
  outline: none;
}

/* The optional second caption line. See gallery.php: the approved stylesheet
   hides the element that would carry it, so nothing renders unless a caller
   supplies one. */
.lfd-gallery-card-season {
  display: block;
  margin-block-start: 6px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------
   Tablet - lfd-home.css:1107-1129
   --------------------------------------------------------- */
@media (max-width: 1180px) {

  .lfd-home-gallery-feature {
    padding-block: 68px 78px;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
  }

  /* The panel keeps its 58px padding here. lfd-home.css:1114-1116 asks for 92px
     at this width, but :1240-1243 sets the `padding` shorthand with the same
     selector later in the file, and a media query adds no specificity - so the
     92px never renders.

     The title likewise keeps the base clamp. :1128-1130 asks for 48px at (0,2,1);
     :1338-1341 sets clamp(42px, 4.1vw, 66px) at (0,3,1), which wins on
     specificity whatever the order. At 1180px the clamp resolves to 48.4px, so
     the two agree almost exactly there and diverge lower down the band. */

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

  .lfd-gallery-media {
    block-size: 420px;
  }
}

/* ---------------------------------------------------------
   Mobile

   The panel's mobile values come from the SECOND pass (:1423-1487); the first
   pass's block at :1132-1177 sets padding-left: 92px and a 122px numeral, both
   of which the later 58px and 118px override.
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .lfd-home-gallery-feature {
    padding-block: 50px 62px;
    display: block;
  }

  .lfd-gallery-panel {
    inline-size: 100%;
    min-block-size: auto;
    margin: 0 auto 28px;
    padding: 34px 0 26px 58px;
    border-inline-end: none;
    border-block-end: 1px solid rgba(0, 0, 0, 0.12);
  }

  .lfd-gallery-season-number {
    inset-inline-start: -6px;
    inset-block-start: 24px;
    font-size: 118px;
  }

  .lfd-gallery-season-label {
    font-size: 10px;
    letter-spacing: 0.24em;
  }

  .lfd-gallery-title {
    max-inline-size: 230px;
    font-size: 40px;
    line-height: 0.88;
    padding-block-end: 22px;
    margin-block-end: 18px;
  }

  .lfd-gallery-text {
    max-inline-size: 270px;
    font-size: 14px;
    line-height: 1.62;
  }

  .lfd-gallery-link-wrap {
    margin-block-start: 30px;
  }

  .lfd-gallery-link {
    font-size: 10.5px;
    letter-spacing: 0.13em;
  }

  /* lfd-home.css:1184-1215 - a horizontal snap-scroller, 82% per card. The
     negative inline margin is the shell's gutter rather than a 100vw calc,
     which cannot overshoot by a scrollbar. */
  .lfd-gallery-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--lfd-home-gutter, 16px) * -1);
    padding: 0 var(--lfd-home-gutter, 16px) 6px;
  }

  .lfd-gallery-list::-webkit-scrollbar {
    display: none;
  }

  .lfd-gallery-item {
    flex: 0 0 82%;
    inline-size: 82%;
    max-inline-size: 82%;
    margin-inline-end: 10px;
    scroll-snap-align: start;
  }

  .lfd-gallery-media {
    block-size: auto;
    aspect-ratio: 4 / 5;
  }

  .lfd-gallery-name {
    font-size: 11px;
  }
}

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

  .lfd-gallery-media img,
  .lfd-gallery-link {
    transition: none;
  }

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