/* ==========================================================================
   sk-themes.css — Site Designer: themes + layouts for the public site.
   Every rule hangs off a <body> class set from the school's design (see
   sk_design_lib.php):  th-*  theme · hd-* header · hero-* hero · ft-* footer
   band-* coloured bands · w-* width · sp-* spacing · rad-* corners · btn-* buttons
   no-ticker / no-trust / no-motion.   body.X selectors outrank the single-class
   rules in sk-theme.css, the page <style>s and footer.php, whatever their order.
   ========================================================================== */

/* ── Home sections wrapper (order / show-hide) ───────────────────────── */
[data-sk-blocks], [data-sk-blk] { display: contents; }
[data-sk-blk][hidden] { display: none !important; }

/* ── Shared hooks every theme / option drives through variables ─────── */
body.skd .sk-wrap { max-width: var(--sk-wrap-w, 1240px); }
body.w-narrow { --sk-wrap-w: 1120px; }
body.w-wide   { --sk-wrap-w: 1440px; }
body.skd :is(.sk-btn, .sk-apply-link, .sk-res-link, .sk-login-link) { border-radius: var(--sk-btn-r, 999px); }
body.skd .sk-apply-link::after { border-radius: inherit; }
body.skd :is(.sk-hero-badge, .sk-principal-label, .sk-principal-author, .sk-principal-badge, .sk-live-badge, .sk-tabs, .sk-tab-btn,
  .sk-chip, .sk-new-chip, .sk-eyebrow, .sk-sc-pill, .sk-contact-pill, .sk-tick-tag) { border-radius: var(--sk-pill-r, 999px); }
body.skd .sk-hero-photo-frame { border-radius: var(--sk-radius-lg); }
body.skd :is(.sk-hero-float, .sk-about-badge, .sk-quick) { border-radius: var(--sk-radius-md); }
body.skd .sk-quick a { border-radius: var(--sk-radius-sm); }
body.skd .sk-quick { background: var(--sk-surface); }

/* ── Toggles ─────────────────────────────────────────────────────────── */
body.no-ticker .sk-utility { display: none !important; }
body.no-trust #skHero .sk-trust { display: none; }
body.no-motion *:not(.sk-ticker ul):not(.sk-notice-track),
body.no-motion *::before, body.no-motion *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
body.no-motion .sk-reveal { opacity: 1 !important; transform: none !important; }
body.no-motion :is(a.sk-card, .sk-card.hoverable, .sk-news-item, .sk-evt-item):hover { transform: none; }

/* ── Spacing ─────────────────────────────────────────────────────────── */
body.sp-compact .sk-section { padding: 60px 0; }
body.sp-airy .sk-section { padding: 128px 0; }
@media (max-width: 767px) { body.sp-compact .sk-section { padding: 44px 0; } body.sp-airy .sk-section { padding: 80px 0; } }

/* ══════════════════════════════════════════════════════════════════════
   THEMES
   ══════════════════════════════════════════════════════════════════════ */

/* ── Heritage — classic serif, cream, fine gold rules ───────────────── */
body.th-heritage {
  --sk-ink: #1f1a14; --sk-ink-soft: #5a4f42; --sk-surface-alt: #f8f4ea; --sk-border: #e8dfcb;
  --sk-radius-lg: 6px; --sk-radius-md: 4px; --sk-radius-sm: 3px; --sk-btn-r: 3px; --sk-pill-r: 3px;
  --sk-shadow-sm: 0 1px 3px rgba(60,40,10,.07); --sk-shadow-md: 0 8px 22px rgba(60,40,10,.09); --sk-shadow-lift: 0 16px 36px rgba(60,40,10,.14);
}
body.th-heritage :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; }
body.th-heritage .sk-eyebrow { background: none; border: 0; padding: 0; gap: 12px; letter-spacing: .22em; color: var(--cms-secondary); }
body.th-heritage .sk-eyebrow .dot { display: none; }
body.th-heritage .sk-eyebrow::before, body.th-heritage .sk-eyebrow::after { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .55; }
body.th-heritage .sk-head h2::after { content: ''; display: block; width: 70px; height: 2px; margin: 18px auto 0; background: var(--cms-accent); }
body.th-heritage .sk-head.left h2::after { margin-left: 0; }
body.th-heritage .sk-btn { text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
body.th-heritage .sk-btn.primary { background: var(--cms-accent); color: var(--cms-button-text, #fff); box-shadow: none; }
body.th-heritage .sk-btn.primary:hover { background: color-mix(in srgb, var(--cms-accent) 85%, #000); box-shadow: none; }
body.th-heritage .sk-logoband { background: #fffdf7; }
body.th-heritage .sk-logoband::before { display: none; }
body.th-heritage .sk-logoband::after { background: var(--cms-accent); height: 3px; }
body.th-heritage .sk-menuband { background: var(--cms-primary); }
body.th-heritage .sk-menuband::before { display: none; }
body.th-heritage .sk-card { box-shadow: var(--sk-shadow-sm); }
body.th-heritage .sk-hero-text h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--cms-accent); font-style: italic; }
body.th-heritage .sk-principal-msg { font-family: var(--sk-font-head); font-style: italic; font-size: 18px; }

/* ── Minimal — white space, flat, borders over shadows ──────────────── */
body.th-minimal {
  --sk-surface-alt: #f7f7f8; --sk-border: #ebebef; --sk-ink-soft: #52525b;
  --sk-radius-lg: 14px; --sk-radius-md: 12px; --sk-radius-sm: 10px; --sk-btn-r: 10px; --sk-pill-r: 8px;
  --sk-shadow-sm: none; --sk-shadow-md: 0 1px 2px rgba(0,0,0,.04); --sk-shadow-lift: 0 10px 26px rgba(0,0,0,.07);
}
body.th-minimal :is(h1, h2, h3) { font-weight: 700; letter-spacing: -.035em; }
body.th-minimal .sk-eyebrow { background: none; border: 0; padding: 0; color: var(--sk-muted); letter-spacing: .14em; }
body.th-minimal .sk-eyebrow .dot { background: var(--cms-accent); }
body.th-minimal .sk-btn.primary { background: var(--cms-accent); color: var(--cms-button-text, #fff); box-shadow: none; }
body.th-minimal .sk-btn.primary:hover { box-shadow: none; opacity: .9; }
body.th-minimal :is(a.sk-card, .sk-card.hoverable, .sk-news-item, .sk-evt-item):hover { transform: translateY(-2px); }
body.th-minimal .sk-mesh-dark::after { display: none; }
body.th-minimal .sk-logoband::before { display: none; }
body.th-minimal .sk-logoband::after { background: var(--sk-border); height: 1px; }
body.th-minimal :is(.sk-notice-head, .sk-tab-btn.active) { background: var(--sk-ink); }
body.th-minimal .sk-hero-text h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: rgba(255,255,255,.72); }

/* ── Vibrant — bold type, angled bands ──────────────────────────────── */
body.th-vibrant {
  --sk-radius-lg: 22px; --sk-radius-md: 18px; --sk-radius-sm: 14px; --sk-btn-r: 14px; --sk-pill-r: 10px;
  --sk-shadow-sm: 0 10px 30px color-mix(in srgb, var(--cms-primary) 10%, transparent);
  --sk-shadow-lift: 0 30px 60px color-mix(in srgb, var(--cms-primary) 22%, transparent);
}
body.th-vibrant .sk-head h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; }
body.th-vibrant .sk-hero-text h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
body.th-vibrant .sk-eyebrow { background: var(--cms-accent); color: #fff; border: 0; }
body.th-vibrant .sk-eyebrow .dot { background: #fff; }
body.th-vibrant .sk-btn { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: 13px; }
body.th-vibrant .sk-section.sk-mesh-dark { clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%); padding-top: calc(92px + 3.5vw); padding-bottom: calc(92px + 3.5vw); }
body.th-vibrant #skHero.sk-mesh-dark { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); padding-bottom: 3.5vw; }
body.th-vibrant :is(.sk-facility-card, .sk-live-card) { border: 0; border-top: 4px solid var(--fc-c, var(--lv-c, var(--cms-accent))); }
body.th-vibrant .sk-tab-btn.active { background: var(--cms-accent); }

/* ── Royal Dark — dark canvas, gold, serif ──────────────────────────── */
body.th-royal {
  --sk-ink: #f3efe6; --sk-ink-soft: #c8c1b2; --sk-muted: #8f887b; --sk-surface: #15171d; --sk-surface-alt: #101217; --sk-border: #2a2d36;
  --sk-radius-lg: 4px; --sk-radius-md: 3px; --sk-radius-sm: 2px; --sk-btn-r: 2px; --sk-pill-r: 2px;
  --sk-shadow-sm: 0 1px 0 rgba(255,255,255,.03); --sk-shadow-md: 0 10px 30px rgba(0,0,0,.45); --sk-shadow-lift: 0 22px 52px rgba(0,0,0,.6);
  background: #0b0d11; color: var(--sk-ink);
}
body.th-royal .sk-section { background-color: #0b0d11; }
body.th-royal .sk-section.alt { background-color: var(--sk-surface-alt); }
body.th-royal :is(.sk-notice-card, .sk-news-item, .sk-evt-item, .sk-empty, .sk-card, .sk-sub, .sk-mobile-sheet, .sk-mobile-body, .sk-hero-float,
  .sk-principal-badge, .sk-live-badge, .sk-res-link, .sk-tabs, .sk-quick, .sk-quickbar, .sk-logoband) { background-color: var(--sk-surface); color: var(--sk-ink); border-color: var(--sk-border); }
body.th-royal .sk-logoband { background: #0b0d11; }
body.th-royal .sk-logoband::before { display: none; }
body.th-royal .sk-logoband::after { background: linear-gradient(90deg, transparent, var(--cms-accent), transparent); height: 1px; }
body.th-royal :is(h1, h2, h3) { font-weight: 600; letter-spacing: .01em; }
body.th-royal .sk-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
body.th-royal .sk-eyebrow { background: none; border: 0; padding: 0; color: var(--cms-accent); letter-spacing: .28em; }
body.th-royal .sk-eyebrow .dot { background: var(--cms-accent); }
body.th-royal .sk-btn.primary { background: var(--cms-accent); color: var(--cms-button-text, #111); box-shadow: none; }
body.th-royal .sk-btn.outline { color: var(--cms-accent); border-color: color-mix(in srgb, var(--cms-accent) 45%, transparent); }
body.th-royal .sk-btn.outline:hover { background: color-mix(in srgb, var(--cms-accent) 12%, transparent); }
body.th-royal :is(.sk-sub li a, .sk-mobile-list > li > a, .sk-quick a, .sk-tab-btn) { color: var(--sk-ink-soft); }
body.th-royal :is(.sk-sub li a:hover, .sk-notice-item:hover, .sk-mobile-list > li > a:hover, .sk-quick a:hover) { background: rgba(255,255,255,.04); color: var(--sk-ink); }
body.th-royal .sk-tab-btn.active { background: var(--cms-accent); color: var(--cms-button-text, #111); }
body.th-royal .sk-hero-text h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--cms-accent); }
body.th-royal :is(.sk-brand-placeholder, .sk-contact-pill .tx b) { color: var(--sk-ink); }
body.th-royal .sk-contact-pill { background: rgba(255,255,255,.05); }
body.th-royal .sk-login-link { color: var(--cms-accent); border-color: color-mix(in srgb, var(--cms-accent) 40%, transparent); background: transparent; }
body.th-royal .sk-login-link.staff { background: var(--cms-accent); color: var(--cms-button-text, #111); }
body.th-royal .sk-notice-viewall { background: #1c1f27; }
body.th-royal .sk-live-bar { background: #23262f; }
body.th-royal .sk-footer { background: #07080b; }
body.th-royal .sk-utility { background: #07080b; border-bottom: 1px solid #1c1f27; }

/* ── Playful — round, bubbly, scalloped bands ───────────────────────── */
body.th-playful {
  --sk-radius-lg: 36px; --sk-radius-md: 26px; --sk-radius-sm: 20px; --sk-btn-r: 999px; --sk-pill-r: 999px;
  --sk-surface-alt: #fff8ec; --sk-border: #f2e6d1;
}
body.th-playful :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; }
body.th-playful .sk-section.alt { background-color: var(--sk-surface-alt);
  background-image: radial-gradient(color-mix(in srgb, var(--cms-accent) 16%, transparent) 2px, transparent 2.5px); background-size: 28px 28px; }
body.th-playful .sk-eyebrow { background: color-mix(in srgb, var(--cms-accent) 14%, #fff); border: 2px dashed color-mix(in srgb, var(--cms-accent) 55%, #fff); color: color-mix(in srgb, var(--cms-accent) 75%, #000); }
body.th-playful .sk-eyebrow .dot { background: var(--cms-accent); }
body.th-playful .sk-hero-photo-frame { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
body.th-playful .sk-about-img-frame { border-radius: 44% 56% 40% 60% / 56% 42% 58% 44%; }
body.th-playful .sk-principal-photo-frame { border-radius: 50%; aspect-ratio: 1; }
body.th-playful .sk-principal-photo-frame img { height: 100%; }
body.th-playful .sk-card { border-width: 2px; }
body.th-playful :is(a.sk-card, .sk-card.hoverable):hover { transform: translateY(-6px) rotate(-1deg); }
body.th-playful .sk-section.sk-mesh-dark, body.th-playful #skHero.sk-mesh-dark {
  --sc: 22px; padding-bottom: calc(92px + var(--sc));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--sc)) no-repeat, radial-gradient(circle var(--sc) at 50% 0, #000 98%, #0000) bottom / calc(2 * var(--sc)) var(--sc) repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--sc)) no-repeat, radial-gradient(circle var(--sc) at 50% 0, #000 98%, #0000) bottom / calc(2 * var(--sc)) var(--sc) repeat-x;
}
body.th-playful #skHero.sk-mesh-dark { padding-bottom: var(--sc); }
body.th-playful .sk-btn { font-weight: 800; }

/* ── Campus Pro — sharp, structured, left-aligned ───────────────────── */
body.th-campus {
  --sk-surface-alt: #f3f5f7; --sk-border: #e3e7ec;
  --sk-radius-lg: 8px; --sk-radius-md: 6px; --sk-radius-sm: 4px; --sk-btn-r: 4px; --sk-pill-r: 4px;
  --sk-shadow-sm: 0 1px 2px rgba(16,24,40,.06); --sk-shadow-lift: 0 14px 30px rgba(16,24,40,.12);
}
body.th-campus .sk-head { text-align: left; margin: 0 0 44px; max-width: 760px; }
body.th-campus .sk-head h2 { text-transform: uppercase; letter-spacing: .01em; font-weight: 800; }
body.th-campus .sk-eyebrow { background: none; border: 0; border-left: 3px solid var(--cms-accent); padding: 2px 0 2px 10px; color: var(--cms-primary); border-radius: 0; }
body.th-campus .sk-eyebrow .dot { display: none; }
body.th-campus .sk-btn { text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; }
body.th-campus .sk-btn.primary { background: var(--cms-accent); color: var(--cms-button-text, #fff); box-shadow: none; }
body.th-campus .sk-card { box-shadow: none; border-bottom: 3px solid var(--cms-primary); }
body.th-campus .sk-mesh-dark::after { display: none; }
body.th-campus .sk-hero-text h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--cms-accent); }

/* ══════════════════════════════════════════════════════════════════════
   COLOURED BANDS (hero, principal, achievements, page banners …)
   ══════════════════════════════════════════════════════════════════════ */
body.band-solid .sk-mesh-dark { background: var(--cms-primary); }
body.band-solid .sk-mesh-dark::before, body.band-solid .sk-mesh-dark::after { display: none; }
body.band-gradient .sk-mesh-dark { background: linear-gradient(125deg, var(--cms-primary) 0%, var(--cms-secondary) 100%); }
body.band-gradient .sk-mesh-dark::after { display: none; }
body.band-gradient .sk-mesh-dark::before { background: radial-gradient(600px 320px at 90% 0%, rgba(255,255,255,.12), transparent 70%); }
body.band-ink .sk-mesh-dark { background: #0b1220; }
body.th-royal.band-ink .sk-mesh-dark { background: #07080b; }

/* ══════════════════════════════════════════════════════════════════════
   CORNERS + BUTTONS (override the theme default — so they come last)
   ══════════════════════════════════════════════════════════════════════ */
body.rad-sharp { --sk-radius-lg: 4px; --sk-radius-md: 3px; --sk-radius-sm: 2px; }
body.rad-soft  { --sk-radius-lg: 14px; --sk-radius-md: 12px; --sk-radius-sm: 10px; }
body.rad-round { --sk-radius-lg: 34px; --sk-radius-md: 26px; --sk-radius-sm: 18px; }
body.btn-pill    { --sk-btn-r: 999px; --sk-pill-r: 999px; }
body.btn-rounded { --sk-btn-r: 12px;  --sk-pill-r: 10px; }
body.btn-square  { --sk-btn-r: 3px;   --sk-pill-r: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   HEADER LAYOUTS
   ══════════════════════════════════════════════════════════════════════ */
/* Centred logo */
@media (min-width: 992px) {
  body.hd-centered .sk-logoband-row { flex-direction: column; justify-content: center; gap: 12px; padding: 20px 0 14px; }
  body.hd-centered .sk-band2-actions { justify-content: center; flex-wrap: wrap; }
}

/* Light menu bar */
@media (min-width: 992px) {
  body.hd-light .sk-menuband { background: var(--sk-surface); box-shadow: 0 6px 18px rgba(15,23,42,.05); border-bottom: 1px solid var(--sk-border); }
  body.hd-light .sk-menuband::before { display: none; }
  body.hd-light .sk-nav > li > a { color: var(--sk-ink-soft); }
  body.hd-light .sk-nav > li:hover > a, body.hd-light .sk-nav > li.is-active > a { color: var(--cms-primary); }
  body.hd-light .sk-nav > li > a::after { background: color-mix(in srgb, var(--cms-primary) 45%, transparent); }
  body.hd-light .sk-nav > li.is-active > a::after { background: var(--cms-accent); }
  body.hd-light .sk-logoband::after { display: none; }
}

/* Dark header */
body.hd-dark .sk-logoband { background: color-mix(in srgb, var(--cms-primary) 86%, #000); border-color: transparent; }
body.hd-dark .sk-logoband::before { display: none; }
body.hd-dark .sk-brand-placeholder { color: #fff; }
body.hd-dark .sk-contact-pill { background: rgba(255,255,255,.08); }
body.hd-dark .sk-contact-pill .ic { background: rgba(255,255,255,.12); color: #fff; }
body.hd-dark .sk-contact-pill .tx b { color: #fff; }
body.hd-dark .sk-contact-pill .tx span { color: rgba(255,255,255,.6); }
body.hd-dark .sk-login-link { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
body.hd-dark .sk-login-link:hover { background: #fff; color: var(--cms-primary); }
body.hd-dark .sk-brand img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
@media (min-width: 992px) {
  body.hd-dark .sk-menuband { background: color-mix(in srgb, var(--cms-primary) 72%, #000); border-top: 1px solid rgba(255,255,255,.08); }
}

/* Single bar — logo · menu · actions on one row (desktop) */
@media (min-width: 992px) {
  body.hd-inline .sk-header { display: flex; align-items: center; gap: 10px; background: var(--sk-surface); border-bottom: 1px solid var(--sk-border); box-shadow: var(--sk-shadow-sm);
    padding: 0 max(28px, calc((100vw - var(--sk-wrap-w, 1240px)) / 2 + 28px)); }
  body.hd-inline .sk-logoband, body.hd-inline .sk-logoband-row { display: contents; }
  body.hd-inline .sk-logoband::before, body.hd-inline .sk-logoband::after { display: none; }
  body.hd-inline .sk-brand { order: 0; padding: 12px 0; }
  body.hd-inline .sk-menuband { order: 1; flex: 1; min-width: 0; background: none; box-shadow: none; overflow: visible; }
  body.hd-inline .sk-menuband::before, body.hd-inline .sk-menuband::after { display: none; }
  body.hd-inline .sk-menuband .sk-wrap { max-width: none; padding: 0; }
  body.hd-inline .sk-nav { justify-content: flex-end; flex-wrap: wrap; }
  body.hd-inline .sk-nav > li > a { color: var(--sk-ink-soft); padding: 24px 12px; }
  body.hd-inline .sk-nav > li:hover > a, body.hd-inline .sk-nav > li.is-active > a { color: var(--cms-primary); }
  body.hd-inline .sk-nav > li > a::after { background: color-mix(in srgb, var(--cms-primary) 45%, transparent); bottom: 14px; }
  body.hd-inline .sk-nav > li.is-active > a::after { background: var(--cms-accent); }
  body.hd-inline .sk-band2-actions { order: 2; }
  body.hd-inline .sk-contact-pill, body.hd-inline .sk-login-link:not(.staff) { display: none; }
  body.hd-inline .sk-header.is-compact .sk-nav > li > a { padding-top: 16px; padding-bottom: 16px; }
  body.hd-inline .sk-header.is-compact .sk-nav > li > a::after { bottom: 8px; }
  body.hd-inline.th-royal .sk-header { background: #0b0d11; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO LAYOUTS (home page)
   ══════════════════════════════════════════════════════════════════════ */
/* Full-width photo behind the text */
body.hero-full #skHero .sk-hero-top { padding: 0; min-height: min(80vh, 740px); display: flex; align-items: center; }
body.hero-full #skHero .sk-hero-row { grid-template-columns: minmax(0, 700px); padding-top: 90px; padding-bottom: 90px; width: 100%; }
body.hero-full #skHero .sk-hero-photo { position: absolute; inset: 0; z-index: 0; }
body.hero-full #skHero .sk-hero-photo-frame { border-radius: 0; height: 100%; aspect-ratio: auto; box-shadow: none; }
body.hero-full #skHero .sk-hero-photo-frame::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cms-primary) 90%, #000) 0%, color-mix(in srgb, var(--cms-primary) 62%, transparent) 50%, rgba(0,0,0,.08) 100%); }
body.hero-full #skHero .sk-hero-text { position: relative; z-index: 2; }
body.hero-full #skHero .sk-hero-float { display: none; }
body.hero-full #skHero .sk-trust { background: rgba(0,0,0,.28); backdrop-filter: blur(6px); }
body.th-playful.hero-full #skHero .sk-hero-photo-frame { border-radius: 0; }
@media (max-width: 767px) { body.hero-full #skHero .sk-hero-photo-frame::after { background: color-mix(in srgb, var(--cms-primary) 78%, transparent); } }

/* Centred text + wide photo below */
body.hero-centered #skHero .sk-hero-row { grid-template-columns: 1fr; text-align: center; gap: 44px; }
body.hero-centered #skHero .sk-hero-sub { margin-left: auto; margin-right: auto; max-width: 640px; }
body.hero-centered #skHero :is(.sk-hero-cta, .sk-hero-dots) { justify-content: center; }
body.hero-centered #skHero .sk-hero-text h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
body.hero-centered #skHero .sk-hero-photo { max-width: 1060px; width: 100%; margin: 0 auto; }
body.hero-centered #skHero .sk-hero-photo-frame { aspect-ratio: 21 / 9; }
body.hero-centered #skHero .sk-hero-float { left: 50%; transform: translateX(-50%); }
body.th-playful.hero-centered #skHero .sk-hero-photo-frame { border-radius: var(--sk-radius-lg); }

/* Text only */
body.hero-minimal #skHero .sk-hero-photo { display: none; }
body.hero-minimal #skHero .sk-hero-row { grid-template-columns: 1fr; text-align: center; padding-top: 50px; padding-bottom: 96px; }
body.hero-minimal #skHero .sk-hero-sub { margin-left: auto; margin-right: auto; max-width: 660px; }
body.hero-minimal #skHero :is(.sk-hero-cta, .sk-hero-dots) { justify-content: center; }
body.hero-minimal #skHero .sk-hero-text h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER LAYOUTS
   ══════════════════════════════════════════════════════════════════════ */
body.ft-simple .sk-footer-top { padding: 50px 0 30px; }
body.ft-simple .sk-footer-grid { grid-template-columns: 1.4fr 1fr; }
body.ft-simple .sk-footer-grid > :nth-child(2), body.ft-simple .sk-footer-grid > :nth-child(3) { display: none; }
@media (max-width: 575px) { body.ft-simple .sk-footer-grid { grid-template-columns: 1fr; } }

body.ft-light .sk-footer { background: var(--sk-surface-alt); color: var(--sk-ink-soft); border-top: 1px solid var(--sk-border); }
body.ft-light .sk-footer::before { opacity: .35; }
body.ft-light .sk-footer-title { color: var(--sk-ink); }
body.ft-light :is(.sk-footer-links a, .sk-footer-post a) { color: var(--sk-ink-soft); }
body.ft-light :is(.sk-footer-links a, .sk-footer-post a):hover { color: var(--cms-primary); }
body.ft-light :is(.sk-footer-social a, .sk-footer-contact .ic, .sk-footer-post-date) { background: var(--sk-surface); border-color: var(--sk-border); color: var(--cms-primary); }
body.ft-light .sk-footer-social a:hover { color: #fff; }
body.ft-light .sk-footer-post-date .m, body.ft-light .sk-footer-empty { color: var(--sk-muted); }
body.ft-light .sk-footer-bottom { border-color: var(--sk-border); }
body.ft-light .sk-footer-bottom-row p { color: var(--sk-muted); }
body.ft-light .sk-footer-bottom-row p a { color: var(--cms-primary); }
body.th-royal.ft-light .sk-footer { background: var(--sk-surface); }

body.ft-brand .sk-footer { background: linear-gradient(140deg, color-mix(in srgb, var(--cms-primary) 82%, #000) 0%, var(--cms-primary) 55%, color-mix(in srgb, var(--cms-primary) 60%, var(--cms-secondary)) 100%); }
body.ft-brand .sk-footer::before { opacity: .5; }
body.ft-brand .sk-footer, body.ft-brand .sk-footer-links a { color: rgba(255,255,255,.8); }

/* ══════════════════════════════════════════════════════════════════════
   SECTION DESIGNER — per-section variants (skv-*), backgrounds (skbg-*),
   "Read more" buttons and custom sections. The wrapper is display:contents,
   so it only scopes these selectors.
   ══════════════════════════════════════════════════════════════════════ */
body.skd [data-sk-blk].skbg-white > section.sk-section { background: var(--sk-surface); }
body.skd [data-sk-blk].skbg-soft  > section.sk-section { background: var(--sk-surface-alt); }
body.skd [data-sk-blk].skbg-tint  > section.sk-section { background: color-mix(in srgb, var(--cms-primary) 7%, var(--sk-surface)); }
.sk-secbtn[hidden] { display: none !important; }

/* About */
body.skd [data-sk-blk].skv-reverse .sk-about-grid { grid-template-columns: 1.15fr 1fr; }
body.skd [data-sk-blk].skv-reverse .sk-about-img { order: 2; margin-left: auto; }
body.skd [data-sk-blk].skv-stacked .sk-about-grid { grid-template-columns: 1fr; gap: 40px; }
body.skd [data-sk-blk].skv-stacked .sk-about-img { max-width: none; }
body.skd [data-sk-blk].skv-stacked .sk-about-img-frame img { height: 380px; }
@media (max-width: 900px) { body.skd [data-sk-blk].skv-reverse .sk-about-grid { grid-template-columns: 1fr; } body.skd [data-sk-blk].skv-reverse .sk-about-img { order: 0; margin-left: 0; } }

/* Principal */
body.skd [data-sk-blk].skv-reverse .sk-principal-grid { grid-template-columns: 1.2fr .8fr; }
body.skd [data-sk-blk].skv-reverse .sk-principal-photo { order: 2; margin-left: auto; }
body.skd [data-sk-blk].skv-centered .sk-principal-grid { grid-template-columns: 1fr; text-align: center; max-width: 820px; gap: 34px; }
body.skd [data-sk-blk].skv-centered .sk-principal-photo { max-width: 210px; margin: 0 auto; }
body.skd [data-sk-blk].skv-centered .sk-principal-photo-frame { border-radius: 50%; aspect-ratio: 1; border: 5px solid rgba(255,255,255,.18); }
body.skd [data-sk-blk].skv-centered .sk-principal-photo-frame img { height: 100%; }
body.skd [data-sk-blk].skv-centered .sk-principal-badge { left: 50%; transform: translateX(-50%); white-space: nowrap; }
body.skd [data-sk-blk].skv-centered .sk-principal-quote-ic { margin-left: auto; margin-right: auto; }
body.skd [data-sk-blk].skv-centered .sk-principal-msg { border-left: 0; padding-left: 0; font-size: 18px; }
body.skd [data-sk-blk].skv-centered .sk-principal-author { margin: 0 auto; }
body.skd [data-sk-blk].skv-centered .sk-secbtn { text-align: center; }
body.skd [data-sk-blk].skv-light .sk-mesh-dark { background: var(--sk-surface-alt); }
body.skd [data-sk-blk].skv-light .sk-mesh-dark::before, body.skd [data-sk-blk].skv-light .sk-mesh-dark::after { display: none; }
body.skd [data-sk-blk].skv-light :is(.sk-principal-heading, .sk-principal-author h5) { color: var(--sk-ink); }
body.skd [data-sk-blk].skv-light .sk-principal-msg { color: var(--sk-ink-soft); }
body.skd [data-sk-blk].skv-light :is(.sk-principal-label, .sk-principal-author) { background: var(--sk-surface); border-color: var(--sk-border); color: var(--sk-ink); }
body.skd [data-sk-blk].skv-light .sk-principal-photo-frame { box-shadow: var(--sk-shadow-lift); }
body.skd [data-sk-blk].skv-light .sk-principal-author .ic { background: var(--sk-surface-alt); color: var(--sk-ink-soft); }
@media (max-width: 900px) { body.skd [data-sk-blk].skv-reverse .sk-principal-grid { grid-template-columns: 1fr; } body.skd [data-sk-blk].skv-reverse .sk-principal-photo { order: 0; margin-left: 0; } }

/* Notices / news / events */
body.skd [data-sk-blk].skv-notices_news .sk-pulse-grid > :nth-child(3),
body.skd [data-sk-blk].skv-news_events .sk-pulse-grid > :nth-child(1),
body.skd [data-sk-blk].skv-notices_events .sk-pulse-grid > :nth-child(2) { display: none; }
@media (min-width: 1101px) {
  body.skd [data-sk-blk].skv-notices_news .sk-pulse-grid { grid-template-columns: .9fr 1.4fr; }
  body.skd [data-sk-blk].skv-news_events .sk-pulse-grid { grid-template-columns: 1.4fr 1fr; }
  body.skd [data-sk-blk].skv-notices_events .sk-pulse-grid { grid-template-columns: 1fr 1fr; }
}

/* Achievements */
body.skd [data-sk-blk].skv-light .sk-section.sk-mesh-dark { background: var(--sk-surface-alt); }
body.skd [data-sk-blk].skv-light .sk-head h2 { color: var(--sk-ink) !important; }
body.skd [data-sk-blk].skv-light .sk-head p { color: var(--sk-ink-soft) !important; }
body.skd [data-sk-blk].skv-light .sk-head .sk-eyebrow { background: color-mix(in srgb, var(--cms-primary) 8%, var(--sk-surface)) !important; border-color: color-mix(in srgb, var(--cms-primary) 18%, var(--sk-surface)) !important; color: var(--cms-primary) !important; }
body.skd [data-sk-blk].skv-light .sk-achieve-num { color: var(--sk-ink); }
body.skd [data-sk-blk].skv-light .sk-achieve-lbl { color: var(--sk-ink-soft); }
body.skd [data-sk-blk].skv-light .sk-btn.ghost { color: var(--cms-primary); border-color: var(--sk-border); background: var(--sk-surface); }

/* Gallery */
body.skd [data-sk-blk].skv-grid3 .sk-gallery-grid { grid-template-columns: repeat(3, 1fr); }
body.skd [data-sk-blk].skv-mosaic .sk-gallery-grid { grid-auto-flow: dense; }
body.skd [data-sk-blk].skv-mosaic .sk-gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 767px) { body.skd [data-sk-blk].skv-grid3 .sk-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Custom sections */
.sk-cust-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.sk-cust:not(.has-img) .sk-cust-grid, .sk-cust.lay-centered .sk-cust-grid, .sk-cust.lay-banner .sk-cust-grid { grid-template-columns: 1fr; }
.sk-cust.lay-right .sk-cust-img { order: 2; }
.sk-cust-img { border-radius: var(--sk-radius-lg); overflow: hidden; box-shadow: var(--sk-shadow-lift); }
.sk-cust-img img { display: block; width: 100%; height: 400px; object-fit: cover; }
.sk-cust-tx h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--sk-ink); margin-bottom: 16px; }
.sk-cust-body { color: var(--sk-ink-soft); font-size: 15.5px; line-height: 1.85; }
.sk-cust-btn { margin-top: 26px; }
.sk-cust:not(.has-img) .sk-cust-tx, .sk-cust.lay-centered .sk-cust-tx, .sk-cust.lay-banner .sk-cust-tx { max-width: 820px; margin: 0 auto; text-align: center; }
.sk-cust.lay-centered .sk-cust-img { max-width: 980px; margin: 0 auto; width: 100%; order: 2; }
.sk-cust.lay-centered .sk-cust-img img { height: 420px; }
.sk-cust.lay-banner { background-size: cover; background-position: center; }
.sk-cust.lay-banner.has-img { background-image: linear-gradient(120deg, color-mix(in srgb, var(--cms-primary) 88%, transparent), color-mix(in srgb, var(--cms-primary) 55%, transparent)), var(--cust-bg) !important; }
.sk-cust.lay-banner .sk-cust-tx h2 { color: #fff; }
.sk-cust.lay-banner .sk-cust-body { color: rgba(255,255,255,.82); }
.sk-cust.lay-banner .sk-eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 900px) { .sk-cust-grid { grid-template-columns: 1fr; gap: 30px; } .sk-cust.lay-right .sk-cust-img { order: 0; } .sk-cust-img img { height: 280px; } }