/*
Theme Name: CommunityOS
Theme URI: https://drighlington.com
Description: CommunityOS — a modern community platform. Flagship build for Drighlington, West Yorkshire. Multi-village ready: branding and data are config-driven so the same theme runs Morley, Gildersome and beyond.
Author: Search Deal Ltd
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU GPL v2 or later
Text Domain: communityos
*/

/* =====================================================================
   CommunityOS — Design System  (style.css)
   Flagship community: Drighlington, West Yorkshire
   ---------------------------------------------------------------------
   This file IS the design language. Every page and every future village
   inherits from the tokens below. To re-skin for another village,
   override the --brand-* tokens only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------- */
:root {
  /* Brand palette — OFFICIAL (from brand identity board) */
  --brand-primary:   #0C1D34;   /* near-black navy        */
  --brand-secondary: #1D2F4D;   /* dark navy              */
  --brand-accent:    #D4AF37;   /* metallic gold          */
  --brand-cream:     #F2EBD8;   /* warm cream             */
  --brand-green:     #2E5A3A;   /* forest green (nature)  */
  --brand-rose:      #ffffff;   /* white rose motif       */

  /* Surfaces */
  --bg:        #F6F4EE;   /* soft warm white */
  --card:      #FFFFFF;
  --card-alt:  #F1EDE2;

  /* Ink */
  --ink:        #14233A;
  --ink-soft:   #4A5A72;
  --ink-faint:  #8C94A3;
  --line:       #E7E1D4;

  /* Functional accents */
  --good:   #2E5A3A;
  --alert:  #C98A2E;
  --info:   #1D2F4D;
  --danger: #C0392B;

  /* Type */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:   clamp(2.6rem, 6vw, 4.6rem);
  --fs-h1:     clamp(2rem, 4vw, 3rem);
  --fs-h2:     clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-h3:     1.25rem;
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;

  /* Spacing scale (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius */
  --r-sm: 10px;
  --r:    16px;   /* default — buttons & cards (from brief) */
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Shadows (soft, Airbnb-style) */
  --sh-1: 0 1px 2px rgba(18,59,115,.06), 0 2px 8px rgba(18,59,115,.06);
  --sh-2: 0 4px 14px rgba(18,59,115,.10);
  --sh-3: 0 12px 36px rgba(18,59,115,.16);
  --sh-glass: 0 8px 32px rgba(13,32,66,.28);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Section rhythm */
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }

/* Section heading block */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.section-head h2 { font-size: var(--fs-h2); font-weight: 700; }
.section-head .eyebrow { color: var(--brand-secondary); }
.section-head .link-all { font-weight:600; color: var(--brand-secondary); font-size: var(--fs-sm); white-space:nowrap; }
.section-head .link-all:hover { color: var(--brand-primary); }

/* Eyebrow / rose label — the recurring signature */
.eyebrow {
  display:inline-flex; align-items:center; gap: var(--s-2);
  font-family: var(--font-display); font-weight:600;
  font-size: var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand-accent);
}
.eyebrow::before {
  content:""; width:14px; height:14px; flex:none;
  background: var(--rose-mark, currentColor);
  -webkit-mask: var(--rose-svg) center/contain no-repeat;
          mask: var(--rose-svg) center/contain no-repeat;
}
:root {
  --rose-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2c.9 1.8 2.5 2.9 4.5 3-.3 2 .3 3.9 1.5 5.4-1.9.6-3.3 1.9-4 3.8-.7-1.9-2.1-3.2-4-3.8 1.2-1.5 1.8-3.4 1.5-5.4 2-.1 3.6-1.2 4.5-3Z'/><circle cx='12' cy='12' r='2.2' fill='black'/></svg>");
}

/* ---------------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  font-family: var(--font-display); font-weight:600; font-size: var(--fs-sm);
  padding: 13px 22px; border-radius: var(--r); border: 1.5px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space:nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-primary); color:#fff; box-shadow: var(--sh-1); }
.btn--primary:hover { background:#0e2f5c; box-shadow: var(--sh-2); transform: translateY(-2px); }
.btn--accent { background: var(--brand-accent); color:#3a2c00; box-shadow: var(--sh-1); }
.btn--accent:hover { background:#d9a31c; box-shadow: var(--sh-2); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,.24); }
.btn--outline { background:#fff; color: var(--brand-primary); border-color: var(--line); box-shadow: var(--sh-1); }
.btn--outline:hover { border-color: var(--brand-secondary); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn--sm { padding: 9px 14px; font-size: var(--fs-xs); }

/* Pills / chips */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight:600; line-height:1;
  background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px); transition: background .18s var(--ease), transform .18s var(--ease);
}
.chip:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
.tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.02em;
  background: var(--card-alt); color: var(--brand-secondary);
}
.tag--good   { background:#E7F4EC; color: var(--good); }
.tag--family { background:#FBEFD6; color:#9A6B00; }
.tag--music  { background:#EDE7FA; color:#6A4DBA; }
.tag--community { background:#E6EFFB; color: var(--brand-secondary); }

/* ---------------------------------------------------------------------
   4. CARD PRIMITIVE
   ------------------------------------------------------------------- */
.card {
  background: var(--card); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow:hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }

/* Image placeholder treatment (until real Drighlington photography drops in).
   Swap .ph for an <img> and it slots straight in. */
.ph {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(45,93,170,.30), transparent 60%),
    linear-gradient(135deg, var(--brand-primary), #1b4a86 55%, var(--brand-secondary));
  position:relative; color:#fff;
}
.ph::after {
  content:""; position:absolute; inset:0; opacity:.10;
  background: var(--rose-svg) center/42% no-repeat;
}
.ph-label {
  position:absolute; left:12px; bottom:10px; z-index:1;
  font-size: var(--fs-xs); font-weight:600; letter-spacing:.04em;
  color: rgba(255,255,255,.85);
}

/* =====================================================================
   5. NAVBAR  — sticky glass, Apple-style
   ===================================================================== */
.nav {
  position: sticky; top:0; z-index: 50; height: var(--nav-h);
  display:flex; align-items:center;
  background: rgba(247,249,252,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { background: rgba(255,255,255,.86); border-bottom-color: var(--line); box-shadow: var(--sh-1); }
.nav__inner { display:flex; align-items:center; gap: var(--s-5); width:100%; }
.brand { display:flex; align-items:center; gap: var(--s-3); margin-right: auto; }
.brand__badge { width:46px; height:46px; flex:none; border-radius:50%; box-shadow: var(--sh-1); }
.brand__name { font-family: var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color: var(--brand-primary); line-height:1; }
.brand__sub { font-size: var(--fs-xs); color: var(--ink-faint); }

.nav__links { display:flex; align-items:center; gap: 2px; }
.nav__links a {
  font-family: var(--font-display); font-weight:500; font-size:.92rem;
  color: var(--ink-soft); padding: 8px 12px; border-radius: var(--r-sm);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav__links a:hover { color: var(--brand-primary); background: rgba(45,93,170,.08); }
.nav__links a.is-active { color: var(--brand-primary); font-weight:600; }
.nav__actions { display:flex; align-items:center; gap: var(--s-3); }
.nav__weather { display:flex; align-items:center; gap:6px; font-weight:600; font-size: var(--fs-sm); color: var(--ink-soft); }
.nav__weather svg { width:20px; height:20px; }
.nav__burger { display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius: var(--r-sm); }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content:""; display:block; width:18px; height:2px; background: var(--ink); margin:0 auto; position:relative; transition:.2s var(--ease);
}
.nav__burger span::before { position:absolute; top:-6px; }
.nav__burger span::after  { position:absolute; top:6px; }

/* =====================================================================
   6. HERO — the signature: "what's happening today" at a glance
   ===================================================================== */
.hero { position:relative; min-height: 660px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg::before { /* photo placeholder — replace with real village photo */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,16,30,.28), rgba(6,16,30,.84)),
    radial-gradient(120% 90% at 70% 10%, #1D2F4D, transparent 55%),
    linear-gradient(135deg, #0C1D34, #122842 60%, #1D2F4D);
}
.hero__bg::after { content:""; position:absolute; inset:0; opacity:.06; background: var(--rose-svg) 85% 30%/240px no-repeat; }
.hero__inner { position:relative; z-index:1; width:100%; display:grid; grid-template-columns: 1.4fr .9fr; gap: var(--s-7); align-items:center; padding-block: var(--s-8); }

.hero__eyebrow { color: var(--brand-accent); margin-bottom: var(--s-4); }
.hero h1 { font-size: var(--fs-hero); font-weight:700; }
.hero h1 .accent { color: var(--brand-accent); font-family: var(--font-display); font-style: italic; font-weight:600; display:block; }
.hero__lede { font-size:1.1rem; color: rgba(255,255,255,.86); margin-top: var(--s-4); max-width: 38ch; }

/* Hero search */
.hsearch { margin-top: var(--s-6); position:relative; max-width: 560px; }
.hsearch__box {
  display:flex; align-items:center; gap: var(--s-3);
  background:#fff; border-radius: var(--r-full); padding: 8px 8px 8px 20px; box-shadow: var(--sh-3);
}
.hsearch__box svg { width:22px; height:22px; color: var(--ink-faint); flex:none; }
.hsearch__box input { flex:1; border:0; outline:0; font-size:1rem; color: var(--ink); background:transparent; padding:12px 0; }
.hsearch__box .btn { padding: 12px 22px; }
.hsearch__chips { display:flex; flex-wrap:wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* Instant results dropdown */
.hsearch__results {
  position:absolute; top: calc(100% + 10px); left:0; right:0; z-index:20;
  background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow:hidden;
  display:none;
}
.hsearch__results.is-open { display:block; }
.sr-group { padding: 8px 0; border-bottom:1px solid var(--line); }
.sr-group:last-child { border-bottom:0; }
.sr-group__label { font-size: var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); padding: 6px 18px; }
.sr-item { display:flex; align-items:center; gap: var(--s-3); padding: 10px 18px; color: var(--ink); transition: background .14s; cursor:pointer; }
.sr-item:hover { background: var(--card-alt); }
.sr-item__ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: var(--card-alt); color: var(--brand-secondary); flex:none; }
.sr-item__t { font-weight:600; font-size:.95rem; }
.sr-item__s { font-size: var(--fs-xs); color: var(--ink-faint); }

/* Hero live panel (glass) — weather + today + countdown */
.hpanel {
  background: rgba(13,28,58,.42); border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-xl); box-shadow: var(--sh-glass); overflow:hidden;
  isolation: isolate;
}
.hpanel__top { padding: var(--s-5) var(--s-5) var(--s-4); border-bottom:1px solid rgba(255,255,255,.12); }
.hpanel__greet { font-family: var(--font-display); font-weight:600; font-size:1.05rem; }
.hpanel__date { font-size: var(--fs-sm); color: rgba(255,255,255,.72); margin-top:2px; }
.hpanel__wx { display:flex; align-items:center; gap: var(--s-4); margin-top: var(--s-4); }
.hpanel__temp { font-family: var(--font-display); font-weight:700; font-size: 2.6rem; line-height:1; }
.hpanel__wxmeta { font-size: var(--fs-sm); color: rgba(255,255,255,.82); }
.hpanel__wxico { width:46px; height:46px; margin-left:auto; }

.hpanel__events { padding: var(--s-4) var(--s-5); }
.hpanel__events h4 { font-size: var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--brand-accent); margin-bottom: var(--s-3); }
.evrow { display:flex; align-items:center; gap: var(--s-3); padding: 8px 0; }
.evrow + .evrow { border-top:1px solid rgba(255,255,255,.10); }
.evrow__dot { width:8px; height:8px; border-radius:50%; background: var(--brand-accent); flex:none; }
.evrow__t { font-weight:600; font-size:.92rem; }
.evrow__s { font-size: var(--fs-xs); color: rgba(255,255,255,.66); }
.evrow__time { margin-left:auto; font-size: var(--fs-xs); color: rgba(255,255,255,.82); font-weight:600; }

.countdown { margin: var(--s-3) var(--s-6) var(--s-6); padding: var(--s-4); border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(212,175,55,.96), rgba(193,156,42,.96)); color:#2a2208; }
.countdown__lbl { font-family: var(--font-display); font-weight:700; font-size:.95rem; }
.countdown__date { font-size: var(--fs-xs); opacity:.8; margin-bottom: var(--s-3); }
.countdown__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-2); text-align:center; }
.countdown__n { font-family: var(--font-display); font-weight:700; font-size:1.5rem; line-height:1; }
.countdown__u { font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }

/* =====================================================================
   7. THIS WEEK  — large feature cards
   ===================================================================== */
.week-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s-5); }
.weekcard { display:flex; flex-direction:column; }
.weekcard__media { aspect-ratio: 16/11; }
.weekcard__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.weekcard__k { display:flex; align-items:center; gap:8px; font-size: var(--fs-xs); font-weight:700; color: var(--brand-secondary); text-transform:uppercase; letter-spacing:.06em; }
.weekcard__t { font-family: var(--font-display); font-weight:600; font-size:1.1rem; margin-top:6px; }
.weekcard__m { font-size: var(--fs-sm); color: var(--ink-soft); margin-top:4px; }

/* =====================================================================
   8. EXPLORE  — image category cards (Airbnb spacing)
   ===================================================================== */
.explore-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: var(--s-5); }
.xcard { position:relative; display:block; aspect-ratio: 4/3.4; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.xcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.xcard__media { position:absolute; inset:0; }
.xcard__scrim { position:absolute; inset:0; background: linear-gradient(180deg, transparent 35%, rgba(8,20,42,.82)); }
.xcard__ico { position:absolute; top:14px; left:14px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: rgba(255,255,255,.92); color: var(--brand-primary); box-shadow: var(--sh-1); }
.xcard__ico svg { width:22px; height:22px; }
.xcard__body { position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
.xcard__t { font-family: var(--font-display); font-weight:700; font-size:1.15rem; }
.xcard__s { font-size: var(--fs-xs); color: rgba(255,255,255,.8); margin-top:2px; }

/* =====================================================================
   9. COMMUNITY FEED  — Facebook-style, organised
   ===================================================================== */
.feed-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: var(--s-5); }
.post { display:flex; flex-direction:column; }
.post__head { display:flex; align-items:center; gap: var(--s-3); padding: var(--s-4); }
.avatar { width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; }
.post__who { font-weight:700; font-size:.92rem; }
.post__meta { font-size: var(--fs-xs); color: var(--ink-faint); }
.post__cat { margin-left:auto; }
.post__text { padding: 0 var(--s-4) var(--s-4); font-size:.95rem; color: var(--ink-soft); }
.post__media { aspect-ratio: 16/10; }
.post__bar { display:flex; align-items:center; gap: var(--s-5); padding: var(--s-3) var(--s-4); border-top:1px solid var(--line); }
.post__act { display:flex; align-items:center; gap:6px; font-size: var(--fs-sm); font-weight:600; color: var(--ink-soft); background:none; border:0; padding:0; transition: color .15s; }
.post__act:hover { color: var(--brand-secondary); }
.post__act svg { width:18px; height:18px; }
.post__act.is-on { color: var(--danger); }

/* =====================================================================
   10. SPLIT TWO-COLUMN (news + sport)
   ===================================================================== */
.split { display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); }

/* News (BBC-style: one feature + stacked list) */
.news-feature { display:block; }
.news-feature__media { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow:hidden; position:relative; }
.news-feature__t { font-family: var(--font-display); font-weight:700; font-size:1.35rem; margin-top: var(--s-3); }
.news-feature__m { font-size: var(--fs-sm); color: var(--ink-faint); margin-top:4px; }
.news-list { margin-top: var(--s-5); display:flex; flex-direction:column; gap: var(--s-4); }
.news-item { display:grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items:center; }
.news-item__media { aspect-ratio: 1/1; border-radius: var(--r-sm); overflow:hidden; }
.news-item__t { font-weight:600; font-size:.95rem; }
.news-item__m { font-size: var(--fs-xs); color: var(--ink-faint); margin-top:2px; }

/* Sport (separate club cards) */
.sport-list { display:flex; flex-direction:column; gap: var(--s-3); }
.fixture { display:flex; align-items:center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-lg);
  background: var(--card); border:1px solid var(--line); box-shadow: var(--sh-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.fixture:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.fixture__badge { width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff; font-size:20px; }
.fixture__body { flex:1; min-width:0; }
.fixture__club { font-family: var(--font-display); font-weight:700; font-size:.98rem; }
.fixture__vs { font-size: var(--fs-sm); color: var(--ink-soft); }
.fixture__when { text-align:right; flex:none; }
.fixture__day { font-weight:700; font-size:.9rem; }
.fixture__loc { font-size: var(--fs-xs); color: var(--ink-faint); }

/* =====================================================================
   11. PLACES TO EAT  — photo-led horizontal scroller
   ===================================================================== */
.eat-scroller { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(240px, 1fr); gap: var(--s-5);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom: var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.eat-scroller::-webkit-scrollbar { height:8px; }
.eat-scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius:8px; }
.eatcard { scroll-snap-align:start; display:flex; flex-direction:column; }
.eatcard__media { aspect-ratio: 4/3; }
.eatcard__body { padding: var(--s-4); }
.eatcard__t { font-family: var(--font-display); font-weight:700; font-size:1.05rem; }
.eatcard__row { display:flex; align-items:center; gap: var(--s-3); margin-top:6px; font-size: var(--fs-sm); color: var(--ink-soft); }
.stars { color: var(--brand-accent); font-weight:700; }

/* =====================================================================
   12. MAP PREVIEW
   ===================================================================== */
.map-card { display:grid; grid-template-columns: 1fr 320px; min-height: 440px; border-radius: var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow: var(--sh-2); background:#fff; }
#mapPreview { width:100%; height:100%; min-height:440px; }
.map-side { padding: var(--s-5); display:flex; flex-direction:column; }
.map-side h3 { font-size:1.05rem; font-weight:700; }
.map-layers { display:flex; flex-wrap:wrap; gap: var(--s-2); margin: var(--s-4) 0; }
.layer { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight:600; border:1px solid var(--line); background:#fff; color: var(--ink-soft); transition:.15s; }
.layer[aria-pressed="true"] { background: var(--brand-primary); color:#fff; border-color: var(--brand-primary); }
.nearby { margin-top:auto; }
.nearby__row { display:flex; align-items:center; gap: var(--s-3); padding: 10px 0; border-top:1px solid var(--line); font-size: var(--fs-sm); }
.nearby__row b { font-weight:700; }
.nearby__row span { margin-left:auto; color: var(--ink-faint); font-size: var(--fs-xs); }
.nearby__pin { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:none; font-size:14px; }

/* =====================================================================
   13. COMMUNITY PHOTOS  — Instagram-style mosaic
   ===================================================================== */
.photo-mosaic { display:grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: 130px; gap: var(--s-3); }
.photo { border-radius: var(--r-sm); overflow:hidden; position:relative; }
.photo.is-big { grid-column: span 2; grid-row: span 2; }
.photo .ph { width:100%; height:100%; }

/* =====================================================================
   14. SAFETY STRIP
   ===================================================================== */
.safety { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--s-4); }
.safety__item { display:flex; align-items:center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow: var(--sh-1); }
.safety__ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
.safety__n { font-family: var(--font-display); font-weight:700; font-size:1.1rem; }
.safety__l { font-size: var(--fs-xs); color: var(--ink-faint); }

/* =====================================================================
   15. FOOTER — large
   ===================================================================== */
.foot { background: var(--brand-primary); color: rgba(255,255,255,.82); margin-top: var(--s-9); }
.foot__cta { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--s-5);
  padding-block: var(--s-7); border-bottom:1px solid rgba(255,255,255,.12); }
.foot__cta a { display:flex; align-items:center; gap: var(--s-3); color:#fff; }
.foot__cta .ci { width:42px; height:42px; border-radius:12px; background: rgba(255,255,255,.1); display:grid; place-items:center; flex:none; }
.foot__cta b { display:block; font-family:var(--font-display); }
.foot__cta small { color: rgba(255,255,255,.6); }
.foot__main { display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: var(--s-6); padding-block: var(--s-7); }
.foot__col h5 { font-family: var(--font-display); color:#fff; font-size:.95rem; margin-bottom: var(--s-3); }
.foot__col a { display:block; padding:5px 0; color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.foot__col a:hover { color: var(--brand-accent); }
.foot__brand { display:flex; gap: var(--s-3); align-items:flex-start; }
.foot__brand img { width:54px; height:54px; border-radius:50%; }
.foot__emergency div { display:flex; justify-content:space-between; font-size: var(--fs-sm); padding:4px 0; }
.foot__emergency b { color:#fff; }
.foot__bottom { border-top:1px solid rgba(255,255,255,.12); padding-block: var(--s-4); font-size: var(--fs-xs); display:flex; justify-content:space-between; gap: var(--s-4); flex-wrap:wrap; }

/* Accessibility */
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; border-radius: 4px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left: var(--gutter); top:10px; z-index:100; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--sh-2); }

/* --- Long-form content (posts & pages) --- */
.cos-prose { font-size: 1.06rem; color: var(--ink); }
.cos-prose > * + * { margin-top: var(--s-4); }
.cos-prose h2 { font-size: var(--fs-h3); margin-top: var(--s-6); }
.cos-prose h3 { font-size: 1.15rem; margin-top: var(--s-5); }
.cos-prose a { color: var(--brand-secondary); text-decoration: underline; text-underline-offset: 2px; }
.cos-prose img { border-radius: var(--r); margin-block: var(--s-4); }
.cos-prose blockquote { border-left: 3px solid var(--brand-accent); padding-left: var(--s-4); color: var(--ink-soft); font-style: italic; }
.cos-prose ul, .cos-prose ol { padding-left: 1.4em; }
.cos-prose li { list-style: disc; margin-top: var(--s-2); }