/* ==========================================================================
   Tiny Valley Tots — Page Layout (shared)
   Scope: main content areas, hero blocks, story/grid sections
   ========================================================================== */

:root{
  /* gentle paper background + brand-ish ink */
  --board:#fffdf3;
  --ink:#1b1b1b;
  --line:#ececec;
  --note:#fff3a8;   /* yellow */
  --note2:#ffdca8;  /* orange */
  --note3:#cfe9ff;  /* blue */
  --shadow:0 10px 22px rgba(0,0,0,.08);
}

body{
  background:var(--board);
  color:var(--ink);
}

/* ===== General page wrapper ===== */
.container,
.page{
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 14px;
}

/* ===== Hero (title over picture with consistent gap) ===== */
.hero{
  text-align:center;
  margin: 20px auto 18px;           /* increased top gap from 6px → 20px */
}
.hero h1{
  font-family:"Patrick Hand SC", cursive;
  font-size: clamp(28px, 5.5vw, 44px);
  line-height:1.08;
  margin:0 0 6px;                   /* small gap under title */
}
.hero img{
  display:block;
  margin:0 auto;
  width: clamp(120px, 22vw, 200px);
  height:auto;
}

/* ===== Highlighted placeholder (shared) ===== */
.content-placeholder{
  border: 3px dashed #f6d74c;
  background: #fffdf3;
  padding: 16px;
  border-radius: 12px;
}

/* ===== Story layout (cards + alternating grid) ===== */
.story-wrap{ margin: 0 auto 48px; }

.story-section{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "media text";
  gap: 22px;
  align-items: stretch;
  margin: 18px 0 28px;
}

.story-section .polaroid{ grid-area: media; }
.story-section .story-text{ grid-area: text; }

.story-section figure,
.story-section article{
  position:relative;
  background:#fff;
  padding:16px;
  border-radius:12px;
  box-shadow: var(--shadow);
}

.story-section:nth-child(even){ grid-template-areas: "text media"; }
.story-section:nth-child(even) .polaroid{ grid-area: media; }
.story-section:nth-child(even) .story-text{ grid-area: text; }

.story-text p{ margin:0; }

.polaroid img{
  width:100%;
  height:auto;
  border-radius: 8px;
}
.polaroid .cap{
  text-align:center;
  font-size:.95rem;
  color:#6b7280;
  margin-top:.5rem;
}

/* push-pin accents on both cards */
.story-text::before,
.polaroid::before{
  content:"";
  position:absolute;
  top:-14px;
  left: 52%;
  width:22px; height:22px;
  transform: translateX(-50%) rotate(-6deg);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    #f7c948; /* TVT yellow pin */
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.10);
  border:2px solid rgba(0,0,0,.06);
}

/* ===== Responsive ===== */
@media (max-width: 820px){
  .story-section{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin: 14px 0 20px;
  }
  .story-section .polaroid{ order:1; max-width: 420px; margin: 0 auto; transform: rotate(.8deg); }
  .story-section .story-text{ order:2; transform: rotate(-.8deg); }
}
/* =========================================================
   TVT — Per-page card accent mapping (cards match menu colours)
   Keep these in sync with buttons.css palette.
   ========================================================= */

/* Palette fallbacks (will be overridden by your :root if present) */
:root{
  --tvt-yellow:#F6D74C; /* Home / Close */
  --tvt-green:#3CCB76;  /* Book a Session */
  --tvt-blue:#3AA7E8;   /* Our Story / Staff Login / Sign in */
  --tvt-orange:#FFA336; /* Our Moments / Gallery */
  --tvt-pink:#FF66A1;   /* Parents Account / My Bookings */
  --tvt-red:#FF4D4D;    /* Admin / Danger / Delete */
}

/* ---------- Yellow (Home/Close/Legal) ---------- */
body[data-nav="home"],
body[data-nav="index"],
body[data-nav="cancel"],
body[data-nav="privacy"],
body[data-nav="terms"] {
  --card-accent: var(--tvt-yellow);
}

/* ---------- Green (Book a Session / Create Session) ---------- */
body[data-nav="booking"],
body[data-nav="bookings"],
body[data-nav="create-session"] {
  --card-accent: var(--tvt-green);
}

/* ---------- Blue (Our Story + Staff/Sign-in flows) ---------- */
body[data-nav="our-story"],
body[data-nav="staff-login"],
body[data-nav="login"],
body[data-nav="signin"] {
  --card-accent: var(--tvt-blue);
}

/* ---------- Orange (Our Moments / Gallery) ---------- */
body[data-nav="gallery"],
body[data-nav="our-moments"] {
  --card-accent: var(--tvt-orange);
}

/* ---------- Pink (Parents Account / My Bookings / Account Settings) ---------- */
body[data-nav="parents-account"],
body[data-nav="account"],
body[data-nav="my-bookings"],
body[data-nav="account-settings"] {
  --card-accent: var(--tvt-pink);
}

/* ---------- Red (Admin areas, staff dashboards, danger actions) ---------- */
body[data-nav="admin"],
body[data-nav="staff"],
body[data-nav="danger"],
body[data-nav="delete"],
body[data-nav="manage-events"],
body[data-nav="manage-users"] {
  --card-accent: var(--tvt-red);
}
/* Two equal columns for account page */
.account-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .account-two-col { grid-template-columns: 1fr; }
}