/* ============================================================
   FRAMELINE MEDIA — SMALL SCREENS AND AWKWARD ONES

   Loaded last, so it wins without anything else needing to change.

   Written against the things that were actually wrong rather than a
   general tidy-up:

     · the top of the hero could be cut off
     · buttons sat squashed against each other
     · resizing between sizes jumped rather than flowed

   The rule throughout: nothing is ever hidden to make it fit, and
   nothing is smaller than a thumb.
   ============================================================ */

/* ─── Never let anything push the page sideways ───
   One over-wide element and the whole page scrolls horizontally,
   which on a phone feels broken even when everything else is fine. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   THE HERO

   THE BUG THIS FIXES: the hero was a full viewport tall, at least
   600px, with its content pinned to the BOTTOM. On a short screen
   — a phone in landscape, or a small laptop with the browser bar —
   600px of forced height with bottom-aligned content pushed the
   eyebrow and the first line of the headline up out of sight.

   So: on anything short, the hero sizes to its content and centres
   instead of being pinned. Nothing is ever cropped.
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 700px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: clamp(6rem, 14vh, 9rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
    align-items: center;
  }
  .hero-scroll { display: none; }   /* nothing to point at */
}

@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 88svh;
    padding-top: 7rem;
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
    align-items: flex-end;
  }
  .hero-title {
    font-size: clamp(2.1rem, 11vw, 3.4rem);
    line-height: 0.98;
    /* A long word like ANNIVERSARY must break rather than overflow. */
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero-subtitle { font-size: 0.95rem; max-width: 34ch; }
  .hero-content .eyebrow { font-size: 0.62rem; letter-spacing: 0.16em; }
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS AND TAP TARGETS

   Two buttons side by side on a narrow screen ended up touching,
   with the text nearly meeting in the middle. Below 560px they
   stack; above it they wrap with a real gap.

   44px minimum height throughout — the size a thumb actually hits.
   ═══════════════════════════════════════════════════════════ */
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero-actions,
  .cta-actions,
  .pb-actions,
  .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .hero-actions .btn,
  .cta-actions .btn { flex: 1 1 auto; min-width: 12rem; }
}

@media (max-width: 560px) {
  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .cta-actions .btn { width: 100%; min-width: 0; }
}

/* The little pill row under the hero — let it wrap instead of
   squeezing four tags onto one line. */
.hero-tags,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 560px) {
  .hero-tags .tag,
  .tag-row .tag { font-size: 0.6rem; padding: 0.3rem 0.6rem; }
}

/* ═══════════════════════════════════════════════════════════
   THE NAV BAR
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-nav {
    padding-inline: 1rem;
    gap: 0.75rem;
  }
  .nav-logo-img { width: 72px; height: auto; }
  .nav-logo-wordmark { font-size: 0.78rem; }
  .nav-toggle {
    width: 44px; height: 44px;       /* a real target, not 3 thin lines */
    align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
  }
}
@media (max-width: 380px) {
  /* On the narrowest phones the wordmark and the logo compete. */
  .nav-logo-wordmark span { display: none; }
}

/* Drawer links big enough to hit without aiming. */
.nav-drawer .nav-links a {
  display: block;
  padding: 0.5rem 1rem;
  min-height: 44px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   GRIDS THAT SHOULD FLOW, NOT JUMP

   Fixed column counts snap from three to one at a breakpoint and
   look broken in between. Letting them fit themselves means they
   reflow smoothly at every width, including a resized window.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .package-grid,
  .addon-grid,
  .track-grid,
  .review-grid,
  .team-grid,
  .work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
  }
}

/* ─── Typography that does not collide on a phone ─── */
@media (max-width: 768px) {
  h1, h2, h3 { overflow-wrap: break-word; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.08; }
  .section-lede  { font-size: 0.95rem; }
  .container { padding-inline: 1.15rem; }
}

/* ─── Forms ─── */
@media (max-width: 768px) {
  /* 16px minimum, or iOS zooms the whole page in when a field is
     focused and leaves it zoomed. */
  input, select, textarea { font-size: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ─── The chat bubble must never sit on top of a button ─── */
@media (max-width: 768px) {
  .chat-bubble, .assistant-bubble {
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ─── Notches and rounded corners ─── */
@supports (padding: max(0px)) {
  .site-nav { padding-top: max(0.75rem, env(safe-area-inset-top)); }
  footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* ─── Somebody who would rather things did not move ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}