/* ---- Cool Beans case study ----
   Page-specific styles, loaded after css/style.css so the shared tokens, the
   site header/nav, .project-back and .case-caption are already in place.
   Everything here is prefixed .cb- so it cannot collide with the other case
   studies.

   Same column as the others: inset to the nav's content box, blocks spaced on
   the shared --case-gap rhythm. */
.cb-page {
  width: calc(100% - 2 * var(--case-pad-x));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
  /* The column's gap only sits BETWEEN children, so the space under the nav
     has to be stated. */
  padding-top: var(--case-gap);
}

/* ---- Stage ----
   A fixed-shape window the hero is previewed in: 1251x666 in the frame, which
   is the artboard's own 1200x640. It never changes shape - the size buttons
   change the SCREEN inside it, so switching reads as one device swapping for
   another rather than the page jumping.

   The numbers are in artboard pixels and unitless, so they can be divided:
     --cb-base    the stage's width in artboard pixels (1200: Desktop fills it)
     --cb-screen  the previewed screen's width, set by data-size below
   The canvas is that share of the stage, and js/main.js draws it at
   stage width / --cb-base, so every screen is shown at the same scale. The
   widths sit well inside the file's own breakpoints (Small under ~850,
   Large from ~1200), clear of the 850 edge where its Sizing layer flickers. */
.cb-stage {
  --cb-base: 1200;
  --cb-screen: 1200;

  position: relative;
  overflow: hidden;
  aspect-ratio: 1200 / 640;
  /* The page's own ground, so the narrower screens float on the page rather
     than sitting in a visible box; Desktop covers it entirely. */
  background: var(--bg);
}

.cb-stage[data-size="medium"] {
  --cb-screen: 960;
}

.cb-stage[data-size="small"] {
  --cb-screen: 360;
}

.cb-stage > canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% * var(--cb-screen) / var(--cb-base));
  height: 100%;
  display: block;
  transform: translateX(-50%);
  /* The hero reflows live while the width eases, which is the point of the
     demo: the layout visibly adapting rather than cutting between stills. */
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Size buttons ----
   Each is a small screen in the shape it previews - a wide rectangle, a
   narrower one, a circle - so they read as devices without words. Styled as
   the contact form's Submit - the same accent outline, filled when selected and
   tinted on hover - but fully rounded and springy, to match the hero's
   bubbly, jelly-bean world rather than the site's straighter furniture. One --cb-btn-h sets the height they share; the
   widths are the frame's proportions (Desktop 1200:640, Tablet 960:640). */
.cb-sizes {
  --cb-btn-h: clamp(18px, 1.53vw, 26px); /* 22px at 1440 */

  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 1.67vw, 28px);
}

.cb-size {
  appearance: none;
  margin: 0;
  padding: 0;
  height: var(--cb-btn-h);
  border: var(--line-w) solid var(--accent);
  border-radius: 999px; /* pill: the ends are full semicircles at any width */
  background: none;
  cursor: pointer;
  /* An overshooting curve gives the press and release a little bounce. */
  transition:
    background-color 0.2s ease,
    transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}

/* Hover only where there is a real pointer: touch screens keep :hover on the
   last-tapped element, which would leave a tapped button stuck enlarged and
   tinted. The press squish below still plays on a tap. */
@media (hover: hover) {
  .cb-size:hover {
    transform: scale(1.12);
  }
}

.cb-size:active {
  transform: scale(0.9);
  transition-duration: 0.1s;
}

.cb-size--large {
  width: calc(var(--cb-btn-h) * 1200 / 640);
}

.cb-size--medium {
  width: calc(var(--cb-btn-h) * 960 / 640);
}

.cb-size--small {
  width: var(--cb-btn-h);
}

/* Hover is a tint, not the full fill, so it never reads as a second selection.
   Pointer devices only, for the same sticky-hover reason as above. */
@media (hover: hover) {
  .cb-size:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

.cb-size[aria-pressed="true"] {
  background: var(--accent);
}

.cb-size:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 3px;
}

.cb-page > .case-caption,
.cb-page > .project-back {
  width: 100%;
}

/* The column's gap already spaces the back link from the buttons. */
.cb-page > .project-back {
  --back-pad-top: 0;
}

/* ---- Phone ----
   A 1200-wide preview at phone width would draw the hero at a quarter size,
   so on a phone the stage simply IS the phone screen: the mobile layout at
   full width, and no buttons to switch away from it. */
@media (max-width: 600px) {
  .cb-stage,
  .cb-stage[data-size] {
    --cb-base: 360;
    --cb-screen: 360;
    aspect-ratio: 360 / 640;
  }

  .cb-sizes {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-stage > canvas,
  .cb-size {
    transition: none;
  }

  .cb-size:hover,
  .cb-size:active {
    transform: none;
  }
}