/* Lobby Talk — responsive overrides. All layout at ≤768px. */

@media (max-width: 768px) {

  /* ── Corner brackets ───────────────────────────────────── */
  /* Shrink the decorative corner brackets on mobile so stacked content
     (kickers, forms, screenshots) doesn't crowd them. Each corner
     scales toward its own corner so the bracket hugs the section edge. */
  .lt-hero-section > svg,
  .lt-newsletter-section > svg,
  .lt-flag-section > svg {
    transform: scale(0.6);
  }
  .lt-hero-section > svg:nth-of-type(1),
  .lt-newsletter-section > svg:nth-of-type(1),
  .lt-flag-section > svg:nth-of-type(1) { transform-origin: top left; }
  .lt-hero-section > svg:nth-of-type(2),
  .lt-newsletter-section > svg:nth-of-type(2),
  .lt-flag-section > svg:nth-of-type(2) { transform-origin: top right; }
  .lt-hero-section > svg:nth-of-type(3),
  .lt-newsletter-section > svg:nth-of-type(3),
  .lt-flag-section > svg:nth-of-type(3) { transform-origin: bottom left; }
  .lt-hero-section > svg:nth-of-type(4),
  .lt-newsletter-section > svg:nth-of-type(4),
  .lt-flag-section > svg:nth-of-type(4) { transform-origin: bottom right; }

  /* Shorter kicker rules on mobile so they don't stretch toward
     the corner brackets in FOLIO 02/03/04 and the hero eyebrow. */
  .lt-kicker-rule {
    width: 18px !important;
  }

  /* Tagline plaque: keep the horizontal "CARTOON HOSTS · REAL HOTEL TALK"
     treatment on phones by trimming font + padding so it fits at iPhone
     widths without flex-shrink wrapping the internal text. */
  .lt-tagline-plaque {
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }
  .lt-tagline-plaque > span {
    white-space: nowrap !important;
  }

  /* ── Hero ──────────────────────────────────────────────── */
  .lt-hero-section {
    padding: 52px 32px 40px !important;
  }
  /* Shrink the three hero CTAs on mobile so they feel like buttons,
     not banner blocks. Tighter padding + smaller type + looser tracking. */
  .lt-hero-section .lt-btn-fill {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    padding: 11px 14px !important;
  }

  /* Split hero stacks on mobile. Flatten both columns into the grid so
     individual children can be ordered: headline → video → plaque → rest. */
  .lt-hero-split-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .lt-hero-split-copy,
  .lt-hero-split-video {
    display: contents !important;
  }
  .lt-hero-split-copy h1 {
    order: 1;
    font-size: clamp(68px, 14vw, 108px) !important;
  }
  .lt-hero-split-video > div:first-child { order: 2; } /* video frame */
  .lt-hero-split-video > div:last-child  { order: 3; } /* tagline plaque */
  .lt-hero-split-copy > div:nth-of-type(1) { order: 4; } /* eyebrow */
  .lt-hero-split-copy p                    { order: 5; } /* dek */
  .lt-hero-split-copy > div:nth-of-type(2) { order: 6; } /* cta row */
  .lt-hero-split-copy > div:nth-of-type(3) { order: 7; } /* signoff */

  /* Match the centered headline by also centering the dek and CTA row
     so the column reads as one axis. */
  .lt-hero-split-copy p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lt-hero-split-copy > div {
    justify-content: center !important;
  }

  /* ── Episodes ──────────────────────────────────────────── */
  .lt-ep-section {
    padding: 32px 20px 80px !important;
  }
  .lt-ep-title-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .lt-ep-featured-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .lt-ep-featured-thumb {
    aspect-ratio: 16/9 !important;
    height: auto !important;
  }
  /* Featured card body had 52px 48px padding — too tight on mobile,
     making the giant headline collide with the card border. */
  .lt-ep-featured-grid > div:last-child {
    padding: 28px 22px !important;
    gap: 14px !important;
  }
  .lt-ep-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Mobile cap: show only 4 cards total (1 featured + first 3 in grid). */
  .lt-ep-grid > *:nth-child(n+4) {
    display: none !important;
  }
  .lt-ep-archive {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* ── Name That Flag ────────────────────────────────────── */
  .lt-flag-section {
    padding: 64px 20px 64px !important;
  }
  .lt-flag-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Rules 2-col was cramping the icon + text combos on phones. */
  .lt-flag-rules {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Newsletter ────────────────────────────────────────── */
  .lt-newsletter-section {
    padding: 64px 20px 64px !important;
  }
  .lt-newsletter-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
  .lt-newsletter-services {
    grid-template-columns: 1fr !important;
  }
  /* Force every stacked card flush-left so the row dividers line up with
     the section's left edge — the inline paddingLeft:32 on cards 2/3 was
     pushing them inward and making the bottom borders look ragged. */
  .lt-newsletter-services > * {
    padding: 24px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(242, 214, 196, 0.22);
  }
  .lt-newsletter-services > *:first-child {
    padding-top: 4px !important;
  }
  .lt-newsletter-services > *:last-child {
    border-bottom: none;
    padding-bottom: 4px !important;
  }
  .lt-newsletter-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px !important;
  }
  .lt-newsletter-cta button {
    width: 100% !important;
  }

  /* ── Work With Us ──────────────────────────────────────── */
  .lt-wwu-section {
    padding: 52px 20px 64px !important;
  }
  .lt-wwu-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .lt-wwu-input-row {
    grid-template-columns: 1fr !important;
  }

  /* ── Footer ────────────────────────────────────────────── */
  .lt-footer {
    padding: 52px 20px 28px !important;
  }
  .lt-footer-top {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* 3 nav columns into 2 left an orphaned third on a new row. Use
     3 columns at narrower gap so all three sit in one tidy row. */
  .lt-footer-cols {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 420px) {
  /* Below 420px the footer 3-col gets cramped — collapse to a single
     stacked column for breathing room. */
  .lt-footer-cols {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 360px) {
  /* Galaxy-Fold-class narrow widths can't fit the single-line plaque
     even at 10px. Stack the plaque and drop the dot as fallback. */
  .lt-tagline-plaque {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 10px 18px !important;
    font-size: 10px !important;
    text-align: center !important;
  }
  .lt-tagline-dot {
    display: none !important;
  }
}