/* El Brollo: containment and responsive text safety. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

:where(
  .site-shell,
  .hero-copy,
  .story-grid,
  .section-heading-row,
  .menu-heading,
  .menu-stage,
  .menu-workspace,
  .interactive-menu-head,
  .news-heading,
  .news-grid,
  .news-cta,
  .ambience-heading,
  .ambience-stage,
  .contact-content,
  .reservation-page,
  .reservation-main,
  .reservation-story,
  .reservation-form,
  .reservation-form-heading,
  .panel-page,
  .panel-content,
  .panel-section-heading,
  .staff-heading,
  .panel-card-heading,
  .panel-metric-grid,
  .reservation-admin-grid,
  .reward-admin-grid,
  .recipe-cards,
  .auth-card,
  .setup-card,
  .club-page,
  .member-card,
  .member-card-top,
  .demo-page
) {
  min-width: 0;
}

:where(
  p,
  li,
  label,
  small,
  dd,
  dt,
  blockquote,
  .panel-card span,
  .panel-card strong,
  .reservation-admin-card p,
  .reward-admin-card p,
  .staff-person-card span,
  .member-card span,
  .member-card strong,
  .contact-highlights span
) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .hero-bubble,
  .contact-burst
) {
  max-width: 100%;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
}

:where(
  .speech-card,
  .pillar-card,
  .menu-item-card,
  .official-menu-card,
  .news-intro,
  .news-card,
  .news-cta,
  .ambience-stage,
  .ambience-comic,
  .contact-content,
  .reservation-art,
  .reservation-form-card,
  .panel-card,
  .panel-metric,
  .reservation-admin-card,
  .reward-admin-card,
  .recipe-card,
  .staff-person-card,
  .auth-card,
  .setup-card,
  .qr-scanner-card,
  .member-card,
  .demo-view-card
) {
  min-width: 0;
  height: auto;
}

:where(
  input,
  select,
  textarea,
  table
) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .comic-button,
  .nav-admin,
  .nav-mobile-reservation,
  .reservation-nav-cta,
  .panel-primary-action,
  .panel-card-heading button,
  .reservation-admin-actions button,
  .reservation-admin-actions a,
  .reward-admin-card button,
  .staff-person-card footer button,
  .auth-card button,
  .setup-card button,
  .club-entry-form button
) {
  min-width: 0;
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.15;
  text-align: center;
}

.hero-bubble {
  height: auto;
  line-height: 1.08;
  padding-block: 16px 14px;
}

.speech-card blockquote,
.ambience-comic blockquote {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.06;
}

/* Keep the supporting line inside the visible oval, not only its box. */
.speech-card {
  padding-bottom: clamp(96px, 14vw, 132px);
}

.speech-card > p {
  width: min(78%, 34rem);
  margin-inline: auto;
  text-align: center;
}

.news-card-top,
.menu-item-footer,
.reservation-admin-top,
.panel-card-heading,
.member-card-top,
.panel-notice {
  min-width: 0;
  flex-wrap: wrap;
}

.item-badge,
.news-card-top span,
.news-cta > div > span,
.burst-tag,
.drink-menu-group > header {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.panel-content {
  overflow-x: clip;
  overflow-y: visible;
}

@media (width <= 960px) {
  .section-heading-row,
  .menu-heading,
  .news-heading,
  .ambience-heading,
  .panel-section-heading,
  .staff-heading {
    align-items: start;
  }

  .news-cta,
  .panel-section-heading,
  .staff-heading {
    flex-wrap: wrap;
  }

  .speech-card,
  .ambience-comic {
    padding-inline: clamp(28px, 7vw, 58px);
  }
}

@media (width <= 680px) {
  .hero-bubble {
    width: min(44%, 190px);
    max-width: calc(50% - 14px);
    min-height: 82px;
    padding: 13px 14px 12px;
    font-size: clamp(1.05rem, 5vw, 1.45rem);
    line-height: 1.1;
  }

  .hero-bubble-one {
    min-height: 108px;
  }

  .hero-bubble-two,
  .hero-bubble-three {
    min-height: 88px;
  }

  .speech-card,
  .ambience-comic {
    border-radius: 32px;
    padding: 42px 26px 36px;
  }

  .speech-card > p {
    width: 100%;
  }

  .ambience-sound {
    align-self: flex-start;
    max-width: calc(100% - 8px);
    margin-right: 0;
    white-space: normal;
  }

  .ambience-details span,
  .menu-item-card,
  .news-card,
  .pillar-card,
  .demo-view-card,
  .panel-metric {
    min-height: 0;
  }

  .reservation-form-heading,
  .news-card-top,
  .menu-item-footer,
  .reservation-admin-top,
  .panel-card-heading,
  .member-card-top,
  .panel-notice {
    align-items: flex-start;
  }

  .reservation-form-heading h2 {
    font-size: clamp(2.75rem, 16vw, 3.7rem);
  }

  .contact-burst {
    width: 100%;
    font-size: clamp(5rem, 24vw, 8rem);
    text-align: center;
  }

  .news-cta .comic-button,
  .contact-actions .comic-button,
  .ambience-copy .comic-button,
  .menu-order-bar .comic-button,
  .qr-scanner-card > button,
  .costing-overview-card > button {
    width: 100%;
  }
}