/* Strategy projects: MJ visual system pass (Figma "MJ / Visual system", boards 08-10).
   Loaded last on every strategy project page. One ink, one paper, one type scale, one
   media radius, and every block on the 12 columns. Brand colour stays inside the artwork. */

/* ---- 01 / Colour: the shell is ink and paper only ---- */
.strategy-editorial .se-main{--gm:var(--ink)}
.strategy-editorial .se-main .bp-passport{--gm:#c4121f} /* the passport is artwork, so it keeps its print red */

/* ---- 02 / Type roles ----
   Display h1 and section h2 keep the expressive sizes. Everything else uses four roles:
   card title 24/1.15, body 16/1.6, caption and link 14/1.5, label 12 uppercase. */
.strategy-editorial .se-main :is(.gm-cols,.gm-steps,.gm-tables,.gm-pair,.bw-tiers,.bp-alts) h3{font-size:24px!important;line-height:1.15!important;letter-spacing:-.03em}
.strategy-editorial .se-main :is(.gm-cols,.gm-steps,.gm-tables,.gm-pair,.bw-tiers) p:not(.gm-label):not(.bw-brands),
.strategy-editorial .se-main .gm-table .gm-lead,
.strategy-editorial .se-main :is(.se-brief,.se-section-heading,.se-visual) p:not(.se-kicker){font-size:16px;line-height:1.6}
.strategy-editorial .se-main :is(.gm-label,.gm-tag,.bw-tags li,.gm-shift h3,.gm-notes span){font-size:12px!important;letter-spacing:.1em;line-height:1.4}
.strategy-editorial .se-main :is(.gm-cols,.gm-steps,.gm-pair) .hand{font-size:20px}
.strategy-editorial .se-main :is(.gm-slide-link,.se-deck-link){font-size:14px}
.strategy-editorial .se-main .gm-ask{font-size:18px;line-height:1.4}
.strategy-editorial .se-main .bp-ref-note{font-size:14px;line-height:1.5}

/* ---- 03 / Media: one 16px radius ---- */
.strategy-editorial .se-main :is(.se-cover img,.se-cover video,.se-wide img,.se-visual figure img,.gm-pair img,.gm-table img,.gm-media img,.gm-cols .gm-thumb,.bp-insight-media img,.bp-duo img,.bp-finale img){border-radius:var(--radius-media,16px)}
.strategy-editorial .se-cover video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100svh - 150px);object-fit:cover;background:#000}

/* ---- 04 / Story sections: copy holds while the images scroll ---- */
.strategy-editorial .se-visual{align-items:start}
.strategy-editorial .se-visual>figure{margin:0}
.strategy-editorial .se-visual>figure+figure{margin-top:32px}
@media(min-width:1101px){.strategy-editorial .se-visual>.se-section-heading{position:sticky;top:96px}}

/* ---- 05 / 12 columns (desktop): every block starts and ends on a column ---- */
@media(min-width:1101px){
  /* five-step journeys are not a 12-column set on their own: lay them out 3 + 2 on four-column steps */
  .se-main .gm-steps:has(>:nth-child(5):last-child){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--gutter,24px)!important;row-gap:44px!important}
  .se-main .gm-steps:has(>:nth-child(5):last-child)>*{grid-column:span 4}
  /* reading measure in the brief: columns 4-8 (about 70 characters) */
  .strategy-editorial .se-main .se-brief>div>p{max-width:calc((100% - 8*var(--gutter,24px))/9*5 + 4*var(--gutter,24px))!important}
  /* section notes fill columns 7-12 instead of stopping at the sitewide 660px cap */
  .strategy-editorial .se-main .se-section-heading>p:last-child{max-width:none!important}
  .strategy-editorial .se-main .se-visual>.se-section-heading>p{max-width:none!important}
  /* pull quotes on columns 1-9, closing headline and notes on whole columns */
  .strategy-editorial .se-main .gm-rule blockquote{max-width:calc((100% - 11*var(--gutter,24px))/12*9 + 8*var(--gutter,24px))!important}
  .strategy-editorial .se-main .se-close>h2{max-width:calc((100% - 11*var(--gutter,24px))/12*9 + 8*var(--gutter,24px))!important}
  .strategy-editorial .se-main .bp-ref-note{max-width:none!important}
  /* lead paragraph beside the idea heading fills columns 7-12; closing line fills 1-6 */
  .strategy-editorial .se-main .se-premise-copy>p{max-width:none!important}
  .strategy-editorial .se-main .se-close-grid>p{max-width:none!important}
  /* Bourbon finale: the photo pair splits its six-column card on the gutter */
  .strategy-editorial .se-main .bp-duo{gap:var(--gutter,24px)}
}
/* small source media are shown at their own size, never stretched */
.strategy-editorial .se-main .op-gif img{width:auto;max-width:100%;margin:0}
@media(min-width:1101px){.strategy-editorial .se-main .op-gif img{width:calc((100% - 7*var(--gutter,24px))/8*4 + 3*var(--gutter,24px))}} /* four of its eight columns: on the grid and under its 480px source */

/* ---- 06 / Notes and phone leads ---- */
/* the small honesty notes under a brief (concept renders, AI-assisted imagery) are captions: 14px */
.strategy-editorial .se-main .se-brief p.se-note{font-size:14px;line-height:1.5}
/* the lead beside the idea heading never drops below body size on phones */
@media(max-width:760px){.strategy-editorial .se-main .se-premise-copy>p{font-size:16px!important;line-height:1.6!important}}
/* breathing room after a wide image or a row of cards, on every strategy page */
.strategy-editorial .se-main :is(.se-wide+.gm-pair,.gm-tables+.gm-rule){margin-top:64px}
@media(max-width:600px){.strategy-editorial .se-main :is(.se-wide+.gm-pair,.gm-tables+.gm-rule){margin-top:44px}}
/* View slide links in a pair sit on one line, whatever the copy length */
.strategy-editorial .gm-pair article{display:flex;flex-direction:column}
.strategy-editorial .gm-pair .gm-slide-link{margin-top:auto;align-self:flex-start}