/* =========================================================
   IKETAN.ID
   Contact Page Responsive Stylesheet
   ---------------------------------------------------------
   Base:
   /assets/css/kontak.css

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

   Scope:
   - Contact hero
   - Contact routes
   - Smart WhatsApp form
   - Feedback / complaint
   - Collaboration
   - Email & social
   - Closing

   Breakpoints:
   <= 1180px
   <= 1024px
   <= 900px
   <= 768px
   <= 576px
   <= 380px
   ========================================================= */


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

@media (max-width: 1180px) {

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

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

        padding-bottom: 80px;
    }


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

        gap: 68px;
    }


    .contact-hero-title {
        font-size:
            clamp(
                4.3rem,
                7vw,
                6.5rem
            );
    }


    .contact-hero-side {
        padding: 34px;
    }


    /* -----------------------------------------------------
       ROUTES
       ----------------------------------------------------- */

    .contact-route-card {
        min-height: 410px;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    .contact-form-layout {
        gap: 68px;
    }


    /* -----------------------------------------------------
       COLLABORATION
       ----------------------------------------------------- */

    .contact-collaboration-layout {
        gap: 60px;
    }

}


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

@media (max-width: 1024px) {

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

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

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

        padding-bottom: 70px;
    }


    .contact-hero-container {
        gap: 48px;
    }


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


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


    .contact-hero-side {
        padding: 30px;

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


    /* =====================================================
       ROUTE CARDS
       ===================================================== */

    .contact-route-grid {
        gap: 16px;
    }


    .contact-route-card {
        min-height: 400px;

        padding: 26px;
    }


    .contact-route-content {
        min-height: 285px;
    }


    /* =====================================================
       FORM
       ===================================================== */

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

        gap: 50px;
    }


    .contact-form-card {
        padding: 30px;
    }


    /*
       Tiga pilihan masih muat,
       tapi kita kurangi spacing-nya.
    */

    .contact-purpose-options {
        gap: 8px;
    }


    .contact-purpose-option > span {
        padding: 14px;
    }


    /* =====================================================
       FEEDBACK
       ===================================================== */

    .contact-feedback-card {
        gap: 40px;

        padding:
            32px
            34px;
    }


    /* =====================================================
       COLLABORATION
       ===================================================== */

    .contact-collaboration {
        min-height: 570px;
    }


    .contact-collaboration-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 46px;
    }


    .contact-collaboration-content h2 {
        font-size:
            clamp(
                3.7rem,
                6vw,
                5.3rem
            );
    }


    /* =====================================================
       OTHER CONTACT
       ===================================================== */

    .contact-other-card {
        min-height: 300px;

        padding: 26px;
    }

}


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

@media (max-width: 900px) {

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

    .contact-hero {
        min-height: auto;

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

        padding-bottom: 72px;
    }


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

        gap: 42px;
    }


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


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

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


    .contact-hero-side {
        max-width: 650px;
    }


    /* =====================================================
       FORM LAYOUT
       ===================================================== */

    /*
       Sticky intro kita lepas mulai ukuran ini.

       Form sudah cukup panjang.
       Kalau sticky masih aktif di tablet portrait,
       rasanya mulai maksa.
    */

    .contact-form-layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .contact-form-intro {
        position: static;

        max-width: 650px;
    }


    .contact-form-note {
        max-width: 520px;
    }


    .contact-form-card {
        max-width: 760px;
    }


    /* =====================================================
       FEEDBACK
       ===================================================== */

    .contact-feedback-card {
        align-items: flex-start;

        gap: 28px;
    }


    /* =====================================================
       COLLABORATION
       ===================================================== */

    .contact-collaboration {
        min-height: auto;
    }


    .contact-collaboration-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .contact-collaboration-content {
        max-width: 650px;
    }


    .contact-collaboration-words {
        width: fit-content;

        opacity: 0.9;
    }

}


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

@media (max-width: 768px) {

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

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

        padding-bottom: 62px;
    }


    .contact-hero::before {
        top: -65px;
        right: -90px;

        width: 220px;
        height: 220px;

        border-width: 45px;
    }


    .contact-hero::after {
        left: -100px;
        bottom: -90px;

        width: 220px;
        height: 220px;
    }


    .contact-hero-title {
        margin-bottom: 20px;

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


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

        font-size: 0.95rem;
    }


    .contact-hero-side {
        padding: 28px;
    }


    /* =====================================================
       ROUTES
       ===================================================== */

    .contact-routes-header {
        margin-bottom: 40px;
    }


    .contact-routes-header
    .section-title {
        font-size:
            clamp(
                3.4rem,
                9vw,
                4.8rem
            );
    }


    /*
       Utility card lebih readable kalau satu column.
    */

    .contact-route-grid {
        grid-template-columns: 1fr;
    }


    .contact-route-card {
        min-height: auto;

        padding: 28px;
    }


    .contact-route-index {
        margin-bottom: 30px;

        padding-bottom: 0;
    }


    .contact-route-content {
        min-height: auto;
    }


    .contact-route-meta {
        margin-top: 22px;
    }


    /* =====================================================
       FORM
       ===================================================== */

    .contact-form-intro
    .section-title {
        font-size:
            clamp(
                3.3rem,
                9vw,
                4.6rem
            );
    }


    .contact-form-card {
        padding: 28px;
    }


    /*
       Tiga radio cards mulai lebih enak
       kalau satu kolom.

       Karena description tiap pilihan penting.
    */

    .contact-purpose-options {
        grid-template-columns: 1fr;
    }


    .contact-purpose-option {
        min-height: auto;
    }


    .contact-purpose-option > span {
        min-height: 84px;
    }


    /* =====================================================
       FEEDBACK
       ===================================================== */

    .contact-feedback-card {
        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

        padding:
            30px;
    }


    .contact-feedback-content h2 {
        font-size:
            clamp(
                2.8rem,
                8vw,
                3.7rem
            );
    }


    /* =====================================================
       COLLABORATION
       ===================================================== */

    .contact-collaboration-content h2 {
        font-size:
            clamp(
                3.5rem,
                9vw,
                4.8rem
            );
    }


    .contact-collaboration-words span {
        font-size:
            clamp(
                2.7rem,
                9vw,
                4.5rem
            );
    }


    /* =====================================================
       OTHER CONTACT
       ===================================================== */

    .contact-other-header {
        margin-bottom: 38px;
    }


    .contact-other-header
    .section-title {
        font-size:
            clamp(
                3.3rem,
                9vw,
                4.6rem
            );
    }


    .contact-other-grid {
        grid-template-columns: 1fr;

        border-bottom: 0;
    }


    .contact-other-card {
        min-height: 260px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--iketan-border);
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .contact-closing h2 {
        font-size:
            clamp(
                3.8rem,
                11vw,
                5.3rem
            );
    }

}


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

@media (max-width: 576px) {

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

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

        padding-bottom: 52px;
    }


    .contact-hero::before {
        top: -50px;
        right: -70px;

        width: 170px;
        height: 170px;

        border-width: 34px;
    }


    .contact-hero::after {
        left: -80px;
        bottom: -60px;

        width: 170px;
        height: 170px;
    }


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


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


    .contact-hero-title {
        max-width: 460px;

        margin-bottom: 18px;

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

        line-height: 0.93;
    }


    .contact-hero-description {
        max-width: 390px;

        margin-bottom: 24px;

        font-size: 0.88rem;

        line-height: 1.7;
    }


    /* -----------------------------------------------------
       Hero Side
       ----------------------------------------------------- */

    .contact-hero-side {
        padding:
            24px
            22px;

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


    .contact-hero-side-label {
        margin-bottom: 11px;

        font-size: 0.62rem;
    }


    .contact-hero-side > p {
        margin-bottom: 22px;

        font-size: 0.84rem;

        line-height: 1.65;
    }


    .contact-hero-side-list span {
        min-height: 50px;

        padding-left: 19px;

        font-size: 0.8rem;
    }


    .contact-hero-side-list span::before {
        width: 6px;
        height: 6px;
    }


    /* =====================================================
       CONTACT ROUTES
       ===================================================== */

    .contact-routes-header {
        margin-bottom: 32px;
    }


    .contact-routes-header
    .section-title {
        margin-bottom: 15px;

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


    .contact-route-grid {
        gap: 13px;
    }


    .contact-route-card {
        padding:
            24px
            22px;

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


    .contact-route-index {
        margin-bottom: 25px;

        font-size: 0.64rem;
    }


    .contact-route-label {
        font-size: 0.61rem;
    }


    .contact-route-content h3 {
        margin-bottom: 12px;

        font-size:
            clamp(
                1.35rem,
                6vw,
                1.7rem
            );

        line-height: 1.28;
    }


    .contact-route-content > p {
        margin-bottom: 18px;

        font-size: 0.82rem;

        line-height: 1.65;
    }


    /* -----------------------------------------------------
       Route Meta
       ----------------------------------------------------- */

    .contact-route-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

        margin-top: 18px;
        margin-bottom: 17px;

        padding:
            12px
            13px;
    }


    .contact-route-meta strong {
        text-align: left;
    }


    .contact-route-link {
        font-size: 0.76rem;
    }


    /* =====================================================
       SMART FORM
       ===================================================== */

    .contact-form-layout {
        gap: 32px;
    }


    .contact-form-intro
    .section-title {
        margin-bottom: 18px;

        font-size:
            clamp(
                3rem,
                13vw,
                3.9rem
            );

        line-height: 0.96;
    }


    .contact-form-intro > p {
        margin-bottom: 22px;

        font-size: 0.86rem;

        line-height: 1.7;
    }


    .contact-form-note {
        padding:
            17px
            18px;

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


    .contact-form-note strong {
        font-size: 0.8rem;
    }


    .contact-form-note p {
        font-size: 0.74rem;
    }


    /* -----------------------------------------------------
       Form Card
       ----------------------------------------------------- */

    .contact-form-card {
        padding:
            24px
            20px;

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


    .contact-form {
        gap: 19px;
    }


    .contact-form
    .form-label {
        margin-bottom: 7px;

        font-size: 0.73rem;
    }


    .contact-form
    .form-control {
        min-height: 49px;

        font-size: 0.86rem;
    }


    .contact-form
    .form-textarea {
        min-height: 125px;
    }


    /* -----------------------------------------------------
       Purpose Options
       ----------------------------------------------------- */

    .contact-purpose-options {
        gap: 8px;
    }


    .contact-purpose-option > span {
        min-height: 80px;

        padding:
            13px
            14px;

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


    .contact-purpose-option strong {
        font-size: 0.75rem;
    }


    .contact-purpose-option small {
        font-size: 0.65rem;
    }


    /* -----------------------------------------------------
       Conditional Fields
       ----------------------------------------------------- */

    .contact-form-conditional {
        gap: 18px;

        padding:
            17px;

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


    /* -----------------------------------------------------
       Submit
       ----------------------------------------------------- */

    .contact-form-submit {
        min-height: 51px;
    }


    .contact-form-disclaimer {
        font-size: 0.63rem;
    }


    /* =====================================================
       FEEDBACK
       ===================================================== */

    .contact-feedback {
        padding-bottom: 52px;
    }


    .contact-feedback-card {
        gap: 22px;

        padding:
            26px
            22px;

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


    .contact-feedback-eyebrow {
        font-size: 0.61rem;
    }


    .contact-feedback-content h2 {
        margin-bottom: 9px;

        font-size:
            clamp(
                2.6rem,
                11vw,
                3.3rem
            );
    }


    .contact-feedback-content p {
        font-size: 0.82rem;

        line-height: 1.65;
    }


    .contact-feedback-card .btn {
        width: 100%;
    }


    /* =====================================================
       COLLABORATION
       ===================================================== */

    .contact-collaboration-layout {
        gap: 40px;
    }


    .contact-collaboration-eyebrow {
        margin-bottom: 12px;

        font-size: 0.62rem;
    }


    .contact-collaboration-content h2 {
        margin-bottom: 17px;

        font-size:
            clamp(
                3.3rem,
                14vw,
                4.2rem
            );

        line-height: 0.94;
    }


    .contact-collaboration-content > p {
        margin-bottom: 24px;

        font-size: 0.85rem;

        line-height: 1.7;
    }


    /*
       Decorative words tetap ada,
       tapi jangan sampai lebih dominan dari copy.
    */

    .contact-collaboration-words {
        gap: 6px;

        transform:
            rotate(-3deg);
    }


    .contact-collaboration-words span {
        font-size:
            clamp(
                2.3rem,
                12vw,
                3.5rem
            );
    }


    /* =====================================================
       EMAIL / SOCIAL
       ===================================================== */

    .contact-other-header {
        margin-bottom: 30px;
    }


    .contact-other-header
    .section-title {
        font-size:
            clamp(
                3rem,
                13vw,
                3.9rem
            );
    }


    .contact-other-card {
        min-height: 235px;

        padding:
            24px
            18px;
    }


    .contact-other-label {
        margin-bottom: 22px;

        font-size: 0.62rem;
    }


    .contact-other-card h3 {
        font-size:
            clamp(
                1.2rem,
                5.5vw,
                1.45rem
            );
    }


    .contact-other-card p {
        font-size: 0.8rem;

        line-height: 1.6;
    }


    .contact-other-link {
        padding-top: 22px;

        font-size: 0.73rem;
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .contact-closing {
        padding-block:
            76px;
    }


    .contact-closing::before {
        width: 300px;
        height: 300px;

        border-width: 55px;
    }


    .contact-closing-eyebrow {
        margin-bottom: 11px;

        font-size: 0.61rem;
    }


    .contact-closing h2 {
        max-width: 450px;

        margin-bottom: 25px;

        font-size:
            clamp(
                3.4rem,
                15vw,
                4.4rem
            );

        line-height: 0.93;
    }

}


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

@media (max-width: 380px) {

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

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

        padding-bottom: 46px;
    }


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


    .contact-hero-description {
        font-size: 0.84rem;
    }


    .contact-hero-side {
        padding:
            21px
            18px;
    }


    /* =====================================================
       ROUTE
       ===================================================== */

    .contact-route-card {
        padding:
            22px
            18px;
    }


    .contact-route-content h3 {
        font-size: 1.3rem;
    }


    /* =====================================================
       FORM
       ===================================================== */

    .contact-form-card {
        padding:
            21px
            17px;
    }


    .contact-form-conditional {
        padding: 14px;
    }


    /* =====================================================
       FEEDBACK
       ===================================================== */

    .contact-feedback-card {
        padding:
            24px
            18px;
    }


    /* =====================================================
       COLLABORATION
       ===================================================== */

    .contact-collaboration-content h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                3.8rem
            );
    }


    .contact-collaboration-content .btn {
        width: 100%;
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .contact-closing h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                4rem
            );
    }


    .contact-closing .btn {
        width: 100%;
    }

}


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

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

    /*
       Hover lifting dimatikan di touch device.
       Active/checked state tetap bekerja.
    */

    .contact-route-card:hover {
        transform: none;

        box-shadow: none;
    }


    .contact-purpose-option:hover > span {
        transform: none;
    }


    .contact-route-link:hover span,
    .contact-other-link:hover span,
    .contact-form-submit:hover span {
        transform: none;
    }


    .contact-other-card:hover {
        background-color:
            transparent;
    }

}


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

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

    .contact-route-card,
    .contact-route-link,
    .contact-route-link span,
    .contact-purpose-option > span,
    .contact-form-submit span,
    .contact-other-card,
    .contact-other-link span {
        transition: none;
    }

}


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

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

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

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

        padding-bottom: 48px;
    }


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

        align-items: center;

        gap: 36px;
    }


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


    .contact-hero-description {
        max-width: 420px;

        margin-bottom: 20px;

        font-size: 0.84rem;
    }


    .contact-hero-side {
        padding: 22px;
    }


    .contact-hero-side > p {
        margin-bottom: 16px;

        font-size: 0.78rem;
    }


    .contact-hero-side-list span {
        min-height: 42px;

        font-size: 0.74rem;
    }


    /* =====================================================
       COLLABORATION
       ===================================================== */

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

        align-items: center;
    }

}


/* =========================================================
   10. VERY WIDE SCREEN
   >= 1600px
   ========================================================= */

@media (min-width: 1600px) {

    .contact-hero-container {
        gap: 120px;
    }


    .contact-form-layout {
        gap: 110px;
    }


    .contact-collaboration-layout {
        gap: 110px;
    }


    .contact-route-card {
        min-height: 450px;
    }

}


/* =========================================================
   END OF CONTACT RESPONSIVE
   ========================================================= */