/* style.css - YouthClimbing.com v2 */

/* ========== TOKENS ========== */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(2.5rem,   0.5rem  + 5vw,    5rem);
  --font-display: 'Lora', 'Georgia', serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
  --radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
}

/* ========== LIGHT MODE ========== */
:root,[data-theme="light"]{
  --color-bg:#f8f6f1;--color-surface:#faf9f5;--color-surface-2:#ffffff;
  --color-surface-offset:#f0ede6;--color-surface-offset-2:#e8e5dd;--color-surface-dynamic:#dddad2;
  --color-divider:#d4d0c8;--color-border:#c8c4bb;
  --color-text:#1c2b33;--color-text-muted:#6b7c85;--color-text-faint:#a3b0b8;--color-text-inverse:#f8f6f1;
  --color-primary:#1a5c6b;--color-primary-hover:#134a56;--color-primary-active:#0e3842;--color-primary-highlight:#d0e3e7;
  --color-accent:#e8702a;--color-accent-hover:#d05f1f;--color-accent-active:#b84f15;--color-accent-highlight:#fce8da;
  --color-success:#3a7d28;--color-success-highlight:#d4e5cc;
  --color-error:#c0392b;--color-error-highlight:#f0d5d1;
  --color-warning:#d4880a;--color-warning-highlight:#f5ecd0;
  --shadow-sm:0 1px 2px oklch(0.2 0.02 240 / 0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.02 240 / 0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.02 240 / 0.12);
}

/* ========== DARK MODE ========== */
[data-theme="dark"]{
  --color-bg:#131c21;--color-surface:#182429;--color-surface-2:#1d2b31;
  --color-surface-offset:#1a262c;--color-surface-offset-2:#1f2f36;--color-surface-dynamic:#283a42;
  --color-divider:#233038;--color-border:#2e3f48;
  --color-text:#d4dce0;--color-text-muted:#8a9aa2;--color-text-faint:#566a74;--color-text-inverse:#1c2b33;
  --color-primary:#4fb3c4;--color-primary-hover:#3a97a7;--color-primary-active:#2a7b8a;--color-primary-highlight:#1e353b;
  --color-accent:#f09555;--color-accent-hover:#f0a872;--color-accent-active:#e88040;--color-accent-highlight:#3a2a1e;
  --color-success:#5fad45;--color-success-highlight:#1e331a;
  --color-error:#e05a4e;--color-error-highlight:#3a1d1a;
  --color-warning:#e8a835;--color-warning-highlight:#3a2e18;
  --shadow-sm:0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md:0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg:0 12px 32px oklch(0 0 0 / 0.45);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#131c21;--color-surface:#182429;--color-surface-2:#1d2b31;
    --color-surface-offset:#1a262c;--color-surface-offset-2:#1f2f36;--color-surface-dynamic:#283a42;
    --color-divider:#233038;--color-border:#2e3f48;
    --color-text:#d4dce0;--color-text-muted:#8a9aa2;--color-text-faint:#566a74;--color-text-inverse:#1c2b33;
    --color-primary:#4fb3c4;--color-primary-hover:#3a97a7;--color-primary-active:#2a7b8a;--color-primary-highlight:#1e353b;
    --color-accent:#f09555;--color-accent-hover:#f0a872;--color-accent-active:#e88040;--color-accent-highlight:#3a2a1e;
    --color-success:#5fad45;--color-error:#e05a4e;--color-warning:#e8a835;
    --shadow-sm:0 1px 2px oklch(0 0 0 / 0.25);--shadow-md:0 4px 12px oklch(0 0 0 / 0.35);--shadow-lg:0 12px 32px oklch(0 0 0 / 0.45);
  }
}

/* ========== HEADER ========== */
.site-header{position:sticky;top:0;z-index:100;background:oklch(from var(--color-bg) l c h / 0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider);transition:background var(--transition-interactive);}
.header-inner{max-width:var(--content-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);gap:var(--space-4);}
.logo{text-decoration:none;display:flex;align-items:center;flex-shrink:0;gap:var(--space-3);}
.logo-img{height:40px;width:40px;display:block;border-radius:var(--radius-sm);}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-name{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:0.08em;color:var(--color-text);white-space:nowrap;}
.logo-est{font-family:var(--font-body);font-weight:400;font-size:0.65rem;letter-spacing:0.12em;color:var(--color-text-muted);margin-top:2px;}
.logo-main{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text);line-height:1;}
.logo-dot{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-accent);line-height:1;}
.main-nav{display:none;gap:var(--space-1);align-items:center;}
@media(min-width:1080px){.main-nav{display:flex;}}
.nav-link{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);transition:color var(--transition-interactive),background var(--transition-interactive);white-space:nowrap;}
.nav-link:hover,.nav-link.active{color:var(--color-text);background:var(--color-surface-offset);}
.nav-kids{color:var(--color-accent)!important;}
.nav-kids:hover,.nav-kids.active{background:var(--color-accent-highlight)!important;}

/* Dropdown navigation */
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-trigger{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);background:none;border:none;cursor:pointer;padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);transition:color var(--transition-interactive),background var(--transition-interactive);white-space:nowrap;display:flex;align-items:center;}
.nav-dropdown-trigger:hover,.nav-dropdown.open .nav-dropdown-trigger{color:var(--color-text);background:var(--color-surface-offset);}
.nav-dropdown-trigger svg{transition:transform 200ms ease;}
.nav-dropdown.open .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);min-width:220px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(0,0,0,0.12);padding:var(--space-2);opacity:0;visibility:hidden;transition:opacity 200ms ease,transform 200ms ease;z-index:100;}
.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{display:block;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);transition:color var(--transition-interactive),background var(--transition-interactive);}
.nav-dropdown-menu a:hover{color:var(--color-text);background:var(--color-surface-offset);}
.header-actions{display:flex;align-items:center;gap:var(--space-3);}
.header-cta{display:none;}
@media(min-width:768px){.header-cta{display:inline-flex;}}
.theme-btn{padding:var(--space-2);border-radius:var(--radius-md);color:var(--color-text-muted);transition:color var(--transition-interactive),background var(--transition-interactive);}
.theme-btn:hover{color:var(--color-text);background:var(--color-surface-offset);}
.hamburger{display:flex;flex-direction:column;gap:5px;padding:var(--space-2);}
@media(min-width:1080px){.hamburger{display:none;}}
.hamburger span{display:block;width:20px;height:2px;background:var(--color-text);border-radius:2px;transition:transform var(--transition-interactive),opacity var(--transition-interactive);}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ========== MOBILE NAV ========== */
.mobile-overlay{position:fixed;inset:0;background:oklch(0 0 0 / 0.4);z-index:200;opacity:0;pointer-events:none;transition:opacity 300ms cubic-bezier(0.16,1,0.3,1);}
.mobile-overlay.open{opacity:1;pointer-events:auto;}
.mobile-nav{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--color-surface);z-index:201;transform:translateX(100%);transition:transform 300ms cubic-bezier(0.16,1,0.3,1);overflow-y:auto;overscroll-behavior:contain;}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--color-divider);}
.mobile-close{font-size:1.5rem;color:var(--color-text-muted);padding:var(--space-2);}
.mobile-nav-links{display:flex;flex-direction:column;padding:var(--space-4);}
.mobile-nav-links a{font-family:var(--font-body);font-size:var(--text-base);font-weight:500;color:var(--color-text);text-decoration:none;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);transition:background var(--transition-interactive);}
.mobile-nav-links a:hover,.mobile-nav-links a.active{background:var(--color-surface-offset);}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);text-decoration:none;border:none;cursor:pointer;transition:background var(--transition-interactive),color var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);color:var(--color-text-inverse);}
.btn-accent{background:var(--color-accent);color:#fff;}
.btn-accent:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md);color:#fff;}
.btn-secondary{background:var(--color-surface-offset);color:var(--color-text);border:1px solid var(--color-border);}
.btn-secondary:hover{background:var(--color-surface-dynamic);}
.btn-outline-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);}
.btn-outline-light:hover{background:rgba(255,255,255,0.1);border-color:#fff;}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);}
.badge{display:inline-flex;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;line-height:1.4;}
.badge-primary{background:var(--color-primary-highlight);color:var(--color-primary);}
.badge-accent{background:var(--color-accent-highlight);color:var(--color-accent);}

/* ========== LAYOUT ========== */
.container{max-width:var(--content-wide);margin:0 auto;padding-inline:var(--space-4);}
@media(min-width:768px){.container{padding-inline:var(--space-8);}}
.section{padding:clamp(var(--space-10),5vw,var(--space-20)) 0;}
.section-heading{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;color:var(--color-text);margin-bottom:var(--space-4);}
.section-intro{font-size:var(--text-lg);color:var(--color-text-muted);margin-bottom:var(--space-10);max-width:60ch;}
.content-container{padding:clamp(var(--space-8),4vw,var(--space-16)) 0;}
.prose{max-width:var(--content-default);margin:0 auto;}
.prose h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-text);margin-top:var(--space-12);margin-bottom:var(--space-4);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin-top:var(--space-8);margin-bottom:var(--space-3);}
.prose h4{font-family:var(--font-body);font-size:var(--text-base);font-weight:700;margin-top:var(--space-6);margin-bottom:var(--space-2);}
.prose p{margin-bottom:var(--space-4);line-height:1.7;color:var(--color-text);}
.prose ul,.prose ol{margin-bottom:var(--space-4);padding-left:var(--space-6);}
.prose li{margin-bottom:var(--space-2);line-height:1.65;}
.prose strong{font-weight:600;color:var(--color-text);}
.prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;}
.prose a:hover{color:var(--color-primary-hover);}

/* ========== HERO ========== */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:clamp(500px,70vh,800px);padding:var(--space-16) var(--space-4);text-align:center;}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(14,56,66,0.88) 0%,rgba(26,92,107,0.82) 40%,rgba(42,138,156,0.75) 70%,rgba(26,92,107,0.85) 100%);}
.hero-content{position:relative;z-index:1;max-width:800px;}
.hero-eyebrow{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.7);margin-bottom:var(--space-4);}
.hero-title{font-family:var(--font-display);font-size:var(--text-hero);font-weight:700;color:#fff;margin-bottom:var(--space-6);line-height:1.1;}
.hero-subtitle{font-family:var(--font-body);font-size:var(--text-lg);color:rgba(255,255,255,0.85);margin-bottom:var(--space-8);max-width:600px;margin-inline:auto;}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;}

/* ========== PAGE HEROES ========== */
.page-hero{position:relative;padding:clamp(var(--space-12),6vw,var(--space-20)) 0;padding-top:clamp(var(--space-16),8vw,var(--space-24));overflow:hidden;background-size:cover;background-position:center;}
.page-hero::before{content:'';position:absolute;inset:0;z-index:0;}
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:#fff;margin-bottom:var(--space-4);}
.page-hero-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.65);margin-bottom:var(--space-3);}
.page-hero-sub{font-size:var(--text-lg);color:rgba(255,255,255,0.8);max-width:55ch;}
.page-hero h1, .page-hero-eyebrow, .page-hero-sub { text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.page-hero-teal{background-color:#1a5c6b;}
.page-hero-teal::before{background:linear-gradient(135deg,rgba(14,56,66,0.95) 0%,rgba(26,92,107,0.92) 60%,rgba(42,122,140,0.90) 100%);}
.page-hero-accent{background-color:#e8702a;}
.page-hero-accent::before{background:linear-gradient(135deg,rgba(184,79,21,0.95) 0%,rgba(232,112,42,0.92) 60%,rgba(240,149,85,0.90) 100%);}
.page-hero-dark{background-color:#1c2b33;}
.page-hero-dark::before{background:linear-gradient(135deg,rgba(28,43,51,0.95) 0%,rgba(42,63,74,0.92) 60%,rgba(26,92,107,0.90) 100%);}
.page-hero-kids{background-color:#e8702a;}
.page-hero-kids::before{background:linear-gradient(135deg,rgba(232,112,42,0.95) 0%,rgba(240,149,85,0.92) 40%,rgba(79,179,196,0.90) 100%);}
.page-hero-family{background-color:#1a5c6b;}
.page-hero-family::before{background:linear-gradient(135deg,rgba(14,56,66,0.95) 0%,rgba(26,92,107,0.92) 50%,rgba(232,112,42,0.88) 100%);}

/* ========== STATS ========== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--space-6);}
.stat-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;}
.stat-number{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-2);}
.stat-label{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text);margin-bottom:var(--space-2);}
.stat-desc{font-size:var(--text-sm);color:var(--color-text-muted);max-width:100%;}

/* ========== PILLAR CARDS ========== */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-6);}
.pillar-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-6);text-decoration:none;color:var(--color-text);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive),border-color var(--transition-interactive);cursor:pointer;}
.pillar-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--color-primary-highlight);}
.pillar-icon{width:48px;height:48px;color:var(--color-primary);margin-bottom:var(--space-4);}
.pillar-card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);}
.pillar-card p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:100%;}

/* ========== FEATURED ARTICLES ========== */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-6);}
.featured-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:var(--color-text);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.featured-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.featured-img{height:180px;width:100%;background-size:cover;background-position:center;position:relative;}
.featured-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.3) 100%);}
.featured-body{padding:var(--space-5);}
.featured-body .badge{margin-bottom:var(--space-3);}
.featured-body h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);}
.featured-body p{font-size:var(--text-sm);color:var(--color-text-muted);}

/* ========== CTA ========== */
.section-cta{background:var(--color-surface-offset);}
.cta-box{max-width:var(--content-default);margin:0 auto;text-align:center;}
.cta-content h2{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-4);}
.cta-content>p{color:var(--color-text-muted);margin-bottom:var(--space-6);max-width:50ch;margin-inline:auto;}
.cta-form{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-4);max-width:480px;margin-inline:auto;}
.cta-form input{flex:1;min-width:200px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-sm);color:var(--color-text);}
.cta-form input::placeholder{color:var(--color-text-faint);}
.cta-form input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight);}
.cta-disclaimer{font-size:var(--text-xs);color:var(--color-text-faint);}

/* ========== TRUST ========== */
.trust-bar{text-align:center;padding:var(--space-4) 0;}
.trust-label{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:0.05em;}
.trust-items{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4) var(--space-8);}
.trust-items span{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;}

/* ========== TABLES ========== */
.table-wrap{overflow-x:auto;margin:var(--space-6) 0;border-radius:var(--radius-lg);border:1px solid var(--color-divider);}
.data-table{width:100%;font-size:var(--text-sm);}
.data-table th{background:var(--color-surface-offset);font-weight:600;text-align:left;padding:var(--space-3) var(--space-4);border-bottom:2px solid var(--color-divider);white-space:nowrap;color:var(--color-text);}
.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);color:var(--color-text);}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--color-surface-offset);}
.data-table .highlight-row td{background:var(--color-primary-highlight);font-weight:600;}
.data-table a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;}
.data-table a:hover{color:var(--color-primary-hover);}

/* ========== PATHWAY ========== */
.pathway-diagram{max-width:600px;margin:var(--space-8) auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);}
.pathway-step{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.08);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);width:100%;}
.pathway-num{flex-shrink:0;width:36px;height:36px;background:var(--color-primary);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);}
.pathway-info{font-size:var(--text-sm);line-height:1.5;}
.pathway-info strong{color:var(--color-text);}
.pathway-arrow{font-size:var(--text-lg);color:var(--color-text-faint);}

/* ========== PROFILES ========== */
.profiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4);margin:var(--space-6) 0;}
.profile-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);}
.profile-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-1);}
.profile-detail{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;margin-bottom:var(--space-3);}
.profile-card p:last-child{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;}
.profile-card .profile-links{margin-top:var(--space-3);display:flex;gap:var(--space-3);flex-wrap:wrap;}
.profile-card .profile-links a{font-size:var(--text-xs);color:var(--color-primary);text-decoration:none;font-weight:600;}
.profile-card .profile-links a:hover{text-decoration:underline;}

/* ========== CALLOUTS ========== */
.callout{border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin:var(--space-6) 0;}
.callout h4{font-family:var(--font-body);font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-3);}
.callout ul{padding-left:var(--space-5);}
.callout li{margin-bottom:var(--space-2);font-size:var(--text-sm);}
.callout-warning{background:var(--color-warning-highlight);border-left:4px solid var(--color-warning);}
.callout-error{background:var(--color-error-highlight);border-left:4px solid var(--color-error);}
.callout-info{background:var(--color-primary-highlight);border-left:4px solid var(--color-primary);}
.callout-info p{margin:0;}

/* ========== PRODUCT ACTIONS ========== */
.product-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-6) 0;}

/* ========== AFFILIATE DISCLOSURE ========== */
.affiliate-disclosure{background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:var(--space-5);margin-top:var(--space-12);font-size:var(--text-sm);color:var(--color-text-muted);}
.affiliate-disclosure p{margin:0;max-width:none;}

/* ========== RELATED GUIDES ========== */
.related-guides{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-divider);}
.related-guides h3{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-6);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:var(--space-4);}
.related-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);text-decoration:none;color:var(--color-text);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.related-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-2);}
.related-card p{font-size:var(--text-sm);color:var(--color-text-muted);}

/* ========== KIDS SECTION ========== */
.kids-prose h2{color:var(--color-accent);}
.kids-fact-box{background:var(--color-accent-highlight);border-left:4px solid var(--color-accent);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:var(--space-6) 0;font-size:var(--text-sm);font-weight:600;color:var(--color-text);}
.kids-profile{border-left:3px solid var(--color-accent);}
.moves-list li{margin-bottom:var(--space-4);}

/* ========== FOOTER ========== */
.site-footer{background:var(--color-surface-offset);border-top:1px solid var(--color-divider);padding:var(--space-12) 0 var(--space-8);}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--space-8);margin-bottom:var(--space-8);}
.footer-col h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-4);color:var(--color-text);}
.footer-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:var(--space-2);}
.footer-col a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-interactive);}
.footer-col a:hover{color:var(--color-primary);}
.footer-form{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);}
.footer-form input{flex:1;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-sm);min-width:0;color:var(--color-text);}
.footer-form input:focus{outline:none;border-color:var(--color-primary);}
.footer-social{display:flex;gap:var(--space-4);margin-top:var(--space-2);}
.footer-social a{color:var(--color-text-muted);transition:color var(--transition-interactive);}
.footer-social a:hover{color:var(--color-primary);}
.footer-bottom{border-top:1px solid var(--color-divider);padding-top:var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-faint);}
.footer-bottom a{color:var(--color-text-faint);text-decoration:none;}
.footer-bottom a:hover{color:var(--color-primary);}

/* ========== SCROLL REVEALS ========== */
.fade-in{opacity:1;}
@supports(animation-timeline:scroll()){
  .fade-in{opacity:0;animation:revealFade linear both;animation-timeline:view();animation-range:entry 0% entry 80%;}
}
@keyframes revealFade{to{opacity:1;}}

/* ========== PAGE TRANSITIONS ========== */
.page{animation:pageIn 350ms cubic-bezier(0.16,1,0.3,1);}
@keyframes pageIn{from{opacity:0;} to{opacity:1;}}

/* ========== RESPONSIVE VIDEO EMBEDS ========== */
.video-embed{position:relative;width:100%;padding-bottom:56.25%;margin:var(--space-6) 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-offset);}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
/* ========== VIDEO GRID (matches profile card sizing) ========== */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4);margin:var(--space-6) 0;}
.video-grid .video-embed{width:100%;margin:0;}

/* ========== DESTINATION CARDS ========== */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--space-6);margin:var(--space-8) 0;}
.dest-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.dest-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.dest-card-img{height:200px;background-size:cover;background-position:center;position:relative;}
.dest-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.5) 100%);}
.dest-card-img .dest-label{position:absolute;bottom:var(--space-3);left:var(--space-4);z-index:1;color:#fff;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.dest-card-body{padding:var(--space-5);}
.dest-card-body p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-3);}
.dest-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-xs);}
.dest-meta span{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);font-weight:500;}

/* ========== ILLUSTRATION ACCENT (removed) ========== */

/* ========== PRODUCT TOOLTIP ========== */
.product-link{position:relative;color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;font-weight:600;cursor:pointer;}
.product-link:hover{color:var(--color-primary-hover);}
.product-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:var(--shadow-lg);z-index:50;width:200px;text-align:center;pointer-events:none;}
.product-tooltip img{width:100%;height:auto;border-radius:var(--radius-sm);margin-bottom:var(--space-2);}
.product-tooltip .tooltip-name{font-size:var(--text-xs);font-weight:600;color:var(--color-text);}
.product-tooltip .tooltip-price{font-size:var(--text-xs);color:var(--color-accent);font-weight:700;}
.product-link:hover .product-tooltip,
.product-link.tooltip-active .product-tooltip{display:block;pointer-events:auto;}

/* ========== COLLEGE TEAM CARDS ========== */
.college-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4);margin:var(--space-6) 0;}
.college-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);text-decoration:none;color:var(--color-text);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.college-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.college-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-1);color:var(--color-primary);}
.college-card .college-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2);}
.college-card p:last-child{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin:0;}

/* ========== CAMP SEARCH ========== */
.camp-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4);margin:var(--space-6) 0;}
.camp-link-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);text-decoration:none;color:var(--color-text);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);display:block;}
.camp-link-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.camp-link-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-2);color:var(--color-primary);}
.camp-link-card p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5;}

/* ========== SECTION VISUAL BREAKS ========== */
.section-visual-break{position:relative;min-height:280px;background-size:cover;background-position:center;border-radius:var(--radius-xl);overflow:hidden;margin:var(--space-8) 0;}
.section-visual-break::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.65) 100%);}
.section-visual-break .visual-break-text{position:relative;z-index:1;padding:var(--space-10) var(--space-8);color:#fff;}
.section-visual-break .visual-break-text h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-3);text-shadow:0 2px 8px rgba(0,0,0,0.5);}
.section-visual-break .visual-break-text p{font-size:var(--text-base);max-width:50ch;opacity:0.9;text-shadow:0 1px 4px rgba(0,0,0,0.4);}
.prose .section-visual-break .visual-break-text h3,
.prose .section-visual-break .visual-break-text p{color:#fff;}

/* ========== YOUNG KIDS GEAR ========== */
.play-gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--space-4);margin:var(--space-6) 0;}
.play-gear-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);}
.play-gear-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-1);color:var(--color-text);}
.play-gear-card .play-gear-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);}
.play-gear-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin:0;}

/* ========== RESULTS SECTION ========== */
.results-year{margin:var(--space-8) 0;}
.results-year h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-2);}
.results-year .results-meta{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);}

/* ========== QUICK PICKS ========== */
.quick-picks{margin-bottom:var(--space-8);padding:var(--space-6);background:var(--color-surface-offset);border-radius:var(--radius-lg);}
.quick-picks h2{margin-top:0;margin-bottom:var(--space-4);}

/* ========== AD PLACEHOLDERS ========== */
.ad-placeholder{background:var(--color-surface-offset);border:1px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;font-size:var(--text-xs);color:var(--color-text-faint);margin:var(--space-6) 0;}

/* ========== SKIP LINK ========== */
.skip-link{position:fixed;top:-100%;left:var(--space-4);z-index:9999;padding:var(--space-3) var(--space-6);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);text-decoration:none;font-weight:600;font-size:var(--text-sm);transition:top 200ms;}
.skip-link:focus{top:var(--space-4);}

/* ========== RESPONSIVE ========== */
@media(max-width:767px){
  .hero-title{font-size:clamp(1.8rem,5vw,3rem);}
  .hero{min-height:auto;padding:var(--space-12) var(--space-4);}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{text-align:center;}
  .stats-grid,.pillar-grid,.featured-grid,.profiles-grid,.related-grid,.dest-grid,.college-grid,.camp-links,.play-gear-grid,.video-grid{grid-template-columns:1fr;}
  .product-tooltip{left:0;transform:none;width:180px;}
}

/* ========== VIDEO THUMB PLAY BUTTON ========== */
.video-thumb{position:relative;}
.video-thumb .play-btn{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));transition:transform 180ms cubic-bezier(0.16,1,0.3,1);}
.video-thumb:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);}

/* ========== US MAP ========== */
.us-map-container{position:relative;max-width:960px;margin:var(--space-8) auto;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-4);overflow:hidden;}
.us-map-container h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;text-align:center;margin-bottom:var(--space-4);color:var(--color-text);}
.us-map-svg{width:100%;height:auto;display:block;}
.us-states-group path{fill:var(--color-surface-offset);stroke:var(--color-border);stroke-width:0.8;transition:fill 140ms;}
.us-states-group path:hover{fill:var(--color-divider);}
.separator1{stroke:var(--color-border);stroke-width:1.5;}
.map-dot{cursor:pointer;transition:r 180ms cubic-bezier(0.16,1,0.3,1),fill 180ms cubic-bezier(0.16,1,0.3,1);}
.map-dot:hover{r:8;}
.map-label{font-family:var(--font-body);font-size:9px;fill:var(--color-text);pointer-events:none;font-weight:600;opacity:0;transition:opacity 180ms;}
.map-dot:hover+.map-label,.map-dot:hover~.map-label{opacity:1;}
.map-group:hover .map-label{opacity:1;}
.map-group:hover .map-dot{r:8;}

/* ========== DESTINATION CARD LINKS ========== */
.dest-link{display:inline-block;margin-top:var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--color-accent);text-decoration:none;transition:color 180ms cubic-bezier(0.16,1,0.3,1);}
.dest-link:hover{color:var(--color-accent-hover);text-decoration:underline;}

/* ========== FAMILY PHOTO GALLERY (ABOUT) ========== */
.family-gallery{margin:var(--space-8) 0;}
.family-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
.family-gallery-item{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;}
.family-gallery-item.family-gallery-wide{grid-column:span 2;aspect-ratio:16/9;}
.family-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms cubic-bezier(0.16,1,0.3,1);}
.family-gallery-item:hover img{transform:scale(1.04);}

/* About story photos - uncropped, woven into text */
.about-story{overflow:hidden;}
.about-story{display:block;}
.about-story > p{max-width:100%;margin:0 0 var(--space-4) 0;}
.about-story > h2{clear:both;margin-top:var(--space-7);}
/* Single story photos: center, cap height (so portraits don't dominate), and let the image determine its own width. */
.story-photo{display:block;margin:var(--space-6) auto;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.10);width:fit-content;max-width:100%;}
.story-photo img{display:block;height:auto;width:auto;max-width:100%;max-height:420px;}
.story-photo-wide img{max-height:480px;}
/* Paired photos sit side-by-side and share a unified max height so they line up cleanly. */
.story-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center;clear:both;margin:var(--space-6) 0;}
.story-photo-pair .story-photo{margin:0;width:100%;}
.story-photo-pair .story-photo img{width:100%;max-height:340px;object-fit:contain;background:var(--color-surface,#f8f5f0);}
@media(max-width:768px){
  .story-photo img{max-height:360px;}
  .story-photo-wide img{max-height:380px;}
  .story-photo-pair{grid-template-columns:1fr;}
  .story-photo-pair .story-photo img{max-height:320px;}
}
@media(max-width:767px){
  .family-gallery-grid{grid-template-columns:1fr 1fr;}
  .family-gallery-item.family-gallery-wide{grid-column:span 2;}
}

/* ========== GYM/CAMP DIRECTORY ========== */
.gym-filters{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);}
.gym-filters input,.gym-filters select{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm);color:var(--color-text);font-family:var(--font-body);min-width:0;}
.gym-filters input{flex:1;min-width:200px;}
.gym-filters select{min-width:140px;}
.gym-filters input:focus,.gym-filters select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight);}
.gym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--space-4);}
.gym-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.gym-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.gym-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-1);}
.gym-card-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}
.gym-type-badge{display:inline-flex;padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.gym-type-badge.indoor{background:var(--color-primary-highlight);color:var(--color-primary);}
.gym-type-badge.outdoor{background:var(--color-accent-highlight);color:var(--color-accent);}
.gym-type-badge.both{background:var(--color-success-highlight);color:var(--color-success);}
.gym-programs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-3);}
.gym-programs span{font-size:0.65rem;padding:2px 6px;border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);font-weight:500;}
.gym-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-3);}
.gym-card-link{font-size:var(--text-sm);font-weight:600;color:var(--color-accent);text-decoration:none;}
.gym-card-link:hover{text-decoration:underline;color:var(--color-accent-hover);}
.gym-count{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);}
.gym-no-results{text-align:center;padding:var(--space-8);color:var(--color-text-muted);font-size:var(--text-base);}
@media(max-width:767px){.gym-grid{grid-template-columns:1fr;}.gym-filters input{min-width:100%;}}

/* ========== PRODUCT CARDS (ROPES, CHALK) ========== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4);margin:var(--space-6) 0;}
.product-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.product-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-1);}
.product-card .product-price{font-size:var(--text-sm);font-weight:700;color:var(--color-accent);margin-bottom:var(--space-1);}
.product-card .product-best{font-size:var(--text-xs);color:var(--color-primary);font-weight:600;margin-bottom:var(--space-3);}
.product-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-3);}
.product-card-links{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.product-card-links a{font-size:var(--text-xs);font-weight:600;color:var(--color-accent);text-decoration:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-accent);transition:background var(--transition-interactive),color var(--transition-interactive);}
.product-card-links a:hover{background:var(--color-accent);color:#fff;}
@media(max-width:767px){.product-grid{grid-template-columns:1fr;}}

/* ========== PROFILE LINKS ACCENT COLOR ========== */
.profile-card .profile-links a{color:var(--color-accent);}
.profile-card .profile-links a:hover{color:var(--color-accent-hover);}

/* ========== STAGGER FADE-IN ANIMATION ========== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.stagger-in{opacity:0;}
.stagger-in.visible{animation:fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) both;}

/* ========== COUNTER ANIMATION ========== */
.stat-number{transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);}
.stat-card:hover .stat-number{transform:scale(1.08);}

/* ========== HERO PARALLAX ========== */
.hero-bg{transition:transform 0.1s linear;}
.page-hero{transition:background-position 0.1s linear;}

/* ========== ABOUT PAGE: NO CROP GALLERY ========== */
.family-gallery-item.no-crop{aspect-ratio:auto;}
.family-gallery-item.no-crop img{object-fit:contain;background:var(--color-surface-offset);}

/* ========== SCHOLARSHIP PAGE ========== */
.scholarship-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h / 0.06);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);}
.scholarship-card h4{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-2);}
.scholarship-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;}

/* ========== BLOG SECTION ========== */
.blog-hero{padding:var(--space-16) 0 var(--space-12);background:linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));color:var(--color-text-inverse);text-align:center;}
.blog-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-4);color:#fff;}
.blog-hero .section-eyebrow{color:rgba(255,255,255,0.8);margin-bottom:var(--space-3);}
.blog-hero-sub{font-size:var(--text-base);color:rgba(255,255,255,0.85);max-width:600px;margin:0 auto;line-height:1.6;}

/* Blog Email Banner */
.blog-email-banner{display:flex;align-items:center;gap:var(--space-8);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);margin-bottom:var(--space-10);}
.blog-email-content{flex:1;}
.blog-email-content h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2);color:var(--color-text);}
.blog-email-content p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin:0;}
.blog-email-form{flex-shrink:0;}
.email-capture-form{display:flex;gap:var(--space-2);align-items:center;}
.email-capture-form input[type="email"]{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);min-width:240px;transition:border-color var(--transition-interactive);}
.email-capture-form input[type="email"]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight);}
.email-capture-form button{white-space:nowrap;}

@media(max-width:768px){
  .blog-email-banner{flex-direction:column;gap:var(--space-4);text-align:center;padding:var(--space-5);}
  .email-capture-form{flex-direction:column;width:100%;}
  .email-capture-form input[type="email"]{min-width:0;width:100%;}
  .email-capture-form button{width:100%;}
}

/* Blog Filters */
.blog-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-divider);}
.blog-filter-btn{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);background:transparent;color:var(--color-text-muted);font-size:var(--text-sm);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-interactive);}
.blog-filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary);}
.blog-filter-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}

/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));gap:var(--space-6);}
@media(max-width:400px){.blog-grid{grid-template-columns:1fr;}}

/* Blog Card */
.blog-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.25s ease;}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-primary);}
.blog-card-content{padding:var(--space-5) var(--space-6);}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);}
.blog-category{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);color:#fff;}
.cat-getting-started{background:#1a5c6b;}
.cat-gear{background:#e8702a;}
.cat-training-safety{background:#2d8659;}
.cat-competitions{background:#8b5cf6;}
.cat-family-climbing{background:#d97706;}
.blog-date,.blog-read-time{font-size:var(--text-xs);color:var(--color-text-muted);}
.blog-card h3{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;line-height:1.35;margin-bottom:var(--space-3);}
.blog-card h3 a{color:var(--color-text);text-decoration:none;transition:color var(--transition-interactive);}
.blog-card h3 a:hover{color:var(--color-primary);}
.blog-card-excerpt{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-4);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-read-more{font-size:var(--text-sm);font-weight:600;color:var(--color-accent);text-decoration:none;transition:color var(--transition-interactive);}
.blog-read-more:hover{color:var(--color-accent-hover);}

/* Blog Article Page */
.blog-article{padding:var(--space-12) 0 var(--space-16);}
.container-narrow{max-width:720px;margin:0 auto;padding:0 var(--space-6);}
.blog-back-link{display:inline-block;font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;margin-bottom:var(--space-6);transition:color var(--transition-interactive);}
.blog-back-link:hover{color:var(--color-primary);}
.blog-article-header{margin-bottom:var(--space-10);padding-bottom:var(--space-8);border-bottom:1px solid var(--color-divider);}
.blog-article-header h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;line-height:1.25;margin:var(--space-4) 0 var(--space-3);color:var(--color-text);}
.blog-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);}
.blog-article-author{font-size:var(--text-sm);color:var(--color-text-muted);}

/* Article Body */
.blog-article-body{font-size:var(--text-base);line-height:1.75;color:var(--color-text);}
.blog-article-body h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin:var(--space-10) 0 var(--space-4);color:var(--color-text);padding-top:var(--space-4);border-top:1px solid var(--color-divider);}
.blog-article-body h3{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin:var(--space-8) 0 var(--space-3);color:var(--color-text);}
.blog-article-body p{margin-bottom:var(--space-5);}
.blog-article-body ul,.blog-article-body ol{margin:var(--space-4) 0;padding-left:var(--space-6);}
.blog-article-body li{margin-bottom:var(--space-2);line-height:1.6;}
.blog-article-body a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;}
.blog-article-body a:hover{color:var(--color-accent-hover);}
.blog-article-body strong{font-weight:700;color:var(--color-text);}
.blog-article-body table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:var(--text-sm);}
.blog-article-body th,.blog-article-body td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-divider);}
.blog-article-body th{font-weight:700;background:var(--color-surface-offset);color:var(--color-text);}
.blog-article-body blockquote{border-left:3px solid var(--color-accent);padding-left:var(--space-5);margin:var(--space-6) 0;color:var(--color-text-muted);font-style:italic;}

/* In-article CTA */
.blog-inline-cta{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-8);margin:var(--space-10) 0;text-align:center;}
.blog-inline-cta h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2);color:var(--color-text);}
.blog-inline-cta p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);}
.blog-inline-cta .email-capture-form{justify-content:center;}

/* Related Articles */
.blog-related{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-divider);}
.blog-related h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-6);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:var(--space-4);}
.related-article-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;transition:all 0.25s ease;}
.related-article-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary);}
.related-article-card h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--color-text);line-height:1.35;}
.related-article-card .blog-read-more{margin-top:auto;font-size:var(--text-xs);}

/* Blog Section */
.blog-section{padding:var(--space-10) 0 var(--space-16);}

/* Blog card hidden state for filtering */
.blog-card.hidden{display:none;}