/* ==========================================================================
   Star Musical Entertainer — responsive layer
   Loaded last so it can adapt layouts without editing the design rules.
   Nothing here changes colours, spacing scale, typography or component
   styling: it only changes how existing pieces are arranged as the viewport
   narrows.

   Breakpoints
     1400px+   large desktop
     1200px    laptop
     1024px    small laptop / large tablet landscape
     900px     tablet
     768px     tablet portrait
     640px     large phone
     480px     phone
     360px     small phone
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global overflow safety
   A single element wider than the viewport makes the whole page scroll
   sideways, which is the most common mobile defect. These rules make that
   structurally impossible.
   -------------------------------------------------------------------------- */

html, body { max-width: 100%; overflow-x: hidden; }

/* Media and embeds must never exceed their container. */
img, picture, video, canvas, svg, iframe, table, pre {
  max-width: 100%;
}

/* Long unbroken strings (URLs, emails) are a frequent overflow cause. */
p, li, td, th, dd, dt, blockquote, figcaption, .card p, .testimonial-text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Grid and flex children default to min-width:auto, which prevents them
   shrinking below their content. This is the single most useful line for
   making existing grid layouts behave. */
.grid > *,
.carousel-slide,
.hero-slide-content,
.card,
.panel {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   1. Sidebar layouts
   Several pages use an inline `grid-template-columns: minmax(0,1fr) <fixed>`
   for a content + sidebar split. Inline styles cannot be overridden by media
   queries, so those templates now carry `.layout-sidebar` and the widths are
   defined here instead — identical on desktop, stacked on tablet and below.
   -------------------------------------------------------------------------- */

.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.layout-sidebar--wide { grid-template-columns: minmax(0, 1fr) 340px; }
.layout-sidebar--admin { gap: 20px; grid-template-columns: minmax(0, 1fr) 300px; }
.layout-sidebar--admin-lg { gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; }

/* Media + form split used on the gallery edit screen. */
.layout-media {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   2. Large desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* --------------------------------------------------------------------------
   3. Laptop
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .layout-sidebar,
  .layout-sidebar--wide { grid-template-columns: minmax(0, 1fr) 300px; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

  /* Four-up carousels get crowded before the JS steps down. */
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
}

/* --------------------------------------------------------------------------
   4. Small laptop / tablet landscape
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .layout-sidebar,
  .layout-sidebar--wide,
  .layout-sidebar--admin,
  .layout-sidebar--admin-lg {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--sp-5);
  }

  .hero-slide-inner { gap: var(--sp-5); }

  /* Sticky sidebars stop being useful once the column is narrow. */
  .sidebar[style*="sticky"],
  aside.sidebar { position: static !important; }
}

/* --------------------------------------------------------------------------
   5. Tablet
   Below this width a two-column split leaves both columns too narrow, so
   every sidebar layout stacks.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .layout-sidebar,
  .layout-sidebar--wide,
  .layout-sidebar--admin,
  .layout-sidebar--admin-lg,
  .layout-media {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The sidebar follows the content rather than sitting beside it. */
  .layout-sidebar > aside,
  .layout-sidebar--wide > aside,
  .layout-sidebar--admin > aside,
  .layout-sidebar--admin-lg > aside { position: static; }

  /* Gallery edit: the preview image no longer needs a 200px column. */
  .layout-media > img,
  .layout-media > picture { max-width: 200px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

  .process-step:not(:last-child)::after { display: none; }
}

/* --------------------------------------------------------------------------
   6. Tablet portrait
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --sp-9: 4rem; --sp-10: 5rem; }

  .section { padding-block: clamp(2.5rem, 7vw, 4rem); }

  /* Two-up grids collapse to a single column so cards keep a usable width. */
  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }

  .filter-bar { gap: var(--sp-2); }
  .filter-btn { font-size: .8rem; padding: .5rem 1rem; }

  /* Prose measure is already narrow enough; tighten heading rhythm. */
  .prose h2 { margin-top: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   7. Large phone
   -------------------------------------------------------------------------- */

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

  .footer-grid { grid-template-columns: 1fr; }

  /* Trust badge layout lives in trust-badges.css; these flex rules had no
     effect once the parent became a grid, and only added confusion. */

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

  /* Buttons go full width so they are comfortable to tap. */
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; }

  .video-grid { grid-template-columns: minmax(0, 1fr); }

  /* Breadcrumbs wrap rather than overflow. */
  .breadcrumb { font-size: .76rem; }

  /* Forms: side-by-side fields stack. */
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Phone
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .container { padding-inline: 1rem; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--sp-4) var(--sp-2); }
  .stat-num { font-size: 1.7rem; }
  .stat-label { font-size: .72rem; }

  /* Trust badge sizing is handled in trust-badges.css. */

  .testimonial { padding: var(--sp-4); }
  .cta-band { padding: var(--sp-5) var(--sp-4); }

  /* Floating buttons must not cover content or each other. */
  .float-actions { right: 12px; bottom: 12px; gap: var(--sp-2); }
  .back-to-top { left: 12px; bottom: 12px; }

  .pagination a, .pagination span { min-width: 38px; height: 38px; font-size: .82rem; }

  .tag-list { gap: var(--sp-1); }
  .tag { font-size: .72rem; padding: .28rem .65rem; }
}

/* --------------------------------------------------------------------------
   9. Small phone
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .container { padding-inline: .85rem; }

  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }

  .brand-name { font-size: .88rem; }
  .brand-sub { font-size: .5rem; }

  .btn { font-size: .86rem; padding: .8rem 1.3rem; }
  .btn-lg { padding: .95rem 1.5rem; font-size: .92rem; }
}

/* --------------------------------------------------------------------------
   10. Landscape phones
   Short viewports need the hero to shrink or the content is unreachable.
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .hero-slider { min-height: 0; }
  .hero-slide { padding-block: calc(var(--header-h) + 1rem) 4.5rem; }
  .hero-slide-visual img { max-height: 180px; }
  .hero-slide-ring { display: none; }
  .page-header { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 1.5rem; }
}

/* --------------------------------------------------------------------------
   11. Touch devices
   Hover styles stick on touch screens, and small targets are hard to hit.
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  /* Overlays that only appear on hover are permanently visible instead. */
  .gallery-overlay { opacity: 1; background: linear-gradient(to top, rgba(21,10,8,.9) 0%, transparent 58%); }
  .gallery-zoom { opacity: 1; transform: scale(1); }

  .card:hover { transform: none; }
  .gallery-item:hover { transform: none; }
  .gallery-item:hover img { transform: none; }

  /*
   * Minimum comfortable tap target.
   *
   * Footer links are handled separately in footer-responsive.css: applying a
   * flat 44px there produced a footer roughly 1,676px tall, because three
   * columns of nine links each became a wall of full-width rows.
   */
  .nav a, .widget-list a, .pagination a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .carousel-dot { width: 14px; height: 14px; }
  .carousel-dot.is-active { width: 34px; }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */

@media print {
  .layout-sidebar,
  .layout-sidebar--wide,
  .layout-media { grid-template-columns: 1fr; }
  .carousel-controls, .hero-controls { display: none; }
}