/* ===========================================================================
   Trip Sahabat – responsive.css
   Mobile-first breakpoints. Base styles (style.css / components.css) target
   phones; everything here widens the layout as space becomes available.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ≥ 480px – large phones
   ------------------------------------------------------------------------ */
@media (min-width: 480px) {
    .package-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .search-submit { grid-column: 1 / -1; }

    .filter-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .filter-actions { grid-column: 1 / -1; }

    .stat-grid,
    .benefit-grid,
    .attraction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   ≥ 640px – small tablets
   ------------------------------------------------------------------------ */
@media (min-width: 640px) {
    .container { padding-inline: var(--space-5); }

    .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

    .two-column-lists,
    .quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .quick-facts > div { border-right: 1px solid var(--c-gray); }
    .quick-facts > div:nth-child(2n) { border-right: 0; }

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

    .footer-bottom-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .results-bar { margin-block: var(--space-6); }

    .cta-banner-actions { flex-direction: row; }
}

/* ---------------------------------------------------------------------------
   ≥ 768px – tablets: horizontal navigation, multi-column grids
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
    :root { --header-height: 76px; }

    .brand-logo { height: 3.5rem; }

    .nav-toggle { display: none; }

    .primary-nav {
        position: static;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        max-height: none;
        overflow: visible;
        background-color: transparent;
        border-top: 0;
        box-shadow: none;
    }

    .nav-list {
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: 0.15rem;
    }

    .nav-link { padding: 0.5rem 0.7rem; font-size: 0.92rem; }

    .nav-link.is-active {
        background-color: transparent;
        box-shadow: inset 0 -3px 0 var(--c-red);
        border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    }

    .nav-actions { padding: 0; }

    .nav-cta { flex: 0 0 auto; }

    .card-grid--2,
    .card-grid--3,
    .value-grid,
    .service-grid,
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .detail-layout,
    .contact-layout,
    .about-layout,
    .about-preview,
    .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contact-strip { align-items: center; }

    .contact-strip-actions { align-items: flex-end; }

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

    .itinerary-day { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-5); }

    .gallery-thumb { width: 7.5rem; }

    .hero { min-height: 30rem; }

    .legal-content h2 { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   ≥ 1024px – laptops and desktops
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .section { padding-block: var(--space-8); }

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

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

    .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .value-grid,
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .package-search {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        align-items: end;
        padding: var(--space-5);
    }

    .search-submit { grid-column: auto; }

    .filter-body { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    .filter-field--search { grid-column: span 2; }

    .filter-actions { grid-column: 1 / -1; }

    /* Package / destination detail: content + sticky enquiry sidebar */
    .detail-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-7); }

    .detail-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }

    .two-column-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .quick-facts { grid-template-columns: 1fr; }

    .quick-facts > div { border-right: 0; }

    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1.4fr; }

    .hero { min-height: 33rem; }

    .hero-title { font-size: 3.1rem; }

    .about-preview,
    .about-layout,
    .contact-layout { gap: var(--space-7); }

    .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

    .filter-toggle { display: none; }

    /* Put the section heading and its "view all" link on one line */
    .section-heading--between {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        text-align: left;
    }

    .section-heading--between .section-title::after { margin-inline: 0; }

    .section-heading-link { align-self: flex-end; }
}

/* ---------------------------------------------------------------------------
   ≥ 1280px – wide desktops
   ------------------------------------------------------------------------ */
@media (min-width: 1280px) {
    .hero-content { max-width: 46rem; }

    .hero { min-height: 36rem; }

    .page-hero { padding-block: var(--space-7); }
}

/* ---------------------------------------------------------------------------
   Print – keep the essentials readable
   ------------------------------------------------------------------------ */
@media print {
    .site-header,
    .site-footer,
    .cta-banner,
    .back-to-top,
    .filter-panel,
    .detail-sidebar,
    .nav-toggle { display: none !important; }

    body { background: #FFF; color: #000; }

    .package-card,
    .destination-card,
    .detail-block { break-inside: avoid; }
}