/* =============================================================
   Idea pages — wrap + card layout + nav cutouts
   Same pattern as .slideshow-frame / .slideshow / .slideshow__dots
   ============================================================= */

/* ── Lock idea pages to full viewport height ─────────────────── */
.page { height: 100dvh; }

/* ── Wrap: flex child, clips nav overhangs, carries shadow ──── */
/* The demo, playing the part the slideshow plays on the work page: it fills
   the surface until the panel is opened, then gives up half of it. The
   drop-shadow is cast from the clipped shape — including the toggle's notch
   — which a box-shadow could not follow. */
.idea-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: visible;   /* allow toggle button to protrude right */
  z-index: 1;          /* above the panel being uncovered behind it */
  filter: drop-shadow(var(--shadow-frame-cast));
}

/* ── Card: absolute fill of wrap, clips its own content ──────── */
/* Radius concentric with the surface: the surface's own, less the padding
   between them, so the two curves run parallel. idea-panel.js reads this
   off the element so the notch path and the stylesheet cannot disagree. */
.idea-card {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: calc(var(--border-radius-xl) - var(--idea-surface-pad, 14px));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Idea layout ─────────────────────────────────────────────
   One white surface holding both, the way .work-surface holds the slideshow
   and the work nav. The demo fills it; opening the panel takes half, and
   the panel is uncovered from under the demo rather than appearing beside
   it as a second card. */
.idea-layout {
  --idea-surface-pad: 14px;
  /* so the panel inside can size against this surface rather than against
     itself while its own width is animating */
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  display: flex;
  gap: var(--idea-surface-pad);
  background: #ffffff;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--idea-surface-pad);
  overflow: hidden;
  transition: gap 400ms cubic-bezier(0.4,0,0.2,1);
}

.idea-layout.is-collapsed {
  gap: 0;
}

/* ── Panel toggle — circle sits in the notch carved from the card's right edge ── */
.idea-panel-toggle {
  position: absolute;
  right: 0;               /* right edge of button flush with card's right edge */
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.40);
  cursor: pointer;
  padding: 0;
  transition: color 150ms ease;
}
.idea-panel-toggle:hover { color: rgba(0,0,0,0.75); }

/* Right chevron (→) shown when panel is open; left (←) when closed */
.idea-panel-toggle__chev-left  { display: none; }
.idea-panel-toggle__chev-right { position: relative; left: 1px; }
.idea-layout.is-collapsed .idea-panel-toggle__chev-right { display: none; }
.idea-layout.is-collapsed .idea-panel-toggle__chev-left  { display: flex; position: relative; left: -1px; }

/* ── Info panel ───────────────────────────────────────────────
   No card of its own — it sits on the surface's white. Half the surface
   less the gap, which leaves the demo the other half exactly. */
.idea-panel {
  position: relative;
  width: min(calc(50% - var(--idea-surface-pad)), 520px);
  flex-shrink: 0;
  overflow: hidden;
  transition: width 400ms cubic-bezier(0.4,0,0.2,1),
              opacity 250ms ease;
}

.idea-layout.is-collapsed .idea-panel {
  width: 0;
  opacity: 0;
}

/* Pinned to the panel's right edge at the width it will finish at, rather
   than filling the panel as it opens. The panel's left edge sweeps left and
   uncovers this, so the text is drawn out from under the demo instead of
   being squeezed out of a box that reflows every frame. 50cqw is half the
   surface's content box — the same half the panel settles at. */
.idea-panel__scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(calc(50cqw - var(--idea-surface-pad)), 520px);
  overflow-y: auto;
  scrollbar-width: none;
  /* The resting inset is the fade's own depth, so nothing sits in the
     fade until it scrolls into it. */
  padding: var(--idea-fade) 26px var(--idea-fade);
  display: flex;
  flex-direction: column;
  /* Same edge treatment as .work-nav__scroller: the column shades off at
     the top and bottom instead of being cut by the panel's edge. Masked
     on the scroller, so the fade stays put while the text moves through. */
  --idea-fade: 44px;
  --idea-mask: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.12) calc(var(--idea-fade) * 0.32),
    rgba(0, 0, 0, 0.55) calc(var(--idea-fade) * 0.64),
    #000 var(--idea-fade),
    #000 calc(100% - var(--idea-fade)),
    rgba(0, 0, 0, 0.55) calc(100% - var(--idea-fade) * 0.64),
    rgba(0, 0, 0, 0.12) calc(100% - var(--idea-fade) * 0.32),
    transparent 100%
  );
  -webkit-mask-image: var(--idea-mask);
  mask-image: var(--idea-mask);
}

/* ── Title block — .cs-hero__* at panel scale ─────────────── */
.idea-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}
.idea-hero__eyebrow {
  font-family: var(--font-primary);
  font-size: var(--scale-2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.idea-hero__title {
  font-family: var(--font-accent);
  font-size: var(--scale-8);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text-primary);
  margin: 0;
}
.idea-hero__meta {
  font-family: var(--font-primary);
  font-size: var(--scale-3);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
}
.idea-hero__description {
  font-family: var(--font-primary);
  font-size: var(--scale-3);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-primary);
  margin: 0;
}
/* .cs-cta__link — the same outbound link the case studies end on */
.idea-hero__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: var(--scale-3);
  font-weight: 600;
  color: var(--color-active);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.idea-hero__link:hover { opacity: 0.75; }
.idea-panel__scroll::-webkit-scrollbar { display: none; }

.idea-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(17,160,255,0.09);
  color: #11A0FF;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 24px;
  align-self: flex-start;
}

.idea-panel__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Sections use the case-study type scale exactly:
   label = .cs-card-label, title = .cs-card-title / .cs-decision__title,
   body = .cs-card-body / .cs-decision__body, cards = .cs-takeaway. */
.idea-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-7);
}

.idea-section__label {
  font-family: var(--font-primary);
  font-size: var(--scale-2);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.idea-section__title {
  font-family: var(--font-accent);
  font-size: var(--scale-6);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0;
}
.idea-section__title--decision {
  font-size: var(--scale-5);
  line-height: 1.2;
}

.idea-section__body {
  font-family: var(--font-primary);
  font-size: var(--scale-3);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0;
}
.idea-section__body--primary { color: var(--color-text-primary); }

.idea-takeaways {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.idea-takeaway {
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idea-takeaway__keyword {
  font-family: var(--font-accent);
  font-size: var(--scale-4);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.idea-takeaway__desc {
  font-family: var(--font-primary);
  font-size: var(--scale-2);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Figures — .cs-decision__image-wrapper: label over a bordered frame */
.idea-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.idea-figure__label {
  font-family: var(--font-primary);
  font-size: var(--scale-1);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.idea-figure__label--after { color: var(--color-active); }
.idea-figure__frame {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4);
}
.idea-figure svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-primary);
  overflow: visible;
}

/* SVG text + marks shared by every figure */
.fig-t        { font-family: var(--font-primary); }
.fig-t--label { font-size: 11px; font-weight: 700; fill: #676767; }
.fig-t--faint { font-size: 11px; font-weight: 500; fill: #acacac; }
.fig-t--body  { font-size: 12.5px; font-weight: 500; }
.fig-t--tag   { font-size: 10px; font-weight: 700; fill: #E03C3C; }
.fig-lead     { stroke: #D9D9D9; stroke-width: 1; fill: none; }
.fig-arrow    { stroke: #acacac; stroke-width: 1.5; fill: none;
                stroke-linecap: round; stroke-linejoin: round; }
.fig-gaze circle,
.fig-gaze rect { fill: none; stroke: #11A0FF; stroke-width: 1.2;
                 stroke-dasharray: 3 3; opacity: 0.7; }
.fig-num circle { fill: #11A0FF; }
.fig-num text   { font-family: var(--font-primary); font-size: 10px;
                  font-weight: 800; fill: #fff; }

/* ── Mobile: demo on top, case study underneath, one scroll ──
   The page stops being a locked viewport. The demo keeps a fixed share of
   the screen — short enough that the write-up peeks in below it — and the
   panel drops into normal flow, so the demo scrolls away with the content
   rather than the panel scrolling inside a box of its own. */
@media (max-width: 640px) {
  .page { height: auto; min-height: 100dvh; }

  .idea-layout,
  .idea-layout.is-collapsed {
    flex: none;
    flex-direction: column;
    gap: var(--idea-surface-pad);
    overflow: visible;
  }

  .idea-wrap {
    flex: none;
    height: min(62svh, 560px);
  }

  /* No toggle on mobile, so no notch carved for one */
  .idea-card { clip-path: none !important; }
  .idea-panel-toggle { display: none; }

  .idea-panel,
  .idea-layout.is-collapsed .idea-panel {
    width: auto;
    opacity: 1;
    overflow: visible;
  }

  .idea-panel__scroll {
    position: static;
    width: auto;
    overflow: visible;
    padding: 0;
    gap: 12px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Separate cards, as the case studies stack on mobile (.cs-bento-card):
     the shared white surface goes away and the demo, the title block and
     every section each become a card of their own with the page between. */
  .idea-layout,
  .idea-layout.is-collapsed {
    gap: 12px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .idea-wrap { filter: none; }

  .idea-card {
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
  }

  /* The demo, moved into the title card by idea-panel.js: framed inside
     it like a case study's picture rather than carded on its own. */
  .idea-hero .idea-wrap { margin-bottom: var(--space-2); }
  .idea-hero .idea-card {
    border-radius: var(--border-radius-lg);
    /* The Other page's picture shadow, at half strength — the demo is
       white on white, so it only needs a soft edge to sit apart */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }

  .idea-hero,
  .idea-section {
    background: #ffffff;
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
  }
}

/* ── Bottom dots nav — exact .slideshow__dots technique ─────── */
.ideas-nav-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  border-radius: 100px;
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
}

.ideas-nav-bar__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ideas-nav-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  display: block;
}

.ideas-nav-bar__dot.is-active {
  background: rgba(0,0,0,0.65);
  transform: scale(1.2);
}

/* ── Side arrows — vertical pill, half-clipped by wrap edges ── */
.ideas-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 56px;
  border-radius: 100px;
  border: none;
  background: #ffffff;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  color: rgba(0,0,0,0.45);
  cursor: pointer;
  transition: color 150ms ease;
}

.ideas-nav-arrow--prev {
  left: 0;
  justify-content: flex-end;
  padding-right: 10px;
}

.ideas-nav-arrow--next {
  right: 0;
  justify-content: flex-start;
  padding-left: 10px;
}

.ideas-nav-arrow:hover { color: rgba(0,0,0,0.8); }

.ideas-nav-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}