/* =====================================================================
   responsive.css
   Breakpoints: Mobile <576px · Tablet 576-991px · Desktop 992-1199px ·
   Large Desktop >=1200px. Pendekatan mobile-first (enhance via min-width).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tablet (>= 576px)
   --------------------------------------------------------------------- */
@media (min-width: 576px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-banner__cta {
        flex-direction: row;
    }
}

/* ---------------------------------------------------------------------
   Desktop (>= 992px)
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .profile-section__grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .visi-misi__grid {
        grid-template-columns: 1fr 1fr;
    }

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

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

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

    .contact-section__grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    section {
        padding-block: var(--space-24);
    }
}

/* ---------------------------------------------------------------------
   Large Desktop (>= 1200px)
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .container {
        padding-inline: var(--space-8);
    }
}

/* ---------------------------------------------------------------------
   Mobile only (< 576px) - penyesuaian khusus layar kecil
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .carousel {
        padding-inline: var(--space-4);
    }

    .carousel__overlay p {
        display: none;
    }

    .footer-grid {
        text-align: left;
    }

    .modal-box {
        padding: var(--space-6);
    }

    /* Tipografi diperbesar khusus mobile agar lebih nyaman dibaca */
    body {
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    h3 { font-size: 1.25rem; }

    .card__desc,
    .section-header p,
    p {
        font-size: 1rem;
    }

    .btn {
        font-size: 1rem;
        padding: var(--space-3) var(--space-5);
        min-height: 48px;
    }

    .eyebrow,
    .section-header .eyebrow,
    .section-header__eyebrow {
        font-size: 0.8125rem;
    }
}