/* =========================================================
   HAHU SKILL
   HERITAGE HOMEPAGE
   ========================================================= */


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

.home-hero {
    width: 100%;
    margin: 0 0 20px;

    border: 1px solid rgba(181, 125, 19, 0.22);
    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #fff8df 0%,
            #fff8df 47%,
            #fff9e8 100%
        );

    box-shadow:
        0 14px 36px
        rgba(89, 65, 21, 0.12);

    overflow: hidden;
}


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

.hero-content {
    display: grid;

    grid-template-columns:
        minmax(0, 46%)
        minmax(0, 54%);

    align-items: stretch;

    min-height: 500px;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.hero-left {
    min-width: 0;

    padding:
        28px
        30px
        28px
        36px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero-eyebrow {
    align-self: flex-start;

    display: inline-flex;

    margin-bottom: 12px;

    padding: 6px 12px;

    border:
        1px solid
        rgba(46, 125, 50, 0.22);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.90);

    color: #276a2c;

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.hero-main-title {
    position: relative;
    z-index: 2;

    width: 145%;
    max-width: 820px;

    margin: 0 0 8px;

    font-family: var(--font-body);

    font-size:
        clamp(
            2.15rem,
            3.25vw,
            3.35rem
        );

    font-weight: 900;

    line-height: 1;

    white-space: nowrap;
}


/* Desktop title stays on one line */

.hero-main-title span {
    display: inline;
}


.hero-main-title .hero-title-pink {
    margin-right: 0.18em;
}


.hero-title-pink {
    color: #ec4aa8;
}


.hero-title-purple {
    color: #6a3fb8;
}


.hero-title-orange {
    color: #ef5b1a;
}


/* =========================================================
   CULTURAL TITLE
   ========================================================= */

.hero-cultural-title {
    margin: 0 0 12px;

    font-size:
        clamp(
            1.08rem,
            1.7vw,
            1.45rem
        );

    line-height: 1.25;
}


/* Celebrate line */

.hero-celebrate-title {
    display: block;

    margin-bottom: 3px;
}


/* Keep both Ethiopic phrases together */

.hero-cultural-languages {
    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    gap: 8px;

    white-space: nowrap;
}


.hero-ethiopic-title {
    display: inline;
}


.hero-divider {
    display: inline-block;

    color: #d39a00;

    font-size: 0.85em;

    font-weight: 900;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.hero-tagline {
    margin: 0 0 7px;

    color: #173d62;

    font-size: 1rem;

    font-weight: 850;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.hero-description {
    max-width: 590px;

    margin: 0 0 11px;

    color: #34454c;

    font-size: 0.88rem;

    line-height: 1.52;
}


/* =========================================================
   ALPHABET PREVIEW
   ========================================================= */

.hero-alphabet {
    display: flex;

    gap: 8px;

    margin-bottom: 10px;
}


.hero-alphabet span {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(31, 78, 121, 0.15);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.93);

    font-family:
        var(--font-ethiopic);

    font-size: 1.2rem;

    font-weight: 900;
}


.hero-alphabet span:nth-child(1) {
    color: #28742d;
}


.hero-alphabet span:nth-child(2) {
    color: #d84b16;
}


.hero-alphabet span:nth-child(3) {
    color: #1f4e79;
}


.hero-alphabet span:nth-child(4) {
    color: #d39a00;
}


/* =========================================================
   LANGUAGE CHOICE
   ========================================================= */

.heritage-language-choice {
    width: 100%;

    margin-top: 0;
}


/* Heading */

.heritage-language-choice-heading {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    margin-bottom: 8px;

    text-align: center;
}


.heritage-language-choice-heading strong {
    color: #204f77;

    font-size: 0.92rem;

    font-weight: 900;
}


.heritage-language-choice-heading small {
    color: #6c7b88;

    font-size: 0.73rem;
}


/* =========================================================
   LANGUAGE BUTTONS
   ========================================================= */

.heritage-language-buttons {
    display: grid;

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

    gap: 10px;

    width: 100%;
}


.heritage-language-btn {
    min-width: 0;
    min-height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 7px 10px;

    border-radius: 14px;

    text-decoration: none;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.07);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.heritage-language-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 15px
        rgba(0, 0, 0, 0.11);
}


/* Amharic */

.heritage-amharic-btn {
    background: #ffc12d;

    color: #173d64;
}


/* Tigrinya */

.heritage-tigrinya-btn {
    background: #f4a91e;

    color: #173d64;
}


/* Fidel icon */

.heritage-language-letter {
    width: 34px;
    height: 34px;

    flex:
        0
        0
        34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.84);

    color: #9b3d1c;

    font-size: 1.45rem;

    font-weight: 900;
}


/* Text */

.heritage-language-text {
    display: flex;

    flex-direction: column;

    text-align: left;

    line-height: 1.15;
}


.heritage-language-text small {
    font-size: 0.61rem;

    font-weight: 750;

    opacity: 0.80;
}


.heritage-language-text strong {
    margin-top: 2px;

    font-size: 0.92rem;

    font-weight: 900;
}


/* =========================================================
   START / CURRICULUM
   ========================================================= */

.hero-actions {
    display: grid;

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

    gap: 10px;

    width: 100%;

    margin-top: 11px;
}


.hero-button {
    min-width: 0;
    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 9px;

    border-radius: 14px;

    color: #ffffff;

    font-size: 0.8rem;

    font-weight: 850;

    text-align: center;

    white-space: nowrap;

    text-decoration: none;

    transition:
        transform 0.18s ease;
}


.hero-button-primary {
    background: #2b7cff;
}


.hero-button-secondary {
    background: #ff55b7;
}


.hero-button:hover {
    color: #ffffff;

    transform:
        translateY(-1px);
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.hero-right {
    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        24px
        28px
        24px
        22px;
}


/* Image frame */

.hero-image-frame {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 10px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.35);
}


/* Image */

.hero-family-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 425px;

    object-fit: contain;
    object-position: center;

    border-radius: 10px;

    transition:
        transform 0.3s ease;
}


.hero-family-image:hover {
    transform:
        scale(1.01);
}


/* =========================================================
   BENEFITS
   ========================================================= */

.home-benefits {
    position: relative;

    margin-top: 0;
    margin-bottom: 20px;

    padding:
        clamp(
            30px,
            5vw,
            52px
        )
        clamp(
            20px,
            4vw,
            40px
        );

    background: #fffdf8;

    border:
        1px solid
        #eee3ca;

    border-radius: 24px;

    box-shadow:
        var(--shadow-small);
}


.section-heading-center {
    max-width: 740px;

    margin:
        0
        auto
        24px;

    text-align: center;
}


.benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.benefit-card {
    min-width: 0;

    padding:
        22px
        16px;

    background: #ffffff;

    border:
        1px solid
        #eadfc6;

    border-radius: 18px;

    text-align: center;
}


.benefit-icon {
    width: 62px;
    height: 62px;

    margin:
        0
        auto
        15px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 1.6rem;
}


.benefit-card h3 {
    margin-bottom: 8px;

    font-family:
        var(--font-body);

    font-size: 1rem;
}


.benefit-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    font-size: 0.88rem;

    line-height: 1.55;
}


.benefit-green .benefit-icon {
    background: #e2f2d6;
}


.benefit-gold .benefit-icon {
    background: #fff0bd;
}


.benefit-blue .benefit-icon {
    background: #dcebf7;

    color: #1f4e79;
}


.benefit-red .benefit-icon {
    background: #f9ded6;
}


.benefit-purple .benefit-icon {
    background: #e9e1f7;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.home-next-step {
    display: grid;

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

    gap: 25px;

    align-items: center;

    margin-bottom: 24px;

    padding:
        28px
        30px;

    border:
        1px solid
        #e5dcc8;

    border-radius: 22px;

    background: #ffffff;
}


.home-next-step h2 {
    margin-bottom: 8px;
}


.home-next-step p {
    margin-bottom: 0;
}


.home-next-step-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero-content {
        grid-template-columns: 1fr;
    }


    .hero-left {
        padding:
            28px
            24px
            20px;
    }


    /* Remove desktop title extension */

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

        white-space: normal;
    }


    .hero-right {
        padding:
            8px
            24px
            26px;
    }


    .hero-family-image {
        max-height: 390px;
    }


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


    .home-next-step {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .home-hero {
        border-radius: 16px;
    }


    .hero-content {
        width: 100%;

        grid-template-columns: 1fr;
    }


    .hero-left {
        padding:
            20px
            14px
            14px;
    }


    /* ---------------------------------------------------------
       MOBILE MAIN TITLE

       "Learn" may sit above.
       "Amharic or Tigrinya." stays together on ONE line.
       --------------------------------------------------------- */

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

        margin-bottom: 7px;

        font-size: 1.8rem;

        line-height: 1.03;

        white-space: normal;
    }


    .hero-main-title .hero-title-pink {
        display: block;

        margin-right: 0;

        font-size: 0.84em;
    }


    .hero-main-title .hero-language-title {
        display: block;

        white-space: nowrap;

        font-size:
            clamp(
                1.45rem,
                6.2vw,
                1.85rem
            );
    }


    /* ---------------------------------------------------------
       CULTURAL TITLE
       --------------------------------------------------------- */

    .hero-cultural-title {
        margin-bottom: 10px;

        font-size: 1rem;

        line-height: 1.22;
    }


    .hero-celebrate-title {
        margin-bottom: 2px;
    }


    .hero-cultural-languages {
        display: flex;

        align-items: center;

        flex-wrap: nowrap;

        gap: 5px;

        white-space: nowrap;

        font-size:
            clamp(
                0.85rem,
                3.8vw,
                1rem
            );
    }


    .hero-divider {
        flex: 0 0 auto;
    }


    /* ---------------------------------------------------------
       TAGLINE / DESCRIPTION
       --------------------------------------------------------- */

    .hero-tagline {
        margin-bottom: 6px;

        font-size: 0.9rem;
    }


    .hero-description {
        margin-bottom: 9px;

        font-size: 0.83rem;

        line-height: 1.48;
    }


    /* ---------------------------------------------------------
       FIDEL PREVIEW
       --------------------------------------------------------- */

    .hero-alphabet {
        gap: 7px;

        margin-bottom: 9px;
    }


    .hero-alphabet span {
        width: 34px;
        height: 34px;

        font-size: 1.05rem;
    }


    /* ---------------------------------------------------------
       LANGUAGE CHOICE
       --------------------------------------------------------- */

    .heritage-language-choice-heading {
        margin-bottom: 7px;
    }


    .heritage-language-choice-heading strong {
        font-size: 0.86rem;
    }


    .heritage-language-choice-heading small {
        font-size: 0.68rem;
    }


    /* Keep Amharic + Tigrinya side by side */

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

        gap: 7px;
    }


    .heritage-language-btn {
        min-height: 52px;

        padding:
            6px
            5px;

        gap: 5px;
    }


    .heritage-language-letter {
        width: 30px;
        height: 30px;

        flex:
            0
            0
            30px;

        font-size: 1.3rem;
    }


    .heritage-language-text small {
        font-size: 0.55rem;
    }


    .heritage-language-text strong {
        font-size: 0.8rem;
    }


    /* ---------------------------------------------------------
       START / CURRICULUM
       --------------------------------------------------------- */

    .hero-actions {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 10px;
    }


    .hero-button {
        width: 100%;

        min-height: 43px;

        padding:
            7px
            7px;

        font-size: 0.78rem;
    }


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

    .hero-right {
        padding:
            8px
            14px
            20px;
    }


    .hero-image-frame {
        padding: 4px;
    }


    .hero-family-image {
        max-height: 300px;
    }


    /* ---------------------------------------------------------
       BENEFITS
       --------------------------------------------------------- */

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


    .home-next-step {
        padding:
            22px
            18px;
    }


    .home-next-step-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PARENT LANGUAGE AUDIO MESSAGES
   ========================================================= */

.heritage-parent-audio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    margin-top: 10px;
}

.parent-message-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 12px;

    border: 1px solid rgba(31, 75, 111, .18);
    border-radius: 10px;

    background: #fff;

    color: #17466d;

    font: inherit;
    font-size: .78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.parent-message-btn:hover {
    transform: translateY(-1px);
    background: #fffaf0;
    box-shadow: 0 5px 14px rgba(31, 75, 111, .10);
}

.message-language {
    color: #e26f20;
    font-size: 1rem;
    font-weight: 900;
}

.message-play {
    font-size: .68rem;
}

.parent-message-btn.is-playing {
    background: #fff4d8;
    border-color: #f3b33c;
}

@media (max-width: 600px) {

    .heritage-parent-audio {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .parent-message-btn {
        padding: 7px 6px;
        font-size: .7rem;
    }
}