/* =========================================================
   Castleview Private Academy — style.css (cleaned + deduped)
   Notes:
   - Fixed unbalanced braces that could stop CSS parsing mid-file.
   - Removed duplicate/overlapping banner & close-button rules.
   - Kept all existing classes so functionality stays intact.
   ========================================================= */

/* =========================================================
   Root tokens
   ========================================================= */
:root{
  --brand-red:#c62828;
  --brand-green:#2e7d32;
  --brand-teal:#2eb8b8;
  --ink:#1f2937;
  --muted:#6b7280;
  --paper:#FFF9EB;
  --card:#fff;
  --ring:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
  --pill:#ecfdf5;
}

/* =========================================================
   Base + container
   ========================================================= */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Nunito",system-ui,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand-red);text-decoration:none}

/* Site-wide content width rule (use .container everywhere for “global width”) */
.container{width:min(1100px,92%);margin-inline:auto}

/* If you use a wrapper named .content, make it follow the same global width */
.content{width:min(1100px,92%);margin-inline:auto}

/* =========================================================
   Topbar (sticky) + primary nav
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:var(--pill);
  border-bottom:1px solid var(--ring);
  backdrop-filter:saturate(180%) blur(6px);
  overflow:visible; /* allow scaled logo to show outside the row */
}
.topbar .container{
  display:grid;
  grid-template-columns:auto 1fr; /* brand | nav */
  align-items:center;
  gap:1rem;
  padding:.55rem 0; /* slightly tighter to offset bigger-looking logo */
}

/* Brand block: (logo | title) */
.brand{
  display:grid;
  grid-template-columns:72px 1fr; /* logo track + flexible title */
  align-items:center;
  gap:2rem; /* space between logo and name */
  min-width:0;
}

/* Logo: visually larger without making the bar taller */
.brand-logo{
  width:85px; height:85px; /* layout box */
  border-radius:50%;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--ring);
  box-shadow:var(--shadow);
  transform:scale(1.25); /* looks ~90px but doesn’t push layout */
  transform-origin:left center;
  will-change:transform;
}

/* Force the brand title to use Pacifico (so it never falls back) */
.brand-title{
  font-family:"Pacifico", cursive !important;
  font-synthesis:none;
  color:var(--brand-red);
  font-size:clamp(1.35rem,2.7vw,2rem);
  line-height:1.1;
  letter-spacing:.2px;
  white-space:normal;
}

/* Wrap title + pills vertically */
.brand-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
}

/* Special green pill for the brand line */
.pill--tutor{
  background:var(--brand-green);
  color:#fff;
  border-color:rgba(0,0,0,0);
  font-size:.78rem;
  padding:.18rem .7rem;
  text-transform:sentencecase;
  letter-spacing:.06em;
}
.pill-row{
  display:flex;
  flex-direction:row;
  gap:.4rem;
  margin-top:.2rem;
  flex-wrap:wrap;
}

/* Desktop nav */
.navlinks{
  display:flex; align-items:center; gap:.7rem;
  justify-content:flex-end; min-width:0; flex-wrap:wrap;
}
.navlinks a{
  padding:.5rem .75rem;
  border-radius:999px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
.navlinks a:hover{background:#f3f4f6;color:var(--brand-green)}
.nav-cta{
  background:var(--brand-red);
  color:#fff;
  border-radius:999px;
  padding:.55rem 1rem;
  font-weight:800;
  box-shadow:var(--shadow);
}

/* Mobile burger */
.menu-btn{
  display:none;
  font-weight:800;
  border:2px solid var(--ring);
  padding:.5rem .8rem;
  border-radius:12px;
  background:#fff;
}
@media (max-width:980px){
  .navlinks{display:none}
  .menu-btn{display:block;margin-left:auto}
}

/* =========================================================
   Optional site header (logo – title – logo) in drawer
   ========================================================= */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem 1.25rem;
}
.site-header .brand-mark,
.site-header .logo{height:64px; width:auto; object-fit:contain}
.site-header .titles{text-align:center; flex:1}
.site-header h1{margin:0; font-size:clamp(1.25rem, 2.2vw + .5rem, 2rem)}
.site-header p{margin:.15rem 0 0; font-size:clamp(.9rem, 1.2vw + .35rem, 1.05rem); opacity:.9}
@media (max-width:700px){
  .site-header{flex-direction:column}
  .site-header .titles{text-align:center}
}

/* =========================================================
   Drawer + overlay
   ========================================================= */
.drawer{
  position:fixed; inset:0 0 0 auto;
  width:min(340px,88%);
  background:#fff;
  transform:translateX(100%);
  transition:.35s ease;
  box-shadow:-12px 0 30px rgba(0,0,0,.08);
  z-index:1100; display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem; border-bottom:1px solid var(--ring);
}
.drawer a{
  padding:1rem 1.1rem; border-bottom:1px dashed #eee;
  color:var(--ink); font-weight:700;
}
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:.3s; z-index:1090;
}
.overlay.show{opacity:1; pointer-events:auto}

/* Prevent background scroll while panels/dialogs are open */
body.no-scroll, .no-scroll{overflow:hidden}

/* =========================================================
   Pills & Buttons
   ========================================================= */
.pill{
  display:inline-block;
  border-radius:999px;
  padding:.35rem .7rem;
  font-size:.9rem;
  border:1px solid rgba(46,125,50,.25);
  background:var(--pill);
  color:var(--brand-green);
  font-weight:800;
}
.pill.tiny{font-size:.72rem; padding:.18rem .5rem; background:#eefaf0}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; border-radius:12px; padding:.85rem 1.1rem;
}
.btn.primary{background:var(--brand-red); color:#fff; box-shadow:var(--shadow)}
.btn.ghost{border:2px solid rgba(46,125,50,.35); background:#fff; color:var(--brand-green)}
.btn.ghost:hover{border-color:var(--brand-green); background:#f0fdf4}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(900px 520px at 12% -10%, #ffffff, rgba(255,255,255,0) 60%),
    radial-gradient(1200px 700px at 110% 10%, rgba(46,125,50,.10), rgba(46,125,50,0) 60%),
    linear-gradient(180deg,#fff,#fff7e6 60%,#fff2d6 100%);
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:2rem; align-items:center;
  padding:clamp(2rem,6vw,4rem) 0;
}
.h1{
  font-family:"Merriweather",serif;
  font-weight:900; line-height:1.05; margin:.4rem 0;
  font-size:clamp(2rem,5vw,3.2rem);
}
.h1 .script{font-family:"Pacifico",cursive; color:var(--brand-red)}
.lead{color:var(--muted); font-size:clamp(1rem,2.6vw,1.125rem)}

.hero-card{
  background:var(--pill);
  border:1px solid rgba(46,125,50,.22);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem; display:grid; gap:1rem;
}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.stat{
  background:#fff; border:1px solid var(--ring); border-radius:14px;
  padding:1rem; text-align:center; cursor:pointer; transition:.15s ease;
}
.stat .big{font-weight:900; font-size:clamp(1.3rem,3.5vw,1.8rem); color:var(--brand-green)}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.stat:focus-visible{outline:3px solid rgba(46,184,184,.55); outline-offset:3px}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
}

/* =========================================================
   Sections
   ========================================================= */
section{padding:clamp(2rem,6vw,4rem) 0}
.section-head{
  display:flex; align-items:end; justify-content:space-between;
  gap:1rem; margin-bottom:1rem;
}
h2{
  font-family:"Merriweather",serif;
  font-size:clamp(1.6rem,3.6vw,2.2rem);
  margin:0; position:relative;
}
h2::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:64px; height:4px; border-radius:4px; background:var(--brand-green);
}
p.max{max-width:68ch}
.muted{color:var(--muted)}
@media (max-width:480px){
  section{padding:1.2rem 0}
}

/* =========================================================
   Cards & grids
   ========================================================= */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{
  background:var(--card); border:1px solid var(--ring);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.1rem;
}
.card h3{margin:.2rem 0 .5rem; font-size:1.1rem}
.icon{
  width:44px; height:44px; border-radius:11px;
  display:grid; place-items:center; font-size:1.2rem;
  color:#fff; background:var(--brand-green); box-shadow:var(--shadow);
}
@media (max-width:920px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

/* =========================================================
   Why & carousel (home)
   ========================================================= */
.why{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.carousel{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--ring); box-shadow:var(--shadow);
}
.slides{display:flex; transition:transform .6s ease}
.slides>*{flex:0 0 100%}
.slides img{width:100%; height:320px; object-fit:cover}
@media (max-width:920px){.why{grid-template-columns:1fr}}

/* =========================================================
   Quotes
   ========================================================= */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.quote{
  background:#fff; border:1px solid var(--ring); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem;
}
.quote .who{font-weight:800; color:var(--brand-green)}
@media (max-width:920px){.quotes{grid-template-columns:1fr}}

/* =========================================================
   Panels (generic)
   ========================================================= */
.panel{
  position:fixed; inset:0 0 0 auto; background:#fff;
  border-left:1px solid var(--ring);
  transform:translateX(100%); transition:.35s ease;
  z-index:1140; display:flex; flex-direction:column;
  box-shadow:-12px 0 30px rgba(0,0,0,.18);
}
.panel.open{transform:translateX(0)}
.panel--narrow{width:min(520px,94%)}
.panel--wide{width:min(980px,96%)}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem; border-bottom:1px solid var(--ring);
  gap:.75rem;
}

/* Allow opening panels without JS via hash (#galleryPanel etc.) */
#galleryPanel:target,
#enquiryPanel:target,
#heraldryPanel:target{
  transform:translateX(0);
}

/* =========================================================
   Unified close buttons (panels + dialogs)
   ========================================================= */
.panel-head .panel-close,
.modal-head #closeModal,
.lightbox-close{
  border:1px solid var(--ring);
  background:#fff;
  border-radius:10px;
  padding:.35rem .55rem;
  cursor:pointer;
  line-height:1;
}
.panel-head .panel-close:hover{background:#f9fafb}

/* Floating “X” style used by some panels/dialogs */
.lightbox .lightbox-close,
.panel .panel-close{
  --size:36px;
  position:absolute;
  top:10px; right:10px;
  width:var(--size); height:var(--size);
  border-radius:999px;
  border:1px solid rgba(46,125,50,.25);
  background:var(--brand-green);
  color:#fff;
  font-weight:800;
  font-size:20px;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.lightbox .lightbox-close:hover,
.panel .panel-close:hover{filter:brightness(1.05)}
.lightbox .lightbox-close:focus,
.panel .panel-close:focus{outline:2px solid #fff; outline-offset:2px}
.panel .panel-head,
.lightbox .lightbox-card{position:relative}

/* =========================================================
   Gallery (generic grid + lightbox)
   ========================================================= */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.g-item{
  padding:0; border:none; background:transparent; cursor:pointer;
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
.g-item img{
  width:100%; aspect-ratio:4/3; height:auto;
  object-fit:cover; display:block;
}

/* Lightbox dialog */
.lightbox{
  border:none; padding:0;
  width:min(980px,96%);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.lightbox::backdrop{background:rgba(0,0,0,.5)}
.lightbox-card{background:#000; border-radius:18px; padding:0; position:relative}
.lightbox-close{
  position:absolute; top:.6rem; right:.6rem;
  border:1px solid rgba(255,255,255,.25);
  color:#fff; background:transparent; border-radius:10px;
  padding:.35rem .55rem; cursor:pointer;
}
#lightbox-img{width:100%; max-height:80vh; object-fit:contain; background:#000}

/* =========================================================
   Album modal (gallery carousel inside modal)
   ========================================================= */
#albumModal{
  background:var(--paper);
  color:var(--ink);
}

/* Nav arrows */
#albumModal .nav{
  position:static;
  transform:none;
  width:44px; height:44px;
  border:1px solid rgba(46,125,50,.25);
  border-radius:50%;
  background:var(--brand-green);
  box-shadow:var(--shadow);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
}
#albumModal .nav:hover{filter:brightness(1.05)}
#albumModal .pager .dot{background:rgba(46,125,50,.35)}
#albumModal .pager .dot.active{background:var(--brand-green)}

/* Carousel container */
#albumModal .carousel{
  display:grid;
  grid-template-columns:56px minmax(420px, clamp(540px, 82vw, 980px)) 56px;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  padding:.75rem;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Viewport (no inner padding shrink) */
#albumModal .viewport{
  grid-column:2;
  width:100%;
  height:clamp(260px, 62vh, 720px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--pill);
  border-radius:16px;
  border:2px solid rgba(46,125,50,.3);
  box-shadow:var(--shadow);
  padding:0;
}

/* Media sizing */
#albumModal .viewport img,
#albumModal .viewport video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  border:8px solid var(--brand-green);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Pager dots */
#albumModal .pager .dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block; margin:0 4px;
  opacity:.6;
}
#albumModal .pager .dot.active{opacity:1}

/* =========================================================
   Gallery aside: fixed header + scrolling body
   ========================================================= */
#galleryPanel{
  display:flex; flex-direction:column;
  height:100dvh; max-height:100dvh;
}
#galleryPanel .panel-head{flex:0 0 auto}
#galleryPanel .panel-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:1rem 1rem 2rem;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
#galleryPanel .panel-body::-webkit-scrollbar{width:10px}
#galleryPanel .panel-body::-webkit-scrollbar-track{background:#f3f4f6}
#galleryPanel .panel-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3); border-radius:6px}

#galleryPanel .gallery-grid{display:grid; gap:1rem}
#galleryPanel .gallery-section{display:grid; gap:.5rem}
#galleryPanel .g-title{font-weight:800; font-size:1.15rem; margin:.2rem 0 .6rem}
#galleryPanel .g-heading{font-weight:800; font-size:1rem; margin:.4rem 0 .25rem}
#galleryPanel .album-card{width:100%; max-width:none}

/* =========================================================
   Footer
   ========================================================= */
footer{
  background:#111827; color:#e5e7eb;
  padding:2rem 0; margin-top:2rem;
}
.foot-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:1.2rem; align-items:start;
}
.foot-col h4{margin:.2rem 0 .6rem; font-weight:800}
.foot-list{list-style:none; padding:0; margin:0}
.foot-list li + li{margin-top:.4rem}
.foot-grid a{color:#e5e7eb; text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-map{
  grid-column:1 / -1; margin-top:2rem;
  border:1px solid var(--ring);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.footer-map-heading{
  color:#fff;
  font-size:1.8rem;
  margin:1rem 0 .8rem;
  text-align:left;
  font-weight:700;
}
@media (max-width:920px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-map{grid-column:1 / -1}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
}

/* =========================================================
   Sticky call-to-action (optional)
   ========================================================= */
.sticky-cta{position:fixed; right:5rem; bottom:4rem; z-index:1200}
.sticky-cta .btn{box-shadow:0 10px 25px rgba(198,40,40,.35)}

.call-fab{position:fixed; left:1rem; bottom:1rem; z-index:1200; display:none}
.call-fab a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem;
  background:#10b981; color:#fff;
  border-radius:999px;
  box-shadow:0 10px 25px rgba(16,185,129,.35);
  font-weight:800;
}
@media (max-width:640px){.call-fab{display:block}}

/* =========================================================
   FAQ scroller
   ========================================================= */
.details-group{display:grid; gap:.8rem}
details{
  background:var(--card); border:1px solid var(--ring);
  border-radius:12px; box-shadow:var(--shadow);
  padding:.75rem 1rem;
}
summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:.6rem;
  font-weight:800; color:var(--ink);
  margin:-.25rem 0;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"▸"; flex:0 0 auto;
  transition:transform .2s ease;
  color:var(--brand-green);
}
details[open] summary::before{transform:rotate(90deg)}
details .inner{padding-top:.5rem; color:var(--muted)}
details .inner ul{margin:.4rem 0 .2rem 1.2rem}

.faq-wrap{
  position:relative;
  border:1px solid var(--ring);
  border-radius:12px;
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-list{
  max-height:clamp(260px, 34vh, 360px);
  overflow:auto;
  padding:.6rem .8rem .8rem;
}
.faq-list details{margin:.35rem 0}
.faq-fade{
  position:absolute; left:0; right:0; bottom:0;
  height:48px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card));
  pointer-events:none;
  transition:opacity .2s ease;
}
.faq-wrap.at-end .faq-fade{opacity:0}
.faq-list::-webkit-scrollbar{width:8px}
.faq-list::-webkit-scrollbar-thumb{
  background:#e5e7eb;
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}

/* =========================================================
   Marketing banner (above hero) — keep both class names
   ========================================================= */

/* Backwards compatibility if any <img class="banner"> still exists */
.banner{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--ring);
  box-shadow:var(--shadow);
}

/* Preferred banner row system */
.banner-row{
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:flex-start;
  margin:1rem 0;
  width:100%;
}
.banner-img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:12px;
  border:1px solid var(--ring);
  box-shadow:var(--shadow);
  object-fit:cover;
}
@media (max-width:780px){
  .banner-row{flex-direction:column}
}

/* =========================================================
   2026 highlight / pulse effects
   ========================================================= */
.highlight-2026{
  background:linear-gradient(135deg, rgba(255,255,255,.8), rgba(214,255,214,.65));
  border:3px solid var(--brand-green);
  border-radius:14px;
  padding:.6rem;
  margin-top:1rem;
  box-shadow:0 0 18px rgba(0,128,0,.25);
  transition:all .3s ease;
  position:relative;
  z-index:1;
}
.highlight-2026:hover{
  box-shadow:0 0 30px rgba(0,150,0,.45);
  transform:translateY(-2px);
}
.highlight-2026 summary{
  font-weight:900;
  font-size:1.2rem;
  color:#0a3;
}
.highlight-2026::before{
  content:"NEW • 2026";
  position:absolute;
  top:-12px; right:-12px;
  background:var(--brand-green);
  color:#fff;
  font-size:.65rem;
  padding:3px 8px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.highlight-2026::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  border:3px solid var(--brand-green);
  animation:pulseBorder 2.5s infinite ease-in-out;
  opacity:.7;
  z-index:-1;
}
@keyframes pulseBorder{
  0%{transform:scale(.97);opacity:.4}
  50%{transform:scale(1.03);opacity:1}
  100%{transform:scale(.97);opacity:.4}
}
.highlight-2026[open] .inner{animation:fadeSlideIn .4s ease}
@keyframes fadeSlideIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}

/* Highlight 2026!!! summary pulse (runs on mobile too) */
.story-2026 summary{
  position:relative;
  border-radius:999px;
  padding:.75rem 1rem;
  border:2px solid var(--brand-red);
  box-shadow:
    0 0 0 0 rgba(198, 40, 40, .6),
    0 10px 30px rgba(0,0,0,.12);
  animation:pulse-2026 1.8s ease-out infinite;
}
.story-2026[open] summary{background:#fff5f5}
@keyframes pulse-2026{
  0%{
    box-shadow:
      0 0 0 0 rgba(198, 40, 40, .55),
      0 10px 30px rgba(0,0,0,.12);
  }
  60%{
    box-shadow:
      0 0 0 10px rgba(198, 40, 40, 0),
      0 10px 30px rgba(0,0,0,.12);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(198, 40, 40, 0),
      0 10px 30px rgba(0,0,0,.12);
  }
}

/* =========================================================
   Heraldry (Coat of Arms) — brace-safe
   ========================================================= */
#coat-of-arms.card.heraldry{
  align-items:start;
  gap:clamp(14px, 2vw, 24px);
}
#coat-of-arms.card.heraldry > img{
  width:100%;
  max-width:380px;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
@media (min-width:900px){
  #coat-of-arms.card.heraldry{
    grid-template-columns:minmax(360px, 520px) 1fr !important;
    align-items:start !important;
  }
  #coat-of-arms.card.heraldry > img{
    width:60% !important;
    max-width:360px !important;
    margin:0 auto;
    display:block;
  }
}
@media (max-width:768px){
  #coat-of-arms.card.heraldry{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  #coat-of-arms.card.heraldry > img{
    justify-self:center;
    width:50% !important;
    max-width:180px !important;
    height:auto !important;
    cursor:zoom-in;
  }
  #coat-of-arms.card.heraldry h3{
    margin:.25rem 0 .35rem;
    font-size:1.12rem;
  }
  #coat-of-arms.card.heraldry .muted{
    margin-bottom:.5rem !important;
    line-height:1.5;
  }
  #coat-of-arms.card.heraldry ul{
    padding-left:1rem;
    margin:0;
  }
  #coat-of-arms.card.heraldry li{
    margin:.35rem 0 .6rem;
    line-height:1.45;
  }
  #coat-of-arms.card.heraldry li > ul{margin-top:.25rem}
}
/* ===============================
   WHY preview carousel (1 image per view)
   Targets your exact HTML (#gallery-preview)
   =============================== */

#gallery-preview.carousel{
  overflow: hidden;
}

#gallery-preview .slides{
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  transform: translate3d(0,0,0); /* smoother sliding */
}

#gallery-preview .slides img{
  flex: 0 0 100% !important;     /* THIS is the key */
  min-width: 100% !important;
  width: 100% !important;
  height: 320px !important;      /* keep your existing look */
  object-fit: cover !important;
  display: block !important;
}
/* Fix: Why preview carousel must NOT use gallery.css grid carousel */
#gallery-preview.carousel{
  display:block !important;   /* overrides gallery.css .carousel{display:grid} */
  overflow:hidden;
}

#gallery-preview .slides{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}

#gallery-preview .slides img{
  flex:0 0 100% !important;
  min-width:100% !important;
  width:100% !important;
  height:320px !important;
  object-fit:cover !important;
  display:block !important;
}