/* @shard answer-tile-grid-layout-fix */
/* @provides ClarksLayout.storybook_stage_mobile_2col */
/* @requires none */

/*
 * public/shared/storybook-panel/housing.css
 * Storybook / Comic Panel housing CSS.
 *
 * ONE engine, TWO skins (watercolour | halftone) selected via the register
 * class modifier applied to .clarks-storybook-stage from artPack.register.
 *
 * Reveal animation (housing-owned, engine just toggles .revealed):
 *   1. stroke-dashoffset: 1 -> 0  over 1.4s ease-out  (ink-draw)
 *   2. clip-path: circle(0%) -> circle(100%)  over 0.6s ease-out, delayed 1.4s  (fill wash)
 */

/* Mobile default: 2-col so each of 6 slides renders at ~175x220 on iPhone 13 Pro
   (replaces the prior all-viewport repeat(3,1fr) that produced ~120x150 cramp). */
.clarks-storybook-stage {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  padding: 12px;
  border-radius: 8px;
}

/* Tablet+desktop: revert to 3-col so 6 slides render as 3x2. */
@media (min-width: 481px) {
  .clarks-storybook-stage {
    grid-template-columns: repeat(3, 1fr);
  }
}

.clarks-storybook-slide {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.clarks-storybook-slide svg {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.clarks-storybook-slide-title {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 8px 0;
  text-align: center;
}

.clarks-storybook-slide-caption {
  font-size: 0.85rem;
  padding: 4px 8px 8px;
  text-align: center;
  min-height: 1.6em;
}

/* Watercolour register -- Ngaia. Soft edges, warm wash overlay. */
.clarks-storybook-stage.watercolour {
  background: linear-gradient(135deg, #FAF3E3, #E8B547);
  filter: saturate(0.9);
  color: #4A3728;
}

.clarks-storybook-stage.watercolour .clarks-storybook-slide {
  background: rgba(250, 243, 227, 0.55);
  box-shadow: 0 2px 0 rgba(74, 55, 40, 0.18);
}

/* Halftone register -- Oaks. Ink-stroke + dot-fill. */
.clarks-storybook-stage.halftone {
  background:
    radial-gradient(circle, #0B0B0B 1px, transparent 1px) 0 0/4px 4px,
    #1A2B4A;
  color: #F8F6F0;
}

.clarks-storybook-stage.halftone .clarks-storybook-slide {
  background: rgba(248, 246, 240, 0.06);
  border: 2px solid #0B0F1A;
  box-shadow: 3px 3px 0 #0B0F1A;
}

/* Ink-draw: stroke-dasharray:1 + stroke-dashoffset:1 on every slide path,
   pathLength="1" set by the engine so the animation maps cleanly. */
.clarks-storybook-slide svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s ease-out;
}

.clarks-storybook-slide.revealed svg path {
  stroke-dashoffset: 0;
}

/* Fill wash: clip-path circle(0%) -> circle(100%) after the ink-draw finishes. */
.clarks-storybook-slide .fill-wash {
  clip-path: circle(0%);
  -webkit-clip-path: circle(0%);
  transition: clip-path 0.6s ease-out 1.4s, -webkit-clip-path 0.6s ease-out 1.4s;
}

.clarks-storybook-slide.revealed .fill-wash {
  clip-path: circle(100%);
  -webkit-clip-path: circle(100%);
}

/* Save-as-PNG button only appears on the final slide. Mobile-first tap floor. */
.clarks-storybook-save-btn {
  grid-column: 1 / -1;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 6px;
}

.clarks-storybook-stage.watercolour .clarks-storybook-save-btn {
  background: #E8B547;
  color: #4A3728;
  box-shadow: 0 4px 0 #4A3728;
}

.clarks-storybook-stage.halftone .clarks-storybook-save-btn {
  background: #FFC93C;
  color: #0B0F1A;
  box-shadow: 4px 4px 0 #0B0F1A;
}

.clarks-storybook-save-btn:focus-visible {
  outline: 3px solid #3CE2A5;
  outline-offset: 2px;
}

/* Lock 25 verbatim block (API-CONTRACTS sec.12) + storybook-specific overrides. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  path[stroke-dasharray] { stroke-dashoffset: 0 !important; }
  .achieve::before, .companion-housing::before { animation-play-state: paused !important; }
  .clarks-storybook-slide svg path { stroke-dashoffset: 0 !important; }
  .clarks-storybook-slide .fill-wash {
    clip-path: circle(100%) !important;
    -webkit-clip-path: circle(100%) !important;
    transition: none !important;
  }
}