/*
 * timetable.css
 * Page-specific styles for the Funky Jives timetable page (timetable.html).
 * Covers: page banner, schedule cards, location block, booking CTA.
 *
 * Global styles (reset, header, footer, buttons, utilities) live in css/style.css.
 * Mobile-first: base styles for small screens, min-width breakpoints below.
 */


/* =============================================================
   Page Banner
   Compact gradient strip — narrower than the home hero —
   giving the page a clear identity without taking too much space.
   ============================================================= */

.page-banner {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  color: var(--color-white);
  padding: var(--space-xl) 0;
  text-align: center;
}

/* Small pill label above the heading (e.g. "Under 5's") */
.page-banner__label {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.page-banner__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
  line-height: 1.15;
}

.page-banner__subtitle {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}


/* =============================================================
   Schedule Section
   Contains the class cards, location block, and booking CTA.
   ============================================================= */

.schedule {
  padding: var(--space-xl) 0;
}


/* --- Schedule cards grid --- */

/* Single column on mobile; two columns on tablet and up (see breakpoint) */
.schedule__grid {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/*
 * Individual schedule card.
 * Flex row: coloured day-badge on the left, details on the right.
 */
.schedule-card {
  display: flex;
  align-items: stretch;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;               /* Keeps the badge flush with the card edge */
  transition: box-shadow var(--transition), transform var(--transition);
}

.schedule-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/*
 * Coloured left-hand badge showing the day abbreviation.
 * Uses the primary colour to draw the eye to the day at a glance.
 */
.schedule-card__day-badge {
  flex-shrink: 0;
  width: 72px;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: 0.03em;
  writing-mode: horizontal-tb;
}

/* Content area to the right of the badge */
.schedule-card__body {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Day name heading */
.schedule-card__day {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

/* Large time display — the most important piece of information */
.schedule-card__time {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

/* Detail items list: duration, age group */
.schedule-card__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Each detail item: icon + text in a row */
.schedule-card__detail-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.schedule-card__detail-item svg {
  flex-shrink: 0;
  color: var(--color-secondary);
}


/* --- Location blocks --- */

/*
 * Wrapper that holds both venue blocks.
 * Single column on mobile; two equal columns from the tablet breakpoint.
 */
.schedule__locations {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.schedule__location {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border-left: 4px solid var(--color-secondary);
}

/* Heading with inline map-pin icon */
.schedule__location-heading {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.schedule__location-heading svg {
  flex-shrink: 0;
  color: var(--color-secondary);
}

/* Address — using <address> element for semantic correctness */
.schedule__address {
  font-style: normal;             /* <address> is italic by default; reset it */
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  line-height: 1.8;
}


/* --- Booking call-to-action block --- */

.schedule__booking {
  text-align: center;
  padding: var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
}

/* Notice paragraph with inline calendar icon */
.schedule__update-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  text-align: left;
  line-height: 1.6;
}

.schedule__update-notice svg {
  flex-shrink: 0;
  margin-top: 2px;               /* Nudge icon to align with first line of text */
  color: var(--color-primary);
}

/* Inline link within the notice text */
.schedule__booking-link {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.schedule__booking-link:hover,
.schedule__booking-link:focus-visible {
  color: var(--color-primary-dark);
  outline: none;
}

/* Book Now button */
.schedule__cta {
  /* Larger padding to make the CTA feel prominent */
  padding: 0.875rem 2.5rem;
  font-size: var(--font-size-md);
}


/* =============================================================
   Tablet — min-width: 600px
   ============================================================= */

@media (min-width: 600px) {

  /* Larger page banner heading */
  .page-banner__title {
    font-size: var(--font-size-2xl);
  }

  /* Two schedule cards side by side */
  .schedule__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Wider day badge to give the two-column layout more visual balance */
  .schedule-card__day-badge {
    width: 80px;
  }

  /* Two venue blocks side by side, matching the schedule card grid */
  .schedule__locations {
    grid-template-columns: 1fr 1fr;
  }

  /* Centre the booking notice text on wider screens */
  .schedule__update-notice {
    justify-content: center;
    text-align: center;
  }

}


/* =============================================================
   Desktop — min-width: 1024px
   ============================================================= */

@media (min-width: 1024px) {

  /* Full-size page banner heading */
  .page-banner__title {
    font-size: var(--font-size-3xl);
  }

  /* Constrain the two-card grid to a comfortable reading width */
  .schedule__grid {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Constrain the locations wrapper and booking block to match the card grid width */
  .schedule__locations,
  .schedule__booking {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Give the booking block more internal breathing room */
  .schedule__booking {
    padding: var(--space-xl);
  }

}