/* ==========================================================================
   Star Musical Entertainer — mobile rendering fixes
   Loaded last. These address defects observed on a real device rather than
   theoretical breakpoint gaps: content clipped by the hero, grids that never
   collapsed, and floating controls covering the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero clipping
   .hero-slider sets `overflow: hidden` with `min-height: min(94vh, 900px)`.
   Once the slide stacks on mobile its content grows taller than that box and
   the top of the trust badges is cut off. On small screens the hero must size
   to its content instead.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-slider {
    min-height: 0;
    height: auto;
    overflow: visible;   /* stop clipping the stacked slide */
  }

  .hero-slides {
    height: auto;
    min-height: 0;
  }

  .hero-slide {
    /* Room at the bottom for the absolutely positioned controls. */
    padding-block: calc(var(--header-h) + 1.25rem) 7.5rem;
  }

  .hero-slide-inner {
    align-content: start;
  }

  /* The controls overlay the slide, so the slide reserves space for them. */
  .hero-controls {
    position: absolute;
    bottom: 1.25rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
  }
  .hero-meta { order: 0; }
  .hero-arrows { order: 1; }
}

/* --------------------------------------------------------------------------
   2. Two-column sections must actually collapse
   `.grid-2` carries an inline `gap`, and the base rule uses `auto-fit` with a
   340px minimum. At narrow widths auto-fit already yields one column, but the
   override needs matching specificity to win reliably.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Media blocks inside those grids fill the full row. */
  .grid.grid-2 > *,
  .grid.grid-3 > * { width: 100%; min-width: 0; }

  .grid.grid-2 picture,
  .grid.grid-2 img { width: 100%; }
}

/* --------------------------------------------------------------------------
   3. Split layouts (contact form, booking form)
   Previously inline grids that never stacked.
   -------------------------------------------------------------------------- */

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.layout-split--form { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

@media (max-width: 900px) {
  .layout-split,
  .layout-split--form { grid-template-columns: minmax(0, 1fr); }
}

/* Sticky sidebar, previously an inline style. */
.sidebar--sticky { position: sticky; top: calc(var(--header-h) + 20px); }

@media (max-width: 1024px) {
  .sidebar--sticky { position: static; top: auto; }
}

/* --------------------------------------------------------------------------
   4. Floating actions
   On a phone the WhatsApp and call buttons sat over the content and close to
   the back-to-top control. They now stack compactly in one corner with the
   back-to-top opposite, and the page reserves space so nothing is obscured.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .float-actions {
    right: 10px;
    bottom: 10px;
    gap: 8px;
  }
  .float-btn { width: 46px; height: 46px; }
  .float-btn svg { width: 21px; height: 21px; }

  /* The pulsing ring doubles the visual footprint; drop it on small screens. */
  .float-whatsapp::after { display: none; }

  .back-to-top { left: 10px; bottom: 10px; width: 40px; height: 40px; }

  /* Keep the last section clear of the floating buttons. */
  .site-footer { padding-bottom: 4.5rem; }
}

/* --------------------------------------------------------------------------
   5. Section rhythm on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .section { padding-block: clamp(2.25rem, 8vw, 3.25rem); }

  .section-head { margin-bottom: var(--sp-5); }
  .section-head.center { text-align: center; }

  /* Headings were running long and pushing layout. */
  .h-1 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .h-2 { font-size: clamp(1.45rem, 6.5vw, 1.9rem); }
  .h-3 { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }
  .h-hero { font-size: clamp(2rem, 10vw, 3rem); }

  .lead { font-size: .96rem; }

  /* Eyebrow chips wrap instead of overflowing. */
  .eyebrow {
    font-size: .66rem;
    letter-spacing: .16em;
    padding: .4rem .9rem;
    white-space: normal;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   6. Hero trust badges
   Three badges side by side are unreadable on a phone; two per row works,
   and one per row on the narrowest devices.
   -------------------------------------------------------------------------- */

/*
 * The trust badges are laid out entirely in trust-badges.css. Keeping a
 * second set of rules here caused them to collapse to a single column below
 * 400px, which made the strip tall enough to push the carousel controls into
 * the floating action buttons.
 */

/* --------------------------------------------------------------------------
   7. Cards and media
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .card-body { padding: var(--sp-4); }
  .card-media { aspect-ratio: 16/10; }

  .video-card .video-info { padding: var(--sp-3); }

  .map-wrap { aspect-ratio: 4/3; }

  /* Prose images and embeds. */
  .prose img, .prose iframe, .prose table { width: 100%; }
  .prose blockquote { padding: var(--sp-3) var(--sp-4); margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* 16px stops iOS zooming the page when a field gains focus. */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control { font-size: 16px; }

  .btn-block, .form-group .btn { width: 100%; }

  fieldset { min-width: 0; }
  legend { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .footer-grid { gap: var(--sp-5); }
  .footer-logo-plate { padding: 10px 14px; }
  .footer-brand img { width: 165px; }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }
  .footer-legal { justify-content: center; gap: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   10. Carousels on touch
   Arrows are small targets; dots and swipe carry the interaction.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .carousel-controls { gap: var(--sp-3); margin-top: var(--sp-5); }
  .carousel-arrow { width: 40px; height: 40px; }
  .carousel-slide { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   11. Page header
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .page-header {
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 2rem;
  }
  .breadcrumb { gap: var(--sp-1); font-size: .72rem; }
}