/* =========================================================
   LFD latest-news block - the APPROVED design

   Every value is read off lfd-home.css:1870-2451 and carries its line. That
   block needs `!important` on essentially every declaration because it is
   overriding Elementor and Manon's Blog List; this component owns its markup,
   so it uses none.

   Two structural differences, both because the markup is now ours:
     - the watermark is a real (aria-hidden) element, not a ::before whose
       `content` swaps at 767px, so it can be translated and configured;
     - the card's link is one anchor stretched over the tile, not two anchors
       to the same URL.
   Neither changes a pixel.
   ========================================================= */

/* lfd-home.css:1876-1886. The 100vw break-out is dropped - the shell section is
   already full width - and the 42/28/16 side padding is the canonical gutter,
   so only the vertical rhythm and the hairlines belong here. */
.lfd-home-news-feature {
  --lfd-news-gap: 14px;
  --lfd-news-height: clamp(520px, 39vw, 680px);

  position: relative;
  padding-block: 70px 86px;
  background: #fff;
  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-news-feature * {
  box-sizing: border-box;
}

/* lfd-home.css:1903-1918 - the pale editorial watermark. */
.lfd-news-watermark {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 22px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(88px, 10vw, 182px);
  line-height: 0.8;
  font-weight: 400;
  letter-spacing: -0.08em;
  color: rgba(0, 0, 0, 0.035);
  white-space: nowrap;
}

/* lfd-home.css:2229-2235 swaps the word at the phone breakpoint. */
.lfd-news-watermark--narrow {
  display: none;
}

/* lfd-home.css:1920-1923 - everything else rides above the watermark. */
.lfd-news-heading,
.lfd-news-cta,
.lfd-news-grid {
  position: relative;
  z-index: 2;
}

/* lfd-home.css:1929-1936 */
.lfd-news-heading {
  inline-size: min(900px, 100%);
  margin: 0 auto 28px;
  text-align: center;
  z-index: 3;
}

/* lfd-home.css:1952-1965, resized by the Global Typography Harmoniser at :2488-2494.
   That block is the LAST in the file and repeats the same selector, so it wins:
   clamp(34px, 3vw, 54px) is overridden to clamp(40px, 3.4vw, 64px). */
.lfd-news-title {
  margin: 0 0 14px;
  font-family: Oswald, Arial, sans-serif;
  font-size: clamp(40px, 3.4vw, 64px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: #000;
}

/* lfd-home.css:1967-1974, resized by the harmoniser at :2462-2472 - the same
   `.lfd-news-feature-heading p` selector, later, so 15px/1.55 loses to 17px/1.62. */
.lfd-news-intro {
  max-inline-size: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.62;
  color: rgba(0, 0, 0, 0.72);
}

/* lfd-home.css:1980-1991 - pinned to the top-right of the band. 78px from the
   top is 8px below the content edge, because the band's padding-top is 70px.
   The inline offset is the gutter, so it stays on the page's alignment edge. */
.lfd-news-cta {
  position: absolute;
  inset-inline-end: var(--lfd-home-gutter, 42px);
  inset-block-start: 78px;
  z-index: 5;
  margin: 0;
  padding: 0;
}

/* lfd-home.css:2006-2023 */
.lfd-news-cta-link {
  display: inline-flex;
  align-items: center;
  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;
}

/* lfd-home.css:2025-2031. :focus-visible added, because the approved rule is
   hover-only and a keyboard user got no equivalent feedback. */
.lfd-news-cta-link:hover,
.lfd-news-cta-link:focus-visible {
  opacity: 0.58;
  transform: translateX(4px);
}

/* lfd-home.css:2056-2063 - three up, two rows. */
.lfd-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lfd-news-gap);
  inline-size: 100%;
  margin: 0;
  padding: 0;
}

/* lfd-home.css:2065-2071 */
.lfd-news-card {
  position: relative;
  block-size: var(--lfd-news-height);
  overflow: hidden;
  background: #111;
  isolation: isolate;
}

/* lfd-home.css:2073-2081 */
.lfd-news-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* lfd-home.css:2083-2091 */
.lfd-news-media img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.04) saturate(0.98) brightness(0.96);
  transition: transform 0.75s ease, filter 0.75s ease;
}

/* lfd-home.css:2093-2096. :focus-within added so the same response reaches a
   keyboard user, which the approved hover-only rule did not. */
.lfd-news-card:hover .lfd-news-media img,
.lfd-news-card:focus-within .lfd-news-media img {
  transform: scale(1.045);
  filter: contrast(1.08) saturate(1.04) brightness(1);
}

/* lfd-home.css:2099-2112 - the dark editorial gradient. */
.lfd-news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.06) 42%,
    rgba(0, 0, 0, 0.38) 70%,
    rgba(0, 0, 0, 0.86) 100%
  );
}

/* lfd-home.css:2115-2122 - the inner hairline frame. */
.lfd-news-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* lfd-home.css:2124-2134 */
.lfd-news-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 5;
  padding: 0 26px 28px;
  color: #fff;
}

/* lfd-home.css:2136-2148, with size, leading and tracking from the harmoniser
   at :2475-2484 - same selector, later, so 10px/1/0.13em becomes 12px/1.15/0.12em.
   Everything else in the earlier rule survives, because the harmoniser does not
   redeclare it. */
.lfd-news-index {
  display: block;
  inline-size: 32px;
  padding-block-start: 8px;
  margin-block-end: 16px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.86);
  font-family: Oswald, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
}

/* lfd-home.css:2150-2160, likewise resized by the harmoniser at :2475-2484. */
.lfd-news-date {
  display: block;
  margin-block-end: 12px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* lfd-home.css:2162-2176. A heading element now, per N1 - so it needs its own
   margin reset, which a <span> did not. */
.lfd-news-headline {
  display: block;
  margin: 0;
  inline-size: 100%;
  max-inline-size: 96%;
  font-family: Oswald, Arial, sans-serif;
  font-size: clamp(26px, 1.95vw, 38px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  color: #fff;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* One anchor, stretched over the whole tile. The approved build used two
   anchors to the same URL - one around the image, one around the text - which
   announces every story twice and doubles the tab stops. */
.lfd-news-link {
  color: inherit;
  text-decoration: none;
}

.lfd-news-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* The stretched anchor has no box of its own, so the focus ring has to be drawn
   on the card. Without this a keyboard user sees nothing at all. */
/* --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-news-card:focus-within {
  outline: 2px solid var(--lfd-color-focus, #8a671f);
  outline-offset: 2px;
}

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

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

  .lfd-home-news-feature {
    --lfd-news-gap: 12px;
    --lfd-news-height: 560px;

    padding-block: 68px 78px;
  }

  .lfd-news-cta {
    inset-block-start: 74px;
  }

  .lfd-news-headline {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------
   Mobile - lfd-home.css:2219-2341

   The grid becomes a horizontal snap-scroller and the block becomes a flex
   column so the CTA can sit between the heading and the cards. The approved
   build achieves that second part with `order` too (lfd-home.css:2238, 2268,
   2289); what it ALSO does is inject an unstyled duplicate link from
   JavaScript, which this implementation simply does not need.
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .lfd-home-news-feature {
    padding-block: 46px 58px;
    display: flex;
    flex-direction: column;
  }

  .lfd-news-watermark--wide {
    display: none;
  }

  .lfd-news-watermark--narrow {
    display: block;
    inset-block-start: 26px;
    font-size: 88px;
  }

  .lfd-news-heading {
    order: 1;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0 auto 14px;
  }

  /* :2240-2246 sets 34px; the harmoniser's mobile block at :2541-2547 repeats the
     selector later with 38px, so 38px wins. */
  .lfd-news-title {
    font-size: 38px;
    line-height: 0.9;
    margin-block-end: 12px;
  }

  /* :2248-2257 sets 14px/1.5; :2529-2539 later sets 16px/1.6. The 300px measure
     is not redeclared, so it survives. */
  .lfd-news-intro {
    max-inline-size: 300px;
    font-size: 16px;
    line-height: 1.6;
  }

  .lfd-news-cta {
    order: 2;
    position: relative;
    inset-block-start: auto;
    inset-inline-end: auto;
    display: flex;
    justify-content: center;
    inline-size: 100%;
    margin: 0 auto 24px;
  }

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

  /* lfd-home.css:2289-2296 pulls the scroller out to the full viewport so the
     cards run under the gutter; the negative inline margin is the shell's
     gutter rather than a 100vw calc, which cannot overshoot by a scrollbar. */
  .lfd-news-grid {
    order: 3;
    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-news-grid::-webkit-scrollbar {
    display: none;
  }

  /* lfd-home.css:2313-2321. calc(100vw - 48px) is the approved card width -
     narrower than the viewport by exactly the gutter each side plus 16px, so
     the edge of the next card stays visible and the rail reads as scrollable. */
  .lfd-news-card {
    flex: 0 0 calc(100vw - 48px);
    inline-size: calc(100vw - 48px);
    block-size: 500px;
    margin-inline-end: 12px;
    scroll-snap-align: start;
  }

  .lfd-news-body {
    padding: 0 20px 24px;
  }

  .lfd-news-index {
    margin-block-end: 14px;
  }

  /* :2333-2338 sets 24px; :2549-2552 later sets 26px/0.96. The -0.04em tracking
     is not redeclared there, so it survives. */
  .lfd-news-headline {
    font-size: 26px;
    line-height: 0.96;
    letter-spacing: -0.04em;
    max-inline-size: 100%;
  }
}

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

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

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

  .lfd-news-grid {
    scroll-behavior: auto;
  }
}