/*
 * parties.css
 * Styles specific to parties.html.
 * Covers: page banner, what's included card, package cards grid,
 *         extras list, travel & terms blocks, and CTA section.
 *
 * Relies on global variables and base styles from style.css.
 * Mobile-first: base styles target small screens.
 */


/* =============================================================
   Page Banner
   Compact gradient strip — same pattern as timetable.html —
   giving the page a clear branded identity.
   ============================================================= */

.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 age-range pill above the heading */
.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);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}


/* =============================================================
   Shared Section Header
   Centred heading used above each content section.
   ============================================================= */

.parties-section__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}


/* =============================================================
   What's Included Section
   Centred card listing all inclusions and the max-children note.
   ============================================================= */

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

/* Card container — max-width keeps it readable on wide screens */
.parties-included__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Bulleted inclusion list — uses a coloured tick via ::before */
.parties-included__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.parties-included__list li {
  padding-left: 1.75rem;
  position: relative;
}

/* Pink tick mark for each inclusion */
.parties-included__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* "Maximum of 30 children" note — separated by a rule */
.parties-included__note {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-bottom: 0;
}


/* =============================================================
   Party Packages Section
   Five package cards in a responsive grid. Alt background colour
   distinguishes this section from its neighbours.
   ============================================================= */

.parties-packages {
  background-color: var(--color-bg-alt);
  padding: var(--space-xl) 0;
}

/*
 * Package cards grid.
 * Mobile: single column stack.
 * Tablet and above: see breakpoints at the bottom of this file.
 */
.packages-grid {
  display: grid;
  gap: var(--space-md);
}

/* Individual package card */
.package-card {
  background-color: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* Featured (most popular) card — pink border to draw the eye */
.package-card--featured {
  border-color: var(--color-primary);
}

/* Top row: package label on the left, price on the right */
.package-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-xs);
}

/* "Package N" label */
.package-card__number {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Price displayed large and in brand pink */
.package-card__price {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-primary);
}

/* "Most Popular" pill badge on the featured card */
.package-card__badge {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

/* Duration heading (e.g. "60 Minutes") */
.package-card__duration {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

/* Short description text */
.package-card__description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: 0;
}


/* =============================================================
   Additional Extras Section
   Striped list rows with name on the left, price on the right.
   ============================================================= */

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

/* Contained card — max-width matches the inclusions card above */
.extras-list {
  list-style: none;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* Clips content to the rounded corners */
}

/* Each extra row: name left, price right, wraps on very small screens */
.extras-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  flex-wrap: wrap;
}

/* Divider between rows */
.extras-list__item + .extras-list__item {
  border-top: 1px solid var(--color-border);
}

/* Alternate row background for readability */
.extras-list__item:nth-child(even) {
  background-color: var(--color-bg-alt);
}

.extras-list__name {
  font-weight: 600;
  color: var(--color-text);
}

/* Parenthetical detail text within the name (e.g. "including glow sticks") */
.extras-list__detail {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Price — bold pink, non-breaking so it doesn't split across lines */
.extras-list__price {
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}


/* =============================================================
   Travel & Booking Terms Section
   Two info blocks stacked on mobile, side by side on desktop.
   ============================================================= */

.parties-info {
  background-color: var(--color-bg-alt);
  padding: var(--space-xl) 0;
}

/* Single column on mobile; two columns at the tablet breakpoint */
.parties-info__grid {
  display: grid;
  gap: var(--space-lg);
}

/* Individual info block (travel or terms) */
.parties-info__block {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.parties-info__heading {
  font-size: var(--font-size-lg);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}

/* Bulleted list for the booking terms */
.parties-terms__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.parties-terms__list li {
  padding-left: 1.75rem;
  position: relative;
}

/* Pink bullet marker for each term */
.parties-terms__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.4;
}


/* =============================================================
   Get in Touch CTA Section
   Centred block with a heading, supporting text, and a button.
   ============================================================= */

.parties-cta {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.parties-cta__title {
  margin-bottom: var(--space-sm);
}

/* Supporting text — constrained width for comfortable line length */
.parties-cta__text {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-lg);
}


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

@media (min-width: 600px) {

  /* Two-column package grid on tablet */
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Travel and terms blocks sit side by side */
  .parties-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


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

@media (min-width: 1024px) {

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

  /*
   * Five packages across two rows using a 6-column grid:
   *   Row 1 — 3 cards, each spanning 2 columns  (fills all 6)
   *   Row 2 — 2 cards, each spanning 2 columns, offset by 1
   *           so the pair is centred within the grid.
   */
  .packages-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* First three cards: 2 columns each */
  .package-card:nth-child(-n+3) {
    grid-column: span 2;
  }

  /* Card 4: start at column 2 so the bottom row is centred */
  .package-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  /* Card 5: immediately follows card 4 */
  .package-card:nth-child(5) {
    grid-column: 4 / span 2;
  }

}