/* ════════════════════════════════════════════════════════════
   Prague Clinics — Responsive Breakpoints
   
   CRITICAL: Desktop nav breakpoint at 1024px shows .pc-nav-links
   ════════════════════════════════════════════════════════════ */

/* ── SM: 640px ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .section-padding { padding: 6rem 1.5rem; }
  .pc-three-path-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-services-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-packages-grid, .pc-preventive-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-doctors-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-contact-btns { flex-direction: row; }
  .pc-option-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ── MD: 768px ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .section-padding { padding: 6rem 2rem; }
  .pc-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-team-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-booking-inner { max-width: 48rem; }
  .pc-location-grid { grid-template-columns: 1fr 1fr; }
  .pc-contact-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   LG: 1024px — DESKTOP — THE CRITICAL BREAKPOINT
   .pc-nav-links is display:none by default.
   At 1024px+ it becomes visible as a flex container.
   .pc-nav-menu (the inner ul) ALREADY has display:flex
   set globally in main.css — it's always a row.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .section-padding { padding: 8rem 2rem; }

  /* ✅ SHOW DESKTOP NAV */
  .pc-nav-links {
    display: flex !important;
    align-items: center;
    flex: 1;
    justify-content: center;
  }

  /* ✅ Ensure inner nav-menu is always a horizontal row */
  .pc-nav-menu,
  .pc-nav-links > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Show desktop CTA buttons (VIP + Book) */
  .pc-nav-cta { display: flex !important; }

  /* Hide hamburger on desktop */
  .pc-mobile-toggle { display: none !important; }

  /* Layout helpers */
  .pc-wa-fab { display: flex; }
  /* .pc-sticky-cta is display:none by default in main.css — no need to re-hide on desktop */
  .pc-hero-stats { display: flex; }

  /* Grid layouts */
  .pc-three-path-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-services-grid { grid-template-columns: repeat(4, 1fr); }
  .pc-why-grid { grid-template-columns: 1fr 1fr; }
  .pc-doctors-grid { grid-template-columns: repeat(4, 1fr); }
  .pc-packages-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-preventive-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-homecare-grid { grid-template-columns: 1fr 1fr; }
  .pc-reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  .pc-footer-bottom { flex-direction: row; justify-content: space-between; }
  .pc-svc-hero-inner { grid-template-columns: 1fr 1fr; }
  .pc-why-svc-grid { grid-template-columns: 1fr 1fr; }
  .pc-doctors-svc-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-team-grid { grid-template-columns: repeat(4, 1fr); }

  /* About page 2-col grid */
  .pc-about-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
  }
}

/* ── XL: 1280px ─────────────────────────────────────────── */
@media (min-width: 1280px) {
  .pc-nav { padding: 0 2rem; }
  .pc-top-bar-inner { padding: 0 2rem; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE ONLY (max 1023px) — Hide desktop elements
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Force hide desktop nav — !important to override everything */
  .pc-nav-links  { display: none !important; }
  .pc-nav-cta    { display: none !important; }

  /* Show hamburger */
  .pc-mobile-toggle { display: flex !important; }

  /* Hide desktop elements */
  .pc-wa-fab     { display: none; }
  /* .pc-sticky-cta is display:none by default — shown only at ≤768px below */
  .pc-hero-stats { display: none; }
}

/* ── STICKY MOBILE CTA — visible only on mobile (max-width: 768px) ── */
/* Desktop: hidden (display:none default in main.css)                   */
/* Mobile:  display:flex so Book + WhatsApp buttons are accessible      */
@media (max-width: 768px) {
  .pc-sticky-cta { display: flex; }
}

/* ── Small mobile (< 480px) ─────────────────────────────── */
@media (max-width: 479px) {
  .pc-hero h1 { font-size: 2rem; }
  .pc-hero-btns .btn { font-size: .8125rem; padding: .625rem 1.25rem; }
  .pc-doctors-grid { grid-template-columns: 1fr; }
  .pc-option-cards { grid-template-columns: 1fr; }
}

/* ── Global overflow prevention ─────────────────────────── */
/* Universal box-sizing ensures padding/borders don't blow up 100% widths */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Root-level containment: ensures no element can push the page wider */
html {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  max-width: 100%;
  overflow-x: hidden;
}
.pc-header { overflow: visible; } /* keep nav dropdown visible */

/* ════════════════════════════════════════════════════════════
   MOBILE HEADER FIXES — Android overflow fix included
   ════════════════════════════════════════════════════════════ */

/* Hide top bar on mobile — keeps header clean (logo + hamburger only) */
@media (max-width: 1023px) {
  .pc-top-bar { display: none !important; }

  /* ── ANDROID OVERFLOW FIX ──────────────────────────────────
     Root cause: .pc-nav has max-width:1280px + margin:0 auto
     but no explicit width constraint. On Android, flex children
     (logo + lang-switcher + hamburger) can exceed the viewport.
     Fix: constrain nav to 100% of its parent (the fixed header)
     and ensure box-sizing includes padding in that width.
     ──────────────────────────────────────────────────────── */
  .pc-nav {
    width: 100% !important;
    max-width: 100% !important;         /* override the 1280px desktop value */
    box-sizing: border-box !important;  /* padding included in width */
    height: 4rem !important;
    padding: 0 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;             /* prevents items touching */
    /* DO NOT set overflow:hidden here — it would clip the dropdown */
  }

  /* Logo: flex-shrink allowed so it gives way before others */
  .pc-logo {
    flex: 1 1 auto !important;          /* can grow/shrink */
    min-width: 0 !important;            /* allows shrinking below content size */
  }
  .pc-logo img {
    height: 2.25rem !important;
    width: auto !important;
    max-width: 130px !important;        /* was 150px — slight reduction for safety */
    display: block;
  }

  /* Lang switcher in mobile nav bar: fixed size, never grows */
  .pc-ls-header-mobile {
    flex: 0 0 auto !important;          /* don't grow or shrink */
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 0.25rem !important;
  }
  /* Make the lang trigger smaller on tight screens */
  .pc-ls-header-mobile .pc-ls-btn {
    padding: 3px 7px !important;
    font-size: 0.68rem !important;
    gap: 3px !important;
  }
  .pc-ls-header-mobile .pc-ls-flag { font-size: 13px !important; }
  .pc-ls-header-mobile .pc-ls-code  { font-size: 0.68rem !important; }
  .pc-ls-header-mobile .pc-ls-chevron { width: 6px !important; height: 6px !important; }

  /* Hamburger: fixed, never shrinks */
  .pc-mobile-toggle {
    flex: 0 0 auto !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: inherit !important;
    padding: 0 !important;
  }
  .pc-mobile-toggle svg { width: 22px; height: 22px; }

  /* All sections/wrappers: stay within viewport */
  .pc-header,
  section,
  .pc-hero,
  .pc-section,
  footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Mobile Header Fix ───────────────────────── */
  #pc-search-btn-mobile { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex: 0 0 2.1rem !important; 
    width: 2.1rem !important;
    height: 2.1rem !important;
    margin-right: 4px !important; 
    background: transparent; 
    border: none; 
    padding: 0;
    color: inherit;
  }
  .pc-nav-cta           { display: none !important; }
  .pc-nav-book          { display: none !important; }

  .pc-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    height: 4rem !important;
    overflow: visible !important;
  }

  .pc-logo {
    flex: 1 1 auto !important;
    max-width: 160px !important;
  }

  .pc-ls-header-mobile {
    flex: 0 0 auto !important;
    margin-right: 8px !important;
  }

  .pc-mobile-toggle {
    flex: 0 0 auto !important;
  }
}

/* Extra safety for very narrow screens (320px Android) */
@media (max-width: 360px) {
  .pc-nav { padding: 0 0.625rem !important; gap: 0.25rem !important; }
  .pc-logo img { max-width: 110px !important; }
  .pc-ls-header-mobile .pc-ls-code { display: none !important; } /* show flag only */
}

/* ════════════════════════════════════════════════════════════
   BOTTOM STICKY CTA — Match Lovable (rounded, gapped, padded)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pc-sticky-cta {
    padding: 0.625rem 0.875rem !important;
    gap: 0.625rem !important;
    background: #fff !important;
    border-top: 1px solid #EDE9E1;
  }
  .pc-sticky-cta .btn {
    flex: 1;
    border-radius: 0.75rem !important;   /* rounded corners, NOT pill */
    justify-content: center;
    padding: 0.875rem 1rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
  }

  .pc-sticky-cta .btn.btn-primary,
  .pc-sticky-cta .btn.btn-wa {
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    padding: 0.875rem 1rem !important;
    min-height: unset !important;
    height: auto !important;
  }

  .pc-sticky-cta .btn span,
  .pc-sticky-cta .btn svg ~ * {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  /* Search button handled in max-width: 1023px block */
}