/* =========================================================================
   S&P Global Awards — Extended Case Study
   Visual system mirrors set-reset.com (tokens, typography, nav, footer)
   ========================================================================= */

/* ---------- Reset (matches set-reset.com Eric-Meyer-style reset) ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
button {
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}
button:focus { outline: none; }
a, input {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
menu { list-style-type: none; }

/* ---------- Design tokens (verbatim from set-reset.com) ---------- */
:root {
  --font-family: "ABCFavorit";
  --font-weight_regular: 400;
  --unit: 4px;
  --gutter: calc(var(--unit) * 4);
  --gutter--dynamic: var(--gutter);
  --color_white: #ffffff;
  --color_white--a20: rgba(255, 255, 255, .2);
  --color_black: #000000;
  --color_black--110: #262626;
  --color_black--120: #333333;
  --color_black--130: #8e8d94;
  --color_black--140: #b4b6a8;
  --color_red: #fc0d71;
  --border_section: 1px solid var(--color_black--130);
  --z-index_audio-button: 1;
  --z-index_play-button: 1;
  --z-index_nav: 2;
  --z-index_cursor: 3;
  --z-index_edit-toolbar: 4;
}
@media (min-width: 1680px) {
  :root { --gutter--dynamic: calc(var(--unit) * 5); }
}

/* ---------- Fonts ---------- */
@font-face {
  font-family: ABCFavorit;
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url("/fonts/ABCFavorit-Regular.woff2") format("woff2");
}
@font-face {
  font-family: ABCFavorit;
  font-weight: 400;
  font-style: italic;
  font-display: block;
  src: url("/fonts/ABCFavorit-RegularItalic.woff2") format("woff2");
}

/* ---------- Base ---------- */
*, *:before, *:after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* Hide native cursor on devices with hover (desktop) — replaced by .cursor */
@media (hover: hover) {
  * { cursor: none; }
}
::selection { background: var(--color_black--140); color: var(--color_white); }

html, body { height: 100%; color: var(--color_white); }
html { background-color: var(--color_black); }
body {
  overflow-y: scroll;
  font-family: var(--font-family), system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss04" on;
}

/* ---------- Typography utility classes (mirrors Typography.svelte) ---------- */
.t {
  font-family: var(--font-family), system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss04" on;
  color: inherit;
}
.t em, .t i, em, i, .t.--is-italic { font-style: italic; }
.t.--is-uppercase { text-transform: uppercase; }

.t.--extra-small { font-size: 14px; line-height: 16px; }
.t.--small       { font-size: 16px; line-height: 21px; letter-spacing: .2px; }
.t.--medium      { font-size: 18px; line-height: 20px; }
.t.--large       { font-size: 23px; line-height: 26px; }
.t.--extra-large { font-size: 28px; line-height: 30px; }
.t.--display     { font-size: 40px; line-height: 42px; letter-spacing: -1px; }   /* page-title only */
.t.--logo        { font-size: 16px; line-height: 21px; }

@media (min-width: 800px) {
  .t.--logo { font-size: 23px; line-height: 32px; }
}
@media (min-width: 1024px) {
  .t.--large { font-size: 28px; line-height: 30px; }
}
@media (min-width: 1680px) {
  .t.--extra-small { font-size: 16px; line-height: 20px; }
  .t.--small       { font-size: 21px; line-height: 24px; letter-spacing: .2px; }
  .t.--large,
  .t.--extra-large { font-size: 44px; line-height: 48px; }
  .t.--display     { font-size: 62px; line-height: 66px; letter-spacing: -1px; }   /* page-title at 1680+ */
  .t.--logo        { font-size: 32px; line-height: 32px; }
}

/* ---------- Custom cursor (mirrors set-reset.com Cursor.svelte) ----------
   Same DOM structure, same z-index, same transitions. Only the dot
   colour swaps from --color_red to the Vimeo player green (#01F44E). */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--unit) * 4);
  height: calc(var(--unit) * 4);
  z-index: var(--z-index_cursor);
  pointer-events: none;
  color: var(--color_white);
  transition: color .2s linear;
}
.cursor.--is-inverted { color: var(--color_black); }
.cursor:not([style]) span { transform: scale(0); }
.cursor span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: #01F44E;
  transition: transform .1s linear;
}
.cursor span.--is-mousedown { transform: scale(.75); }
.cursor span.--is-hidden { transform: scale(0); }

/* On touch devices fall back to the native cursor and hide our dot. */
@media not (hover: hover) {
  .cursor { display: none; }
}

/* ---------- Page shell ---------- */
.page {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: auto;
  max-width: 2560px;
  min-height: 100%;
}

/* ---------- Nav (mirrors set-reset Nav.svelte) ---------- */
.nav {
  position: fixed;
  z-index: var(--z-index_nav);
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter--dynamic);
  padding: var(--gutter--dynamic);
  transition: color .2s linear;
  pointer-events: none;
  max-width: 2560px;
  margin: auto;
}
.nav h1 a { pointer-events: auto; display: inline-block; }
.nav h1 a *+* { margin-left: -.15em; }
.nav menu { display: flex; gap: var(--gutter--dynamic); pointer-events: none; }
.nav menu a { transition: opacity .2s linear; pointer-events: auto; }
.nav menu:hover a { opacity: .5; }
.nav menu:hover a:hover { opacity: 1; }

@media (min-width: 800px) {
  .nav {
    grid-template-columns: repeat(4, 1fr);
    justify-content: initial;
    align-items: start;
  }
  .nav menu { display: block; }
  .nav menu li + li { margin-top: 0; }
}

/* ---------- Intro: title + overview + credits ----------
   Mirrors the case-study page layout (set-reset.com/work/...):
   hgroup with title / overview / credits aside, left-bordered.
   Stacks on small screens; 2-col at 800px; same at 1024px+.
*/
.intro {
  margin-top: calc(var(--gutter--dynamic) + var(--unit) * 10);
  padding: 0;
}
.intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: var(--gutter--dynamic);
  grid-row-gap: calc(var(--unit) * 10);
  margin-top: var(--gutter--dynamic);
}
.intro__title { display: block; }

/* Credits section — separate movable component.
   Mirrors the case-study credits pattern:
   border-left + padding-left wrapper; dt grey, dd inherits white;
   2-column at 800px+ (Client/Strategy on left, Project team on right). */
.credits-section {
  margin: 0;
  padding: 0;
}
.credits-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter--dynamic);
}
@media (min-width: 800px) {
  .credits-section__inner {
    grid-template-columns: repeat(4, 1fr);
  }
  .credits-section__inner > *:nth-child(1) { grid-column: 3 / 4; }
  .credits-section__inner > *:nth-child(2) { grid-column: 4 / 5; }
}
.credits-aside {
  border-left: 1px solid var(--color_black--130);
  padding-left: var(--gutter--dynamic);
}
.credits-aside dl + dl { margin-top: 1em; }
.credits-aside dt { color: var(--color_black--130); }

/* "+ Add field" — only visible in edit mode. */
.credits-add-field {
  display: none;
  margin-top: calc(var(--unit) * 4);
  padding: calc(var(--unit) * 1) calc(var(--unit) * 3);
  border-radius: 999px;
  background: var(--color_black--120);
  color: var(--color_white);
  cursor: pointer;
  transition: background-color .2s linear;
}
.credits-add-field:hover { background: var(--color_red); }
body.--edit-mode .credits-add-field { display: inline-block; }
.intro__overview { display: grid; gap: 1em; }
.intro__overview p + p { margin-top: 0; }

@media (min-width: 800px) {
  .intro__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .intro__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1680px) {
  .intro { margin-bottom: calc(var(--unit) * 16); }
}

/* ---------- Main ---------- */
.main {
  /* Top edge flush so the first visual asset goes full-bleed behind the
     fixed nav. Horizontal + bottom gutter unchanged. */
  margin: 0 var(--gutter--dynamic) var(--gutter--dynamic);
  flex: 1 0 auto;
}

/* Sections container — flex-wrap so two consecutive half-width sections
   land beside each other (left + right). Gap handles vertical rhythm.
   align-items: flex-start so all items hang from the top of their row. */
#sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter--dynamic);
  align-items: flex-start;
}

/* ---------- Section: media (16:9 image / video) ---------- */
.section {
  position: relative;
  flex: 1 0 100%;
  min-width: 0;
  margin-bottom: 0;          /* spacing handled by parent flex `gap` */
}

/* Width toggle: half-width sections sit at 50% of the row,
   so two consecutive halves auto-pair beside each other.
   On mobile (<550px) every block expands to full width. */
.section.--half-width {
  flex: 0 0 calc(50% - var(--gutter--dynamic) / 2);
  max-width: calc(50% - var(--gutter--dynamic) / 2);
}
@media (max-width: 549px) {
  /* Every section fills the viewport width on mobile. */
  .section.--half-width {
    flex: 1 0 100%;
    max-width: none;
  }
  /* Horizontal spacers are a 50%-wide layout aid only — hide on mobile. */
  .section.--hspacer { display: none; }
}

/* Vertical spacer — full-width, 240px tall, used for breathing room. */
.section.--vspacer {
  min-height: 240px;
}
/* Horizontal spacer — half-width blank cell that matches whatever its row
   partner needs. Stretching to fill means it doesn't impose its own height,
   so a short text block stays short instead of sprouting empty space below. */
.section.--hspacer {
  align-self: stretch;
}
/* In edit mode it needs *some* size so it's visible and clickable. */
body.--edit-mode .section.--hspacer {
  min-height: calc(var(--unit) * 12);
}
/* Both spacers show diagonal stripes in edit mode so they're visible. */
body.--edit-mode .section.--vspacer,
body.--edit-mode .section.--hspacer {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color_black--110) 0 8px,
    var(--color_black--120) 8px 16px
  );
}

/* Title / header — no inner padding; .main already provides outer inset. */
.section[data-section-type="title"],
.section[data-section-type="header"] { padding: 0; }

/* Divider — hairline, same treatment as the line above the footer. */
.section.--divider {
  border-top: var(--border_section);
  margin: calc(var(--unit) * 4) 0;
}

/* Standalone heading module (h1/h2) */
.section.--heading { padding: 0; }
.section.--heading [data-edit-key="text"] { display: block; }

/* Standalone body module (one paragraph block, paste-friendly) */
.section.--body { padding: 0; }
.section.--body [data-edit-rich] {
  display: block;
  white-space: pre-wrap;
}

/* Standfirst module — single block of `--large` text, like the intro lead. */
.section.--standfirst { padding: 0; }
.section.--standfirst [data-edit-rich] {
  display: block;
  white-space: pre-wrap;
}

/* Contenteditable affordances ------------------------------------- */
[contenteditable="true"] {
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: outline-color .15s linear;
  cursor: text;
}
body.--edit-mode [contenteditable="true"] {
  outline-color: var(--color_black--130);
}
body.--edit-mode [contenteditable="true"]:hover {
  outline-color: var(--color_white--a20);
}
body.--edit-mode [contenteditable="true"]:focus {
  outline-color: var(--color_red);
  outline-style: solid;
}
[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: var(--color_black--130);
}

.media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color_black--110);
}
.media img,
.media video,
.media iframe,
.media mux-video,
.media mux-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
/* mux-video is a custom element wrapping a <video>; make the inner video fill too. */
.media mux-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Letterbox: video keeps its native aspect ratio inside a 16:9 frame.
   Horizontal padding matches the main page gutter; vertical bars fill the rest.
   Background colour is configurable via --letterbox-bg (set inline from dataset). */
.media.--letterbox {
  display: flex;
  align-items: center;
  padding: 0 var(--gutter--dynamic);
  background-color: var(--letterbox-bg, var(--color_black));
}
.media.--letterbox iframe,
.media.--letterbox video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-aspect, 16 / 9);
  object-fit: contain;
}

/* Placeholder treatment when no media is set */
.media.--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color_black--130);
  background:
    repeating-linear-gradient(
      45deg,
      var(--color_black--110) 0 12px,
      var(--color_black--120) 12px 24px
    );
}
.media.--placeholder .placeholder-label {
  text-align: center;
  padding: var(--gutter--dynamic);
}

/* Caption under media */
.media-caption {
  margin-top: calc(var(--unit) * 3);
  color: var(--color_black--130);
}

/* ---------- Section: 50/50 duo (image+image, image+video, video+video) ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter--dynamic);
}
@media (min-width: 550px) {
  .duo { grid-template-columns: 1fr 1fr; }
}
.duo .media { aspect-ratio: 16 / 9; }

/* ---------- Section: pull quote (mirrors case-study blockquote) ---------- */
.quote {
  margin: 0;
  padding: 0;
}
@media (min-width: 800px) {
  .quote {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter--dynamic);
  }
  .quote blockquote { grid-column: 2 / 3; }
}
.quote blockquote {
  color: var(--color_black--130);
  border-left: 1px solid var(--color_black--130);
  padding-left: calc(var(--unit) * 2);
  white-space: break-spaces;
}
.quote blockquote p + p { margin-top: 1em; }
.quote cite {
  display: block;
  margin-top: calc(var(--unit) * 3);
  color: var(--color_black--130);
  font-style: normal;
}

/* ---------- Section: text block ---------- */
.text-block {
  margin: 0;     /* spacing now from #sections flex gap */
}
@media (min-width: 800px) {
  .text-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter--dynamic);
  }
  .text-block .text-block__body { grid-column: 2 / 3; }
}
.text-block h2 { margin-bottom: calc(var(--unit) * 4); }
.text-block p + p { margin-top: 1em; }
.text-block .eyebrow {
  display: block;
  color: var(--color_black--130);
  margin-bottom: calc(var(--unit) * 3);
}

/* Paragraph-level link styling (matches set-reset) */
.prose a {
  text-decoration-color: var(--color_white--a20);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color .2s ease-in-out;
}
.prose a:hover { text-decoration-color: var(--color_white); }
.prose p + p { margin-top: 1em; }

/* ---------- Optional: top-bordered section divider (from /info) ---------- */
.section.--bordered {
  border-top: var(--border_section);
  padding-top: var(--gutter--dynamic);
}

/* ---------- Optional: bullet list with white-dot markers (from /info) ----- */
.bullet-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.bullet-list li {
  display: grid;
  grid-template-columns: calc(var(--unit) * 4) 1fr;
  align-items: center;
  gap: calc(var(--unit) * 8);
  padding-bottom: var(--unit);
}
.bullet-list li + li { margin-top: calc(var(--unit) * 2); }
.bullet-list li:not(:last-child) { border-bottom: var(--border_section); }
.bullet-list li:before {
  content: "";
  display: block;
  width: calc(var(--unit) * 4);
  height: calc(var(--unit) * 4);
  background-color: var(--color_white);
  border-radius: 100%;
}

/* ---------- Footer (mirrors set-reset Footer.svelte) ---------- */
.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: var(--gutter--dynamic);
  padding: calc(var(--unit) * 4) 0 calc(var(--unit) * 12);
  margin: calc(var(--unit) * 32) var(--gutter--dynamic) 0;
  border-top: var(--border_section);
}
.footer dt { color: var(--color_black--130); }
.footer a { transition: color .2s linear; }
.footer a:hover { color: var(--color_black--130); }
@media (min-width: 550px) {
  .footer { grid-template-columns: 1fr 1fr; }
  .footer h3 { grid-column: span 2; }
}
@media (min-width: 800px) {
  .footer {
    grid-template-columns: repeat(4, 1fr);
    padding: calc(var(--unit) * 4) 0;
  }
  .footer h3 { grid-column: 1 / span 2; }
}
@media (min-width: 1680px) {
  .footer { margin-top: calc(var(--unit) * 80); }
}

/* ---------- Edit mode (?edit=1) ---------- */
body.--edit-mode .section { outline: 1px dashed var(--color_black--130); }
body.--edit-mode .section:hover { outline-color: var(--color_red); }
/* Active section — receives newly inserted modules. */
body.--edit-mode .section.--is-active,
body.--edit-mode .section.--is-active:hover {
  outline: 2px solid var(--color_red);
}

.edit-toolbar {
  display: none;
  position: fixed;
  bottom: var(--gutter--dynamic);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index_edit-toolbar);
  padding: calc(var(--unit) * 2) calc(var(--unit) * 4);
  background: var(--color_black--110);
  border: 1px solid var(--color_black--130);
  border-radius: calc(var(--unit) * 6);
  gap: calc(var(--unit) * 3);
  align-items: center;
  pointer-events: auto;
  max-width: calc(100vw - var(--gutter--dynamic) * 2);
  flex-wrap: wrap;
}
body.--edit-mode .edit-toolbar { display: flex; }
.edit-toolbar__group {
  display: flex;
  gap: calc(var(--unit) * 1);
  align-items: center;
  flex-wrap: wrap;
}
.edit-toolbar__group + .edit-toolbar__group {
  border-left: 1px solid var(--color_black--130);
  padding-left: calc(var(--unit) * 3);
  margin-left: calc(var(--unit) * 1);
}
.edit-toolbar__label {
  color: var(--color_black--130);
  margin-right: calc(var(--unit) * 1);
}
.edit-toolbar button {
  padding: calc(var(--unit) * 1) calc(var(--unit) * 2);
  border-radius: 999px;
  background: var(--color_black--120);
  cursor: pointer;
}
.edit-toolbar button:hover { background: var(--color_red); }

.section__controls {
  display: none;
  position: absolute;
  top: calc(var(--unit) * 2);
  right: calc(var(--unit) * 2);
  z-index: var(--z-index_edit-toolbar);
  gap: calc(var(--unit) * 1);
  padding: calc(var(--unit) * 1);
  background: rgba(0, 0, 0, .75);
  border-radius: 4px;
}
body.--edit-mode .section__controls { display: flex; }
.section__controls button {
  width: calc(var(--unit) * 7);
  height: calc(var(--unit) * 7);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color_black--120);
  color: var(--color_white);
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.section__controls button:hover { background: var(--color_red); }
.section__controls .section__handle { cursor: grab; }
.section.--dragging { opacity: .4; }
.section.--drop-target { outline: 2px solid var(--color_red); }

/* Width toggle button — shown on every block type that supports 100% / 50%. */
.section__controls [data-action="width"] { display: none; }
.section[data-section-type="image"]      .section__controls [data-action="width"],
.section[data-section-type="mux"]        .section__controls [data-action="width"],
.section[data-section-type="vimeo"]      .section__controls [data-action="width"],
.section[data-section-type="title"]      .section__controls [data-action="width"],
.section[data-section-type="header"]     .section__controls [data-action="width"],
.section[data-section-type="standfirst"] .section__controls [data-action="width"],
.section[data-section-type="body"]       .section__controls [data-action="width"],
.section[data-section-type="quote"]      .section__controls [data-action="width"] {
  display: flex;
}