/* ============================================
   Sri Raghavendra Special School — Stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ivory: #F5EFE0;
  --ivory-deep: #EFE6D0;
  --ink: #2B231A;
  --ink-soft: #5B4F3F;
  --teal: #24534A;
  --teal-deep: #163831;
  --gold: #C99A3D;
  --gold-soft: #E7CD91;
  --sage: #8FAE9B;
  --white: #FFFDF8;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-arch: 120px 120px 8px 8px;
  --radius-soft: 14px;
  --max-width: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.3rem; }

p { max-width: 68ch; color: var(--ink-soft); }

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.ticker {
  background: #1F4D3E;
  color: var(--ivory);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Contact strip (above header) ---------- */

.contact-strip {
  background: #4A90A4;
  color: var(--white);
}
.contact-strip strong {
  color: var(--gold-soft);
}
.contact-strip a {
  color: var(--white);
}
.contact-strip a:hover {
  color: var(--gold-soft);
}

@media (max-width: 640px) {
  .contact-strip .wrap {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
}

/* ---------- Header / Nav ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--ivory-deep);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50% 50% 50% 8px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-soft);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--teal-deep);
  line-height: 1.25;
}

.brand-text span {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
}

nav.main-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--teal);
  border-bottom-color: var(--gold);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--teal-deep);
  cursor: pointer;
}

/* ---------- Scrolling Banner (staff-controlled) ---------- */

.ticker {
  background: var(--teal-deep);
  color: var(--ivory);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.ticker-track {
  display: inline-block;
  padding: 10px 0 10px 100%;
  animation: ticker-scroll 30s linear infinite;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.ticker-track span { margin-right: 64px; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ---------- Hero ---------- */

.hero {
  padding: 72px 0 88px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero-eyebrow {
  color: var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.hero h1 { margin-bottom: 20px; }

.hero p.lede { margin-bottom: 32px; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
}

.btn-primary:hover { background: var(--teal-deep); }

.btn-secondary {
  background: transparent;
  color: var(--teal-deep);
  border: 1.5px solid var(--teal-deep);
}

.btn-secondary:hover { background: var(--white); }

.hero-art {
  background: linear-gradient(160deg, var(--sage) 0%, var(--teal) 100%);
  border-radius: var(--radius-arch);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

/*
.hero-art::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(245,239,224,0.35);
  border-radius: 110px 110px 4px 4px;
}

*/

/* ---------- Quick facts strip ---------- */

.facts-strip {
  background: var(--white);
  border-top: 1px solid var(--ivory-deep);
  border-bottom: 1px solid var(--ivory-deep);
  padding: 40px 0;
}

.facts-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.fact-num {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--teal);
  font-weight: 600;
}

.fact-label {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ---------- Section blocks ---------- */

.section { padding: 84px 0; }
.section-alt { background: var(--ivory-deep); }

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}

.section-head .hero-eyebrow { margin-bottom: 10px; }

.divider-rule {
  width: 64px;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: 18px 0 28px;
}

/* Two-column story block */

.story-block {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.story-block blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--teal-deep);
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin: 24px 0;
}

.story-block p { margin-bottom: 18px; max-width: 62ch; }

.story-aside {
  background: var(--white);
  border-radius: var(--radius-soft);
  padding: 28px;
  border: 1px solid var(--ivory-deep);
}

.story-aside h3 { margin-bottom: 12px; font-size: 1.1rem; }

.story-aside ul { list-style: none; }

.story-aside li {
  padding: 10px 0;
  border-bottom: 1px solid var(--ivory-deep);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.story-aside li:last-child { border-bottom: none; }

.story-aside li strong { color: var(--ink); display: block; font-size: 0.95rem; }

/* ---------- Trustee cards ---------- */

.trustee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.trustee-card {
  background: linear-gradient(160deg, #FFFBF0 0%, var(--gold-soft) 130%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-soft);
  padding: 26px 20px;
  text-align: center;
}

.trustee-role {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 10px;
}

.trustee-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.trustee-affil {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Service list ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}

.service-item {
  border-top: 2px solid var(--gold);
  padding-top: 16px;
}

.service-item h3 { margin-bottom: 8px; font-size: 1.1rem; }

.service-item p { font-size: 0.95rem; }

/* ---------- Domains list ---------- */

.domain-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ivory-deep);
}

.domain-list div {
  padding: 16px 4px;
  border-bottom: 1px solid var(--ivory-deep);
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.domain-list div::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

/* ---------- Timetable ---------- */

table.timetable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

table.timetable th, table.timetable td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--ivory-deep);
  font-size: 0.95rem;
}

table.timetable th {
  font-family: var(--serif);
  color: var(--teal-deep);
  font-weight: 600;
}

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-soft);
  background: linear-gradient(145deg, var(--sage), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}

.gallery-note {
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-soft);
  padding: 16px 20px;
}

.gallery-tile-photo {
  aspect-ratio: auto;
  background: var(--white);
  border: 1px solid var(--ivory-deep);
  border-radius: var(--radius-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 320px;          /* fixed "cell" height — same for every tile */
}

.gallery-tile-photo img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;    /* full photo shown, nothing cut */
  background: var(--ivory-deep); /* soft fill for any empty letterbox space */
  border-radius: 0;
}

.gallery-tile-photo figcaption {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  background: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* long captions truncate to 2 lines instead of stretching the tile */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Donation callout ---------- */

.callout {
  background: var(--teal-deep);
  color: var(--ivory);
  border-radius: var(--radius-soft);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: center;
}

.callout h2 { color: var(--white); }
.callout p { color: var(--gold-soft); }

.callout .btn-primary {
  background: var(--gold);
  color: var(--teal-deep);
}
.callout .btn-primary:hover { background: var(--gold-soft); }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-card {
  background: var(--white);
  border-radius: var(--radius-soft);
  padding: 28px;
  border: 1px solid var(--ivory-deep);
}

.contact-card h3 { margin-bottom: 14px; }

.contact-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--ivory-deep);
  font-size: 0.95rem;
}
.contact-row:last-child { border-bottom: none; }
.contact-row span:first-child { color: var(--ink-soft); }
.contact-row span:last-child { font-weight: 600; color: var(--ink); text-align: right; }

.map-frame {
  border-radius: var(--radius-soft);
  overflow: hidden;
  border: 1px solid var(--ivory-deep);
  aspect-ratio: 4/3;
}

.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */

footer.site-footer {
  background: var(--teal-deep);
  color: var(--ivory-deep);
  padding: 48px 0 28px;
  margin-top: 40px;
}

footer.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}

footer.site-footer h4 {
  color: var(--gold-soft);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

footer.site-footer p, footer.site-footer li { color: #C9C0AC; font-size: 0.9rem; }

footer.site-footer ul { list-style: none; }
footer.site-footer li { padding: 5px 0; }
footer.site-footer a:hover { color: var(--ivory); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 32px auto 0;
  padding: 20px 28px 0;
  border-top: 1px solid rgba(245,239,224,0.12);
  font-size: 0.82rem;
  color: #9C9380;
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  nav.main-nav { display: none; }
  nav.main-nav.nav-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--ivory-deep);
    border-bottom: 1px solid var(--ivory-deep);
    padding: 8px 28px 16px;
  }
  nav.main-nav.nav-open ul {
    flex-direction: column;
    gap: 4px;
  }
  nav.main-nav.nav-open a {
    display: block;
    padding: 10px 0;
  }
  .site-header .wrap { position: relative; }
  .nav-toggle { display: block; }

  .hero .wrap, .story-block, .contact-grid, .callout {
    grid-template-columns: 1fr;
  }
  .hero-art { order: -1; aspect-ratio: 16/9; }

  .facts-strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .trustee-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .domain-list { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  footer.site-footer .wrap { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .service-grid, .trustee-grid, .gallery-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ---------- Accessibility: skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-deep);
  color: var(--ivory);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Compact page hero (interior pages) ---------- */

.page-hero .wrap {
  display: block;
  max-width: 760px;
}

.page-hero { padding-bottom: 40px; }

.section-tight { padding-top: 0; }

/* ---------- Hero illustration ---------- */

.hero-art {
  border-radius: var(--radius-arch);
  overflow: visible;
  aspect-ratio: 4 / 5;
  background: transparent;
  padding: 0;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Print ---------- */

@media print {
  .site-header, .ticker, .nav-toggle, .callout, footer.site-footer { display: none; }
  body { background: #fff; color: #000; }
  .section { padding: 20px 0; }
}

/* ---------- Small spacing utilities ---------- */

.mt-lg { margin-top: 56px; }
.mt-md { margin-top: 18px; }
.text-center { text-align: center; display: block; }
.justify-center { justify-content: center; }

/* ---------- Teachers page ---------- */

.teachers-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.teachers-heading .bar { width: 5px; height: 30px; background: var(--gold); }
.teachers-heading h2 { margin: 0; font-family: var(--serif); font-size: 1.8rem; color: var(--teal-deep); }

.teachers-table-wrap { overflow-x: auto; border-radius: var(--radius-soft); box-shadow: 0 1px 3px rgba(43,35,26,0.08); }
.teachers-table { width: 100%; border-collapse: collapse; background: var(--white); }
.teachers-table th {
  text-align: left; padding: 14px 18px; background: var(--teal-deep); color: var(--white);
  font-family: var(--serif); font-weight: 600; font-size: 0.95rem;
}
.teachers-table td { padding: 14px 18px; border-bottom: 1px solid var(--ivory-deep); font-size: 0.95rem; color: var(--ink); }
.teachers-table tr:nth-child(even) td { background: var(--ivory); }
.teachers-table tr:hover td { background: var(--gold-soft); }
.teachers-table .t-role { color: var(--teal); font-weight: 600; }

/* ---------- Facilities page ---------- */

.facilities-wrap-inner { max-width: 1080px; }
.facilities-wrap-inner h2 { font-family: var(--serif); font-size: 1.6rem; color: var(--teal-deep); margin-bottom: 28px; }
.infra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 32px;
}
.infra-item { display: flex; gap: 16px; }
.infra-number {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600;
}
.infra-body h3 { margin: 4px 0 6px; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; }
.infra-body p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Shared empty-state message ---------- */

.empty-state { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* ---------- Homepage: Our Team / Our Facilities teasers ---------- */

.team-grid, .facility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.team-card, .facility-card {
  background: var(--white); border: 1px solid var(--ivory-deep); border-radius: var(--radius-soft);
  padding: 18px;
}
.team-card h3, .facility-card h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 1.05rem; color: var(--teal-deep); }
.team-card p, .facility-card p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.teaser-link { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--teal); text-decoration: none; }
.teaser-link:hover { text-decoration: underline; }

/* ---------- Homepage: Our History tabs ---------- */

.history-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.history-tab-btn {
  padding: 9px 18px; border: 1px solid var(--ivory-deep); background: var(--white);
  color: var(--ink-soft); cursor: pointer; border-radius: 6px; font-family: var(--sans); font-size: 0.9rem;
}
.history-tab-btn.active { background: var(--teal-deep); color: var(--white); border-color: var(--teal-deep); }
.history-panel { display: none; }
.history-panel.active { display: block; }
.history-panel ul { padding-left: 20px; }
.history-panel li { margin-bottom: 12px; color: var(--ink); line-height: 1.55; }

/* ---------- Simple page-hero band (Teachers / Facilities) ---------- */

.page-hero-band { text-align: center; padding: 56px 24px 32px; background: var(--ivory-deep); }


/* Trustee Team: 5 cards in one row on desktop */
@media (min-width: 900px) {
  .trustee-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px;
  }
  .trustee-grid .trustee-card {
    max-width: none;
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  .trustee-grid .trustee-name {
    font-size: 1rem;
  }
}

/* New school logo in header */
.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 0;
  background: none;
  overflow: visible;
  flex-shrink: 0;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 600px) {
  .brand-mark { width: 52px; height: 52px; }
}


/* Header: keep name and menu items on one line */
.brand-text { white-space: nowrap; }
nav.main-nav a { white-space: nowrap; }
@media (max-width: 1250px) {
  nav.main-nav ul { gap: 18px; }
  nav.main-nav a { font-size: 0.9rem; }
}
/* Below 1150px the 8 menu items no longer fit next to the logo:
   switch to the ☰ menu (same rules as the 880px block). */
@media (max-width: 1150px) {
  nav.main-nav { display: none; }
  nav.main-nav.nav-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--ivory-deep);
    border-bottom: 1px solid var(--ivory-deep);
    padding: 8px 28px 16px;
    z-index: 50;
  }
  nav.main-nav.nav-open ul { flex-direction: column; gap: 4px; }
  nav.main-nav.nav-open a { display: block; padding: 10px 0; font-size: 0.95rem; }
  .site-header .wrap { position: relative; }
  .nav-toggle { display: block; }
}

/* Contact strip: allow wrapping instead of cutting off */
.contact-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
}
.contact-strip span {
  white-space: nowrap;
}

/* Intro video overlay (home page) */
.intro-video {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}
.intro-video.hide {
  opacity: 0;
  pointer-events: none;
}
.intro-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.intro-controls {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  gap: 12px;
}
.intro-btn {
  background: rgba(122, 16, 16, 0.85);
  color: #fff;
  border: 2px solid #d4a017;
  border-radius: 30px;
  padding: 10px 22px;
  font-size: 1rem;
  cursor: pointer;
}
.intro-btn:hover {
  background: #7a1010;
}
@media (max-width: 600px) {
  .intro-controls { bottom: 20px; right: 50%; transform: translateX(50%); }
}


/* ===== Announcements & Invitations (home page) ===== */
/* Paste at the BOTTOM of css/style.css */
.invite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.invite-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: #fffdf7;
  border: 1px solid #d9b870;
  border-left: 5px solid #7a1010;
  border-radius: 10px;
  overflow: hidden;
}
.invite-card.no-poster { grid-template-columns: 1fr; }
.invite-poster { display: block; background: #f3e6c4; }
.invite-poster img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}
.invite-body { padding: 20px 22px; }
.invite-body h3 { margin: 0 0 12px; color: #7a1010; font-size: 1.25rem; line-height: 1.3; }
.invite-meta { margin: 0 0 12px; display: grid; gap: 4px; }
.invite-meta div { display: flex; gap: 10px; }
.invite-meta dt { min-width: 52px; font-weight: 700; color: #24534A; }
.invite-meta dd { margin: 0; }
.invite-body p { margin: 0; line-height: 1.6; }
.invite-poster:focus-visible { outline: 3px solid #d4a017; outline-offset: -3px; }
@media (max-width: 560px) {
  .invite-card { grid-template-columns: 1fr; }
  .invite-poster img { min-height: 0; max-height: 340px; }
}

/* Invitations: keep cards at a readable width */
.invite-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 560px));
  justify-content: center;
}

/* =====================================================================
   PROGRAMS PAGE  (programs.php)
   ===================================================================== */

.program-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 30px;
  margin: 0 auto;
  max-width: 940px;
}

.program-chip {
  width: 150px;
  text-align: center;
  text-decoration: none;
  padding: 16px 8px 18px;
  border-radius: var(--radius-soft);
  transition: background .2s ease, transform .2s ease;
}

.program-chip:hover {
  background: var(--ivory-deep);
  transform: translateY(-3px);
}

.program-chip svg {
  width: 60px;
  height: 60px;
  stroke: var(--teal);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.program-chip:hover svg { stroke: var(--gold); }

.pc-label {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--teal-deep);
}

.pc-count {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  color: var(--ink-soft);
}

.program-card {
  background: var(--white);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
  padding: 22px 26px;
  margin-bottom: 18px;
  scroll-margin-top: 90px;
}

.program-card h3 {
  margin-bottom: 10px;
  font-size: 1.15rem;
  color: var(--teal-deep);
}

.program-card p { font-size: .96rem; }

.program-card--service { border-left-color: var(--teal); }

.program-note {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--ink-soft);
  font-style: italic;
}

.program-students {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--ivory-deep);
}

.program-students h4 {
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.program-students ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.program-students li {
  background: var(--ivory);
  border: 1px solid var(--ivory-deep);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .9rem;
  color: var(--ink);
}

@media (max-width: 620px) {
  .program-chip { width: 44%; }
  .program-chip svg { width: 52px; height: 52px; }
}

/* =====================================================================
   HEADER FIX — the ☰ button was pushed off-screen on phones
   Cause: ".brand-text { white-space: nowrap; }" above forces the school
   name onto one line, making the header wider than the viewport.
   Below 760px the name is allowed to wrap again and the brand is made
   shrinkable, so the toggle stays inside the screen.
   ===================================================================== */

@media (max-width: 760px) {

  /* let the header's flex row actually shrink */
  .site-header .wrap {
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* the brand may shrink; min-width:0 is what allows a flex item to do so */
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
  }

  /* undo the nowrap so the long school name can break onto two lines */
  .brand-text {
    white-space: normal;
    font-size: 0.95rem;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  .brand-text span { font-size: 0.68rem; }

  .brand-mark img { max-width: 42px; height: auto; }

  /* the toggle keeps its size and stays on screen */
  .nav-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px 6px;
    line-height: 1;
  }
}

@media (max-width: 400px) {
  .brand-text { font-size: 0.88rem; }
  .brand-mark img { max-width: 36px; }
  .site-header .wrap { padding-left: 12px; padding-right: 12px; }
}

/* belt and braces: nothing should be able to scroll the page sideways */
html, body { overflow-x: hidden; }