/*
 * TicketsFest Ukraine — Sitewide Responsive Guard
 * v9.9.110
 * Final public-site responsive layer. Loaded after page-specific CSS.
 * Goal: every public page fits mobile/tablet viewports without horizontal clipping.
 */

/* ---------- 1. Global geometry / overflow safety ---------- */
html {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
#page,
.site,
.site-content,
#content,
main,
.site-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body {
  margin: 0;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

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

/* Grid/flex children must be allowed to shrink. This is the most common
   reason a single long title/URL pushes the entire page outside the viewport. */
:where(
  .site, .site-content, .entry-content,
  .tfe-container, .tfe-wrap, .tfe-page-wrap, .tfe-page-container,
  .tfe-page-wrapper, .tfe-layout, .tfe-content, .tfe-content-box,
  .tfe-section, .tfe-home-section, .tfe-panel,
  .tfe-grid, .tfe-page-grid, .tfe-hero-grid, .tfe-hero__content,
  .tfe-single-wrap, .tfe-performer-wrap, .tfe-tour-wrap,
  .tfe-premium-hero__grid, .tfe-premium-grid,
  .tfe-contact-grid, .tfe-contact-panel,
  .tfe-author-grid, .tfe-book-content,
  .tf-container, .tf-single-wrap, .tf-author-wrap, .tf-sp-grid,
  .tfs-wrap, .tfs-grid, .tfs-grid-2, .tfs-grid-3, .tfs-hero-grid,
  .tfv-container, .tfv-hero__grid, .tfv-form-shell, .tfv-grid-3, .tfv-grid-4,
  .footer-wrapper, .footer-grid, .footer-grid-v994, .tfe-footer-grid
) > * {
  min-width: 0;
  max-width: 100%;
}

/* Long user/content strings must never create a wider document. */
:where(
  .entry-content, .tfe-content, .tfe-content-box, .tfe-card, .tfe-panel,
  .tfe-hero-info, .tfe-bio-content, .tfe-single-content,
  .tfe-event-title, .tfe-card-title, .tfe-tour-card__title,
  .tfe-section-title, .tfe-section-heading, .tfe-page-hero,
  .tfe-item-name, .tfe-det-val, .tfe-order-card,
  .tf-single-content, .tf-c-body, .tf-author-page,
  .tfv-card, .tfv-form-shell
) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ---------- 2. Responsive media / embeds ---------- */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
picture img,
video {
  height: auto;
}

iframe,
embed,
object {
  max-width: 100% !important;
}

:where(
  .tfe-video-main, .tfe-video-section,
  .tfe-spotify-wrap, .tfe-map-container,
  .wp-block-embed, .wp-block-video, .wp-block-image,
  .entry-content iframe, .tfe-content iframe
) {
  max-width: 100%;
}

:where(.tfe-video-main, .wp-block-embed__wrapper) iframe {
  width: 100% !important;
}

.wp-caption,
.wp-caption img,
.alignnone,
.aligncenter,
.alignleft,
.alignright,
.alignwide,
.alignfull {
  max-width: 100%;
}

/* ---------- 3. Form controls ---------- */
:where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .select2-container,
  .select2-selection,
  .tfe-input,
  .tfe-search-input,
  .tfe-sub-input,
  .tfe-bk-input
) {
  max-width: 100%;
}

textarea { resize: vertical; }

button,
input[type="submit"],
input[type="button"],
.tfe-btn,
.tfv-btn {
  max-width: 100%;
}

/* ---------- 4. Tables and code ---------- */
pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

code { overflow-wrap: anywhere; }

.entry-content table,
.tfe-content table,
.tfe-single-content table,
.tfe-legal-content table,
.tf-single-content table {
  max-width: 100%;
}

/* ---------- 5. Slider / carousel containment ---------- */
:where(
  .swiper, .swiper-container,
  .tfe-slider-wrap, .tfe-slider-shell, .slider-container,
  .tfe-banners-wrap, .tfe-hero-banner-section
) {
  max-width: 100%;
  min-width: 0;
}

.swiper-wrapper,
.swiper-slide {
  min-width: 0;
}

/* ---------- 6. Modal / overlay containment ---------- */
:where(.tfe-modal, .tfe-bk-modal, .tfv-modal) {
  max-width: calc(100dvw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
}

/* ---------- 7. Tablet and smaller ---------- */
@media (max-width: 1024px) {
  :root {
    --tfe-responsive-gutter: clamp(16px, 3.2vw, 24px);
  }

  body,
  #page,
  .site,
  .site-content,
  #content,
  main,
  .site-main,
  .tfe-page-wrapper,
  .tfe-events-page,
  .tfv-page,
  .tfs-page,
  .tf-single,
  .tf-author-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Common theme containers. Do not alter desktop max-width; on tablet
     they fill the viewport with a fluid gutter. */
  :where(
    .tfe-container, .tfe-wrap, .tfe-page-wrap, .tfe-page-container,
    .tfe-layout, .tfe-narrow-container,
    .tfe-events-featured-section, .tfe-events-archive-section,
    .tfe-events-seo-block, .tfe-growth-section,
    .tfv-container, .tfs-wrap, .tf-container,
    .footer-wrapper
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: var(--tfe-responsive-gutter) !important;
    padding-right: var(--tfe-responsive-gutter) !important;
  }

  /* Header must never be wider than the viewport. */
  .tfe-header-outer,
  .tfe-header-wrap,
  .tfe-header-inner {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tfe-header-wrap {
    width: calc(100% - 24px) !important;
  }

  .tfe-logo,
  .tfe-logo img,
  .tfe-logo-text {
    min-width: 0 !important;
    max-width: min(58vw, 240px) !important;
  }

  .tfe-mobile-drawer {
    width: min(88vw, 380px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Two-column page/hero layouts become one column before they can squeeze. */
  :where(
    .tfe-layout, .tfe-single-layout,
    .tfe-hero-grid, .tfe-hero__content,
    .tfe-premium-hero__grid,
    .tfv-hero__grid, .tfv-form-shell,
    .tfs-hero-grid,
    .tfe-contact-panel,
    .tfe-single-wrap, .tf-single-wrap, .tf-author-wrap, .tf-sp-grid,
    .tfe-author-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Generic non-event content grids: tablet-friendly 2 columns. Event cards
     are intentionally excluded because mobile-event-cards-sitewide.css owns them. */
  :where(
    .tfe-core-grid-2, .tfe-core-grid-3,
    .tfe-page-grid,
    .tfs-grid-2, .tfs-grid-3,
    .tfv-grid-3, .tfv-grid-4,
    .tfe-contact-grid,
    .tfe-gallery-grid,
    .tfe-details-grid,
    .tfe-info-grid,
    .tfe-stats-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 2vw, 18px) !important;
  }

  /* Large fixed widths inside page-specific inline CSS. */
  :where(
    .tfe-search-form, .tfe-sub-form,
    .tfe-sub-widget-text, .tfe-search-wrap,
    .tfe-login-wrap, .tfe-track-box,
    .tfe-page-hero, .tfe-legal-content,
    .tf-search-form, .tf-search-row
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tfe-search-input,
  .tfe-sub-input,
  .tf-search-input {
    min-width: 0 !important;
  }

  /* Posters/cover art scale down rather than force the content column wider. */
  :where(
    .tfe-hero .tfe-poster,
    .tfe-sp-cover-wrap,
    .tfe-book-cover,
    .tf-sp-img,
    .tf-author-photo-wrap img
  ) {
    max-width: min(100%, 380px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .tfe-hero-title,
  .tfe-events-hero h1,
  .tfe-page-hero h1,
  .tfe-premium-hero__content h1,
  .tfv-hero h1,
  .tfs-hero h1 {
    max-width: 100% !important;
    font-size: clamp(32px, 6.2vw, 56px) !important;
    line-height: 1.02 !important;
  }

  /* Subscription/CTA rows should wrap instead of overflowing. */
  :where(
    .tfe-sub-wrapper, .tfe-sub-widget,
    .tfe-toolbar, .tfe-actions,
    .tfe-hero-actions, .tfe-events-hero-actions,
    .tfe-secondary-actions, .tfv-actions,
    .tf-search-row
  ) {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}

/* ---------- 8. Phones ---------- */
@media (max-width: 767px) {
  :root {
    --tfe-responsive-gutter: clamp(14px, 4vw, 18px);
  }

  body { font-size: 15px; }

  .tfe-header-wrap {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .tfe-mobile-drawer {
    width: min(92vw, 360px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Fluid type for ordinary content pages without touching event-card titles. */
  :where(
    .entry-content h1,
    .tfe-page-hero h1,
    .tfe-hero-title,
    .tfe-events-hero h1,
    .tfe-premium-hero__content h1,
    .tfv-hero h1,
    .tfs-hero h1,
    .tf-single h1,
    .tf-author-page h1
  ) {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
  }

  :where(
    .entry-content h2,
    .tfe-section-title,
    .tfe-section-heading,
    .tfe-premium-section-heading,
    .tfe-events-section-head h2,
    .tfv-section-head h2,
    .tfs-section-title
  ) {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.1 !important;
  }

  /* Ordinary structural grids collapse to one column on phones.
     Event/product-specific grids with their own mobile design are excluded. */
  :where(
    .tfe-core-grid-2, .tfe-core-grid-3,
    .tfe-page-grid,
    .tfs-grid-2, .tfs-grid-3,
    .tfv-grid-3, .tfv-grid-4,
    .tfe-contact-grid,
    .tfe-gallery-grid,
    .tfe-details-grid,
    .tfe-info-grid,
    .tfe-stats-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  /* Forms and search controls: 16px prevents iOS focus zoom. */
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  :where(
    .tfe-search-form, .tfe-sub-form,
    .tfe-toolbar, .tfe-actions,
    .tfe-hero-actions, .tfe-events-hero-actions,
    .tfe-secondary-actions, .tfv-actions,
    .tfv-form-shell, .tf-search-form
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  :where(
    .tfe-search-form > *, .tfe-sub-form > *,
    .tfe-toolbar > *, .tfe-actions > *,
    .tfe-hero-actions > *, .tfe-events-hero-actions > *,
    .tfe-secondary-actions > *, .tfv-actions > *,
    .tf-search-form > *
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Only action/submit buttons are made full width; inline text buttons remain natural. */
  :where(
    .tfe-hero-actions .tfe-btn,
    .tfe-events-hero-actions .tfe-btn,
    .tfe-actions .tfe-btn,
    .tfe-secondary-actions .tfe-btn,
    .tfv-actions .tfv-btn,
    .tfe-btn-submit,
    .tfe-sub-btn,
    .tfe-search-btn,
    .tf-search-btn
  ) {
    width: 100% !important;
    min-height: 46px;
    justify-content: center;
    text-align: center;
  }

  /* Inline page cards and panels scale down with the viewport. */
  :where(
    .tfe-card, .tfe-panel, .tfe-core-card,
    .tfe-premium-card, .tfe-premium-prose-card, .tfe-premium-status-card,
    .tfe-contact-panel, .tfe-events-seo-block__inner,
    .tfv-card, .tfv-hero-card,
    .tfe-order-card, .tfe-login-wrap,
    .tf-card, .tf-purchase-card, .tf-info-card
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Account/checkout item rows can otherwise overflow when metadata is long. */
  .tfe-product-row,
  .tfe-item-row,
  .tfe-oc-header,
  .tfe-oc-footer {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .tfe-item-info,
  .tfe-prod-info,
  .tfe-item-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Native tables stay usable instead of squeezing unreadably. */
  .entry-content table,
  .tfe-content table,
  .tfe-single-content table,
  .tfe-legal-content table,
  .tf-single-content table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dialogs always fit within safe viewport. */
  :where(.tfe-modal, .tfe-bk-modal, .tfv-modal) {
    width: calc(100dvw - 20px) !important;
    max-width: calc(100dvw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Avoid fixed content widths from inline template CSS. */
  :where(
    .tfe-login-wrap,
    .tfe-sub-widget-text,
    .tfe-sub-form,
    .tfe-search-form,
    .tf-search-form,
    .tfe-hero-desc,
    .tfe-hero-sub
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Footer is always viewport-safe. */
  .site-footer,
  .footer-wrapper,
  .footer-grid,
  .footer-grid-v994,
  .tfe-footer-grid {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------- 9. Very small phones ---------- */
@media (max-width: 420px) {
  :root { --tfe-responsive-gutter: 13px; }

  .tfe-header-wrap {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
  }

  .tfe-logo,
  .tfe-logo img,
  .tfe-logo-text {
    max-width: 54vw !important;
  }

  :where(
    .tfe-card, .tfe-panel, .tfe-core-card,
    .tfe-premium-card, .tfe-premium-prose-card, .tfe-premium-status-card,
    .tfe-contact-panel, .tfe-events-seo-block__inner,
    .tfv-card, .tfv-hero-card,
    .tfe-order-card, .tfe-login-wrap,
    .tf-card, .tf-purchase-card, .tf-info-card
  ) {
    border-radius: clamp(16px, 5vw, 22px) !important;
  }

  .tfe-hero-title,
  .tfe-page-hero h1,
  .tfe-events-hero h1,
  .tfe-premium-hero__content h1,
  .tfv-hero h1,
  .tfs-hero h1 {
    font-size: clamp(28px, 9.5vw, 38px) !important;
  }
}

/* ---------- 10. Short landscape phones ---------- */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .tfe-mobile-drawer {
    max-height: calc(100dvh - 8px) !important;
  }

  .tfe-hero,
  .tfe-events-hero,
  .tfv-hero,
  .tfs-hero {
    min-height: auto !important;
    padding-top: clamp(78px, 14vh, 96px) !important;
    padding-bottom: 28px !important;
  }
}