/* ==========================================================================
   The Citadel Event Space — Site Styles
   Loaded after brand.css. Page-specific styles can extend this later.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-navy-deep);
  background: var(--color-white);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: normal;
  letter-spacing: var(--tracking-heading);
  color: var(--color-navy);
  margin: 0 0 var(--space-sm);
}
h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

@media (max-width: 480px) {
  h1, .hero__title, .page-title { font-size: 2.1rem; }
  h2 { font-size: 1.65rem; }
}

.eyebrow {
  font-family: var(--font-label);
  font-weight: bold;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-gold-deep);
}

a { color: var(--color-gold-deep); }
a:hover { color: var(--color-navy); }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  background: var(--color-gold);
  color: var(--color-navy-deep);
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}
.btn:hover { background: var(--color-gold-deep); color: var(--color-white); }

/* ==========================================================================
   Header / nav — light background per live site (not a navy bar)
   ========================================================================== */
.site-header {
  background: var(--color-gray-bg);
  border-bottom: 1px solid var(--color-gray-line);
}

.site-header__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
}

.site-header__side {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.site-header__side--left { justify-self: start; }
.site-header__side--right { justify-self: end; }

.site-header .brand {
  justify-self: center;
  display: block;
}

.site-header .brand__lockup {
  height: 64px;
  width: auto;
  display: block;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-navy);
}

.site-header__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  padding: 0 var(--space-md) var(--space-sm);
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .site-header__side--left { display: none; }
  .nav-toggle { display: flex; }
  .site-header__top { grid-template-columns: auto 1fr; }
  .site-header .brand { justify-self: start; }
  .site-header .brand__lockup { height: 48px; }
  .site-header__nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0;
    padding: 0;
  }
  .site-header__nav.is-open {
    display: flex;
  }
  .site-header__nav a {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-gray-line);
  }
}

@media (max-width: 400px) {
  .site-header__top { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .site-header .brand__lockup { height: 38px; }
  .site-header .btn--call { padding: 0.5rem 1rem; font-size: 0.9rem; }
}

.site-header__nav a {
  color: var(--color-gray-text);
  text-decoration: none;
  font-size: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
}

.site-header__nav a:hover { color: var(--color-navy); }

.site-header__nav a[aria-current="page"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-gold-deep);
}

/* ==========================================================================
   Footer — light top section + darker bottom bar, per live site
   ========================================================================== */
.site-footer {
  background: var(--color-gray-bg);
  color: var(--color-navy-deep);
  font-size: 0.95rem;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-gray-line);
}

.site-footer__nav {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.site-footer__nav a {
  color: var(--color-gray-text);
  text-decoration: none;
}
.site-footer__nav a:hover { color: var(--color-navy); }

.site-footer__brand {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 1.2rem;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
}

@media (max-width: 600px) {
  .site-footer__columns { grid-template-columns: 1fr; gap: var(--space-md); }
}

.site-footer__columns h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-xs);
}

.site-footer__columns p {
  color: var(--color-gray-text);
  margin: 0 0 var(--space-xs);
}

.site-footer__columns a { color: var(--color-navy-deep); text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  background: var(--color-gray-bottom);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  color: var(--color-gray-text);
}

.site-footer__legal { display: flex; gap: var(--space-sm); align-items: center; }
.site-footer__legal a { color: var(--color-gray-text); }

.site-footer__social { display: flex; align-items: center; gap: var(--space-xs); }

.icon-link--facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-gold);
  color: var(--color-white);
}
.icon-link--facebook:hover { background: var(--color-gold-deep); }

/* ==========================================================================
   Page shell
   ========================================================================== */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.page-title {
  margin-bottom: var(--space-xs);
}

.page-subtitle {
  color: var(--color-gray-text);
  margin: 0 0 var(--space-lg);
}

.placeholder-notice {
  border: 1px dashed var(--color-gold-deep);
  background: var(--color-cream);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
}

/* ==========================================================================
   Event cards (Our Events page)
   ========================================================================== */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.event-card {
  border: 1px solid var(--color-gray-line);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

.event-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Event badge/logo images (e.g. the FVDA Trick-or-Treat emblem) get a square
   box instead of the default 4:3 photo box, so the badge is never cropped
   top/bottom the way a landscape photo would be. This is the standard crop
   for this logo per Gwen. */
.event-card__image--logo {
  aspect-ratio: 1 / 1;
}

/* Semi-transparent dark scrim behind the date badge (matching the old
   site), so the white date text stays legible over any photo/logo, light
   or dark. No blur -- just a plain gradient overlay, per Gwen. */
.event-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.32) 28%, transparent 60%);
  pointer-events: none;
}

/* Full event flyers already print their own date, so they skip the scrim
   and date badge, which would cover the flyer's own text. */
.event-card__image--flyer::after {
  display: none;
}

.event-card__date {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.event-card__date .day {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  display: block;
}

.event-card__date .month {
  font-family: var(--font-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: bold;
}

.event-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.event-card__title {
  font-weight: bold;
  color: var(--color-navy-deep);
  margin: 0 0 0.25rem;
}

.event-card__location {
  color: var(--color-gray-text);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}

.event-card__description {
  color: var(--color-navy-deep);
  font-size: 0.9rem;
  margin: 0;
  /* Same card-height fix as .info-card -- absorbs extra height when the
     grid stretches a card to match a taller neighbor's description. */
  flex-grow: 1;
}

/* ==========================================================================
   Promo split (image + content card) — e.g. FBC Visitors Day
   ========================================================================== */
.promo-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  margin-bottom: var(--space-xl);
}

.promo-split__image {
  min-height: 320px;
  aspect-ratio: 1 / 1;
  align-self: center;
}

.promo-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logos (e.g. the FBC tree) shrink to fit inside the box instead of
   filling it, with extra room on the side the white card overlaps, so the
   card never covers the logo's edge. */
.promo-split__image--logo img {
  object-fit: contain;
  padding: var(--space-md);
  padding-right: calc(60px + var(--space-md));
}

.promo-split__card {
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: var(--space-lg);
  margin-left: -60px;
  align-self: center;
  z-index: 1;
}

.promo-split__card h2 { margin-bottom: var(--space-sm); }
.promo-split__card p { color: var(--color-gray-text); }
.promo-split__card .btn { margin-top: var(--space-sm); }

@media (max-width: 720px) {
  .promo-split { grid-template-columns: 1fr; }
  .promo-split__card { margin-left: 0; margin-top: -40px; width: 90%; }
  .promo-split__image--logo img { padding: var(--space-md); padding-bottom: calc(40px + var(--space-md)); }
}

/* ==========================================================================
   Homepage — hero, "Be Our Guest" split, gallery
   ========================================================================== */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  background:
    linear-gradient(rgba(21,39,56,0.45), rgba(21,39,56,0.45)),
    url("/assets/images/home/hero-citadel-room.jpg") center / cover no-repeat;
  padding: var(--space-xl) var(--space-md);
}

.hero__content { max-width: 760px; }

.hero__title {
  color: var(--color-white);
  font-size: 2.75rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  margin-bottom: var(--space-sm);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0 0 var(--space-md);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.hero .btn--outline {
  background: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  padding: 0.6rem 1.6rem;
}
.hero .btn--outline:hover { background: var(--color-white); color: var(--color-navy-deep); }

/* Be Our Guest */
.guest-split {
  background: var(--color-gold);
  display: grid;
  grid-template-columns: minmax(220px, 420px) 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-xl) var(--space-md);
}

.guest-split__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  justify-self: center;
}
.guest-split__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.guest-split__content h2 { font-size: 2.25rem; }
.guest-split__content p { margin: 0 0 var(--space-sm); }
.guest-split__content .btn--navy {
  background: var(--color-navy-deep);
  color: var(--color-white);
}
.guest-split__content .btn--navy:hover { background: var(--color-navy); }

@media (max-width: 720px) {
  .guest-split { grid-template-columns: 1fr; text-align: center; }
  .guest-split__photo { max-width: 280px; }
}

.guest-split__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-navy-deep);
  margin: -0.25rem 0 var(--space-sm);
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.gallery-grid > a:first-child { grid-row: 1 / 3; }

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-grid a { display: block; line-height: 0; }

@media (max-width: 720px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-grid > a:first-child { grid-row: auto; grid-column: 1 / 3; }
}

/* ==========================================================================
   Room intro (Services hero) -- photo + heading/body below, light textured bg
   ========================================================================== */
.room-intro {
  background: var(--color-gray-bg);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  text-align: center;
}

.room-intro__photo {
  max-width: 1000px;
  margin: 0 auto var(--space-lg);
  border-radius: 6px;
  overflow: hidden;
}
.room-intro__photo img { width: 100%; height: auto; display: block; }

.room-intro__content { max-width: 700px; margin: 0 auto; }

/* Circle photo rows (Services) */
.circle-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-white);
}

.circle-row__item {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.circle-row__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .circle-row__item { width: 160px; height: 160px; }
}

/* Stats band */
.stats-band {
  background: var(--color-gold);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.stats-band h2 { margin-bottom: var(--space-lg); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: var(--space-sm);
  max-width: 900px;
  margin: 0 auto;
}

.stat-tile {
  background: var(--color-white);
  padding: var(--space-sm);
}
.stat-tile .stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 3.25rem;
  line-height: 1.1;
  color: var(--color-navy);
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.stat-tile .stat-label {
  font-size: 0.9rem;
  color: var(--color-gray-text);
}

@media (max-width: 620px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .stat-tile .stat-value { font-size: 2.25rem; }
}

@media (max-width: 360px) {
  .stats-band { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .stat-tile { padding: var(--space-xs); }
  .stat-tile .stat-value { font-size: 1.9rem; }
}

/* ==========================================================================
   Generic image + title + body card grid -- amenities, floorplan layouts,
   lobby configs all reuse this
   ========================================================================== */
.section-heading {
  text-align: center;
  padding: var(--space-xl) var(--space-md) 0;
}
.section-heading p { color: var(--color-gray-text); }
/* Left-aligned variant, matching the old site's floor-plan section heading */
.section-heading--left {
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

/* Grid rows stretch every card to the row's tallest card by default (no
   align-items override) -- combined with the flex column below, this is
   what keeps a whole row of cards the same height regardless of how much
   any one card's title/description text wraps. */
.info-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-line);
  display: flex;
  flex-direction: column;
}
/* Drop shadow on the Floorplans and Services page cards, matching the old site's look.
   Cards keep the base .info-card thin border (var(--color-gray-line)) on both pages. */
.floorplans-page .info-card,
.services-page .info-card {
  box-shadow: 0 4px 12px rgba(30, 57, 84, 0.15);
}
.floorplans-page .room-intro__photo {
  box-shadow: 0 4px 12px rgba(30, 57, 84, 0.15);
}
.info-card__image {
  aspect-ratio: 4 / 3;
  background: var(--color-gray-bg);
  overflow: hidden;
}
.info-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Floorplan diagrams: let the box take each diagram's own natural shape
   (square or rectangular, like the old site) instead of forcing every
   image into a fixed 4:3 box -- this removes the letterboxing/whitespace
   entirely, since the box always matches the image exactly. */
.info-card__image--diagram {
  aspect-ratio: auto;
  background: var(--color-white);
}
.info-card__image--diagram img { width: 100%; height: auto; object-fit: initial; }
.info-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.info-card__title {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
}
.info-card__description {
  color: var(--color-gray-text);
  font-size: 0.95rem;
  margin: 0;
  /* Absorbs the extra height when the grid stretches this card to match a
     taller neighbor in the same row, instead of leaving dead space below
     the text or letting a long description make its own card taller than
     the rest of the row. */
  flex-grow: 1;
}

/* CTA row (Floorplans bottom) */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}
.cta-row__box {
  background: var(--color-gray-bg);
  padding: var(--space-lg);
  text-align: center;
}
.cta-row__box p { color: var(--color-gray-text); margin-bottom: var(--space-sm); }

@media (max-width: 720px) {
  .cta-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Photo + CTA card (How to Book hero)
   ========================================================================== */
.photo-cta__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 240px;
  max-height: 480px;
  overflow: hidden;
  background: var(--color-navy-deep);
}
.photo-cta__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-cta__card {
  max-width: 640px;
  margin: -60px auto 0;
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: var(--space-lg);
  text-align: center;
  position: relative;
}
.photo-cta__card p { color: var(--color-gray-text); }

@media (max-width: 720px) {
  .photo-cta__card { margin-top: -40px; width: 90%; padding: var(--space-md); }
}

/* Pricing */
.pricing-intro {
  max-width: 700px;
  margin: 0 auto;
  /* Top padding is smaller than the usual --space-xl since the new
     "Pricing" .section-heading directly above already provides that
     top gap for the section as a whole. */
  padding: var(--space-md) var(--space-md) 0;
  text-align: center;
  color: var(--color-gray-text);
}
.pricing-intro p { margin: 0 0 var(--space-sm); }
.pricing-intro strong { color: var(--color-navy-deep); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.pricing-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-line);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}
.pricing-card h3 { margin-bottom: 0.25rem; }
.pricing-card .pricing-days { color: var(--color-gray-text); font-size: 0.9rem; margin: 0 0 var(--space-xs); }
.pricing-card .pricing-amount { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-gold-deep); font-weight: bold; margin: 0 0 var(--space-xs); }
.pricing-card .pricing-deposit { color: var(--color-gray-text); font-size: 0.85rem; margin: 0 0 var(--space-sm); }
.pricing-card hr { border: none; border-top: 2px solid var(--color-gold); width: 40px; margin: var(--space-sm) auto; }
.pricing-card .pricing-note { color: var(--color-gray-text); font-size: 0.85rem; margin: 0; }

.pricing-band {
  background: var(--color-gray-bg);
  padding-bottom: var(--space-lg);
}
.pricing-band .pricing-grid { padding-top: var(--space-lg); }

/* Calendar embed (Airtable public calendar) */
.calendar-embed {
  max-width: 900px;
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-md);
}
.calendar-embed__frame {
  display: block;
  width: 100%;
  min-height: 533px;
  border: 1px solid var(--color-gray-line);
}
.calendar-embed__subscribe {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-gray-text);
  margin-top: var(--space-sm);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-form-section {
  background: var(--color-gray-bg);
  padding: var(--space-xl) var(--space-md);
}
.contact-form {
  max-width: 1000px;
  margin: 0 auto;
}
.contact-form label {
  display: block;
  font-weight: bold;
  color: var(--color-navy-deep);
  margin: var(--space-sm) 0 0.3rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--color-gray-line);
  font-family: var(--font-body);
  font-size: 1rem;
}
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-xl);
}
.contact-form__col--message {
  display: flex;
  flex-direction: column;
}
.contact-form__col--message label { margin-top: 0; }
.contact-form__col--message textarea {
  flex: 1;
  min-height: 220px;
  resize: vertical;
}
@media (max-width: 720px) {
  .contact-form__grid { grid-template-columns: 1fr; }
  .contact-form__col--message { margin-top: var(--space-sm); }
}
.contact-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: var(--space-sm) 0;
  font-size: 0.85rem;
  color: var(--color-gray-text);
}
.contact-form .consent input { margin-top: 0.2rem; }
.contact-form button.btn { margin-top: var(--space-sm); border: none; cursor: pointer; }
.contact-form button.btn[disabled] { opacity: 0.6; cursor: wait; }
.contact-form__botcheck { display: none !important; }
.contact-form__status {
  margin-top: var(--space-sm);
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--color-gold);
  background: var(--color-white);
  color: var(--color-navy-deep);
}
.contact-form__status--error { border-left-color: #B3261E; }
.contact-form__status a { color: var(--color-navy); font-weight: bold; }

.call-or-text {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}
.call-or-text p { color: var(--color-gray-text); margin-bottom: var(--space-md); }

.hours-block {
  background: var(--color-gray-bg);
  padding: var(--space-xl) var(--space-md);
}
.hours-block__inner {
  max-width: 700px;
  margin: 0 auto;
}
.hours-block h3 { margin-top: var(--space-md); }
.hours-row {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  color: var(--color-gray-text);
}

.split-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}
.split-info__image img { width: 100%; height: auto; display: block; }
.split-info__content p { color: var(--color-gray-text); }

@media (max-width: 720px) {
  .split-info { grid-template-columns: 1fr; }
}

.social-cta {
  background: var(--color-gray-bg);
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}
.social-cta__circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-sm);
}
.social-cta__circle:hover { background: var(--color-gold-deep); }

/* Our Events: shown only when every event card has aged out */
.event-card[hidden], .event-grid[hidden], .event-empty[hidden] { display: none; }
.event-empty {
  text-align: center;
  max-width: 640px;
  margin: var(--space-lg) auto;
  padding: 0 1rem;
}