/* ==========================================================================
   Design case studies — shared template (dc-*)
   Used by /designs/*-case-study/ pages. These pages are Figma "artboard" layouts
   (fixed 825px canvas with absolutely positioned layers). Every layer size /
   position is written as calc(var(--u) * N) in the page stylesheet, so the whole
   artboard scales through a single unit:
     --u = 1px on desktop, shrinks with the viewport below ~860px.
   Sections can opt into a different phone behaviour:
     .dc-sec--scale  (default) scale the board down proportionally
     .dc-sec--flow   phone: un-position the layers and stack them as normal flow
     .dc-sec--scroll phone: keep a legible size and scroll the board sideways
   ========================================================================== */

.dc-body { background: #fff; color: #000; }

.dc-main {
  container-type: inline-size;
  padding: 0 24px;
}

.dc-art {
  --u: min(1px, calc(100cqw / var(--art-w, 825)));
  position: relative;
  width: calc(var(--u) * var(--art-w, 825));
  margin: calc(var(--u) * var(--art-top, 58)) auto 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}

/* one section of the artboard */
.dc-sec { position: relative; width: 100%; }
.dc-board { position: relative; margin: 0 auto; }
.dc-board, .dc-board * { box-sizing: border-box; }

/* rich text layers — mirrors Framer's --framer-* text variables with short names */
.dc-t { position: relative; white-space: pre-wrap; overflow-wrap: break-word; }
.dc-t :is(p, h1, h2, h3, h4, span, a, strong, em, div) {
  font-family: var(--ff, "Inter"), "Inter", system-ui, sans-serif;
  font-weight: var(--fw, 400);
  font-style: var(--fst, normal);
  font-size: calc(var(--u) * var(--fs, 16));
  line-height: var(--lh, 1.2em);
  letter-spacing: var(--ls, 0);
  color: var(--fc, #000);
  text-align: var(--ta, start);
  text-decoration: var(--td, none);
  text-decoration-color: var(--tdc, currentColor);
  text-transform: var(--tt, none);
  margin: 0;
}
.dc-t :is(span, a, strong, em) { text-align: inherit; }
.dc-t :is(p, h1, h2, h3, h4) + :is(p, h1, h2, h3, h4) { margin-top: var(--ps, 0); }
.dc-t a { text-decoration: underline; text-underline-offset: 2px; transition: opacity .2s; }
.dc-t a:hover { opacity: .65; }

/* image fill layers */
.dc-m { overflow: hidden; }
.dc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  display: block; object-fit: cover; object-position: center;
  border-radius: inherit;
}

/* vector layers */
.dc-v > svg { width: 100%; height: 100%; display: block; overflow: visible; max-width: none; }

/* Framer border layer */
[data-border]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, none);
  border-radius: inherit; box-sizing: border-box;
}


@media (max-width: 809px) {
  .dc-main { padding: 0 16px; }
  .dc-art { margin-top: 72px; margin-bottom: 64px; }

  /* ---- flow: stack the board's direct layers in reading order ------------
     (--o = reading order, .dc-fit = fixed-size group that is scaled to fit) */
  .dc-sec--flow { padding: 24px 0; }
  .dc-sec--flow > .dc-board {
    --u: 1px;
    width: 100% !important; height: auto !important;
    display: flex !important; flex-flow: row wrap !important;
    align-items: flex-start !important; gap: 20px 12px !important;
    overflow: visible !important; padding: 0 !important; transform: none !important;
  }
  .dc-sec--flow > .dc-board > * {
    position: relative !important; inset: auto !important; transform: none !important;
    order: var(--o, 0); flex: none !important; max-width: 100%; margin: 0 !important;
  }
  .dc-sec--flow > .dc-board > .dc-fit { --u: min(1px, calc(100cqw / var(--w, 825))); }
  .dc-sec--flow > .dc-board > .dc-grow { --u: calc(100cqw / var(--w, 825)); }
  .dc-sec--flow > .dc-board > .dc-autow { width: auto !important; }
  .dc-sec--flow > .dc-board > :not(.dc-fit) .dc-stack { width: auto !important; max-width: 100%; }
  .dc-sec--flow .dc-wrap { flex-wrap: wrap !important; row-gap: 28px !important; }
  .dc-sec--flow .dc-wrap > * { flex: 1 1 150px !important; }
  .dc-sec--flow > .dc-board > :not(.dc-fit) { width: 100% !important; height: auto !important; }
  .dc-sec--flow > .dc-board > :not(.dc-fit) .dc-t { max-width: 100%; height: auto !important; }
  .dc-sec--flow > .dc-board > .dc-t,
  .dc-sec--flow > .dc-board > :not(.dc-fit) .dc-t { white-space: normal; }
  .dc-sec--flow > .dc-board > .dc-t :is(p, h1, h2, h3),
  .dc-sec--flow > .dc-board > :not(.dc-fit) .dc-t :is(p, h1, h2, h3) { white-space: pre-line; }
  .dc-sec .dc-mhide { display: none !important; }
  /* a text layer that sat on a decorative panel on desktop gets its own card on phones */
  .dc-sec--flow .dc-box {
    background: #f6f6f6; border: 1px solid #c4c4c4; border-bottom: 6px solid #023047;
    border-radius: 10px; padding: 18px 18px 20px !important;
  }

  /* ---- scroll: keep a readable scale, pan sideways ------------------------ */
  .dc-sec--scroll {
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px);
  }
  .dc-sec--scroll .dc-board { --u: .78px; margin: 0; }
  .dc-sec--scroll::before {
    content: "Swipe to explore \2192"; position: sticky; left: 0; display: block; width: max-content;
    margin: 8px 0 10px; padding: 4px 10px; border-radius: 999px;
    background: #f1f3f7; color: #5e6b81; font: 500 12px/1.3 var(--font-sans);
  }
}