/* Responsive rules — keep this file last */


/* =========================================================
   TABLET — 900px and below
   ========================================================= */

@media (max-width: 900px) {

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

    .programs {
        grid-template-columns: 1fr;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-4) 0;
    }

    .site-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    .site-nav a {
        white-space: nowrap;
    }

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


    /* Homepage hero */

    .home-hero {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 0;
        overflow: hidden;
        background: #fff8df;
    }

    .home-hero > .home-hero-content {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        padding: 30px 26px;
    }

    .home-hero-text {
        width: 100%;
        max-width: 650px;
    }

    .home-hero > .home-hero-visual {
        grid-column: 1;
        grid-row: 2;
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    .hero-image-frame {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .hero-family-image {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
        object-position: center;
    }
}


/* =========================================================
   MOBILE — 720px and below
   ========================================================= */

@media (max-width: 720px) {

    .home-hero {
        display: block;
        min-height: auto;
        padding: 0;
        overflow: hidden;
    }

    .home-hero > .home-hero-content {
        width: 100%;
        padding: 28px 20px;
    }

    .home-hero-text {
        width: 100%;
        max-width: 100%;
    }

    .home-hero > .home-hero-visual {
        display: block;
        width: 100%;
        min-height: 0;
        overflow: visible;
    }

    .hero-image-frame {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
        border-radius: 0 0 20px 20px;
    }

    .hero-family-image {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
        object-position: center;
    }


    /* Stack buttons only on mobile */

    .home-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .home-hero .hero-button {
        width: 100%;
    }


    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        width: 100%;
        min-height: 0;
    }

    .lesson-header {
        flex-direction: column;
        padding: 22px;
    }

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

    .resource-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .resource-icon {
        margin-inline: auto;
    }

    .lesson-actions {
        flex-direction: column-reverse;
    }

    .lesson-actions a {
        width: 100%;
    }

    .form-grid,
    .choices {
        grid-template-columns: 1fr;
    }

    .form-actions,
    .controls {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-button,
    .secondary-button,
    .btn,
    button[type="submit"],
    input[type="submit"] {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE — 480px and below
   ========================================================= */

@media (max-width: 480px) {

    .site-container,
    .container,
    .content-container {
        width: min(
            calc(100% - 22px),
            var(--container-width)
        );
    }

    .vocabulary-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2rem;
    }

    /*
     Keep the complete hero picture visible.
     Do not add fixed heights or object-fit: cover here.
    */

    .home-hero > .home-hero-visual,
    .hero-image-frame {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .hero-family-image {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
        object-position: center;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}





/* =========================================================
MOBILE — CULTURE / STORY / PRACTICE SECTIONS
Fix narrow columns and vertically wrapped text
========================================================= */

@media (max-width: 768px) {

/* -----------------------------------------------------
STORY + CULTURE TIP
Desktop = side by side
Mobile = stacked full width
----------------------------------------------------- */

.culture-section-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;

width: 100% !important;
max-width: 100% !important;

gap: 16px !important;
}


.culture-story-card,
.culture-tip-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;

height: auto !important;
min-height: 0 !important;

box-sizing: border-box !important;
}


/* Culture Tip should behave like HAHU Learning Tip */

.culture-tip-card {
align-self: start !important;

grid-template-columns:
auto minmax(0, 1fr) !important;

padding: 18px !important;
}


.culture-tip-card > div {
min-width: 0 !important;
width: 100% !important;
}


.culture-tip-card p {
width: 100% !important;
max-width: none !important;

margin: 6px 0 0 !important;

white-space: normal !important;

word-break: normal !important;
overflow-wrap: normal !important;

line-height: 1.55 !important;
}


.culture-tip-card strong {
display: block;

white-space: normal !important;
word-break: normal !important;
}


/* -----------------------------------------------------
TALK ABOUT IT
----------------------------------------------------- */

.culture-reflection-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;

height: auto !important;

box-sizing: border-box !important;
}


.culture-reflection-heading {
grid-template-columns:
auto minmax(0, 1fr) !important;
}


.culture-reflection-heading > div {
min-width: 0 !important;
}


.culture-reflection-card p,
.culture-reflection-card li {
white-space: normal !important;

word-break: normal !important;
overflow-wrap: normal !important;

line-height: 1.55 !important;
}


/* -----------------------------------------------------
WEEKLY PRACTICE
Desktop columns must stack on mobile
----------------------------------------------------- */

.culture-practice-card {
display: grid !important;

grid-template-columns:
minmax(0, 1fr) !important;

width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;

height: auto !important;
min-height: 0 !important;

gap: 16px !important;

box-sizing: border-box !important;
}


.culture-practice-card > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;

box-sizing: border-box !important;
}


.culture-practice-card p {
width: 100% !important;
max-width: none !important;

white-space: normal !important;

word-break: normal !important;
overflow-wrap: normal !important;

line-height: 1.55 !important;
}


/* Prevent any nested Practice Goal card from
remaining beside the paragraph */

.culture-practice-card > div {
grid-column: 1 / -1 !important;
}


/* -----------------------------------------------------
GENERAL PROTECTION
Prevent grid children from forcing narrow columns
----------------------------------------------------- */

.culture-section-grid > *,
.culture-practice-card > *,
.culture-reflection-card > * {
min-width: 0 !important;
}

}



/* =========================================================
MOBILE FIX — CULTURE STORY + CULTURE TIP
========================================================= */

@media (max-width: 760px) {

.culture-section-grid {
display: block !important;
}

.culture-story-card,
.culture-tip-card {
width: 100% !important;
max-width: 100% !important;

box-sizing: border-box !important;
}

.culture-tip-card {
display: grid !important;

grid-template-columns: auto minmax(0, 1fr) !important;

align-items: start !important;

gap: 12px !important;

margin-top: 18px !important;

padding: 18px !important;

min-height: 0 !important;
height: auto !important;

align-self: auto !important;
}

.culture-tip-icon {
font-size: 1.35rem !important;

line-height: 1 !important;
}

.culture-tip-card > div {
min-width: 0 !important;
}

.culture-tip-card strong {
display: block !important;

margin: 0 0 6px !important;

font-size: 1.05rem !important;

line-height: 1.3 !important;
}

.culture-tip-card p {
margin: 0 !important;

font-size: 1rem !important;

line-height: 1.55 !important;

white-space: normal !important;

overflow-wrap: normal !important;
word-break: normal !important;
}
}

/* =========================================================
   MOBILE NAVIGATION — FINAL CLEAN VERSION
   ========================================================= */

.site-menu-toggle {
    display: none;
}

@media (max-width: 760px) {

    .site-header .header-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .site-header .site-brand {
        min-width: 0 !important;
    }

    .site-header .site-brand strong {
        display: block;
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .site-header .site-brand span {
        display: block;
        margin-top: 3px;
        font-size: 0.82rem;
    }

    /* Hamburger */
    .site-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;

        min-height: 44px;
        padding: 9px 13px;

        border: 2px solid #c9dce9;
        border-radius: 12px;

        background: #eef6fb;
        color: #174d78;

        font: inherit;
        font-weight: 800;

        cursor: pointer;
        position: relative;
        z-index: 100;
    }

    /* Menu hidden until hamburger is clicked */
    .site-nav {
        display: none !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        margin-top: 8px !important;
        padding: 8px !important;

        border: 1px solid #d8e4ec;
        border-radius: 12px;

        background: #ffffff;

        box-sizing: border-box;
        overflow: visible !important;
    }

    /* JS adds this class */
    .site-nav.is-open {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .site-nav a {
        display: block !important;
        width: 100% !important;

        padding: 11px 13px !important;

        border: 1px solid #e1e9ef !important;
        border-radius: 9px !important;

        background: #f7fafc !important;
        color: #253d4e !important;

        text-decoration: none !important;
        font-weight: 700 !important;

        box-sizing: border-box;
    }

    .site-nav a:hover,
    .site-nav a:focus {
        background: #eaf4fb !important;
        border-color: #bdd6e8 !important;
        color: #174d78 !important;
    }
}