/* Mobile overrides for Tabak Keßler (≤ 768px) */
@media (max-width: 768px) {

  /* General text: no hyphenation/blocksatz on phones */
  #sec-bf76 .u-text, #sec-bf76 p, #sec-bf76 li {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    overflow-wrap: anywhere;
    line-height: 1.55;
  }

  /* Hero: video + headings */
  #sec-bf76 .u-background-video { height: 40vh; }
  #sec-bf76 .u-title { font-size: 1.6rem; white-space: normal; padding: 0 1rem; }
  #sec-bf76 .u-subtitle { font-size: 1rem; padding: 0 1rem; }

  /* Filialen: stack + make carousels fluid */
  #sec-398f .u-layout-row,
  #carousel_4d74 .u-layout-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  /* Reorder: in the first Filialen block (sec-398f) the City-description is the 4th cell – show it above its carousel */
  #sec-398f .u-layout-row > .u-layout-cell:nth-child(4) { order: -1; }

  /* Carousels/images: make sure they stay visible and scale */
  #sec-398f .u-carousel, #sec-398f .u-gallery,
  #carousel_4d74 .u-carousel, #carousel_4d74 .u-gallery {
    height: auto !important;
  }
  .u-carousel-inner, .u-carousel-item, .u-gallery-inner { height: auto !important; }
  .u-carousel img, .u-gallery img, img.u-back-image, .u-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* Social feed under each other */
  .social-flex { flex-direction: column; align-items: stretch; }
  .social-flex .social-col { flex: 1 1 auto; width: 100%; }
  .social-flex iframe, .social-flex img { width: 100% !important; height: auto !important; }

  /* Kontakt: better readability on phones */
  #sec-45ec .u-text { text-align: left; }
  #sec-45ec .conForm { max-width: 100%; margin: 1rem auto; padding: 0; }

  /* Generic spacing */
  .u-container { padding: 1rem !important; box-shadow: none; }
}

/* --- Fix: Carousels/Galerien sichtbar halten --- */
@media (max-width: 767px) {
  /* Höhe vorgeben, damit nichts kollabiert */
  .u-gallery,
  .u-section-4 .u-gallery-1,
  .u-section-5 .u-gallery-1,
  .u-section-6 .u-gallery-1 {
    height: 280px !important;      /* ggf. 240–320 testen */
    overflow: hidden;
    display: block !important;
  }
  .u-gallery .u-carousel-inner,
  .u-gallery .u-gallery-inner,
  .u-gallery .u-gallery-item,
  .u-back-slide {
    height: 100% !important;
  }
  .u-back-image,
  .u-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  /* --- Social Feed untereinander + sichtbar --- */
  .social-grid { 
    display: block !important; 
  }
  .social-grid > * { 
    width: 100% !important; 
    max-width: 100% !important; 
  }
  .social-grid iframe {
    width: 100% !important;
    min-height: 420px;              /* bei Bedarf erhöhen */
    display: block;
  }
}

/* --- Mobile fixes added by assistant --- */
@media (max-width: 767px) {
  /* Show carousels first on mobile for Burbach (section 4) and Lerchesflur (section 6) */
  .u-section-4 .u-layout-cell-1 { order: 2; }
  .u-section-4 .u-layout-cell-2 { order: 1; }

  .u-section-6 .u-layout-cell-1 { order: 2; }
  .u-section-6 .u-layout-cell-2 { order: 1; }

  /* Ensure gallery has a visible height on mobile */
  .u-section-4 .u-gallery-1,
  .u-section-6 .u-gallery-1 {
    height: 55vw;
    max-height: 420px;
    min-height: 260px;
  }

  /* Avoid image distortion; crop to fill */
  .u-section-4 .u-back-image,
  .u-section-6 .u-back-image {
    object-fit: cover;
  }
}


/* === Critical mobile gallery fix (2025-08-12) === */
@media (max-width: 767px) {
  .u-gallery,
  .u-gallery .u-carousel-inner,
  .u-gallery .u-gallery-inner {
    height: 55vw !important;
    min-height: 260px !important;
    max-height: 420px !important;
    overflow: hidden !important;
    display: block !important;
  }
  .u-gallery .u-back-slide { height: 100% !important; }
  .u-gallery .u-back-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .u-gallery .u-carousel-item:not(.u-active),
  .u-gallery .u-gallery-item:not(.u-active) { display: none !important; }
  .u-gallery .u-carousel-item.u-active,
  .u-gallery .u-gallery-item.u-active { display: block !important; }
}



/* === Pop-up/Dialog mobile overrides (2025-08-16) === */
@media (max-width: 767px) {
  .u-dialog,
  .u-dialog-section-12 .u-dialog-1,
  .u-dialog-section-13 .u-dialog-1 {
    width: 92vw !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: 90vh !important;
    margin: 5vh auto !important;
  }
  .u-dialog .u-container-layout,
  .u-dialog-section-12 .u-container-layout-1,
  .u-dialog-section-13 .u-container-layout-1 {
    padding: 16px !important;
    max-height: calc(90vh - 48px) !important;
    overflow-y: auto !important;
  }
  .u-dialog .u-dialog-close-button {
    position: sticky !important;
    top: 0 !important;
    margin-left: auto !important;
    z-index: 3 !important;
  }
  /* Facebook iframe responsive helper */
  .social-flex iframe[src*="facebook.com/plugins/page.php"] {
    width: 100% !important;
    display: block !important;
  }
}