/*
============================================================
BISDIG UJB — RESPONSIVE SYSTEM
FASE 12.2 — FINAL RESPONSIVE / MASTER
JANABADRA DIGITAL UI
============================================================

SUPPORTED:
320px+      Small mobile
360px+      Android / iPhone
375px+      iPhone
430px+      Large phone
480px+      Large mobile
768px+      Tablet
1024px+     Tablet landscape / laptop
1280px+     Laptop
1366px+     Desktop
1440px+     FHD
1920px+     Large desktop
2560px+     Wide desktop

PRINCIPLES:
- Mobile first
- No horizontal overflow
- Safe-area support
- Touch friendly
- iOS friendly
- Android friendly
- Desktop preserved
- Tablet preserved
- Reduced motion
- Print friendly
============================================================
*/


/* ============================================================
   01. GLOBAL RESPONSIVE SAFETY
============================================================ */

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/*
 * Semua elemen tidak boleh keluar viewport.
 */

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}


/*
 * Gambar responsive.
 */

img {
    height: auto;
}


/*
 * Form tidak boleh melewati viewport.
 */

input,
select,
textarea,
button {
    max-width: 100%;
}


/*
 * Teks panjang tidak merusak layout.
 */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
    overflow-wrap: break-word;
}


/*
 * URL / email / string panjang.
 */

a {
    word-break: normal;
}


/*
 * Container utama.
 */

.container {
    width: min(
        var(--container-max),
        calc(100% - 32px)
    );

    margin-left: auto;
    margin-right: auto;

    min-width: 0;

    padding-left: 0;
    padding-right: 0;
}


/*
 * Grid children harus boleh mengecil.
 */

.grid,
[class*="grid-"],
.card-grid,
.bisdig-grid-2,
.bisdig-grid-3,
.bisdig-grid-4 {
    min-width: 0;
}


/*
 * Grid child.
 */

.grid > *,
.card-grid > *,
.bisdig-grid-2 > *,
.bisdig-grid-3 > *,
.bisdig-grid-4 > * {
    min-width: 0;
}


/* ============================================================
   02. DESKTOP — ≥1024px
============================================================ */

@media (min-width: 1024px) {

    .container {
        width: min(
            var(--container-max),
            calc(100% - 48px)
        );
    }


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

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }


    /* -----------------------------------------
       LAYOUT
    ----------------------------------------- */

    .intro-quote-box {
        display: block;
    }

    .pillars-header {
        flex-direction: row;
        align-items: flex-end;
    }


    /* -----------------------------------------
       TYPOGRAPHY
    ----------------------------------------- */

    .hero-title {
        font-size: var(--text-5xl);
    }

    .hero-excerpt {
        font-size: var(--text-xl);
    }


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

    .hero-section {
        min-height: 560px;
    }

    .bisdig-hero-section {
        min-height: 550px;
    }


    /* -----------------------------------------
       TABLE
    ----------------------------------------- */

    .table-responsive,
    .overflow-x-auto {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}


/* ============================================================
   03. TABLET — 768px–1023px
============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .container {
        width: calc(100% - 40px);
    }


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

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

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

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

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


    /* -----------------------------------------
       FLEX
    ----------------------------------------- */

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:items-center {
        align-items: center;
    }

    .md\:items-end {
        align-items: flex-end;
    }

    .md\:justify-between {
        justify-content: space-between;
    }


    /* -----------------------------------------
       TEXT
    ----------------------------------------- */

    .md\:text-left {
        text-align: left;
    }

    .md\:text-right {
        text-align: right;
    }


    /* -----------------------------------------
       DISPLAY
    ----------------------------------------- */

    .md\:hidden {
        display: none;
    }

    .md\:block {
        display: block;
    }


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

    .hero-section {
        min-height: 480px;
    }

    .bisdig-hero-section {
        min-height: 500px;
    }


    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-excerpt {
        font-size: var(--text-lg);
    }


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

    .hero-cta,
    .btn-lg {
        max-width: 100%;
    }

}


/* ============================================================
   04. MOBILE — <768px
============================================================ */

@media (max-width: 767px) {

    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .container {
        width: calc(100% - 32px);

        margin-left: auto;
        margin-right: auto;

        padding-left: 0;
        padding-right: 0;
    }


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

    .hero-section {
        height: auto;
        min-height: 350px;
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-excerpt {
        font-size: var(--text-sm);
    }


    /* -----------------------------------------
       SECTION TYPOGRAPHY
    ----------------------------------------- */

    .section-heading {
        font-size: var(--text-2xl);
    }

    .cta-title {
        font-size: var(--text-2xl);
    }


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

    .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .grid-cols-3 {
        grid-template-columns: 1fr;
    }

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

    .grid-cols-5 {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       SECTIONS
    ----------------------------------------- */

    .intro-section,
    .why-section,
    .pillars-section,
    .curriculum-section,
    .lecturers-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }


    /* -----------------------------------------
       FLEX
    ----------------------------------------- */

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:gap-6 {
        gap: 1.5rem;
    }


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

    .hero-cta {
        max-width: 100%;
        padding: 0.75rem 1.25rem;
    }

    .btn-lg {
        max-width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: var(--text-base);
    }


    /* -----------------------------------------
       BUTTON TOUCH SAFETY
    ----------------------------------------- */

    .btn,
    button,
    [role="button"] {
        min-height: 44px;
    }


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

    .bisdig-hero-title,
    .bisdig-page-title {
        max-width: 100%;
    }

    .bisdig-hero-desc {
        max-width: 100%;
    }


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

    .bisdig-hero-controls {
        width: 100%;
    }

    .bisdig-hero-controls-inner {
        width: 100%;
        gap: 12px;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .card,
    .bisdig-mission-card {
        min-width: 0;
        max-width: 100%;
    }


    /* -----------------------------------------
       TABLE
    ----------------------------------------- */

    .table-responsive,
    .overflow-x-auto {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }


    /* -----------------------------------------
       IFRAMES / EMBEDS
    ----------------------------------------- */

    iframe {
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------
       SAFE AREA
    ----------------------------------------- */

    .mobile-safe-area {
        padding-left:
            max(
                0px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                0px,
                env(safe-area-inset-right)
            );

        padding-bottom:
            max(
                0px,
                env(safe-area-inset-bottom)
            );
    }

}


/* ============================================================
   05. SMALL MOBILE — ≤480px
============================================================ */

@media (max-width: 480px) {

    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .container {
        width: calc(100% - 24px);
    }


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

    .hero-section {
        height: auto;
        min-height: 300px;
    }

    .hero-title {
        font-size: var(--text-xl);
    }


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

    .grid-cols-4 {
        grid-template-columns: 1fr;
    }


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

    .bisdig-hero-section {
        min-height: 500px;
    }


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

    .bisdig-hero-controls {
        bottom: 20px;
    }

    .bisdig-hero-nav-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .bisdig-hero-dot.is-active {
        width: 30px;
    }


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

    .bisdig-hero-title {
        font-size:
            clamp(
                30px,
                9vw,
                42px
            );
    }

    .bisdig-hero-desc {
        font-size: var(--text-sm);
        line-height: 1.65;
    }


    /* -----------------------------------------
       SECTION SPACING
    ----------------------------------------- */

    .bisdig-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .card {
        padding: 18px;
        border-radius: var(--radius-lg);
    }


    /* -----------------------------------------
       BUTTON
    ----------------------------------------- */

    .btn {
        padding: 12px 20px;
    }


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

    .hero-cta,
    .btn-lg {
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------
       TEXT
    ----------------------------------------- */

    h1,
    h2,
    h3,
    h4 {
        overflow-wrap: break-word;
    }

}


/* ============================================================
   06. VERY SMALL MOBILE — ≤360px
============================================================ */

@media (max-width: 360px) {

    .container {
        width: calc(100% - 20px);
    }


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

    .hero-section {
        min-height: 280px;
    }

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


    .bisdig-hero-section {
        min-height: 460px;
    }


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

    .bisdig-hero-nav-btn {
        width: 44px;
        height: 44px;

        min-width: 44px;
        min-height: 44px;
    }

    .bisdig-hero-dot.is-active {
        width: 26px;
    }


    /* -----------------------------------------
       BUTTON
    ----------------------------------------- */

    .btn {
        padding: 11px 16px;
        font-size: 12px;
    }


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

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: 1fr;
    }


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

    .hero-cta,
    .btn-lg {
        width: 100%;
    }

}


/* ============================================================
   07. EXTREMELY SMALL — ≤320px
============================================================ */

@media (max-width: 320px) {

    .container {
        width: calc(100% - 16px);
    }


    .bisdig-hero-section {
        min-height: 430px;
    }


    .bisdig-hero-title {
        font-size: 28px;
    }


    .bisdig-hero-desc {
        font-size: 13px;
        line-height: 1.6;
    }


    .bisdig-hero-nav {
        gap: 8px;
    }


    .bisdig-hero-nav-btn {
        width: 44px;
        height: 44px;

        min-width: 44px;
        min-height: 44px;
    }


    .btn {
        font-size: 12px;
        padding: 10px 14px;
    }

}


/* ============================================================
   08. MOBILE LANDSCAPE
============================================================ */

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

    .hero-section {
        height: auto;
        min-height: 340px;
    }


    .bisdig-hero-section {
        min-height: 390px;
    }


    .bisdig-hero-controls {
        bottom: 16px;
    }


    .bisdig-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

}


/* ============================================================
   09. SHORT MOBILE SCREEN
============================================================ */

@media (max-height: 500px) and (max-width: 900px) {

    .hero-section {
        min-height: 300px;
    }


    .bisdig-hero-section {
        min-height: 360px;
    }


    .bisdig-page-hero {
        padding-top: 96px;
        padding-bottom: 48px;
    }

}


/* ============================================================
   10. TABLET LANDSCAPE
============================================================ */

@media (
    min-width: 768px
) and (
    max-width: 1365px
) and (
    orientation: landscape
) {

    .container {
        width: calc(100% - 48px);
    }


    .bisdig-hero-section {
        min-height: 500px;
    }

}


/* ============================================================
   11. LARGE DESKTOP
============================================================ */

@media (min-width: 1440px) {

    .container {
        width: min(
            var(--container-max),
            calc(100% - 64px)
        );
    }

}


/* ============================================================
   12. VERY LARGE DESKTOP
============================================================ */

@media (min-width: 1920px) {

    .container {
        max-width: var(--container-max);
    }


    /*
     * Jangan biarkan text line terlalu panjang.
     */

    .bisdig-hero-desc {
        max-width: 680px;
    }

}


/* ============================================================
   13. REDUCED MOTION
============================================================ */

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

    html {
        scroll-behavior: auto !important;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }


    .hero-section *,
    .bisdig-hero-section *,
    .bisdig-page-hero *,
    .bisdig-page-router-hero *,
    .bisdig-default-page-hero * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* ============================================================
   14. PRINT
============================================================ */

@media print {

    html,
    body {
        overflow: visible !important;
        max-width: none !important;
    }


    .bisdig-hero-controls,
    .mobile-toggle,
    .mobile-panel,
    .mobile-overlay {
        display: none !important;
    }

}

/* ============================================================
   15. FINAL BISDIG SAFETY LAYER
   ============================================================ */

/*
 * responsive.css is the LAST responsive layer.
 * It should control layout safety and breakpoint behavior,
 * not duplicate the visual component system.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
}

body {
    min-width: 320px;
}

/*
 * Prevent common flex/grid overflow.
 */
.flex,
.flex-row,
.flex-col,
.flex-wrap,
[class*="flex-"],
[class*="items-"],
[class*="justify-"] {
    min-width: 0;
}

.flex > *,
[class*="flex-"] > * {
    min-width: 0;
}

/*
 * Long URLs, email addresses and unbroken content.
 */
.prose,
.content,
.entry-content,
.page-content,
.post-content {
    overflow-wrap: anywhere;
    word-break: normal;
}

/*
 * Tables should scroll inside their wrapper instead of
 * pushing the entire page wider than the viewport.
 */
table {
    max-width: 100%;
}

.table-responsive > table,
.overflow-x-auto > table {
    min-width: 640px;
}

/*
 * WordPress embeds and media.
 */
.wp-block-image,
.wp-block-embed,
.wp-block-video,
.wp-block-gallery,
.wp-block-table {
    max-width: 100%;
}

.wp-block-image img,
.wp-block-embed iframe,
.wp-block-video video {
    max-width: 100%;
}

/*
 * Better tap behavior without changing desktop interaction.
 */
@media (hover: none) and (pointer: coarse) {

    a,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"] {
        -webkit-tap-highlight-color:
            rgba(var(--color-red-rgb), 0.10);
    }

    .btn,
    button,
    [role="button"] {
        min-height: 44px;
    }
}

/*
 * Phones: never allow a horizontal scrollbar caused by
 * accidental fixed-width content.
 */
@media (max-width: 767px) {

    .container,
    .site-container,
    .bisdig-container {
        max-width: 100%;
        min-width: 0;
    }

    .row,
    .grid,
    .card-grid,
    .bisdig-grid-2,
    .bisdig-grid-3,
    .bisdig-grid-4 {
        min-width: 0;
        max-width: 100%;
    }

    pre,
    code {
        max-width: 100%;
    }

    pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bisdig-hero-slide img {
        max-width: none;
    }
}

/*
 * Very small screens:
 * keep controls usable while preventing oversized text.
 */
@media (max-width: 360px) {

    .bisdig-hero-controls-inner {
        gap: 8px;
    }

    .bisdig-hero-nav {
        gap: 6px;
    }

    .bisdig-hero-nav-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .btn,
    button,
    [role="button"] {
        min-height: 44px;
    }
}

/*
 * Short phones: prioritize visible hero content.
 */
@media (max-height: 500px) and (max-width: 767px) {

    .bisdig-hero-section {
        height: 520px;
        min-height: 0;
    }

    .bisdig-hero-controls {
        bottom: 12px;
    }
}

/*
 * Safe-area utilities.
 */
@supports (padding: max(0px)) {

    .safe-area-x,
    .mobile-safe-area {
        padding-left:
            max(
                0px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                0px,
                env(safe-area-inset-right)
            );
    }

    .safe-area-bottom {
        padding-bottom:
            max(
                0px,
                env(safe-area-inset-bottom)
            );
    }
}

/*
 * High contrast / forced colors.
 */
@media (forced-colors: active) {

    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible {
        outline:
            2px solid Highlight;

        outline-offset:
            2px;
    }
}

/*
 * Final reduced-motion override.
 */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}