/* =========================================================
   LFD "For designers" - the APPROVED design

   Every value is read off lfd-home.css:1488-1866 and carries its line.

   Two structural differences, both because the approved versions are defects
   rather than decisions - see designers.php:
     - the heading and standfirst are real elements, not ::before/::after
       `content`, so the flex `order: 1/2/3` they needed is gone;
     - the accordion header is a real <button>, so it is reachable and its state
       is announced.
   Neither changes a pixel.
   ========================================================= */

/* lfd-home.css:1493-1508. 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 vertical rhythm, background and hairlines belong here. */
.lfd-designers-feature {
  position: relative;
  padding-block: 86px 94px;
  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);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

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

/* lfd-home.css:1524-1536 */
.lfd-designers-title {
  display: block;
  text-align: center;
  margin: 0 auto 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 2.2vw, 42px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
  text-transform: none;
  color: #000;
}

/* lfd-home.css:1539-1554. The approved rule also carries a padding-left and a
   radial-gradient bullet, both of which :1862-1866 then cancels - so the
   rendered result has neither and neither is reproduced. */
.lfd-designers-intro {
  display: block;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: 0 auto 54px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.74);
}

/* lfd-home.css:1556-1570 */
.lfd-designers-row {
  inline-size: min(1180px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
}

/* lfd-home.css:1572-1599 - the column and its hairline separator. */
.lfd-designers-item {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  padding-inline: 38px;
  border-inline-start: 1px solid rgba(0, 0, 0, 0.13);
  transition: transform 0.28s ease;
}

.lfd-designers-item:first-child {
  border-inline-start: none;
  padding-inline-start: 0;
}

.lfd-designers-item:last-child {
  padding-inline-end: 0;
}

/* lfd-home.css:1597-1599. :focus-within added, because the approved rule is
   hover-only and gave a keyboard user no equivalent. */
.lfd-designers-item:hover,
.lfd-designers-item:focus-within {
  transform: translateY(-2px);
}

/* The title is a <button> on a phone and a plain heading above it, so every
   button affordance is stripped here and reinstated at the breakpoint. */
.lfd-designers-item-title {
  margin: 0;
}

.lfd-designers-toggle {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: default;
}

/* lfd-home.css:1613-1628 - the numeral. */
.lfd-designers-number {
  display: block;
  margin: 0 0 22px;
  font-family: Oswald, Arial, sans-serif;
  font-size: clamp(48px, 4.2vw, 74px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.065em;
  color: #000;
}

/* lfd-home.css:1630-1644 */
.lfd-designers-name {
  display: block;
  margin: 0 0 22px;
  max-inline-size: 175px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #000;
}

/* lfd-home.css:1646-1657 - the 34px rule under the title. */
.lfd-designers-name::after {
  content: "";
  display: block;
  inline-size: 34px;
  block-size: 1px;
  background: #000;
  margin: 20px 0 0;
}

/* lfd-home.css:1659-1669 */
.lfd-designers-panel p {
  margin: 0;
  max-inline-size: 235px;
  font-size: 14px;
  line-height: 1.62;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.72);
}

/* C v2, prototype/c2/css/c2.css:217-223. Use the season's readable ink on paper. */
.lfd-designers-go {
  display: inline-block;
  margin-top: 12px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lfd-season-accent-text, var(--lfd-color-accent-text));
  text-decoration: none;
}

.lfd-designers-go:hover {
  color: var(--lfd-color-ink);
}

/* Above the phone breakpoint every panel is open, always. The `hidden`
   attribute the markup ships with is for the phone layout and for the
   no-JavaScript case, so it is overridden here rather than removed by script -
   which is what makes the desktop layout correct before any JS runs. */
.lfd-designers-panel[hidden] {
  display: block;
}

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

  .lfd-designers-feature {
    padding-block: 74px 82px;
  }

  .lfd-designers-row {
    inline-size: 100%;
  }

  .lfd-designers-item {
    padding-inline: 24px;
  }

  .lfd-designers-number {
    font-size: 54px;
  }

  .lfd-designers-name {
    font-size: 14px;
  }

  .lfd-designers-panel p {
    font-size: 13px;
  }
}

/* ---------------------------------------------------------
   Mobile accordion - lfd-home.css:1722-1861
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .lfd-designers-feature {
    padding-block: 54px 62px;
  }

  .lfd-designers-title {
    font-size: 26px;
    margin: 0 auto 14px;
  }

  .lfd-designers-intro {
    font-size: 13px;
    margin: 0 auto 34px;
  }

  /* lfd-home.css:1754-1772 - the row becomes a stack of hairline-separated
     accordion rows. */
  .lfd-designers-row {
    display: block;
    inline-size: 100%;
  }

  .lfd-designers-item {
    inline-size: 100%;
    padding-inline: 0;
    border-inline-start: none;
    border-block-start: 1px solid rgba(0, 0, 0, 0.12);
    min-block-size: 64px;
    transform: none;
  }

  .lfd-designers-item:hover,
  .lfd-designers-item:focus-within {
    transform: none;
  }

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

  /* lfd-home.css:1793-1800 - a 48px numeral column and a fluid content column,
     16px apart, with 38px kept clear on the right for the +/- glyph. */
  .lfd-designers-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px 38px 18px 0;
    cursor: pointer;
  }

  /* lfd-home.css:1813-1816 - the numeral changes FACE here, from Oswald 700 to
     Georgia 400. That is in the approved design, not a slip. */
  .lfd-designers-number {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.04em;
  }

  /* lfd-home.css:1821-1833 */
  .lfd-designers-name {
    margin: 0;
    max-inline-size: none;
    font-size: 12px;
    line-height: 1.12;
    letter-spacing: 0.08em;
  }

  /* lfd-home.css:1835-1841 - the 34px rule does not exist below 768px. */
  .lfd-designers-name::after {
    display: none;
    content: none;
  }

  /* lfd-home.css:1775-1790 - the disclosure glyph, "+" closed and U+2212 open.
     It hangs off the button rather than the row, so it moves with the control. */
  .lfd-designers-toggle::after {
    content: "+";
    position: absolute;
    inset-inline-end: 2px;
    inset-block-start: 22px;
    font-family: Oswald, Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    color: #000;
  }

  .lfd-designers-item.is-open .lfd-designers-toggle::after {
    content: "\2212";
  }

  /* lfd-home.css:1846-1847 places the body text at grid-column 2 / grid-row 2,
     so it is indented under the title rather than running the full row width.
     (In the approved build those two declarations are inert, because the
     paragraph is not a direct child of the grid - it sits inside
     .edgtf-nwt-text-holder, which IS in column 2. Declared intent and rendered
     result agree; only the mechanism differs.) Here the panel is a sibling of
     the header, so the indent is the column plus the gutter: 48 + 16. */
  .lfd-designers-panel {
    margin-inline-start: calc(48px + 16px);
    padding-block-end: 18px;
  }

  .lfd-designers-panel[hidden] {
    display: none;
  }

  .lfd-designers-panel p {
    margin: 14px 0 0;
    max-inline-size: none;
    font-size: 13px;
    line-height: 1.55;
  }
}

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

  .lfd-designers-item {
    transition: none;
  }

  .lfd-designers-item:hover,
  .lfd-designers-item:focus-within {
    transform: none;
  }
}