/*
Theme Name: Lauren Sattler
Theme URI: https://laurensattler.com
Author: Lauren Sattler
Author URI: https://laurensattler.com
Description: Custom theme for laurensattler.com — parent brand hub with sub-brand sections. Currently: time/space yoga at /timespaceyoga. Mobile-first, WCAG AA accessible.
Version: 1.4.0
License: All rights reserved
Text Domain: laurensattler
*/

/* ============================================
   PARENT BRAND — LAUREN SATTLER (teal/gold)
   Scoped to .section-parent
   Easy to change later: just update these values.
   ============================================ */

.section-parent {
  --color-bg: #0C1B2A;
  --color-text: #F5EDE3;
  --color-text-secondary: #6B9DAD;
  --color-accent: #C5A55A;
  --color-accent-hover: #D4B76B;
  --font-display: 'Source Serif 4', serif;
  --font-body: 'Lexend', sans-serif;
}

@media (prefers-color-scheme: light) {
  .section-parent {
    --color-bg: #F5EDE3;
    --color-text: #0C1B2A;
    --color-text-secondary: #4A7A8A;
    --color-accent: #8A7430;
    --color-accent-hover: #6B5A20;
  }
}

/* ============================================
   TIME/SPACE YOGA BRAND
   Scoped to .section-yoga
   ============================================ */

.section-yoga {
  /* Dark mode defaults */
  --color-bg: #0B1622;
  --color-bg-card: #1C2E45;
  --color-text: #F5EDE3;
  --color-text-secondary: #3A5A7C;
  --color-accent-bar: #C4935A;
  --color-slash: #C4935A;
  --color-label-upcoming: #7D6882;
  --color-label-detail: #a495a7;
  --color-card-shadow: none;
  --color-donation-border: rgba(245, 237, 227, 0.15);
  --font-display: 'Source Serif 4', serif;
  --font-body: 'Lexend', sans-serif;
}

@media (prefers-color-scheme: light) {
  .section-yoga {
    --color-bg: #F5EDE3;
    --color-bg-card: #F5EDE3;
    --color-text: #0B1622;
    --color-text-secondary: #3A5A7C;
    --color-accent-bar: #8A7490;
    --color-slash: #A67038;
    --color-label-upcoming: #A67038;
    --color-label-detail: #3A5A7C;
    --color-card-shadow: 0 1px 8px rgba(11, 22, 34, 0.08);
    --color-donation-border: rgba(11, 22, 34, 0.1);
  }
}

/* ============================================
   SHARED — colors that both sections reference
   ============================================ */

:root {
  /* Typography sizing */
  --logo-wordmark: 32px;
  --logo-subheader: 11.5px;
  --size-upcoming: 19px;
  --size-event-name: 24px;
  --size-body: 16px;
  --size-label: 16px;
  --line-height: 1.65;

  /* Spacing */
  --space-page-x: 20px;
  --space-page-y: 24px;
  --card-radius: 12px;
  --accent-bar-width: 3px;
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100vh;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Parent section: full-height flex layout so landing centers and footer sticks to bottom */
body.section-parent {
  display: flex;
  flex-direction: column;
}

body.section-parent #main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

a {
  color: var(--color-accent, var(--color-slash));
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent, var(--color-slash));
  outline-offset: 2px;
}

/* ============================================
   SKIP LINK (accessibility)
   ============================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--color-accent, var(--color-slash));
  color: var(--color-bg);
  font-weight: 600;
  font-size: 14px;
}

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

/* ============================================
   PARENT BRAND — ROOT LANDING PAGE
   ============================================ */

.parent-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-page-y) var(--space-page-x);
  text-align: center;
  width: 100%;
}

.parent-landing__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--color-text);
}

.parent-landing__welcome {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 480px;
  margin-bottom: 40px;
}

.parent-landing__offerings {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.parent-landing__link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.parent-landing__link:hover,
.parent-landing__link:focus {
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

/* ============================================
   YOGA SECTION — SITE HEADER
   ============================================ */

.yoga-header {
  padding: var(--space-page-y) var(--space-page-x) 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* ============================================
   YOGA — LOGO / WORDMARK
   ============================================ */

.logo-link {
  text-decoration: none;
  display: block;
}

.logo-link:hover {
  text-decoration: none;
}

.wordmark-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wm-line1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--logo-wordmark);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--color-text);
}

.wm-line1 .slash {
  color: var(--color-slash);
}

.wm-sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--logo-subheader);
  white-space: nowrap;
  margin-top: 3px;
  color: var(--color-text-secondary);
}

/* ============================================
   YOGA — HAMBURGER MENU
   Stays as three lines — no X animation.
   ============================================ */

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  z-index: 210; /* Above the drawer so it's always tappable */
  position: relative;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 2.5px;
  border-radius: 1px;
  background: var(--color-text);
}

/* ============================================
   YOGA — NAVIGATION (side drawer from right)
   ============================================ */

.yoga-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 220px;
  z-index: 200;
  background: var(--color-bg-card);
  padding: 80px 0 var(--space-page-y);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  border-left: 1px solid var(--color-donation-border);
  overflow-y: auto;
}

.yoga-nav[aria-hidden="false"] {
  display: block;
  transform: translateX(0);
}

/* Dim backdrop behind the drawer */
.yoga-nav-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  background: rgba(11, 22, 34, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.yoga-nav-backdrop.is-open {
  display: block;
  opacity: 1;
}

/* When logged in, push drawer padding down for admin bar */
body.admin-bar .yoga-nav {
  padding-top: 112px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .yoga-nav {
    padding-top: 126px;
  }
}

.yoga-nav ul {
  list-style: none;
}

.yoga-nav li {
  border-bottom: 1px solid var(--color-donation-border);
  transition: background-color 0.15s ease;
}

.yoga-nav li:last-child {
  border-bottom: none;
}

/* Hover/focus state: amber background highlight */
.yoga-nav li:hover,
.yoga-nav li:focus-within {
  background-color: var(--color-slash);
}

.yoga-nav a {
  display: block;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-align: right;
}

/* When hovered, text goes dark to contrast with amber bg */
.yoga-nav li:hover a,
.yoga-nav li:focus-within a {
  color: #0B1622;
  text-decoration: none;
}

.yoga-nav a:hover,
.yoga-nav a:focus {
  text-decoration: none;
}

/* ============================================
   YOGA — MAIN CONTENT
   ============================================ */

.yoga-main {
  padding: 8px var(--space-page-x) var(--space-page-y);
  max-width: 600px;
}

/* ============================================
   YOGA — SECTION LABELS
   ============================================ */

.section-label--upcoming {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-upcoming);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label-upcoming);
  margin-bottom: 14px;
}

/* ============================================
   YOGA — EVENT CARDS
   ============================================ */

.event-card {
  background: var(--color-bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  border-left: var(--accent-bar-width) solid var(--color-accent-bar);
  box-shadow: var(--color-card-shadow);
  margin-bottom: 24px;
}

.event-card__flyer {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.event-card__flyer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__flyer-overlay {
  position: relative;
  z-index: 2;
  padding: 20px 20px 22px;
  background: linear-gradient(
    transparent 0%,
    rgba(11, 22, 34, 0.7) 35%,
    rgba(11, 22, 34, 0.92) 100%
  );
  color: #F5EDE3; /* always light on gradient regardless of mode */
}

.event-card__event-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-event-name);
  line-height: 1.2;
  margin-bottom: 6px;
}

.event-card__date {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.event-card__location {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  opacity: 0.85;
}

.event-card__details {
  padding: 16px 18px 18px;
}

.event-card__detail-label {
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--color-label-detail);
}

.event-card__detail-text {
  font-weight: 300;
  font-size: var(--size-body);
  line-height: var(--line-height);
}

.event-card__donation {
  font-weight: 400;
  font-size: var(--size-body);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-donation-border);
}

/* ============================================
   FOOTERS
   ============================================ */

.yoga-footer {
  padding: var(--space-page-y) var(--space-page-x);
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-secondary);
}

.parent-footer {
  padding: var(--space-page-y) var(--space-page-x);
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-secondary);
}

/* ============================================
   DESKTOP (progressive enhancement)
   ============================================ */

@media (min-width: 768px) {
  :root {
    --space-page-x: 40px;
    --space-page-y: 32px;
  }

  .yoga-main {
    margin: 0 auto;
  }

  .parent-landing__name {
    font-size: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-page-x: 60px;
  }
}


/* ============================================
   SCHEDULE PAGE — LAYOUT
   
   Overrides the default yoga-main max-width (600px) because
   the card grid needs more room for 2-3 columns.
   ============================================ */

body.page-schedule .yoga-main {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section labels should match grid width, not stretch full container */
body.page-schedule .schedule-page {
  width: 100%;
}


/* ============================================
   SCHEDULE PAGE — SECTION LABELS
   ============================================ */

.section-label--past {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-upcoming);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 40px;
  margin-bottom: 14px;
}


/* ============================================
   SCHEDULE PAGE — CARD GRID
   
   CSS Grid creates the 2-column (mobile) / 3-column (desktop)
   layout. Using minmax instead of 1fr so that when there are
   fewer cards than columns, they center instead of stretching
   to fill the full width.
   ============================================ */

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* When there's only one upcoming event, single centered column */
.schedule-grid--single {
  grid-template-columns: minmax(0, 340px);
}


/* ============================================
   SCHEDULE PAGE — EVENT CARDS
   
   Each card is a clickable unit with:
   1. A 4:5 flyer image with gradient overlay + event name
   2. Caption below with date, location, CTA
   3. Optional RSVP button at the bottom
   ============================================ */

.schedule-card {
  background: var(--color-bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  border-left: var(--accent-bar-width) solid var(--color-accent-bar);
  box-shadow: var(--color-card-shadow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

/* Subtle lift on hover — gives tactile feedback */
.schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(11, 22, 34, 0.15);
}

/* Focus ring for keyboard users */
.schedule-card:focus-visible {
  outline: 2px solid var(--color-accent-bar);
  outline-offset: 2px;
}

/* Past events are slightly faded to visually separate them */
.schedule-card--past {
  opacity: 0.65;
}

.schedule-card--past:hover {
  opacity: 0.85;
}


/* ============================================
   CARD — FLYER IMAGE (4:5 ratio)
   
   The aspect-ratio property forces the container to 4:5.
   The image fills it via object-fit: cover (CSS center-crop).
   The gradient overlay sits on top with the event name.
   ============================================ */

.schedule-card__flyer {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: var(--color-bg); /* Fallback if no image */
}

.schedule-card__flyer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No-image fallback: shows the card background color */
.schedule-card--no-image .schedule-card__flyer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}


/* ============================================
   CARD — GRADIENT OVERLAY + EVENT NAME
   
   A gradient from transparent (top) to dark (bottom) ensures
   the event name is always readable over any image.
   The name uses Source Serif 4 at weight 500 (per brand guidelines).
   ============================================ */

.schedule-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 16px 14px 14px;
  background: linear-gradient(
    transparent 0%,
    rgba(11, 22, 34, 0.55) 30%,
    rgba(11, 22, 34, 0.88) 100%
  );
}

.schedule-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #F5EDE3; /* Always bone on gradient, regardless of mode */
  margin: 0;
}


/* ============================================
   CARD — CAPTION (below image)
   
   Date, location, and "what to expect →" CTA.
   Uses 14px at weight 600 for date and CTA — this qualifies
   as "large text" under WCAG AA (14px bold ≥ 3:1 ratio needed),
   and our text/bg combos all exceed 15:1.
   ============================================ */

.schedule-card__caption {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1; /* Pushes RSVP button to bottom */
}

.schedule-card__date {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}

.schedule-card__location {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0.8;
}

/* CTA — always amber per interaction color rule */
.schedule-card__cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-slash);
  margin-top: 6px;
}


/* ============================================
   CARD — RSVP BUTTON
   
   Amber background with deep night text. Sits at the
   bottom of the card. Links out to Eventbrite/external.
   stopPropagation in the HTML prevents the card click
   from also firing.
   ============================================ */

.schedule-card__rsvp {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  padding: 10px 14px;
  background: var(--color-slash);
  color: #0B1622;
  text-decoration: none;
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

.schedule-card__rsvp:hover,
.schedule-card__rsvp:focus {
  text-decoration: none;
  opacity: 0.9;
}


/* ============================================
   CARD — DESCRIPTION PREVIEW
   
   Shows a truncated snippet of the "what to expect" text
   on cards that don't have an RSVP button. This fills the
   whitespace so cards in the same row are equal height.
   Same padding as the RSVP button for consistent alignment.
   ============================================ */

.schedule-card__preview {
  padding: 10px 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0.6;
  border-top: 1px solid var(--color-donation-border);
}


/* ============================================
   SCHEDULE PAGE — EMPTY STATE
   
   Shown when there are no events at all. Keeps the page
   from looking broken.
   ============================================ */

.schedule-empty {
  text-align: center;
  padding: 60px var(--space-page-x);
}

.schedule-empty__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: 8px;
}

.schedule-empty__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  color: var(--color-text-secondary);
}

.schedule-empty__text a {
  color: var(--color-slash);
}


/* ============================================
   EVENT MODAL — BACKDROP
   
   Semi-transparent overlay behind the modal.
   Clicking it closes the modal.
   ============================================ */

.event-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 22, 34, 0.6);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.event-modal-backdrop.is-open {
  display: block;
  opacity: 1;
}


/* ============================================
   EVENT MODAL — CONTAINER
   
   MOBILE: slides up from bottom as a "bottom sheet"
   (like Instagram comments or Apple Maps).
   Covers ~90% of screen height (10vh top padding).
   
   DESKTOP: centered overlay with rounded corners,
   max-width 700px, image left + text right.
   ============================================ */

.event-modal {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 910;
  background: var(--color-bg-card);
  border-radius: 16px 16px 0 0;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.event-modal.is-open {
  display: block;
  transform: translateY(0);
}


/* ============================================
   MODAL — CLOSE BUTTON
   ============================================ */

.event-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
}

.event-modal__close:hover {
  opacity: 1;
}


/* ============================================
   MODAL — DRAG HANDLE (mobile visual cue)
   ============================================ */

.event-modal__drag-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text);
  opacity: 0.25;
  margin: 10px auto 6px;
}


/* ============================================
   MODAL — BODY + DETAILS
   ============================================ */

.event-modal__body {
  padding: 8px 20px 28px;
}

.event-modal__image {
  display: none; /* Hidden on mobile by default — shown on desktop */
}

.event-modal__image img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.event-modal__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-event-name);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 12px 0;
}

.event-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.event-modal__date {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body);
  color: var(--color-text);
}

.event-modal__time {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  color: var(--color-text);
}

/* Location — tappable button that copies to clipboard */
.event-modal__location {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  color: var(--color-slash);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  position: relative;
}

.event-modal__location:hover {
  opacity: 0.8;
}

/* "Copy address?" prompt — appears when location is tapped */
.event-modal__copy-prompt {
  display: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

.event-modal__copy-prompt.is-visible {
  display: inline;
}

/* "yes" button inside the prompt — amber per interaction rule */
.event-modal__copy-yes {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-slash);
  cursor: pointer;
  padding: 2px 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.event-modal__copy-yes:hover {
  opacity: 0.8;
}

/* "Copied!" confirmation tooltip */
.event-modal__copied {
  display: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-slash);
  margin-left: 8px;
}

.event-modal__copied.is-visible {
  display: inline;
}

.event-modal__cost {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body);
  color: var(--color-text);
  margin-bottom: 12px;
}

.event-modal__divider {
  height: 1px;
  background: var(--color-donation-border);
  margin: 12px 0;
}

.event-modal__section-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-label-detail);
  margin-bottom: 6px;
}

.event-modal__description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-body);
  line-height: var(--line-height);
  color: var(--color-text);
  margin-bottom: 20px;
}

/* RSVP button in modal — full width, centered text */
.event-modal__rsvp {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  padding: 12px 28px;
  background: var(--color-slash);
  color: #0B1622;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
}

.event-modal__rsvp:hover,
.event-modal__rsvp:focus {
  text-decoration: none;
  opacity: 0.9;
}

.event-modal__rsvp.is-hidden {
  display: none;
}


/* ============================================
   MODAL — FLYER IMAGE AT BOTTOM (mobile)
   
   On mobile, the flyer image shows at the bottom of
   the modal content, after the RSVP button.
   ============================================ */

.event-modal__image--mobile {
  margin-top: 20px;
}

.event-modal__image--mobile img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}


/* ============================================
   SCHEDULE + MODAL — DESKTOP OVERRIDES
   ============================================ */

@media (min-width: 768px) {

  /* 3-column grid on desktop, centered when fewer items */
  .schedule-grid {
    grid-template-columns: repeat(3, minmax(0, 300px));
    gap: 18px;
  }

  .schedule-grid--single {
    grid-template-columns: minmax(0, 300px);
  }

  /* Two items on desktop: use 2 columns so they center properly */
  .schedule-grid--two {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }

  /* Larger event name on desktop cards */
  .schedule-card__name {
    font-size: 20px;
  }

  /* Modal: centered overlay instead of bottom sheet */
  .event-modal {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.95);
    border-radius: 16px;
    max-width: 1000px;
    width: 92%;
    max-height: 85vh;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), 
                opacity 0.2s ease;
  }

  .event-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* Hide the drag handle on desktop (it's a mobile pattern) */
  .event-modal__drag-handle {
    display: none;
  }

  /* Desktop modal body: image left (60%), text right (40%) */
  .event-modal__body {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
    padding: 24px 28px 28px;
    align-items: start;
  }

  /* Show image in sidebar position on desktop */
  .event-modal__image {
    display: block;
  }

  /* Hide the mobile bottom image on desktop */
  .event-modal__image--mobile {
    display: none;
  }

  .event-modal__close {
    top: 14px;
    right: 16px;
  }
}