/* =========================================================
   IKETAN.ID
   Location Page Responsive Stylesheet
   ---------------------------------------------------------
   Base styles:
   /assets/css/lokasi.css

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

   Scope:
   - Location hero
   - Search toolbar
   - City filter
   - Directory meta
   - Outlet grid
   - Outlet cards
   - Empty state
   - Location note
   - Partnership CTA

   IMPORTANT:
   Global navbar, footer, container, buttons,
   and general typography 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
       ----------------------------------------------------- */

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

        padding-bottom: 78px;
    }


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


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


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

        font-size: 1.05rem;
    }


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


    .location-hero-image {
        min-height: 500px;
    }


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

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


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

    .location-grid {
        gap:
            20px
            16px;
    }


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


    .location-card-media {
        height: 200px;
    }


    /* -----------------------------------------------------
       PARTNERSHIP CTA
       ----------------------------------------------------- */

    .location-partnership-card {
        min-height: 490px;
    }
}


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

@media (max-width: 1024px) {

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

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

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

        padding-bottom: 70px;
    }


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

        gap: 48px;
    }


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


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


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

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


    .location-hero-image {
        min-height: 460px;
    }


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

    /*
       Mulai ukuran tablet:
       search di atas
       city filter di bawah.

       Ini kasih ruang lebih lega untuk nama kota.
    */

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

        gap: 14px;

        padding: 16px;
    }


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


    .location-city-filter {
        width: 100%;
    }


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

    /*
       3 kolom mulai terlalu sempit.
       Turun ke 2 kolom.
    */

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

        gap:
            20px
            18px;
    }


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


    .location-card-media {
        height: 220px;
    }


    .location-card-content {
        padding:
            21px
            21px
            19px;
    }


    /* =====================================================
       NOTE
       ===================================================== */

    .location-note-card {
        padding:
            24px
            26px;
    }


    /* =====================================================
       PARTNERSHIP
       ===================================================== */

    .location-partnership-card {
        min-height: 460px;

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


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


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

@media (max-width: 900px) {

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

    /*
       Navbar sudah mobile pada breakpoint ini.

       Hero kita stack supaya copy dan foto
       gak saling rebut ruang.
    */

    .location-hero {
        min-height: auto;

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

        padding-bottom: 72px;
    }


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

        gap: 44px;
    }


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


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

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


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


    .location-hero-visual {
        width: 100%;
        min-height: 520px;
    }


    .location-hero-image {
        min-height: 520px;

        object-position: center;
    }


    /* =====================================================
       DIRECTORY HEADER
       ===================================================== */

    .location-directory-header {
        align-items: flex-start;
    }


    /* =====================================================
       DIRECTORY META
       ===================================================== */

    .location-directory-meta {
        gap: 24px;
    }


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

    .location-card-content {
        padding:
            21px
            20px
            19px;
    }


    /* =====================================================
       PARTNERSHIP
       ===================================================== */

    .location-partnership-card {
        min-height: 440px;
    }


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


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

@media (max-width: 768px) {

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

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

        padding-bottom: 64px;
    }


    .location-hero::before {
        top: -70px;
        right: -90px;

        width: 220px;
        height: 220px;

        border-width: 46px;
    }


    .location-hero::after {
        left: -110px;
        bottom: -100px;

        width: 250px;
        height: 250px;
    }


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


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

        margin-bottom: 20px;

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


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

        font-size: 0.95rem;

        line-height: 1.72;
    }


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

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


    .location-hero-image {
        min-height: 460px;
    }


    .location-hero-label {
        left: 22px;
        bottom: 22px;

        padding:
            13px
            16px;
    }


    .location-hero-label strong {
        font-size: 1.65rem;
    }


    /* =====================================================
       DIRECTORY HEADER
       ===================================================== */

    .location-directory-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-bottom: 30px;
    }


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


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

    .location-toolbar {
        gap: 12px;

        margin-bottom: 20px;

        padding: 14px;

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


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


    .location-city-button {
        min-height: 40px;

        padding:
            8px
            14px;
    }


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

    .location-active-filter {
        margin-bottom: 20px;
    }


    /* =====================================================
       DIRECTORY META
       ===================================================== */

    .location-directory-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        margin-bottom: 26px;
    }


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

    .location-grid {
        gap: 16px;
    }


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


    .location-card-media {
        height: 205px;
    }


    .location-card-content {
        padding:
            19px
            18px
            18px;
    }


    .location-card-name {
        font-size: 1rem;
    }


    .location-card-address {
        font-size: 0.78rem;
    }


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

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


    /* =====================================================
       NOTE
       ===================================================== */

    .location-note {
        padding-bottom: 52px;
    }


    .location-note-card {
        align-items: flex-start;

        padding:
            22px
            24px;
    }


    /* =====================================================
       PARTNERSHIP
       ===================================================== */

    .location-partnership {
        padding-top: 30px;
    }


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

        padding:
            50px
            42px;

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


    .location-partnership-content h2 {
        max-width: 570px;

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


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


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

@media (max-width: 576px) {

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

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

        padding-bottom: 54px;

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


    .location-hero::before {
        top: -60px;
        right: -80px;

        width: 175px;
        height: 175px;

        border-width: 36px;
    }


    .location-hero::after {
        left: -90px;
        bottom: -75px;

        width: 190px;
        height: 190px;
    }


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


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


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

        margin-bottom: 18px;

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

        line-height: 0.94;
    }


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

        margin-bottom: 24px;

        font-size: 0.9rem;
    }


    .location-hero-visual {
        min-height: 390px;

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


    .location-hero-image {
        min-height: 390px;

        object-position: center;
    }


    .location-hero-label {
        left: 16px;
        bottom: 16px;

        padding:
            11px
            13px;

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


    .location-hero-label span {
        font-size: 0.6rem;
    }


    .location-hero-label strong {
        font-size: 1.45rem;
    }


    /* =====================================================
       DIRECTORY HEADER
       ===================================================== */

    .location-directory-header {
        margin-bottom: 26px;
    }


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


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

    /*
       Search full width.
       City filter horizontal scroll.
    */

    .location-toolbar {
        gap: 12px;

        margin-bottom: 18px;

        padding: 12px;

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


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

        padding:
            0
            44px
            0
            42px;

        font-size: 0.84rem;
    }


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

        width: 17px;
        height: 17px;
    }


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


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

        width: 34px;
        height: 34px;
    }


    /* -----------------------------------------------------
       City Filter
       ----------------------------------------------------- */

    .location-city-filter {
        width:
            calc(
                100% +
                12px
            );

        margin-right: -12px;

        padding-right: 12px;
    }


    .location-city-button {
        min-height: 38px;

        padding:
            8px
            13px;

        font-size: 0.72rem;
    }


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

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

        flex-wrap: wrap;

        margin-bottom: 18px;

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


    /* =====================================================
       DIRECTORY META
       ===================================================== */

    .location-directory-meta {
        gap: 12px;

        margin-bottom: 22px;

        padding:
            16px
            17px;

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


    .location-directory-meta p {
        font-size: 0.76rem;
    }


    .location-directory-legend {
        font-size: 0.72rem;
    }


    /* =====================================================
       OUTLET GRID
       ===================================================== */

    /*
       Di mobile outlet list kita buat 1 kolom.

       User perlu baca alamat dan CTA Maps dengan jelas,
       jadi jangan dipaksa jadi horizontal carousel.
    */

    .location-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        min-height: 350px;
    }


    .location-card-skeleton {
        min-height: 420px;
    }


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

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


    /* =====================================================
       CARD MEDIA
       ===================================================== */

    .location-card-media {
        height: 230px;
    }


    .location-card-status {
        top: 12px;
        left: 12px;

        min-height: 28px;

        padding:
            5px
            10px;

        font-size: 0.64rem;
    }


    .location-card.is-featured
    .location-card-media::before {
        top: 12px;
        right: 12px;

        font-size: 0.62rem;
    }


    /* =====================================================
       CARD CONTENT
       ===================================================== */

    .location-card-content {
        padding:
            19px
            18px
            17px;
    }


    .location-card-meta {
        margin-bottom: 8px;
    }


    .location-card-city {
        font-size: 0.64rem;
    }


    .location-card-area {
        font-size: 0.68rem;
    }


    .location-card-name {
        margin-bottom: 8px;

        font-size: 1rem;

        line-height: 1.4;
    }


    .location-card-address {
        margin-bottom: 16px;

        font-size: 0.78rem;

        line-height: 1.6;
    }


    .location-card-contact {
        margin-bottom: 17px;
    }


    .location-card-phone {
        font-size: 0.74rem;
    }


    .location-card-footer {
        padding-top: 15px;
    }


    .location-card-map {
        min-height: 45px;

        padding:
            9px
            13px;

        font-size: 0.76rem;
    }


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

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

        padding:
            38px
            24px;

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


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

        margin-bottom: 17px;
    }


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


    .location-empty-state p {
        font-size: 0.84rem;
    }


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

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

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


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


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


    /* =====================================================
       NOTE
       ===================================================== */

    .location-note {
        padding-bottom: 46px;
    }


    .location-note-card {
        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            22px
            20px;

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


    .location-note-icon {
        width: 44px;
        height: 44px;
    }


    .location-note-icon img,
    .location-note-icon svg {
        width: 18px;
        height: 18px;
    }


    .location-note-content h2 {
        margin-bottom: 7px;

        font-size: 0.92rem;
    }


    .location-note-content p {
        font-size: 0.8rem;
    }


    /* =====================================================
       PARTNERSHIP CTA
       ===================================================== */

    .location-partnership {
        padding-top: 18px;
    }


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

        align-items: flex-end;

        padding:
            40px
            28px;

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


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

        width: 100px;
        height: 100px;

        border-width: 24px;
    }


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

        font-size: 0.67rem;
    }


    .location-partnership-content h2 {
        max-width: 430px;

        margin-bottom: 17px;

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

        line-height: 0.95;
    }


    .location-partnership-content > p {
        max-width: 400px;

        margin-bottom: 26px;

        font-size: 0.88rem;
    }


    .location-partnership-actions {
        gap: 9px;
    }


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

        font-size: 8rem;
    }
}


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

@media (max-width: 380px) {

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

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

        padding-bottom: 48px;
    }


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


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


    .location-hero-visual {
        min-height: 350px;
    }


    .location-hero-image {
        min-height: 350px;
    }


    .location-hero-label {
        left: 14px;
        bottom: 14px;

        padding:
            10px
            12px;
    }


    .location-hero-label strong {
        font-size: 1.3rem;
    }


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

    .location-toolbar {
        padding: 10px;
    }


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

        font-size: 0.8rem;
    }


    .location-city-button {
        min-height: 36px;

        padding-inline: 11px;

        font-size: 0.68rem;
    }


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

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


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

    .location-card {
        min-height: 400px;
    }


    .location-card-media {
        height: 210px;
    }


    .location-card-content {
        padding:
            17px
            16px
            16px;
    }


    .location-card-name {
        font-size: 0.96rem;
    }


    .location-card-address {
        font-size: 0.75rem;
    }


    .location-card-map {
        font-size: 0.72rem;
    }


    /* =====================================================
       PARTNERSHIP
       ===================================================== */

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

        padding:
            36px
            22px;
    }


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


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


    .location-partnership-actions {
        align-items: stretch;

        flex-direction: column;

        width: 100%;
    }


    .location-partnership-actions .btn {
        width: 100%;
    }
}


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

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

    /*
       Hover lift dan zoom tidak berguna di touchscreen
       dan bisa meninggalkan hover state aneh.
    */

    .location-hero-visual:hover
    .location-hero-image {
        transform: none;
    }


    .location-card:hover {
        transform: none;

        box-shadow: none;
    }


    .location-card:hover
    .location-card-image {
        transform: none;
    }


    .location-card-map:hover {
        transform: none;

        box-shadow: none;
    }


    .location-card-map:hover
    .location-card-map-arrow {
        transform: none;
    }


    .location-city-button:hover {
        transform: none;
    }
}


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

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

    .location-card.is-entering {
        animation: none;
    }


    .location-hero-image,
    .location-card,
    .location-card-image,
    .location-card-map,
    .location-card-map-arrow,
    .location-city-button {
        transition: none;
    }
}


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

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

    /*
       Untuk HP landscape, hero stacked malah terlalu tinggi.

       Kita balik ke dua kolom ringan.
    */

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

        padding-bottom: 48px;
    }


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

        gap: 34px;
    }


    .location-hero-title {
        font-size: 3.7rem;
    }


    .location-hero-description {
        max-width: 430px;

        margin-bottom: 20px;

        font-size: 0.84rem;
    }


    .location-hero-visual {
        min-height: 330px;
    }


    .location-hero-image {
        min-height: 330px;
    }


    .location-hero-label {
        left: 14px;
        bottom: 14px;
    }
}


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

@media (min-width: 1600px) {

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


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


    .location-hero-image {
        min-height: 580px;
    }
}


/* =========================================================
   END OF LOCATION RESPONSIVE
   ========================================================= */