/* Grow’n Go — page layout helpers
   Generated by scripts/copy-assets.mjs from "Grow'nGo Design System/".
   Do not edit by hand — edit the design system source and re-run `npm run assets`. */

/* ==========================================================================
   Grow'nGo — Website page layout helpers
   Shared, reusable section/grid/prose patterns used across all page mockups.
   Built only on design tokens so it ports cleanly into a WordPress theme.
   (Component look-and-feel lives in the design system; this is page scaffolding.)
   ========================================================================== */

/* ---- Skip link (a11y) ---- */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink-900); color: var(--cream);
  padding: 10px 16px; border-radius: var(--radius-md); z-index: var(--z-toast); }
.skip-link:focus { left: 8px; }

/* ---- Sections ---- */
.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--warm { background: var(--surface-warm); }
.section--sand { background: var(--surface-warm-2); }
.section--mint { background: var(--surface-mint); }
.section--coral { background: var(--surface-coral); }
.section--sun  { background: var(--surface-sun); }
.section__head { margin-bottom: var(--space-8); }

/* ---- Grids ---- */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--split { grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .grid--split.is-narrow { grid-template-columns: 1.1fr 0.9fr; }
}

/* ---- Inner-page hero (compact, centered) ---- */
.page-hero { position: relative; overflow: hidden; background: var(--surface-warm); border-bottom: 1px solid var(--border-subtle); }
.page-hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 88% 0%, var(--sun-100) 0%, transparent 60%); }
.page-hero__inner { position: relative; z-index: 1; max-width: var(--container-narrow); margin-inline: auto;
  padding: var(--space-9) var(--gutter) var(--space-9); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.page-hero h1 { margin: 0; font-size: clamp(2.25rem, 6vw, var(--text-3xl)); }
.page-hero .lead { margin: 0; }
.breadcrumb { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-semibold); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--coral-700); }
.breadcrumb i { font-size: 0.9em; }

/* ---- Prose (long-form reading) ---- */
.prose { max-width: var(--container-narrow); margin-inline: auto; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-6); }
.prose p { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
.prose ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-body); }
.prose blockquote { margin: 0; padding: var(--space-5) var(--space-6); background: var(--surface-coral); border-radius: var(--radius-lg);
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--coral-700); }

/* ---- Feature / value item (why-choose-us) ---- */
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 1.7rem; }
.feature__icon--coral { background: var(--coral-100); color: var(--coral-600); }
.feature__icon--mint  { background: var(--mint-100);  color: var(--mint-600); }
.feature__icon--sun   { background: var(--sun-100);   color: var(--sun-500); }
.feature__icon--sky   { background: var(--sky-100);   color: var(--sky-500); }
.feature h3 { margin: 0; font-size: var(--text-xl); }
.feature p { margin: 0; color: var(--text-body); }

/* ---- Stat ---- */
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__num { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl); color: var(--coral-500); line-height: 1; }
.stat__label { font-size: var(--text-md); color: var(--text-body); font-weight: var(--weight-semibold); }

/* ---- Photo highlight grid (uneven, friendly) ---- */
.photo-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.photo-grid .gg-imgph { aspect-ratio: 1 / 1; }
@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .photo-grid .gg-imgph { aspect-ratio: auto; height: 100%; }
  .photo-grid .span-2 { grid-column: span 2; }
  .photo-grid .row-2 { grid-row: span 2; }
}

/* ---- Numbered steps (enrollment) ---- */
.steps { display: flex; flex-direction: column; gap: var(--space-5); counter-reset: step; }
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
.step__num { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--coral-400);
  color: var(--ink-900); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.step__body h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.step__body p { margin: 0; color: var(--text-body); }

/* ---- Routine timeline (programs) ---- */
.routine { display: flex; flex-direction: column; gap: var(--space-3); }
.routine__row { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.routine__time { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--coral-600); font-size: var(--text-md); }
.routine__act b { display: block; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--weight-semibold); }
.routine__act span { color: var(--text-muted); font-size: var(--text-sm); }

/* ---- Staff card ---- */
.staff-card { text-align: center; }
.staff-card .gg-imgph { aspect-ratio: 1 / 1; }
.staff-card__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text-strong); margin: var(--space-4) 0 2px; }
.staff-card__role { color: var(--coral-600); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.staff-card__bio { color: var(--text-body); font-size: var(--text-sm); margin: 0; }

/* ---- Contact / info list ---- */
.info-list { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.info-list i { color: var(--coral-500); font-size: 1.4rem; margin-top: 2px; }
.info-list b { display: block; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--weight-semibold); }
.info-list a, .info-list span { color: var(--text-body); text-decoration: none; }
.info-list a:hover { color: var(--coral-700); }

/* ---- Map placeholder ---- */
.map-ph { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-card); border: 2px dashed var(--border-strong);
  background: repeating-linear-gradient(45deg, var(--mint-50) 0 16px, var(--sand-50) 16px 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--mint-600); }
.map-ph i { font-size: 2.2rem; }
.map-ph b { font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase; }

/* ---- Blog post card ---- */
.post-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.post-card__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); color: var(--text-strong); margin: 0; line-height: var(--leading-snug); }

/* ---- Form layout ---- */
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }

/* ---- Two-up "intro" block ---- */
.intro p { font-size: var(--type-body-lead); line-height: var(--leading-relaxed); color: var(--text-body); }