/**
 * Poet Roastery — "Coastal Editorial" grid + layout scaffolding.
 * UX A.4 (Layout & Spacing) + B.8 (responsive breakpoints). Token-backed via theme.json.
 *
 * Breakpoints: phone <600 / tablet 600–1024 / desktop >1024 (UX B.8).
 * Frames: 20px mobile / 64px desktop. Section gap (editorial-gap): 56px mobile / 96px desktop.
 * Asymmetric, whitespace-heavy — "the site should breathe; slow = intentional."
 */

:root {
  --poet-frame: var(--wp--preset--spacing--frame-mobile, 20px);
  --poet-editorial-gap: 56px;
  --poet-maxw: 1200px;
}

/* ---- Content frame (side margins) ---- */
.poet-frame,
.entry-content > .alignfull > .poet-section {
  padding-inline: var(--poet-frame);
}

/* ---- Editorial section rhythm ---- */
.poet-section {
  margin-block: var(--poet-editorial-gap);
}
.poet-section:first-child { margin-block-start: 0; }

/* ---- The 12-col editorial grid ---- */
.poet-grid {
  display: grid;
  grid-template-columns: 1fr;          /* phone: single column */
  gap: var(--wp--preset--spacing--40, 32px);
  width: 100%;
  max-width: var(--poet-maxw);
  margin-inline: auto;
  padding-inline: var(--poet-frame);
}

/* Asymmetric helpers (used by patterns in Story 3.7) */
.poet-grid--feature > * { grid-column: 1 / -1; }

/* ---- Tablet: 600–1024 ---- */
@media (min-width: 600px) {
  :root { --poet-frame: 40px; }
  .poet-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .poet-grid--feature > .poet-col-major { grid-column: span 4; }
  .poet-grid--feature > .poet-col-minor { grid-column: span 2; }
}

/* ---- Desktop: >1024 ---- */
@media (min-width: 1025px) {
  :root {
    --poet-frame: var(--wp--preset--spacing--frame-desktop, 64px);
    --poet-editorial-gap: 96px;
  }
  .poet-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  /* asymmetric: major 7 cols / minor 5 cols, offset for editorial tension */
  .poet-grid--feature > .poet-col-major { grid-column: 1 / span 7; }
  .poet-grid--feature > .poet-col-minor { grid-column: 9 / span 4; }
}

/* ---- Radius tokens as utility classes ---- */
.poet-r-sm    { border-radius: 4px; }
.poet-r       { border-radius: 8px; }
.poet-r-md    { border-radius: 12px; }
.poet-r-lg    { border-radius: 20px; }
.poet-r-full  { border-radius: 9999px; }

/* Images inherit the radius of their frame (UX A.4) */
.poet-r-md img, .poet-r-lg img { border-radius: inherit; }

/* ---- Accessibility: visible keyboard focus (3px ring, UX-DR6) ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--focus-ring, #2F7E9E);
  outline-offset: 2px;
}

/* ---- Reduced-motion base (motion utilities expanded in Story 3.7) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Contrast guardrail reminders (enforced in components, Story 3.6) ----
   Do NOT use accent-yellow / secondary as small text on surface.
   Brand-blue text = primary-deep. Yellow fills carry on-accent-yellow (dark) text. */