/* ============================================================
   FAMILY FUN — UNIFIED MOBILE REDESIGN (≤767px)
   Loaded last. Everything wrapped in @media. Desktop untouched.
   Mobile-first principles:
     - Touch targets ≥44px
     - Body input font ≥16px (no iOS zoom)
     - Spacing scale: 8/12/16/20/24/32/48/64
     - Type scale: H1 30, H2 24, H3 18, body 16
     - Buttons: pill, full-width, ≥44px tall
     - Single column, generous padding
   ============================================================ */

@media (max-width: 767px) {

  /* ── 1. GLOBAL RESET & WEBFLOW NEUTRALIZATION ── */
  html, body { overflow-x: hidden; max-width: 100%; }
  body { -webkit-text-size-adjust: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  img, svg { max-width: 100%; height: auto; }
  input, textarea, select { font-size: 16px !important; }

  /* Kill webflow legacy blanket rules that leak on mobile */
  .w-container, .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .w-row { margin-left: 0 !important; margin-right: 0 !important; }
  .w-col { padding: 0 !important; }
  .section { padding: 0 !important; }

  /* ── 2. LOCATION PAGES (Zeleni park & Planet Tuš) ── */

  /* Hero */
  .ff-loc-hero {
    padding: 80px 20px 36px !important;
    min-height: 0;
  }
  .ff-loc-hero-wrap {
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
  }
  .ff-loc-hero-content {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px;
  }
  .ff-loc-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
    margin-bottom: 6px !important;
  }
  .ff-loc-title {
    font-size: 30px !important;
    line-height: 1.1 !important;
    margin: 0 0 12px !important;
    text-align: left !important;
  }

  /* Hours card — stack vertical with clean dividers */
  .ff-loc-hours {
    align-self: stretch !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 4px 16px !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
  }
  .ff-loc-hours-item {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    width: 100%;
  }
  .ff-loc-hours-item + .ff-loc-hours-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }
  .ff-loc-hours-item--price {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }
  .ff-loc-hours-label { font-size: 11px !important; flex-shrink: 0; }
  .ff-loc-hours-time { font-size: 14px !important; text-align: right; }
  .ff-loc-hours-time small { font-size: 11px !important; }
  .ff-loc-price-note {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 4px 0 4px !important;
  }

  /* Hero buttons */
  .ff-loc-hero-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .ff-loc-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  .ff-loc-note {
    font-size: 13px !important;
    line-height: 1.5 !important;
    align-self: flex-start !important;
  }

  /* Hero image */
  .ff-loc-hero-img {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    border-radius: 16px !important;
    aspect-ratio: 16/10 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
  }
  .ff-loc-hero-img img {
    max-height: none !important;
    height: 100% !important;
    border-radius: 16px;
  }

  /* Sections */
  .ff-loc-section {
    padding: 44px 20px !important;
  }
  .ff-loc-header {
    text-align: left !important;
    margin-bottom: 22px !important;
  }
  .ff-loc-label {
    font-size: 22px !important;
    margin: 0 0 4px !important;
  }
  .ff-loc-header h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  /* Ponudba cards */
  .ff-loc-ponudba-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 14px !important;
    margin: 0 !important;
  }
  .ff-loc-ponudba-card {
    border-radius: 18px !important;
    padding: 28px 22px 22px !important;
    gap: 14px;
  }
  .ff-loc-pc-icon {
    width: 110px !important;
    height: 110px !important;
    padding: 0 !important;
    margin: 0 auto 2px !important;
    border-radius: 50% !important;
  }
  .ff-loc-pc-icon img {
    width: 64px !important;
    height: 64px !important;
  }
  .ff-loc-pc-body {
    padding: 0 !important;
    gap: 10px;
    text-align: center !important;
  }
  .ff-loc-pc-title {
    font-size: 19px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .ff-loc-pc-text {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .ff-loc-pc-btns {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }
  /* Ponudba card buttons (override base .ff-loc-btn alignment) */
  .ff-loc-ponudba-card .ff-loc-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* About section */
  .ff-loc-about-wrap {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ff-loc-about-img {
    height: 220px !important;
    border-radius: 14px !important;
  }
  .ff-loc-about-label {
    font-size: 22px !important;
    margin: 0 0 4px !important;
  }
  .ff-loc-about-title {
    font-size: 22px !important;
    margin: 0 0 10px !important;
    line-height: 1.2 !important;
  }
  .ff-loc-about-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 14px !important;
  }
  .ff-loc-about-wrap .ff-loc-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* Booking section — full bleed */
  .ff-loc-section-booking {
    padding: 28px 0 36px !important;
  }
  .ff-loc-section-booking .ff-loc-inner {
    padding: 0 !important;
  }
  .ff-loc-section-booking .ff-loc-header {
    padding: 0 20px !important;
  }

  /* Reviews — horizontal scroll snap */
  .ff-loc-section-reviews {
    padding: 44px 0 !important;
  }
  .ff-loc-section-reviews .ff-loc-inner { padding: 0 !important; }
  .ff-loc-section-reviews .ff-loc-header { padding: 0 20px !important; }
  .ff-loc-reviews-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 20px !important;
    padding: 4px 20px 16px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ff-loc-reviews-grid::-webkit-scrollbar { display: none; }
  .ff-loc-review-card {
    flex: 0 0 80% !important;
    scroll-snap-align: start !important;
    padding: 20px !important;
    border-radius: 14px !important;
  }

  /* Gallery on location pages */
  .ff-loc-gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ff-loc-gallery-item {
    border-radius: 10px !important;
  }
  .ff-loc-gallery-item img {
    aspect-ratio: 1 !important;
    object-fit: cover !important;
  }

  /* ── 3. CONTACT PAGE ── */

  .contact-hero {
    padding: 76px 20px 32px !important;
    text-align: left !important;
  }
  .contact-hero-label {
    font-size: 22px !important;
    margin: 0 0 4px !important;
    text-align: left !important;
  }
  .contact-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }
  .contact-hero p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .contact-hero-phone {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  .contact-locations {
    padding: 28px 20px !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .contact-loc-card {
    padding: 22px 20px !important;
    border-radius: 16px !important;
    gap: 16px !important;
  }
  .contact-loc-card h3 {
    font-size: 20px !important;
  }
  .contact-loc-rows { gap: 14px !important; }
  .contact-loc-row { gap: 12px !important; }
  .contact-loc-row-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }
  .contact-loc-row-label { font-size: 10px !important; margin-bottom: 2px !important; }
  .contact-loc-row-value { font-size: 14px !important; line-height: 1.45 !important; }
  .contact-loc-hours-row { font-size: 13px !important; }
  .contact-loc-cta {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  /* Form section padding */
  .contact-form-section {
    padding: 32px 16px !important;
  }

  /* Contact social CTA */
  .contact-social-btn-fb,
  .contact-social-btn-ig {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ── 4. FAQ PAGE ── */

  .faq-hero {
    padding: 76px 20px 28px !important;
    text-align: left !important;
  }
  .faq-hero-label {
    font-size: 22px !important;
    margin: 0 0 4px !important;
  }
  .faq-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }
  .faq-hero p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .faq-body {
    padding: 28px 20px 48px !important;
    max-width: 100% !important;
  }
  .faq-category { margin-bottom: 28px !important; }
  .faq-category-title {
    font-size: 11px !important;
    margin: 0 0 10px !important;
    padding-bottom: 8px !important;
    letter-spacing: 0.06em !important;
  }
  .faq-question {
    padding: 16px 0 !important;
    gap: 12px !important;
    min-height: 48px !important;
  }
  .faq-question h6 {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .faq-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .faq-answer-inner {
    padding: 0 0 16px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .faq-social { padding: 44px 20px 52px !important; }
  .faq-social-label { font-size: 22px !important; }
  .faq-social h2 { font-size: 22px !important; line-height: 1.25; }
  .faq-social p { font-size: 15px !important; margin: 0 0 22px !important; }
  .faq-social-btns {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .faq-social-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ── 5. GALLERY PAGE ── */

  .ff-gallery-header {
    padding: 76px 20px 24px !important;
    text-align: left !important;
  }
  .ff-gallery-header-label {
    font-size: 22px !important;
    margin: 0 0 4px !important;
  }
  .ff-gallery-header h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .ff-gallery-section {
    padding: 32px 20px !important;
  }
  .ff-gallery-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
    margin-bottom: 12px !important;
  }
  .ff-gallery-loc-title {
    font-size: 22px !important;
    margin: 0 0 18px !important;
  }
  .ff-gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ff-gallery-grid-item {
    border-radius: 10px !important;
    aspect-ratio: 1 !important;
  }

  /* Lightbox controls — bigger touch targets */
  .ff-lightbox-prev,
  .ff-lightbox-next {
    padding: 16px 18px !important;
    font-size: 24px !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ff-lightbox-prev { left: 12px !important; }
  .ff-lightbox-next { right: 12px !important; }
  .ff-lightbox-close {
    top: 14px !important;
    right: 14px !important;
    font-size: 28px !important;
    padding: 6px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .ff-gallery-social { padding: 44px 20px 52px !important; }
  .ff-gallery-social-label { font-size: 22px !important; }
  .ff-gallery-social h2 { font-size: 22px !important; line-height: 1.25; }
  .ff-gallery-social p { font-size: 15px !important; margin: 0 0 22px !important; }
  .ff-gallery-social-btns {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .ff-gallery-social-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ── 6. NEWS LISTING ── */

  .ff-news-page-hero {
    padding: 76px 20px 24px !important;
    text-align: left !important;
  }
  .ff-news-page-label {
    font-size: 22px !important;
    margin: 0 0 4px !important;
  }
  .ff-news-page-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  .ff-news-page-grid-wrap {
    padding: 28px 20px 44px !important;
    max-width: 100% !important;
  }
  .ff-news-page-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ff-news-page-card {
    border-radius: 18px !important;
    padding: 22px 22px 24px !important;
    gap: 14px !important;
    min-height: 0 !important;
  }
  .ff-news-page-card::after {
    width: 30px !important; height: 30px !important;
    top: 20px !important; right: 20px !important;
    font-size: 16px !important;
  }
  .ff-news-page-card-chip {
    padding: 8px 12px !important;
    min-width: 52px !important;
    border-radius: 11px !important;
  }
  .ff-news-page-card-chip-day { font-size: 19px !important; }
  .ff-news-page-card-chip-mon { font-size: 9px !important; margin-top: 3px !important; }
  .ff-news-page-card-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 3 !important;
  }
  .ff-news-page-card-excerpt {
    font-size: 14px !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* News-listing social CTA buttons */
  .ff-news-social-btn-fb,
  .ff-news-social-btn-ig {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ── 7. NEWS POST (single) ──
     Note: News-post page (news-more.html) ships its own complete
     desktop+mobile editorial styles inline, so no overrides needed here. */

}