/* =========================================================
   IKETAN.ID
   Menu Page Responsive Stylesheet
   ---------------------------------------------------------
   Base styles:
   /assets/css/menu.css

   Global responsive:
   /assets/css/responsive/global-responsive.css

   Scope:
   - Menu hero
   - Catalogue header
   - Search toolbar
   - Category filters
   - Product grid
   - Product cards
   - Empty state
   - Price information
   - Location CTA

   IMPORTANT:
   Global navbar, footer, typography, container,
   and generic buttons are handled elsewhere.
   ========================================================= */


/* =========================================================
   BREAKPOINT MAP
   ---------------------------------------------------------
   <= 1180px : Small desktop / laptop
   <= 1024px : Tablet landscape
   <= 900px  : Large tablet
   <= 768px  : Tablet portrait
   <= 576px  : Mobile
   <= 380px  : Small mobile
   ========================================================= */


/* =========================================================
   01. SMALL DESKTOP / LAPTOP
   <= 1180px
   ========================================================= */

@media (max-width: 1180px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .menu-hero {
        min-height: 680px;

        padding-bottom: 78px;
    }


    .menu-hero-container {
        gap: 64px;
    }


    .menu-hero-title {
        font-size:
            clamp(
                4.2rem,
                6.5vw,
                6.2rem
            );
    }


    .menu-hero-description {
        max-width: 480px;

        font-size: 1.05rem;
    }


    .menu-hero-visual {
        min-height: 500px;
    }


    .menu-hero-product {
        width: min(68%, 360px);
    }


    .menu-hero-shape {
        width: min(72%, 380px);
    }


    /* -----------------------------------------------------
       TOOLBAR
       ----------------------------------------------------- */

    .menu-toolbar {
        grid-template-columns:
            minmax(260px, 0.6fr)
            minmax(0, 1.4fr);
    }


    /* -----------------------------------------------------
       PRODUCT GRID
       ----------------------------------------------------- */

    .menu-product-grid {
        gap:
            22px
            18px;
    }


    .menu-product-card {
        min-height: 480px;
    }


    .menu-product-media {
        height: 290px;
    }


    .menu-product-name {
        font-size: 2rem;
    }


    /* -----------------------------------------------------
       LOCATION CTA
       ----------------------------------------------------- */

    .menu-location-card {
        min-height: 470px;
    }
}


/* =========================================================
   02. TABLET LANDSCAPE
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

    /* =====================================================
       HERO
       ===================================================== */

    .menu-hero {
        min-height: 640px;

        padding-top:
            calc(
                var(--navbar-height) +
                56px
            );

        padding-bottom: 70px;
    }


    .menu-hero-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);

        gap: 48px;
    }


    .menu-hero-title {
        font-size:
            clamp(
                4rem,
                7vw,
                5.5rem
            );
    }


    .menu-hero-description {
        font-size: 1rem;
    }


    .menu-hero-visual {
        min-height: 460px;

        border-radius:
            var(--radius-xl);
    }


    .menu-hero-product {
        width: min(70%, 330px);
    }


    .menu-hero-shape {
        width: min(72%, 350px);
    }


    .menu-hero-price {
        top: 26px;
        right: 26px;

        width: 100px;
        height: 100px;
    }


    .menu-hero-price strong {
        font-size: 2.4rem;
    }


    /* =====================================================
       CATALOGUE HEADER
       ===================================================== */

    .menu-catalogue-header {
        gap: 30px;
    }


    /* =====================================================
       TOOLBAR
       ===================================================== */

    /*
       Mulai tablet, search dan kategori lebih nyaman
       ditumpuk supaya filter punya ruang horizontal penuh.
    */

    .menu-toolbar {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 16px;
    }


    .menu-search {
        max-width: 100%;
    }


    .menu-category-filter {
        width: 100%;

        padding-bottom: 3px;
    }


    /* =====================================================
       PRODUCT GRID
       ===================================================== */

    /*
       Di 1024px, 3 kolom mulai terlalu padat.
       Kita turunkan menjadi 2 kolom.
    */

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

        gap:
            20px
            18px;
    }


    .menu-product-card {
        min-height: 490px;
    }


    .menu-product-media {
        height: 300px;
    }


    .menu-product-name {
        font-size: 2.05rem;
    }


    /* =====================================================
       PRICE INFO
       ===================================================== */

    .menu-info-card {
        padding:
            24px
            26px;
    }


    /* =====================================================
       LOCATION CTA
       ===================================================== */

    .menu-location-card {
        min-height: 450px;

        padding:
            clamp(
                46px,
                6vw,
                72px
            );
    }


    .menu-location-content h2 {
        font-size:
            clamp(
                3.4rem,
                6vw,
                4.8rem
            );
    }
}


/* =========================================================
   03. LARGE TABLET
   <= 900px
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       HERO
       ===================================================== */

    /*
       Di ukuran ini navbar sudah berubah ke mobile navbar.

       Hero mulai kita stack karena dua kolom sudah terlalu
       sempit untuk headline Oleo Script + visual produk.
    */

    .menu-hero {
        min-height: auto;

        padding-top:
            calc(
                var(--navbar-height) +
                64px
            );

        padding-bottom: 72px;
    }


    .menu-hero-container {
        grid-template-columns: 1fr;

        gap: 44px;
    }


    .menu-hero-content {
        max-width: 680px;
    }


    .menu-hero-title {
        max-width: 650px;

        font-size:
            clamp(
                4rem,
                9vw,
                5.5rem
            );
    }


    .menu-hero-description {
        max-width: 540px;
    }


    /*
       Visual tetap besar karena sekarang punya full width.
    */

    .menu-hero-visual {
        width: 100%;
        min-height: 540px;
    }


    .menu-hero-product {
        width: min(54%, 380px);
    }


    .menu-hero-shape {
        width: min(52%, 390px);
    }


    /* =====================================================
       CATALOGUE HEADER
       ===================================================== */

    .menu-catalogue-header {
        align-items: flex-start;
    }


    /* =====================================================
       PRODUCT CARD
       ===================================================== */

    .menu-product-content {
        padding:
            22px
            22px
            20px;
    }


    /* =====================================================
       LOCATION CTA
       ===================================================== */

    .menu-location-card {
        min-height: 430px;
    }


    .menu-location-decoration {
        right: -7%;
        bottom: -18%;
    }
}


/* =========================================================
   04. TABLET PORTRAIT
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       HERO
       ===================================================== */

    .menu-hero {
        padding-top:
            calc(
                var(--navbar-height) +
                48px
            );

        padding-bottom: 64px;
    }


    .menu-hero::before {
        left: -100px;

        width: 200px;
        height: 200px;

        border-width: 44px;
    }


    .menu-hero::after {
        right: -110px;
        bottom: -110px;

        width: 240px;
        height: 240px;
    }


    .menu-hero-container {
        gap: 38px;
    }


    .menu-hero-title {
        max-width: 580px;

        margin-bottom: 20px;

        font-size:
            clamp(
                3.8rem,
                11vw,
                5rem
            );
    }


    .menu-hero-description {
        max-width: 500px;

        font-size: 0.95rem;

        line-height: 1.72;
    }


    .menu-hero-visual {
        min-height: 490px;

        border-radius:
            var(--radius-xl);
    }


    .menu-hero-product {
        width: min(58%, 350px);
    }


    .menu-hero-shape {
        width: min(56%, 360px);
    }


    .menu-hero-price {
        top: 24px;
        right: 24px;

        width: 92px;
        height: 92px;
    }


    .menu-hero-price span {
        font-size: 0.64rem;
    }


    .menu-hero-price strong {
        font-size: 2.2rem;
    }


    /* =====================================================
       CATALOGUE HEADER
       ===================================================== */

    .menu-catalogue-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-bottom: 30px;
    }


    .menu-result-summary {
        margin-bottom: 0;
    }


    /* =====================================================
       TOOLBAR
       ===================================================== */

    .menu-toolbar {
        gap: 12px;

        margin-bottom: 20px;

        padding: 14px;

        border-radius:
            var(--radius-lg);
    }


    .menu-search-input {
        height: 50px;
    }


    .menu-category-button {
        min-height: 40px;

        padding:
            8px
            14px;
    }


    /* =====================================================
       ACTIVE FILTER
       ===================================================== */

    .menu-active-filter {
        margin-bottom: 22px;
    }


    /* =====================================================
       PRODUCT GRID
       ===================================================== */

    .menu-product-grid {
        gap: 16px;
    }


    .menu-product-card {
        min-height: 450px;
    }


    .menu-product-media {
        height: 260px;
    }


    .menu-product-content {
        padding:
            20px
            18px
            18px;
    }


    .menu-product-name {
        font-size: 1.9rem;
    }


    .menu-product-description {
        margin-bottom: 20px;

        font-size: 0.82rem;
    }


    /* =====================================================
       EMPTY STATE
       ===================================================== */

    .menu-empty-state {
        padding:
            46px
            30px;
    }


    /* =====================================================
       INFO
       ===================================================== */

    .menu-info {
        padding-bottom: 52px;
    }


    .menu-info-card {
        align-items: flex-start;

        padding:
            22px
            24px;
    }


    /* =====================================================
       LOCATION CTA
       ===================================================== */

    .menu-location-cta {
        padding-top: 30px;
    }


    .menu-location-card {
        min-height: 420px;

        padding:
            50px
            42px;

        border-radius:
            var(--radius-xl);
    }


    .menu-location-content h2 {
        max-width: 540px;

        font-size:
            clamp(
                3.2rem,
                9vw,
                4.4rem
            );
    }


    .menu-location-decoration {
        bottom: -12%;
    }
}


/* =========================================================
   05. MOBILE
   <= 576px
   ========================================================= */

@media (max-width: 576px) {

    /* =====================================================
       HERO
       ===================================================== */

    .menu-hero {
        padding-top:
            calc(
                var(--navbar-height) +
                38px
            );

        padding-bottom: 54px;

        background:
            radial-gradient(
                circle at 85% 55%,
                rgba(244, 183, 64, 0.16),
                transparent 28%
            ),
            var(--iketan-soft);
    }


    .menu-hero::before {
        top: 4%;
        left: -85px;

        width: 160px;
        height: 160px;

        border-width: 36px;
    }


    .menu-hero::after {
        right: -95px;
        bottom: -80px;

        width: 190px;
        height: 190px;
    }


    .menu-hero-container {
        gap: 32px;
    }


    .menu-hero-content
    .section-eyebrow {
        margin-bottom: 13px;
    }


    .menu-hero-title {
        max-width: 100%;

        margin-bottom: 18px;

        font-size:
            clamp(
                3.5rem,
                15vw,
                4.5rem
            );

        line-height: 0.94;
    }


    .menu-hero-description {
        max-width: 410px;

        font-size: 0.9rem;
    }


    /* -----------------------------------------------------
       Hero Product Visual
       ----------------------------------------------------- */

    .menu-hero-visual {
        min-height: 420px;

        border-radius:
            var(--radius-xl);
    }


    .menu-hero-product {
        width: min(68%, 300px);
    }


    .menu-hero-shape {
        width: min(68%, 300px);
    }


    .menu-hero-visual::before {
        top: -65px;
        right: -55px;

        width: 145px;
        height: 145px;

        border-width: 30px;
    }


    .menu-hero-visual::after {
        left: 22px;
        bottom: 20px;

        width: 46px;
        height: 46px;
    }


    .menu-hero-price {
        top: 18px;
        right: 18px;

        width: 82px;
        height: 82px;
    }


    .menu-hero-price span {
        font-size: 0.6rem;
    }


    .menu-hero-price strong {
        font-size: 2rem;
    }


    /* =====================================================
       CATALOGUE HEADER
       ===================================================== */

    .menu-catalogue-header {
        margin-bottom: 26px;
    }


    .menu-result-summary {
        font-size: 0.8rem;
    }


    /* =====================================================
       TOOLBAR
       ===================================================== */

    /*
       Toolbar mobile kita biarkan clean:
       search di atas, category strip horizontal di bawah.
    */

    .menu-toolbar {
        gap: 12px;

        margin-bottom: 18px;

        padding:
            12px;

        border-radius:
            var(--radius-lg);
    }


    .menu-search-input {
        height: 48px;

        padding:
            0
            44px
            0
            42px;

        font-size: 0.86rem;
    }


    .menu-search-icon {
        left: 15px;

        width: 17px;
        height: 17px;
    }


    .menu-search-icon img,
    .menu-search-icon svg {
        width: 17px;
        height: 17px;
    }


    .menu-search-clear {
        right: 6px;

        width: 34px;
        height: 34px;
    }


    /* -----------------------------------------------------
       Category horizontal strip
       ----------------------------------------------------- */

    .menu-category-filter {
        width:
            calc(
                100% +
                12px
            );

        margin-right: -12px;

        padding-right: 12px;
    }


    .menu-category-button {
        min-height: 38px;

        padding:
            8px
            13px;

        font-size: 0.72rem;
    }


    /* =====================================================
       ACTIVE FILTER
       ===================================================== */

    .menu-active-filter {
        max-width: 100%;

        flex-wrap: wrap;

        margin-bottom: 20px;

        padding:
            7px
            9px
            7px
            12px;
    }


    /* =====================================================
       PRODUCT GRID
       ===================================================== */

    /*
       Berbeda dengan homepage:

       Di halaman menu utama kita tetap pakai
       vertical single-column list/card.

       Alasannya:
       user datang ke halaman ini memang untuk browse
       katalog lengkap, bukan sekadar teaser.
    */

    .menu-product-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        min-height: 350px;
    }


    .menu-product-skeleton {
        min-height: 470px;
    }


    .menu-product-card {
        min-height: 470px;

        border-radius:
            var(--radius-lg);
    }


    .menu-product-media {
        height: 300px;
    }


    .menu-product-content {
        padding:
            20px
            20px
            18px;
    }


    .menu-product-category {
        margin-bottom: 8px;
    }


    .menu-product-name {
        margin-bottom: 9px;

        font-size:
            clamp(
                1.95rem,
                9vw,
                2.25rem
            );
    }


    .menu-product-description {
        margin-bottom: 18px;

        font-size: 0.82rem;

        line-height: 1.65;
    }


    .menu-product-footer {
        padding-top: 15px;
    }


    .menu-product-price {
        font-size: 1rem;
    }


    .menu-product-indicator {
        width: 36px;
        height: 36px;
    }


    /* =====================================================
       EMPTY STATE
       ===================================================== */

    .menu-empty-state {
        margin-top: 28px;

        padding:
            38px
            24px;

        border-radius:
            var(--radius-lg);
    }


    .menu-empty-icon {
        width: 56px;
        height: 56px;

        margin-bottom: 17px;

        font-size: 1.8rem;
    }


    .menu-empty-state h3 {
        font-size: 2rem;
    }


    .menu-empty-state p {
        font-size: 0.86rem;
    }


    /* =====================================================
       DATA ERROR
       ===================================================== */

    .menu-data-error {
        padding:
            32px
            22px;

        border-radius:
            var(--radius-lg);
    }


    .menu-data-error h3 {
        font-size: 2rem;
    }


    .menu-data-error p {
        font-size: 0.84rem;
    }


    /* =====================================================
       PRICE INFORMATION
       ===================================================== */

    .menu-info {
        padding-bottom: 46px;
    }


    .menu-info-card {
        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            22px
            20px;

        border-radius:
            var(--radius-lg);
    }


    .menu-info-icon {
        width: 44px;
        height: 44px;

        font-size: 1.3rem;
    }


    .menu-info-content h2 {
        margin-bottom: 7px;

        font-size: 0.92rem;
    }


    .menu-info-content p {
        font-size: 0.8rem;
    }


    /* =====================================================
       LOCATION CTA
       ===================================================== */

    .menu-location-cta {
        padding-top: 18px;
    }


    .menu-location-card {
        min-height: 430px;

        align-items: flex-end;

        padding:
            40px
            28px;

        border-radius:
            var(--radius-xl);
    }


    .menu-location-card::before {
        top: 30px;
        right: -18px;

        width: 100px;
        height: 100px;

        border-width: 24px;
    }


    .menu-location-eyebrow {
        margin-bottom: 14px;

        font-size: 0.67rem;
    }


    .menu-location-content h2 {
        max-width: 410px;

        margin-bottom: 17px;

        font-size:
            clamp(
                3.1rem,
                14vw,
                4rem
            );

        line-height: 0.95;
    }


    .menu-location-content p {
        max-width: 390px;

        margin-bottom: 25px;

        font-size: 0.88rem;
    }


    .menu-location-decoration {
        right: -5%;
        bottom: -2%;

        font-size: 8rem;
    }
}


/* =========================================================
   06. SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    /* =====================================================
       HERO
       ===================================================== */

    .menu-hero {
        padding-top:
            calc(
                var(--navbar-height) +
                32px
            );

        padding-bottom: 48px;
    }


    .menu-hero-title {
        font-size:
            clamp(
                3.2rem,
                15vw,
                4rem
            );
    }


    .menu-hero-description {
        font-size: 0.86rem;
    }


    .menu-hero-visual {
        min-height: 370px;
    }


    .menu-hero-product {
        width: 72%;
    }


    .menu-hero-shape {
        width: 70%;
    }


    .menu-hero-price {
        width: 74px;
        height: 74px;
    }


    .menu-hero-price strong {
        font-size: 1.85rem;
    }


    /* =====================================================
       TOOLBAR
       ===================================================== */

    .menu-toolbar {
        padding: 10px;
    }


    .menu-search-input {
        height: 46px;

        font-size: 0.82rem;
    }


    .menu-category-button {
        min-height: 36px;

        padding-inline: 11px;

        font-size: 0.68rem;
    }


    /* =====================================================
       PRODUCT
       ===================================================== */

    .menu-product-card {
        min-height: 440px;
    }


    .menu-product-media {
        height: 270px;
    }


    .menu-product-content {
        padding:
            18px
            17px
            17px;
    }


    .menu-product-name {
        font-size: 1.9rem;
    }


    .menu-product-description {
        font-size: 0.78rem;
    }


    /* =====================================================
       ACTIVE FILTER
       ===================================================== */

    .menu-active-filter {
        font-size: 0.68rem;
    }


    /* =====================================================
       LOCATION CTA
       ===================================================== */

    .menu-location-card {
        min-height: 410px;

        padding:
            36px
            22px;
    }


    .menu-location-content h2 {
        font-size:
            clamp(
                2.9rem,
                14vw,
                3.7rem
            );
    }


    .menu-location-content p {
        font-size: 0.84rem;
    }


    .menu-location-content .btn {
        width: 100%;
    }
}


/* =========================================================
   07. TOUCH DEVICE OPTIMIZATION
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    /*
       Product card tidak perlu vertical lift
       pada touchscreen.
    */

    .menu-product-card:hover {
        transform: none;

        box-shadow: none;
    }


    .menu-product-card:hover
    .menu-product-image {
        transform: none;
    }


    .menu-product-card:hover
    .menu-product-indicator {
        transform: none;
    }


    .menu-category-button:hover {
        transform: none;
    }
}


/* =========================================================
   08. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    /*
       Filter product enter animation tidak diperlukan
       kalau user memilih reduced motion.
    */

    .menu-product-card.is-entering {
        animation: none;
    }


    .menu-product-image,
    .menu-product-card,
    .menu-product-indicator,
    .menu-category-button {
        transition: none;
    }
}


/* =========================================================
   09. LANDSCAPE MOBILE
   ========================================================= */

@media
    (max-width: 900px)
    and (orientation: landscape)
    and (max-height: 520px) {

    /*
       Landscape mobile punya viewport rendah.

       Hero jangan jadi terlalu tinggi gara-gara
       product showcase.
    */

    .menu-hero {
        padding-top:
            calc(
                var(--navbar-height) +
                34px
            );

        padding-bottom: 48px;
    }


    .menu-hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.8fr);

        gap: 36px;
    }


    .menu-hero-title {
        font-size: 3.8rem;
    }


    .menu-hero-description {
        max-width: 440px;

        font-size: 0.86rem;
    }


    .menu-hero-visual {
        min-height: 340px;
    }


    .menu-hero-product {
        width: min(65%, 230px);
    }


    .menu-hero-shape {
        width: min(64%, 240px);
    }


    .menu-hero-price {
        top: 16px;
        right: 16px;

        width: 70px;
        height: 70px;
    }


    .menu-hero-price strong {
        font-size: 1.7rem;
    }
}


/* =========================================================
   10. VERY WIDE DISPLAY
   ========================================================= */

@media (min-width: 1600px) {

    /*
       Jangan biarkan hero terlalu kosong
       di monitor ultra-wide.
    */

    .menu-hero-container {
        gap: 110px;
    }


    .menu-hero-visual {
        min-height: 580px;
    }


    .menu-hero-product {
        width: min(66%, 420px);
    }


    .menu-hero-shape {
        width: min(70%, 440px);
    }
}


/* =========================================================
   END OF MENU RESPONSIVE
   ========================================================= */