/* =====================================================================================================
   Editorial: the parts Alight does not have. The cover's text lockup, the 4-up meta, the wide picture
   stacks (cover, spreads, brochure) and the two-column reflection. Everything else is case-study.css.
   ===================================================================================================== */
/* this case study's own colours, from its Paper board (his ask, 16 Oct: "just use the color in the paper design"):
   no frame on the pictures, white words on the ink button */
.pill { color: #FFFFFF; }


/* ---------- Cover: the title is live text over the picture (Paper: "Lockup"), not part of the file ---------- */
.ed-cover { position: relative; }
/* the frame is the board's 1440 (or the window, if narrower): the lockup scales with it, so the title keeps its clearance from the fur */
.ed-lockup { position: absolute; inset: 0; max-width: 1440px; margin: 0 auto; pointer-events: none; container-type: inline-size; }
.ed-lockup > div { position: absolute; left: max(20px, 5.5556cqi); top: max(24px, 4.1667cqi); display: flex; flex-direction: column; gap: max(12px, 1.25cqi); color: #EDE6DA; }
.ed-lockup .h1 { font-size: max(30px, 3.4722cqi); line-height: max(36px, 3.8889cqi); }
.ed-lockup .lab { color: #EDE6DA; }

/* ---------- 01 · Overview: four meta columns, equal, 40 apart ---------- */
.cs-meta.ed-meta4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; }
@container col (max-width: 760px) { .cs-meta.ed-meta4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@container col (max-width: 480px) { .cs-meta.ed-meta4 { grid-template-columns: 1fr; } }   /* one column: no line wraps to a lone word */

/* ---------- Heads: ledes a little wider than the shared 760, as on the board ---------- */
.ed-w914 { max-width: 914px; }
.ed-w960 { max-width: 960px; }

/* ---------- 02 to 04 · Wide pictures: 146 px wider than the column, centred (Paper: "Figures") ---------- */
.ed-wide { --bo: 73px; display: flex; flex-direction: column; gap: 16px; margin-inline: calc(var(--bo) * -1); }
.ed-wide .ed-fig { display: block; border: 1px solid transparent; border-radius: 2px; overflow: hidden; background: #fff; }
.ed-wide .ed-fig img { display: block; width: 100%; height: auto; }   /* the ratio comes from each img's width and height */
.ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1199px) { .ed-wide { --bo: 40px; } }
@media (max-width: 900px) { .ed-wide { --bo: 0px; } }
@media (max-width: 640px) { .ed-pair { grid-template-columns: 1fr; } }

/* ---------- 05 · Reflection: two columns, 490 each, 40 apart, no box ---------- */
.ed-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
.ed-two > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ed-two .txt { max-width: none; }
@media (max-width: 720px) { .ed-two { grid-template-columns: 1fr; row-gap: 28px; } }
@media (max-width: 640px) { .ed-lockup > div { left: 20px; top: 24px; gap: 12px; text-shadow: 0 1px 14px rgba(0,0,0,.55); } .ed-lockup .h1 { font-size: var(--step-3); line-height: 46px; }
  .ed-cover > img { object-position: 61.1% 50%; } }   /* the head back where it was before the black was added: 170 px of picture on a phone is 65 px; the title sits on the fur on a phone */
#cs-title { text-wrap: balance; }

/* ---------- Phone (17 Oct): follows the Paper board "Editorial · phone 390" ---------- */
@media (max-width: 640px) {
  .cs-ph .ed-lockup { display: none; }                        /* no title on the phone cover (his call) */
  .cs-ph .cs-cover.wide.ed-cover > picture > img { width: 100%; height: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }   /* 390 square */

  /* the section bar's flower, 119 x 48 as the board sets it */
  .cs-bar-ptr.strawflower { left: -58px; top: 1px; width: 119px; height: 48px; }
  .cs-bar-list .cs-bar-ptr.strawflower { top: 8px; margin-top: 2px; }   /* case-study.js sets top for a 52 px flower; this one is 48 */

  /* 01: label rows, no line under the last (the next section's line closes it) */
  .cs-ph .cs-meta.ed-meta4 { display: flex; flex-direction: column; gap: 0; border-bottom: 0; }
  .cs-ph .cs-meta.ed-meta4 > div:last-child { border-bottom: 0; }
  .cs-ph .cs-close { margin-top: 0; }                         /* 05 ends 56 above the closing line on this board */

  /* 02 to 04: the pictures keep to the 350 column, a fine line round each, as the board */
  .cs-ph .ed-wide { margin-inline: 0; }
  .cs-ph .ed-wide .ed-fig { border-color: var(--line); }
  .cs-ph .ed-fig img { height: auto; }
  .cs-ph .ed-fig.r54 img { aspect-ratio: 1044 / 834; }
  .cs-ph .ed-fig.r43 img { aspect-ratio: 4 / 3; }
  .cs-ph .ed-fig.r32 img { aspect-ratio: 3 / 2; }
  .cs-ph .ed-fig.rfold img { aspect-ratio: 1044 / 996; }
  .cs-ph .ed-fig.ropen img { aspect-ratio: 1044 / 807; }
}