/* ===== Base (v10 rebuild) ===== */
:root{
  --bg: #bce4e8;
  --paper:#fefcf7; --ink:#0e1420;
  --text:#101323; --muted:#5b6275;
  --brand:#0077ff; --brand-2:#be2a9e; --accent:#ffb703;
  --shadow: 0 8px 22px rgba(0,0,0,.12);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ background: var(--bg); font-family:'Della Respira', serif; color:var(--text); }

.container{width:min(1100px, 92vw); margin-inline:auto; padding: clamp(12px, 2vw, 18px);}
.section{padding: clamp(24px, 5vw, 56px) 0;}
.section.alt{background: rgba(255,255,255,.08);}

.grid-2{display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(18px, 3vw, 28px);}
@media (max-width: 900px){ .grid-2{grid-template-columns: 1fr;} }

/* ===== Masthead Left Header ===== */
.site-header{ position:sticky; top:0; z-index:100; }
.masthead{
  display:grid; grid-template-columns: auto 1fr; align-items:center; gap: 16px;
  padding: 14px clamp(12px, 2vw, 18px);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 8px 22px rgba(0,0,0,.12);
  position:relative;
  border-radius: 0 0 18px 18px;
}
.masthead::before{
  content:""; position:absolute; inset:0;
  background: url("image.webp") repeat; opacity:.08; pointer-events:none; border-radius: 0 0 18px 18px;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
.brand-art{width:96px; height:auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.2));}
.brand-name{font-size: clamp(22px, 3.2vw, 34px); margin:0}
.tagline{margin: 2px 0 0; font-weight:700; opacity:.9}
.site-nav{display:flex; justify-content:flex-end}
.site-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0;}
.site-nav a{font-weight:800; color:#0b0d19; text-decoration:none}
.site-nav a:hover{ text-decoration:underline; text-underline-offset:6px; }
@media (max-width: 720px){ .site-nav ul{flex-wrap:wrap; justify-content:flex-end;} .brand-art{width:76px;} }

/* Hero band */
.hero.band{padding: 10px 0; background: transparent;}
.hero-kicker{margin:0; font-weight:700; text-align:center}

/* Cards */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 18px);}
@media (max-width: 900px){ .cards{grid-template-columns: 1fr;} }
.card{ position:relative; background: var(--paper); border:1px solid rgba(0,0,0,.08); border-radius:18px; padding: clamp(14px, 2vw, 20px); box-shadow: var(--shadow);}
.card::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: url("image.webp") repeat; opacity:.05;}
.card h3{margin-top:0}
.program-card{padding:0; overflow:hidden}
.program-card .media{margin:0; overflow:hidden; aspect-ratio: 16/9}
.program-card .media img{width:100%; height:100%; object-fit: cover; display:block}
.program-card .content{padding: clamp(12px, 2vw, 16px)}

/* Tags */
ul.tags{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:12px 0 0; list-style:none}
ul.tags li{font: 700 12px/1 'Della Respira', serif; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.08)}

/* About */
.facts div{display:flex; gap:10px; justify-content:space-between; border-bottom:1px dotted rgba(0,0,0,.12); padding:6px 0}
.facts dt{font-weight:800}
.facts dd{margin:0}

/* Testimonials carousel */
.carousel{position:relative; background: var(--paper); border:1px solid rgba(0,0,0,.08); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(14px,2vw,20px)}
.carousel-viewport{overflow:hidden}
.slide{display:none; margin:0}
.slide.current{display:block}
blockquote{font-size: clamp(16px, 2.2vw, 20px); margin:0 0 8px}
figcaption{color: var(--muted); font-weight:700}
.carousel-controls{position:absolute; inset-block:0; inset-inline:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.carousel-controls button{pointer-events:auto; border:0; background:#fff; width:44px; height:44px; border-radius:50%; font: 700 22px/1 'Della Respira', serif; opacity:.85; box-shadow: var(--shadow);}
.carousel-dots{display:flex; gap:8px; justify-content:center; margin-top:10px}
.carousel-dots .dot{width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.2); background:#fff}
.carousel-dots .dot.active{background: #ffd166; border-color: transparent}

/* Gallery scroller */
#gallery{padding-top: 0;}
#gallery h2{padding-inline: var(--pad, 0); text-align:center}
#gallery .scroller{display:grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x:auto; padding: 8px 2px 14px; scroll-snap-type: x mandatory;}
@media (min-width: 700px){ #gallery .scroller{ grid-auto-columns: 36%; } }
#gallery figure{ scroll-snap-align: start; margin:0; background: var(--paper); border-radius:14px; padding:8px; border:1px solid rgba(0,0,0,.08); }
#gallery img{ width:100%; height: clamp(180px, 30vw, 320px); object-fit: cover; border-radius:10px; display:block; }
#gallery figcaption{ font-size: 13px; opacity:.8; margin-top:6px; }
#gallery .scroll-controls{ display:flex; justify-content:center; gap:8px; margin-top:6px; }
#gallery .scroll-controls button{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.12); cursor:pointer; }

/* Forms */
.form{display:grid; gap:10px;}
input, textarea{ border: 1px solid rgba(0,0,0,.12); background: #fff; color: var(--text); border-radius: 12px; padding: 10px 12px; outline: none;}
input:focus, textarea:focus{border-color:#89b4ff; box-shadow: 0 0 0 3px rgba(137,180,255,.35);}
.form-status{margin-top:10px; font-weight:700;}
.form-status.success{color:green;}
.form-status.error{color:#b00020;}
.contact-email a{font-weight:800; text-decoration:none}
.contact-email a:hover{text-decoration:underline}
.muted{color: var(--muted);} .small{font-size: 13px;}

/* Footer */
.site-footer{border-top: 1px solid rgba(0,0,0,.1);}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 12px 0;}
.back-to-top{text-decoration:none; color:inherit; opacity:.7} .back-to-top:hover{opacity:1}

/* ===== Feature strip ===== */
.feature-strip .feature-card{padding:0; overflow:hidden}
.feature-strip img{width:100%; height:auto; display:block; border-radius: 16px 16px 12px 12px;}
.feature-strip figcaption{font-weight:700; font-size:14px; margin-top:8px;}

/* ===== Gallery grid (no cropping) ===== */
.gallery-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;}
.gallery-grid .tile{background: var(--paper); border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:8px; box-shadow: var(--shadow);}
.gallery-grid img{width:100%; height:auto; object-fit: contain; background: #fff; border-radius:10px; display:block;}
.gallery-grid figcaption{font-size: 13px; opacity:.8; margin-top:6px; text-align:center}

/* ===== Lightbox ===== */
.lightbox{position:fixed; inset:0; background: rgba(0,0,0,.72); display:none; align-items:center; justify-content:center; flex-direction:column; padding: 24px; z-index: 9999;}
.lightbox.open{display:flex;}
.lb-img{max-width: min(96vw, 1200px); max-height: 80vh; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.4); background:#000;}
.lb-cap{color:#fff; margin-top:10px; text-align:center; font-weight:700}
.lb-prev,.lb-next,.lb-close{position:absolute; top:50%; transform: translateY(-50%); border:0; width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.9); font:700 24px/1 'Della Respira', serif; box-shadow: var(--shadow); cursor:pointer}
.lb-prev{left:20px} .lb-next{right:20px}
.lb-close{top:16px; right:16px; transform:none; width:40px; height:40px}
@media (max-width:700px){ .lb-prev{left:8px} .lb-next{right:8px} .lb-img{max-height:70vh} }

/* === v12 compact vertical rhythm === */
.section{ padding: clamp(16px, 3.5vw, 36px) 0; }
.hero.band{ padding: 6px 0; }
.container{ padding: clamp(8px, 1.6vw, 14px); }
.cards{ gap: clamp(8px, 1.6vw, 14px); }
.footer-inner{ padding: 8px 0; }
.card{ border-radius: 14px; }

/* v12.1 tighter rhythm @14px */
.section{ padding: 14px 0 !important; }
.hero.band{ padding: 6px 0 !important; }
.container{ padding: 10px 14px !important; }
.cards{ gap: 12px !important; }
.footer-inner{ padding: 10px 0 !important; }

#gallery .gallery-grid img{ cursor: zoom-in; }


/* v12.2 lightbox aspect fix */
.lightbox .lb-img{
  width: auto !important;
  height: auto !important;
  max-width: min(96vw, 1200px) !important;
  max-height: 85vh !important;
  object-fit: contain !important;
  display: block;
}