/* =====================================================
   TicketsFest.EU v10.0.5 — Emergency mobile layout fix
   Purpose: stop the broken mobile state where homepage event cards are squeezed
   into tiny cropped columns and the dark hero/banner block looks cut.
   Loaded after CRM/plugin CSS.
   ===================================================== */

@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .tfe-page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Header stays above the banner, not inside/cutting it. */
  .tfe-header-wrap,
  .site-header,
  .tfe-header {
    z-index: 9999 !important;
  }

  /* Mobile home hero: full-width dark block, no cropped side frame. */
  body.home .tfe-hero-banner-section,
  body.page-template-page-home-dots .tfe-hero-banner-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 46px !important;
    padding: calc(118px + env(safe-area-inset-top, 0px)) 16px 28px !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(37,99,235,.16), transparent 34%),
      radial-gradient(circle at 88% 26%, rgba(236,72,153,.10), transparent 30%),
      linear-gradient(180deg, #0b1224 0%, #0f172a 100%) !important;
    border-radius: 0 0 28px 28px !important;
    overflow: visible !important;
  }

  body.home .tfe-hero-banner-section::before,
  body.page-template-page-home-dots .tfe-hero-banner-section::before {
    inset: 0 !important;
    opacity: .45 !important;
  }

  body.home .tfe-hero-banner-section .tfe-container,
  body.page-template-page-home-dots .tfe-hero-banner-section .tfe-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  body.home .tfe-hero-banner-section .tfe-banners-wrap,
  body.page-template-page-home-dots .tfe-hero-banner-section .tfe-banners-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #0f172a !important;
    box-shadow: 0 18px 44px rgba(2,6,23,.26) !important;
    line-height: 0 !important;
  }

  body.home .tfe-hero-banner-section .tftb-banners,
  body.home .tfe-hero-banner-section .tftb-track,
  body.home .tfe-hero-banner-section .tftb-slide,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-banners,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-track,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.home .tfe-hero-banner-section .tftb-slide-inner,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-slide-inner {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1600 / 791 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #0f172a !important;
  }

  body.home .tfe-hero-banner-section .tftb-slide-img,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-slide-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #0f172a !important;
  }

  body.home .tfe-hero-banner-section .tftb-nav,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-nav {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
  }

  body.home .tfe-hero-banner-section .tftb-prev,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-prev { left: 12px !important; }
  body.home .tfe-hero-banner-section .tftb-next,
  body.page-template-page-home-dots .tfe-hero-banner-section .tftb-next { right: 12px !important; }

  /* Critical event-card reset: no tiny columns, no half cards, no cropped CTA. */
  body.home .tfe-slider-lock,
  body.page-template-page-home-dots .tfe-slider-lock,
  .tfe-events-page .tfe-slider-lock {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .tfe-slider-lock .tfe-instance[data-layout="grid"],
  body.page-template-page-home-dots .tfe-slider-lock .tfe-instance[data-layout="grid"],
  .tfe-events-page .tfe-instance[data-layout="grid"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    contain: none !important;
    content-visibility: visible !important;
  }

  body.home .tfe-slider-lock .tfe-instance[data-layout="grid"] > .tfe-grid,
  body.page-template-page-home-dots .tfe-slider-lock .tfe-instance[data-layout="grid"] > .tfe-grid,
  .tfe-events-page .tfe-instance[data-layout="grid"] > .tfe-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: min(390px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
  }

  body.home .tfe-slider-lock .tfe-instance[data-layout="grid"] > .tfe-grid > .tfe-card-item,
  body.page-template-page-home-dots .tfe-slider-lock .tfe-instance[data-layout="grid"] > .tfe-grid > .tfe-card-item,
  .tfe-events-page .tfe-instance[data-layout="grid"] > .tfe-grid > .tfe-card-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    flex-basis: auto !important;
    margin: 0 auto !important;
    scroll-snap-align: unset !important;
    overflow: visible !important;
  }

  body.home .tfe-card-inner,
  body.page-template-page-home-dots .tfe-card-inner,
  .tfe-events-page .tfe-card-inner {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  body.home .tfe-poster,
  body.page-template-page-home-dots .tfe-poster,
  .tfe-events-page .tfe-poster {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.home .tfe-card-caption,
  body.page-template-page-home-dots .tfe-card-caption,
  .tfe-events-page .tfe-card-caption {
    padding: 58px 18px 18px !important;
  }

  body.home .tfe-card-caption-title,
  body.page-template-page-home-dots .tfe-card-caption-title,
  .tfe-events-page .tfe-card-caption-title {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.02 !important;
    -webkit-line-clamp: 2 !important;
  }

  body.home .tfe-card-caption-meta,
  body.page-template-page-home-dots .tfe-card-caption-meta,
  .tfe-events-page .tfe-card-caption-meta {
    font-size: 16px !important;
    line-height: 1.24 !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
  }

  body.home .tfe-card-caption-price,
  body.page-template-page-home-dots .tfe-card-caption-price,
  .tfe-events-page .tfe-card-caption-price {
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.home .tfe-card-caption-row,
  body.page-template-page-home-dots .tfe-card-caption-row,
  .tfe-events-page .tfe-card-caption-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body.home .tfe-card-caption-cta,
  body.page-template-page-home-dots .tfe-card-caption-cta,
  .tfe-events-page .tfe-card-caption-cta {
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 16px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.home .tfe-section-header,
  body.page-template-page-home-dots .tfe-section-header {
    margin-bottom: 26px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.home .tfe-section-title,
  body.page-template-page-home-dots .tfe-section-title {
    font-size: clamp(34px, 11vw, 46px) !important;
    line-height: .98 !important;
    text-align: center !important;
  }
}

@media (max-width: 375px) {
  body.home .tfe-slider-lock .tfe-instance[data-layout="grid"] > .tfe-grid,
  body.page-template-page-home-dots .tfe-slider-lock .tfe-instance[data-layout="grid"] > .tfe-grid,
  .tfe-events-page .tfe-instance[data-layout="grid"] > .tfe-grid {
    max-width: calc(100vw - 28px) !important;
    gap: 18px !important;
  }

  body.home .tfe-card-caption,
  body.page-template-page-home-dots .tfe-card-caption,
  .tfe-events-page .tfe-card-caption {
    padding: 50px 14px 14px !important;
  }

  body.home .tfe-card-caption-title,
  body.page-template-page-home-dots .tfe-card-caption-title,
  .tfe-events-page .tfe-card-caption-title {
    font-size: 22px !important;
  }
}