/* ==========================================================================
   Sajivan Hospital — Responsive overrides (mobile-first, min-width)
   480  large phones · 640  small tablets · 768  tablets
   1024 laptops · 1180 desktop nav · 1280 large desktops
   ========================================================================== */

/* ---------- ≥ 480px : large phones ---------- */
@media (max-width: 479px) {
  .topbar__link--strong { display: none; }
  .topbar__inner { justify-content: center; }
}

@media (min-width: 480px) {
  :root { --gutter: 1.25rem; }

  .quick-actions__grid { grid-template-columns: repeat(2, 1fr); }
  .action-card { flex-direction: column; align-items: flex-start; }
  .action-card__arrow { display: none; }

  .home-care__list { grid-template-columns: repeat(2, 1fr); }
  .emergency__buttons { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≥ 640px : small tablets ---------- */
@media (min-width: 640px) {
  .topbar .topbar__item--hide-sm { display: inline-flex; }
  .topbar .topbar__list .topbar__item--hide-sm:nth-child(3) { display: none; }

  .card-grid--specialities,
  .card-grid--packages,
  .card-grid--doctors,
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .form__row { grid-template-columns: 1fr 1fr; }
  .condition-grid, .service-grid, .resource-grid, .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .check-list--grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--content-packages, .card-grid--related-packages { grid-template-columns: repeat(2, 1fr); }
  .form-card { padding: var(--space-6); }

  .slider__track { grid-auto-columns: calc((100% - var(--space-4)) / 2); }

  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; align-items: center; }

  .section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .section-head--split > .btn,
  .section-head--split > .slider-controls { flex-shrink: 0; }
}

/* ---------- ≥ 768px : tablets ---------- */
@media (min-width: 768px) {
  :root { --gutter: 1.5rem; }

  .quick-actions__grid { grid-template-columns: repeat(3, 1fr); }
  .site-header__cta { display: inline-flex; order: 2; }
  .nav-toggle { order: 3; }

  .hero__trust { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: var(--space-6); }

  .emergency__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-7); }
  .cta-band { grid-template-columns: 1fr auto; padding: var(--space-7); }
  .profile { grid-template-columns: minmax(260px, 380px) 1fr; gap: var(--space-7); }
  .mv-grid { grid-template-columns: 1fr 1fr; }
  .page-hero { padding-block: var(--space-7) var(--space-8); }
  .emergency__buttons { grid-template-columns: 1fr; }
}

/* ---------- ≥ 1024px : laptops / desktop navigation ---------- */
@media (min-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .page-hero--media .page-hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
  .page-hero__actions .btn { flex: 0 0 auto; }
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; }
  .layout-aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 4px; margin: -4px; /* keep focus rings visible inside the scroll area */
  }
  .related__inner { grid-template-columns: 1fr 2fr; }
  .related__inner--solo { grid-template-columns: minmax(0, 380px); }
  .related__inner--solo:has(.card-grid--doctor-pair) { grid-template-columns: minmax(0, 780px); }
  .related__doctor .card-grid.card-grid--doctor-pair { grid-template-columns: 1fr 1fr; }
  .related__doctor .card-grid { grid-template-columns: 1fr; }
  .check-list--grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid, .resource-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(4, 1fr); }
  .legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .legal .layout-aside { top: calc(var(--header-h) + 24px); }
  .gallery__item { aspect-ratio: auto; min-height: 190px; }
  .gallery__item--feature { grid-column: span 2; grid-row: span 2; }
  .map-card__qr { display: flex; } /* QR is useful on desktop only */
  :root { --header-h: 84px; --gutter: 2rem; }

  body { padding-bottom: 0; }
  .mobile-cta-bar { display: none; }
  .back-to-top { bottom: var(--space-5); right: var(--space-5); }

  .topbar .topbar__list .topbar__item--hide-sm:nth-child(3) { display: inline-flex; }

  /* Hero */
  .hero { padding-block: var(--space-8) calc(var(--space-8) + var(--space-6)); }
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__card--doctor { left: calc(var(--space-6) * -1); bottom: var(--space-7); }
  .hero__card--hours { right: calc(var(--space-5) * -1); }

  /* Quick actions */
  .quick-actions { margin-top: calc(var(--space-8) * -1); }
  .quick-actions__grid { grid-template-columns: repeat(6, 1fr); }
  .action-card { padding: var(--space-5) var(--space-4); }

  /* Layouts */
  .about__inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); }
  .about__note { position: absolute; left: auto; right: calc(var(--space-6) * -1); bottom: var(--space-6); margin: 0; max-width: 300px; }

  .card-grid--specialities { grid-template-columns: repeat(3, 1fr); }
  .card-grid--packages { grid-template-columns: repeat(3, 1fr); }
  .card-grid--doctors { grid-template-columns: repeat(2, minmax(0, 400px)); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }

  .home-care__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }

  .slider__track { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3); }

  .faqs__inner { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; }
  .faqs__intro { position: sticky; top: calc(var(--header-h) + var(--space-5)); }

  .contact__inner { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: start; }
  .form-card { padding: var(--space-7); }

  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--space-7); }
}

/* ---------- ≥ 1180px : full desktop navigation ---------- */
@media (min-width: 1180px) {
  /* Header / nav */
  .nav-toggle { display: none; }
  .site-logo { margin-right: 0; }

  .primary-nav {
    position: static;
    inset: auto;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .primary-nav__mobile-cta { display: none; }

  .menu { flex-direction: row; align-items: center; gap: var(--space-1); }
  .menu__item { border: 0; flex-wrap: nowrap; }
  .menu__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
    position: relative;
  }
  .menu__link.is-active::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -2px;
    width: 18px; height: 3px;
    border-radius: 3px;
    background: var(--color-primary);
    transform: translateX(-50%);
  }
  .menu__item--has-children > .menu__link { padding-right: 0; }

  .submenu-toggle { width: 28px; height: 28px; background: none; }
  .submenu-toggle .icon { width: 16px; height: 16px; }

  /* Dropdown: opens on hover (pointer) and via toggle button (keyboard / touch) */
  .submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    display: block;
    min-width: 260px;
    padding: var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 180ms;
  }
  .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .submenu.is-open,
  .menu__item--has-children:hover > .submenu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--transition), transform var(--transition);
  }
  .submenu a { font-size: var(--fs-sm); padding: 0.6rem 0.8rem; }

  .menu__link { white-space: nowrap; }
}

/* ---------- ≥ 1280px : large desktops ---------- */
@media (min-width: 1280px) {
  .menu__link { padding-inline: var(--space-4); }
  .speciality-card { padding: var(--space-6); }
}

/* Very narrow phones (≤ 360px) */
@media (max-width: 360px) {
  .site-logo__text { font-size: 1.05rem; }
  .site-logo__img { height: 44px; }
  .topbar__emergency-link { padding-inline: 6px; }
  .doctor-card__actions { grid-template-columns: 1fr; }
}