/* ============================================================
   layout.css — the project pages' layout system
   Every project page is on the case-story spacing (css/case-study.css)
   and three column layouts, each filling the 980px content width on one
   32px gap — so the 2-column line falls on the 4-column grid's third
   column, and every block shares the same vertical lines:

     1 column   hero (project name, title, brief), "How might we"
     2 columns  text sections (label and title | paragraphs), results
                figures, the highlights (steps | point), UI showcases
     4 columns  project details (Role · Team · Duration · Impact)

   shortcut: !important over the ported Webflow rules and their #w-node
   grid placements; fold into each page's stylesheet when rewritten.
   ============================================================ */

html {
  --col-gap: 32px;
  --cols-1: minmax(0, 1fr);
  --cols-2: repeat(2, minmax(0, 1fr));
  --cols-4: repeat(4, minmax(0, 1fr));
}

/* ── 1 column: the hero ─────────────────────────────────────── */
/* Project name and title, the media, and the brief under the media as
   its caption: the caption style (16px, secondary), on the media's left
   edge. */
html .section-hero { display: flex; flex-direction: column; }
html .section-hero > .grid_hero { box-sizing: border-box; width: min(980px, 100%) !important; }
html .section-hero > .div_hero_wrapper--ui { margin-top: 48px !important; }

html .paragraph_proj-brief {
  box-sizing: border-box;
  width: min(980px, 100%) !important;
  max-width: none !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  font: var(--body) !important;
  color: var(--ink-2) !important;
  text-align: left !important;
}
html .section-hero .paragraph_proj-brief a { font: inherit !important; }

/* 1 column: statements fill the width too. */
html .heading_how-might-we { max-width: none !important; width: 100%; }

/* ── 2 columns: text sections ───────────────────────────────── */
html .grid_txt:not(._1-col):not(.subtitleonly) {
  grid-template-columns: var(--cols-2) !important;
  column-gap: var(--col-gap) !important;
  row-gap: 8px !important;
  width: 100%;
}
@media screen and (min-width: 992px) {
  html .grid_txt._1-col { grid-template-columns: var(--cols-2) !important; column-gap: var(--col-gap) !important; }
}
/* The highlights' steps and point sit on the same two columns from tablet
   width (768px) up, like the other two-column text sections. */
@media screen and (min-width: 768px) {
  html .highlights { grid-template-columns: var(--cols-2) !important; column-gap: var(--col-gap) !important; }
}
/* Paragraphs fill their column (it is narrower than the measure). */
html :is(.grid_txt, .grid_txt._1-col) > :is(p, ul) { max-width: none !important; }

/* ── 2 columns: results figures ─────────────────────────────── */
html .div_impact_biz {
  display: grid !important;
  grid-template-columns: var(--cols-2);
  column-gap: var(--col-gap);
  align-items: start;
  height: auto !important;
  margin: 0 auto !important;
}
html .div_impact_biz .div-block-46 { justify-content: flex-start !important; margin: 0 !important; }
html .div_impact_biz .div-block-48 { display: flex; flex-direction: column; gap: 8px; }
html .div_impact_biz .text-block-13 { padding-left: 0 !important; }
html .div_impact_biz + .txt_caption { text-align: left !important; max-width: 980px; margin: 24px auto 0 !important; }

/* ── 4 columns: project details ─────────────────────────────── */
html .grid_proj-role {
  grid-template-columns: var(--cols-4) !important;
  grid-template-rows: auto !important;
  column-gap: var(--col-gap) !important;
  row-gap: 40px !important;
  width: 100% !important;
}
html .grid_proj-role > * { grid-area: auto !important; }
html .div_hero_subtitle { gap: 4px; }
html .div_hero_subtitle .heading_hero-p { margin: 0 !important; color: var(--ink-1, inherit) !important; }
/* A value that already marks its figures in primary keeps the rest secondary. */
html .div_hero_subtitle .heading_hero-p:has(.body-highilight) { color: var(--ink-2, inherit) !important; }
html .div_hero_subtitle :is(.paragraph_body-2, .text-block-17) { margin: 4px 0 0 !important; font: var(--body, inherit) !important; color: var(--ink-2, inherit) !important; }

/* ── Narrower screens: 4 → 2 → 1, 2 → 1 ─────────────────────── */
@media screen and (max-width: 991px) {
  html .grid_proj-role { grid-template-columns: var(--cols-2) !important; row-gap: 32px !important; }
}
@media screen and (max-width: 767px) {
  html .grid_txt:not(._1-col):not(.subtitleonly),
  html .div_impact_biz { grid-template-columns: var(--cols-1) !important; row-gap: 24px !important; }
  html .grid_txt:not(._1-col):not(.subtitleonly) { row-gap: 8px !important; }
}
@media screen and (max-width: 479px) {
  html .grid_proj-role { grid-template-columns: var(--cols-1) !important; }
}

/* ── Spacing on the ported pages ─────────────────────────────── */
/* An empty section (a slot never filled) takes no space. */
html .section:not(:has(.wrapper > *)) { display: none; }
/* Blocks inside a section, the case-story rhythm: text → the picture it
   introduces is --story-block (48px); a picture → the next text block is
   --story-sub (96px), a new point in the same section. */
.case-story .section > * { margin-bottom: 0 !important; }
.case-story .section > * + * { margin-top: var(--story-block) !important; }
.case-story .section > * + .wrapper:has(> :is(.grid_txt, .grid-6, .grid_insight_list, .grid_ujp_persona)) { margin-top: var(--story-sub) !important; }
/* case-story hides a media group with no media in it (an unfilled video
   slot). On the ported pages a group can hold a quote, a caption or a
   heading instead, so only a truly empty one stays hidden. */
.case-story .section > .wrapper > .wrapper_980w:has(*) { display: flex !important; }
.case-story .section > .wrapper > .wrapper_980w.margin-btm:has(*) { display: block !important; }

/* ── 2 columns: the other title | text grids ─────────────────── */
/* Woori Bank's "Defining Success" (.grid-6) and LG's insight list
   (.grid_insight_list) are the same block as .grid_txt — a title, then
   its text — on their own Webflow splits (.25 / .75 and .2 / .8). */
html :is(.grid-6, .grid_insight_list) {
  grid-template-columns: var(--cols-2) !important;
  column-gap: var(--col-gap) !important;
  width: 100% !important;
  max-width: 980px;
}
html :is(.grid-6, .grid_insight_list) > * { min-width: 0; }
/* A label set above the grid sits on it as it does in .grid_txt. */
html .heading_grid-txt_subtitle + :is(.grid-6, .grid_insight_list) { margin-top: 8px !important; }
@media screen and (max-width: 767px) {
  html :is(.grid-6, .grid_insight_list) { grid-template-columns: var(--cols-1) !important; row-gap: 24px !important; }
}
/* List text starts on the column line; the numbers hang in the gap. */
html .grid-6 .list-2,
html .grid-6 .list-2 > li { padding-left: 0 !important; }
/* "How might we" sits between sections, not in one, on the ported pages;
   it takes a section's own break above and below. */
.case-story .wrapper:has(> .wrapper_980w > .heading_how-might-we):not(.section > .wrapper) {
  padding-top: calc(var(--story-section) / 2) !important;
  padding-bottom: calc(var(--story-section) / 2) !important;
}
/* Vertical margins only: the 980px column keeps its auto side margins. */
.case-story .wrapper:has(> .wrapper_980w > .heading_how-might-we) > .wrapper_980w { margin: 0 auto !important; }
.case-story .heading_how-might-we { margin: 0 !important; }

/* Woori Bank's Customer Journey Map is left out of the page. */
.section--cjm { display: none !important; }

/* ── UI showcase blocks (.grid_uid, Woori Bank and LG) ───────────
   An 800px block centred in the 980px column, its label + title and
   description spread with space-around — so its text started ~90px in
   from every other block's left edge. It now fills
   the column and its text takes the 2-column layout. */
html .grid_uid { max-width: 980px !important; }
@media screen and (min-width: 768px) {
  html .div_uid_txt.two {
    display: grid !important;
    grid-template-columns: var(--cols-2);
    column-gap: var(--col-gap);
    align-items: start;
  }
  html .div_uid_txt.two > * { min-width: 0; max-width: none !important; margin: 0 !important; }
}

/* A tinted band (USDOT's grey "Inside the vehicle", .wrapper.padding-hori)
   is a surface, not a gap: case-story clears section wrappers' padding,
   but the band keeps room inside it, a sub-break above and below. */
.case-story .section > * + .wrapper.padding-hori { margin-top: var(--story-sub) !important; }
.case-story .section > .wrapper.padding-hori {
  padding-top: var(--story-sub) !important;
  padding-bottom: var(--story-sub) !important;
}
/* The band's last grid keeps no bottom margin of its own, so the room
   under its content is the band's padding alone, as it is above. */
.case-story .section > .wrapper.padding-hori > .div-block-92:not(:has(~ .div-block-92)) > .grid-8:last-child { margin-bottom: 0 !important; }

/* ── Side gutters: the hero on the same edges as every section ───
   Sections sit inside .wrapper (4rem gutters, 2rem under 992px, 1.5rem
   under 480px); the hero had none of its own between 480 and 1279px,
   so it ran wider than everything below it. */
.section-hero { padding-left: 4rem !important; padding-right: 4rem !important; }
@media screen and (max-width: 991px) {
  .section-hero { padding-left: 2rem !important; padding-right: 2rem !important; }
  /* Nexus and IRISe's text blocks fill the column like the others, rather
     than narrowing to a centred measure. */
  .grid_txt._1-col { max-width: 980px !important; }
}
@media screen and (max-width: 479px) {
  .section-hero { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* ── Captions: one gap to the image they describe ────────────────
   16px under the image, every caption on every page (it was 16 to 84px,
   from whichever margin or grid gap happened to sit in between). */
html { --cap-gap: 16px; --cap-row: 40px; }
.txt_caption { margin-bottom: 0 !important; }
:not(.w-layout-grid, .div-block-86, .div-block-88) > .txt_caption { margin-top: var(--cap-gap) !important; }
:not(.w-layout-grid, .div-block-86, .div-block-88) > :has(+ .txt_caption) { margin-bottom: 0 !important; }
.case-story .section > .wrapper > * + .txt_caption { margin-top: var(--cap-gap) !important; }
/* In a grid of images and captions, rows are --cap-row apart and a
   caption pulls up into the gap above it. */
:is(.w-layout-grid, .div-block-86, .div-block-88):has(> .txt_caption) { row-gap: var(--cap-row) !important; }
:is(.w-layout-grid, .div-block-86, .div-block-88):has(> .txt_caption) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
:is(.w-layout-grid, .div-block-86, .div-block-88) > .txt_caption { margin-top: calc(var(--cap-gap) - var(--cap-row)) !important; }
/* A caption wrapped on its own (LG's "Our role…") sits as close as a bare one. */
.case-story .section > .wrapper > * + .wrapper_980w:has(> .txt_caption:only-child) { margin-top: var(--cap-gap) !important; }
.case-story .section > .wrapper > img:has(+ .wrapper_980w > .txt_caption:only-child) { display: block; }
/* The hero brief, under phone frames as under screenshots. */
.div_hero_wrapper--ui > :has(+ .paragraph_proj-brief) { margin-bottom: 0 !important; }
.section-hero > .div_hero_wrapper--ui:has(+ .paragraph_proj-brief),
.section-hero > .div_hero_wrapper--ui:has(+ .paragraph_proj-brief) > :last-child { margin-bottom: 0 !important; }
.wrapper_980w > .txt_caption:only-child { margin-top: 0 !important; }

/* ── Overview (Nexus): summary | details, on the 2-column layout ── */
.overview {
  display: grid;
  grid-template-columns: var(--cols-2);
  column-gap: var(--col-gap);
  row-gap: 40px;
  max-width: 980px;
  margin: 0 auto;
}
.overview > * { min-width: 0; }
.overview__head .heading_grid-txt_subtitle { margin: 0 0 8px; }
/* Set as the project-highlight titles (16 / 700 / 1.6, primary ink). */
.overview__head .heading_grid-txt_summary { margin: 0; font: 700 16px/1.6 var(--tf) !important; letter-spacing: normal !important; }
/* Its details stack in the right column, one under another. */
.overview > .grid_proj-role { grid-template-columns: var(--cols-1) !important; row-gap: 32px !important; }
@media screen and (max-width: 767px) {
  .overview { grid-template-columns: var(--cols-1); }
}
.overview__head > * + * { margin-top: 16px !important; }
/* Detail values in the hero project name's grey; labels stay primary. */
.overview .div_hero_subtitle .heading_hero-p { color: var(--ink-2) !important; }
/* Detail labels in the section subtitle style (.heading_grid-txt_subtitle). */
.overview .div_hero_subtitle .heading_hero-subtitle-2 { color: var(--ink-2) !important; }
/* Impacts figures read as the rest of their line. */
.overview .div_hero_subtitle .body-highilight { color: inherit !important; font: inherit !important; }

/* Hero media → the first section's text: one sub-break, every page
   (it was 160–180px, the hero's bottom padding plus the section's top). */
.case-story .section-hero { padding-bottom: 0 !important; }
.case-story .section-hero > :last-child { margin-bottom: 0 !important; }
.case-story .section-hero + .section { padding-top: var(--story-sub) !important; }
.case-story .section-hero,
.case-story .div_hero_wrapper--ui > :last-child { margin-bottom: 0 !important; }
.overview__head a { color: inherit !important; font: inherit !important; text-decoration: underline; text-underline-offset: 3px; }
/* The details keep their own 32px gaps rather than stretching to the
   height of a longer summary beside them. */
.overview > .grid_proj-role { align-self: start; align-content: start; grid-auto-rows: auto; grid-template-rows: none !important; }

/* A wrapper inside a wrapper takes no second set of side gutters, and an
   image in it fills the 980px content column like the text around it. */
.wrapper .wrapper { padding-left: 0 !important; padding-right: 0 !important; }
.wrapper .wrapper > img.img { display: block; width: min(980px, 100%); max-width: 100%; margin-left: auto; margin-right: auto; }

/* Woori Bank's UI section titles (were centred at 32px): the left column
   of the 2-column layout at the block-title size, as "Fostering financial
   literacy…" above them. */
:is(.wrapper_1180w, .div_1180w):has(> .heading_grid-txt_summary.center) {
  display: grid !important;
  grid-template-columns: var(--cols-2);
  column-gap: var(--col-gap);
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.heading_grid-txt_summary.center {
  grid-column: 1;
  text-align: left !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
}
@media screen and (max-width: 767px) {
  :is(.wrapper_1180w, .div_1180w):has(> .heading_grid-txt_summary.center) { grid-template-columns: var(--cols-1); }
}

/* Woori Bank's blue UI band now holds the three UI sections too: the
   page's rhythm inside it, and room at its foot. */
.div_bg.blue { padding-bottom: var(--story-sub); }
.div_bg.blue > .wrapper.padding-btm { padding-bottom: 0 !important; }
.div_bg.blue > .wrapper:has(.heading_grid-txt_summary.center) { margin-top: var(--story-sub) !important; }
.div_bg.blue :is(.wrapper_1180w, .div_1180w):has(> .heading_grid-txt_summary.center) { margin-top: 0 !important; margin-bottom: 0 !important; }
.div_bg.blue :is(.wrapper_1180w, .div_1180w):has(> .heading_grid-txt_summary.center) + * { margin-top: var(--story-block) !important; }
/* The band takes the UI panels' pale tint; its intro text, white on the
   old blue, takes the page's ink. */
.div_bg.blue { background-color: transparent !important; }
.div_bg.blue .heading_grid-txt_summary.white { color: var(--ink-1) !important; }
.div_bg.blue :is(.heading_grid-txt_subtitle, .paragraph_body).white { color: var(--ink-2) !important; }
.div_bg.blue .txt_highlight { color: var(--ink-1) !important; }
/* With no fill, the band keeps no padding of its own: the sections' breaks
   space it like any other. */
.div_bg.blue { padding-bottom: 0 !important; }
.div_bg.blue > .wrapper.padding-top { padding-top: 0 !important; }

/* Woori Bank UI sections: the title sits inside its panel, centred over
   the screens. */
.div_ui-structure_proto-bg > .heading_grid-txt_summary.center {
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto var(--story-block) !important;
}
/* Phones: the panel has no side padding, so the title steps down to the
   screen captions' style (16 / 600) and keeps clear of the panel edges. */
@media screen and (max-width: 767px) {
  html .div_ui-structure_proto-bg > .heading_grid-txt_summary.center { font: 600 16px/1.5 var(--tf) !important; padding: 0 24px; }
}
/* Consecutive UI panels stack as one group. */
.div_bg.blue > .wrapper:has(.div_ui-structure_proto-bg) + .wrapper:has(.div_ui-structure_proto-bg) { margin-top: var(--story-stack) !important; }

/* Captions under a centred image group (LG's UI structure) are centred. */
.wrapper_980w.horizon.center > .txt_caption { width: 100%; text-align: center !important; }

/* LG's AISAS stages: each title and its description stack from the top
   (space-around pushed the shorter ones down). */
.grid_lg-hypo .div-block-33 { justify-content: flex-start !important; align-self: start; gap: 16px; }
.grid_lg-hypo .div-block-33 > * { margin: 0 !important; }
.grid_lg-hypo > .div_divider { align-self: start !important; }
/* Rows sized to their content: rule, stages, rule, 32px apart. */
.grid_lg-hypo { grid-template-rows: auto auto auto !important; row-gap: 32px !important; }
.grid_lg-hypo > .div_divider { margin: 0 !important; }
/* Title and description share the first row (a Webflow placement pinned
   one description to row 2, below its title's height). */
@media screen and (min-width: 768px) {
  .div_uid_txt.two > .txt_uid_description { grid-row: 1 !important; grid-column: 2 !important; }
  .div_uid_txt.two > .txt_uid_title { grid-row: 1 !important; grid-column: 1 !important; }
}
/* USDOT: "Final Design" labels the band's first group, set over its
   heading as a section label sits over its title (8px). */
.wrapper_980w > .heading_grid-txt_subtitle + .text-block-32 { margin-top: 8px !important; }
.wrapper_980w:has(> .heading_grid-txt_subtitle + .text-block-32) { display: block !important; }

/* ── UI showcases (.grid_uid, LG and Woori Bank): the page's rhythm ───
   showcase → showcase 96px (a new point); text → its screens 48px;
   screens → their captions 16px. The Webflow rows (19px/47px gaps and an
   empty 0px row) gave 19px, 19px and 48–95px. */
.grid_uid { row-gap: 0 !important; }
.grid_uid:not(.two) { grid-template-rows: auto !important; }
.grid_uid.two > .div_uid_wrapper { margin-top: var(--story-block) !important; }
.grid_uid.two > .txt_ui_subtitle { margin-top: var(--cap-gap) !important; }
/* Phones stack the single-phone showcases too: text, then the phone, the
   same block gap as above. */
@media screen and (max-width: 479px) {
  .grid_uid:not(.two) > .div_uid_wrapper { margin-top: var(--story-block) !important; }
}
.grid_uid.two { grid-template-rows: auto auto auto auto !important; }
/* Each showcase sits in its own wrapper. */
.case-story .section > .wrapper:has(> .grid_uid) + .wrapper:has(> .grid_uid) { margin-top: var(--story-sub) !important; }

/* Showcase labels (CLEAR, INTEREST…): flush left, and the same distance
   above their title as a section label is above its title (21px from the
   label's baseline to the title's capitals). Beside a description, the
   label's capitals line up with the description's first line. */
.txt_uid_label { padding-left: 0 !important; margin-bottom: 9px !important; }
@media screen and (min-width: 768px) {
  .div_uid_txt.two .txt_uid_label { padding-top: 5px !important; }
}

/* A label left on its own over the highlights carousel (Nexus, IRISe) sits
   on it as a label sits on its title: the title's box gap (0, 16 on
   phones) plus the space above its capitals (~8px). */
html .grid_txt:has(> .heading_grid-txt_subtitle:only-child) { display: block !important; }   /* no empty rows below it */
html .grid_txt:has(> .heading_grid-txt_subtitle:only-child) + .wrapper_980w { margin-top: 8px !important; }
@media screen and (max-width: 767px) {
  html .grid_txt:has(> .heading_grid-txt_subtitle:only-child) + .wrapper_980w { margin-top: 24px !important; }
}