/* ============================================================
   RESPONSIVE.CSS — Breakpoints & Mobile-first Overrides
   UK Umrah & Hajj Travel Website
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   BASE (< 480px) — already handled in style.css / components.css
   ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   480px+
   ──────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .container {
    padding-inline: var(--space-8);
  }

  .trust-item {
    padding-inline: var(--space-6);
  }
}

/* ────────────────────────────────────────────────────────────
   768px+ (Tablets)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Mobile sticky bar — hide on tablet+ */
  .mobile-sticky-bar {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  /* Header — show desktop nav */
  .mobile-menu-btn {
    display: none;
  }

  .site-nav {
    display: flex;
  }

  .mobile-nav {
    display: none !important;
  }

  /* Trust strip — unwrap */
  .trust-strip__inner {
    flex-wrap: nowrap;
    justify-content: center;
  }

  /* Package finder — grid */
  .package-finder__fields {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Two-col layout */
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Photo gallery */
  .photo-gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hotel card horizontal */
  .hotel-card {
    flex-direction: row;
  }

  .hotel-card__image {
    width: 200px;
    min-width: 200px;
  }

  /* Form rows */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer columns */
  .site-footer__main {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

  /* Call banner */
  .call-banner {
    flex-direction: row;
  }
}

/* ────────────────────────────────────────────────────────────
   1024px+ (Desktop)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Show packages layout */
  .packages-layout {
    grid-template-columns: 260px 1fr;
  }

  .filter-mobile-toggle {
    display: none;
  }

  .filter-sidebar {
    display: block !important;
  }

  /* Package detail layout */
  .package-detail-layout {
    grid-template-columns: 1fr 360px;
  }

  /* Three-col layout */
  .three-col {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Section spacing */
  .section { padding-block: var(--space-24); }
  .section--lg { padding-block: var(--space-40); }
}

/* ────────────────────────────────────────────────────────────
   1280px+ (Wide desktop)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* ────────────────────────────────────────────────────────────
   MOBILE-ONLY OVERRIDES (< 768px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Show mobile sticky bar with safe-area inset for notched phones */
  .mobile-sticky-bar {
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--sticky-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Pad body so content isn't under sticky bar + notch */
  body {
    padding-bottom: calc(var(--sticky-height) + env(safe-area-inset-bottom, 0px));
  }


  /* Hide desktop nav on mobile */
  .site-nav {
    display: none;
  }

  /* Show hamburger — must be here (responsive.css loads after components.css so it wins) */
  .mobile-menu-btn {
    display: flex;
    flex-shrink: 0;
  }

  /* Hero — use safe viewport height to avoid oversizing on short phones */
  .hero {
    min-height: calc(82vh - var(--header-height));
    min-height: calc(82svh - var(--header-height));
  }

  .hero__content {
    padding-block: var(--space-10) var(--space-12);
    padding-inline: var(--space-5);
  }

  /* Limit hero heading size on mobile */
  .hero h1 {
    font-size: clamp(1.9rem, 8vw, 3rem);
    max-width: 100%;
  }

  .hero__body {
    font-size: var(--text-base);
    max-width: 100%;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll {
    display: none;
  }

  /* Reduce container padding on mobile */
  .container {
    padding-inline: var(--space-4);
  }

  /* Trust strip — 2-column grid */
  .trust-strip__inner {
    gap: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  .trust-item + .trust-item::before {
    display: none;
  }

  .trust-item {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--grey-100);
  }

  .trust-item:nth-child(odd) {
    border-right: 1px solid var(--grey-100);
  }

  /* Package finder — full stack on mobile */
  .package-finder {
    padding: var(--space-4);
  }

  .package-finder__fields {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Package cards full width */
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Hotel card — stacked */
  .hotel-card {
    flex-direction: column;
  }

  .hotel-card__image {
    width: 100%;
    min-width: unset;
    height: 200px;
  }

  /* Packages layout — single column */
  .packages-layout {
    grid-template-columns: 1fr;
  }

  .filter-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    top: 0;
  }

  .filter-sidebar.is-open {
    display: block;
  }

  /* When filter is open, prevent body scroll */
  body[data-filter-open] {
    overflow: hidden;
  }

  .filter-mobile-toggle {
    display: flex;
    margin-bottom: var(--space-4);
  }

  /* Package detail — single column */
  .package-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .package-detail-sticky {
    position: static;
    order: -1; /* Enquiry card first on mobile */
  }

  /* Footer — stacked and safe from sticky bottom bar + notch */
  .site-footer {
    padding-bottom: calc(var(--sticky-height) + env(safe-area-inset-bottom, 0px) + var(--space-6)) !important;
  }

  .site-footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .site-footer__bottom,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .footer-bottom-links {
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  /* Call banner — stacked, tighter padding on mobile */
  .call-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .call-banner__text h3 {
    font-size: var(--text-2xl);
  }

  .call-banner__ctas {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-3);
  }

  .call-banner__ctas .btn {
    flex: 1;
    min-width: 0;
  }

  /* Two-col — single, reduced gap */
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Three-col — single, reduced gap */
  .three-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Photo gallery — 2 columns */
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Map height reduced */
  .map-container {
    height: 260px;
  }

  .map-container--lg {
    height: 300px;
  }

  /* Section spacing */
  .section     { padding-block: var(--space-10); }
  .section--lg { padding-block: var(--space-12); }
  .section--sm { padding-block: var(--space-6); }

  /* Form row — single column */
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Steps — 2-col on mobile */
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  /* Page header */
  .page-header {
    padding-block: var(--space-10) var(--space-6);
  }

  /* Package summary rows — allow text wrapping */
  .package-summary__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .package-summary__value {
    text-align: left;
  }

  /* Accordion slightly smaller on mobile */
  .accordion-trigger {
    padding: var(--space-4) var(--space-4);
  }

  .accordion-panel {
    padding: var(--space-4) var(--space-4);
  }
}

/* ────────────────────────────────────────────────────────────
   VERY SMALL (< 360px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 359px) {
  .container {
    padding-inline: var(--space-4);
  }

  .btn {
    padding: 0.75rem 1.25rem;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .package-finder__fields {
    grid-template-columns: 1fr;
  }

  .trust-strip__inner {
    grid-template-columns: 1fr;
  }

  .trust-item:nth-child(odd) {
    border-right: none;
  }

  .hero h1 {
    font-size: var(--text-3xl);
  }
}

/* ────────────────────────────────────────────────────────────
   TABLET-ONLY (768–1023px)
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .packages-layout {
    grid-template-columns: 1fr;
  }

  .filter-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    top: 0;
  }

  .filter-sidebar.is-open {
    display: block;
  }

  .filter-mobile-toggle {
    display: flex;
    margin-bottom: var(--space-5);
  }

  .package-detail-layout {
    grid-template-columns: 1fr;
  }

  .package-detail-sticky {
    position: static;
    order: -1;
  }

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

/* ────────────────────────────────────────────────────────────
   PRINT
   ──────────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .mobile-sticky-bar,
  .mobile-nav,
  .filter-sidebar,
  .site-footer {
    display: none;
  }

  body {
    background: white;
    color: black;
    padding: 0;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}