/* ── Responsive — Dr. Karim Badaoui ── */

/* Safety: never allow horizontal scroll on any screen */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { min-width: 0; }
img, iframe, video { max-width: 100%; }

/* ══════════════════════════
   Laptop ≤ 1100px
══════════════════════════ */
@media (max-width: 1100px) {
  .container { padding: 0 20px; }
  .nav-links a { padding: 7px 10px; font-size: .8rem; }
  .hero-grid { grid-template-columns: 50% 50%; }
  .about-grid { grid-template-columns: 280px 1fr; gap: 40px; }
  .appt-grid,
  .contact-grid { grid-template-columns: 300px 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
}

/* ══════════════════════════
   Tablet ≤ 992px — burger menu + stacked layout
══════════════════════════ */
@media (max-width: 992px) {
  /* --- Burger nav dropdown --- */
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: rgba(255,255,255,0.99);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 22px;
    box-shadow: var(--sh-lg);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--tr);
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { padding: 11px 16px; font-size: .92rem; border-radius: 12px; }
  .hamburger { display: flex; }
  /* remove redundant WhatsApp button from the header on mobile (floating WhatsApp covers it) */
  .navbar-actions .btn-appointment { display: none; }

  /* ─────────────────────────────────────
     HERO → full gradient background,
     light centered text, image in middle
  ───────────────────────────────────────── */
  .hero { padding-top: calc(var(--nav-h) + 20px); }

  /* the right diagonal panel becomes the full background.
     NB: selectors are kept specific (body.ltr / body.rtl) so they override
     the desktop clip-path rules in rtl.css (which would otherwise win). */
  body.ltr .hero-bg-right,
  body.rtl .hero-bg-right {
    width: 100%;
    left: 0;
    right: 0;
    clip-path: none;
    background: linear-gradient(165deg,
      var(--teal-xdk) 0%,
      var(--teal-dk)  40%,
      var(--teal)     78%,
      #2A5FA0         100%);
  }

  /* stack as a single column and re-order: text → image → creds/stats */
  .hero-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hero-left { display: contents; }      /* let its children flow into the column */
  .hero-top, .hero-bottom { display: block; width: 100%; }
  .hero-top    { order: 1; }
  .hero-right  { order: 2; }
  .hero-bottom { order: 3; }

  /* center + lighten all hero text on the gradient */
  .hero-top, .hero-bottom { text-align: center; padding: 0 18px; }
  .hero-name, .hero-tagline, .hero-desc { overflow-wrap: break-word; max-width: 100%; }
  .hero-eyebrow { color: rgba(255,255,255,.85); justify-content: center; display: flex; }
  .hero-dot { background: var(--gold); }
  .hero-name { color: #fff; }
  .hero-tagline { color: rgba(255,255,255,.92); }
  .hero-tagline em { color: var(--gold); }
  .hero-desc { color: rgba(255,255,255,.82); margin-left: auto; margin-right: auto; }

  /* credentials as translucent pills */
  .hero-cred-list { align-items: center; gap: 9px; margin-top: 6px; }
  .hero-cred {
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50px;
    padding: 9px 16px;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 100%;
  }
  .hero-cred i { background: rgba(255,255,255,.18); color: #fff; }

  .hero-actions { justify-content: center; }
  .btn-hero-outline { color: #fff; border-color: rgba(255,255,255,.45); }
  .btn-hero-outline:hover { background: rgba(255,255,255,.14); }

  .hero-stats-row { justify-content: center; border-top-color: rgba(255,255,255,.22); }
  .hs-item strong { color: var(--gold); }
  .hs-item span { color: rgba(255,255,255,.72); }
  .hs-sep { background: rgba(255,255,255,.22); }

  /* image block */
  .hero-right { padding: 22px 0 6px; }
  .hero-right::before, .hero-right::after { display: none; }
  .hero-img-wrap { max-width: 320px; margin: 0 auto; }

  .hero-scroll-btn { display: none; }

  /* --- RTL (Arabic) mobile: neutralize desktop hero rules from rtl.css --- */
  body.rtl .hero-top, body.rtl .hero-bottom { text-align: center; }
  body.rtl .hero-name, body.rtl .hero-tagline,
  body.rtl .hero-desc, body.rtl .hero-eyebrow { text-align: center; }
  body.rtl .hero-eyebrow { justify-content: center; }
  body.rtl .hero-cred-list { align-items: center; }
  body.rtl .hero-actions, body.rtl .hero-stats-row { justify-content: center; }
  body.rtl .hero-left { padding: 0; }
  body.rtl .hero-right { padding: 22px 0 6px; }

  /* --- Other grids collapse --- */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-grid { grid-template-columns: 1fr; gap: 28px; }
  .journey-step .js-arrow { display: none; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid,
  .appt-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-image-col { max-width: 460px; margin: 0 auto; }

  .feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .feature-grid.feature-reversed .feature-text-col { order: 2; }
  .feature-grid.feature-reversed .feature-img-col { order: 1; }
  .feature-img-col .fi-wrap { max-width: 420px; margin: 0 auto; }

  .cabinet-gallery { grid-template-columns: 1fr; gap: 24px; }
  .insta-grid { grid-template-columns: 1fr; gap: 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-contact { grid-column: auto; }
}

/* ══════════════════════════
   Mobile ≤ 768px
══════════════════════════ */
@media (max-width: 768px) {
  .navbar { width: calc(100% - 24px); top: 12px; }
  .navbar-inner { padding: 0 14px; }
  .navbar-actions { gap: 8px; }
  .navbar-actions .btn-appointment span { display: none; }
  .navbar-actions .btn-appointment { padding: 9px 12px; }
  .brand-name { font-size: .88rem; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .vs-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .hero-name { font-size: clamp(2rem, 9vw, 2.8rem); }
  .section { padding: 56px 0; }

  /* center action buttons on mobile */
  .service-card { text-align: center; }
  .service-card .sc-icon { margin-left: auto; margin-right: auto; }
  .service-card .sc-btn { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

  /* keep floating buttons fully inside the viewport */
  .wa-float { bottom: 18px; right: 16px; width: 54px; height: 54px; }
  .phone-float { bottom: 82px; right: 16px; width: 48px; height: 48px; }
  body.rtl .wa-float { left: 16px; right: auto; }
  body.rtl .phone-float { left: 16px; right: auto; }
  .wa-tooltip { display: none; }
}

/* ══════════════════════════
   Small mobile ≤ 600px
══════════════════════════ */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .services-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .vs-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hours-grid { grid-template-columns: 1fr; }
  .hours-contact-row { flex-direction: column; gap: 12px; }
  .hero-stats-row { gap: 6px; }
  .hs-item { padding: 0 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-hero-wa,
  .hero-actions .btn-hero-outline { width: 100%; justify-content: center; }
}

/* ══════════════════════════
   Extra small ≤ 420px
══════════════════════════ */
@media (max-width: 420px) {
  .trust-stats-grid { grid-template-columns: 1fr; }
  .lang-current { padding: 7px 9px; }
  .lang-current .lang-code { display: none; }
  .brand-specialty { display: none; }
  .brand-name { max-width: 150px; }
}