/* ═══════════════════════════════════════════════════════════════
   GRID PLANNER — "Nine posts, one flow" signature hero
   Phone-framed 3x3 grid demo: FLIP sorts, pointer drag,
   3:4 crop toggle, carousel grouping. Loads after /css/product.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero backdrop: plain carbon, subtle vignette ──────────── */
.cg-hero .p-hero-stage {
  background:
    radial-gradient(110% 80% at 50% 30%, rgba(28 24 18 / 0.9), var(--carbon) 78%);
}

/* ── Demo shell ────────────────────────────────────────────── */
.cg-demo {
  display: grid; gap: 1rem; justify-items: center;
}

/* ── Phone frame (CSS-only device chrome) ──────────────────── */
.cg-phone {
  width: min(23.5rem, 100%);
  background: var(--carbon-3);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 0.55rem;
  box-shadow:
    0 24px 70px rgba(0 0 0 / 0.5),
    inset 0 1px 0 rgba(201 194 182 / 0.09);
}
.cg-statusbar {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  padding: 0.62rem 0.85rem 0.68rem;
  color: var(--dim); font-size: 0.54rem; letter-spacing: 0.18em;
  border-bottom: 1px solid var(--line-soft);
}
.cg-statusbar span:last-child { color: var(--silver); font-variant-numeric: tabular-nums; }

/* ── The 3x3 grid ──────────────────────────────────────────── */
.cg-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  background: var(--carbon);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  margin-top: 0.55rem;
}
.cg-tiles figure {
  position: relative; margin: 0; min-width: 0;
  background: var(--carbon-2);
}
/* The tiles are real controls (Enter to group, arrows to reorder), so the focus ring
   has to clear the neighbouring tile rather than hide under it. */
.cg-tiles figure:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  z-index: 2;
}
.cg-tiles img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  transition: aspect-ratio 0.55s var(--ease-inout);
}
.cg-tiles.is-crop img { aspect-ratio: 3 / 4; }

/* drag affordance (desktop pointer only — JS gates behavior too) */
@media (hover: hover) {
  .cg-tiles figure { cursor: grab; touch-action: none; }
  .cg-tiles figure:active { cursor: grabbing; }
}
.cg-tiles figure.is-dragging {
  z-index: 5; cursor: grabbing;
  box-shadow: 0 14px 34px rgba(0 0 0 / 0.55);
}
.cg-tiles figure.is-dragging img { filter: brightness(1.06); }

/* ── Carousel grouping ─────────────────────────────────────── */
.cg-tiles figure.is-pending::after,
.cg-tiles figure.is-grouped::after {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid rgba(111 194 178 / 0.85);
}
.cg-tiles figure.is-pending::after {
  border-color: var(--amber); border-style: dashed;
}
.cg-tiles figure.is-grouped {
  box-shadow: inset 0 0 0 1px rgba(111 194 178 / 0.35);
}
.cg-badge {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  padding: 0.15rem 0.42rem;
  background: rgba(13 11 8 / 0.82);
  border: 1px solid rgba(111 194 178 / 0.6);
  border-radius: 3px;
  color: var(--teal); font-size: 0.54rem; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  /* stacked-corner look */
  box-shadow: 3px -3px 0 -1px rgba(13 11 8 / 0.82), 3px -3px 0 0 rgba(111 194 178 / 0.35);
}

/* ── Controls bar: sort + crop chips ───────────────────────── */
.cg-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  width: min(28rem, 100%);
}
.cg-chip {
  padding: 0.44rem 0.85rem;
  background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--dim);
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
@media (hover: hover) {
  .cg-chip:hover { color: var(--silver); border-color: rgba(201 194 182 / 0.35); }
}
.cg-chip[aria-pressed="true"] {
  color: var(--carbon); background: var(--amber); border-color: var(--amber);
}
.cg-chip-crop { margin-left: 0.6rem; }
.cg-chip-crop[aria-pressed="true"] {
  color: var(--carbon); background: var(--teal); border-color: var(--teal);
}

/* ── Hint line ─────────────────────────────────────────────── */
.cg-hint {
  color: var(--dim); font-size: 0.54rem; letter-spacing: 0.18em; text-align: center;
}
@media (hover: none), (max-width: 760px) { .cg-hint { display: none; } }

/* ── News callout (timely: Instagram Reorder Grid) ─────────── */
.cg-news { padding: clamp(3rem, 6vh, 4.5rem) var(--pad-x) 0; }
.cg-news-inner {
  max-width: 52rem; margin: 0 auto;
  background: var(--carbon-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 0 5px 5px 0;
  padding: 1.5rem 1.85rem;
}
.cg-news-tag {
  color: var(--amber); font-size: 0.6rem; letter-spacing: 0.22em;
  margin-bottom: 0.7rem;
}
.cg-news-inner > p:last-child { color: var(--silver); font-size: 0.97rem; }
.cg-news-inner strong { color: var(--highlight); font-weight: 600; }
.cg-news-inner a { color: var(--amber); white-space: nowrap; }
@media (hover: hover) {
  .cg-news-inner a:hover { text-decoration: underline; }
}

/* ── Feature sheet: 8 cells → 4-up ─────────────────────────── */
.cg-feature-sheet { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) { .cg-feature-sheet { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1080px) { .cg-feature-sheet { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cg-feature-sheet { grid-template-columns: 1fr; } }

/* mono code voice inside prose (features + FAQ) */
.feature-cell code, .faq-answer code {
  font-family: var(--f-mono); font-size: 0.82em;
  color: var(--amber);
  background: rgba(232 163 61 / 0.08);
  border: 1px solid rgba(232 163 61 / 0.18);
  border-radius: 3px;
  padding: 0.05em 0.35em;
}

/* ── Reduced motion: everything lands instantly ────────────── */
@media (prefers-reduced-motion: reduce) {
  .cg-tiles img { transition: none; }
  .cg-chip { transition: none; }
}