/* ============================================================
BELAIR HILL JUNIOR SCHOOL
PUBLIC ADMISSIONS SECTION CSS

Visual language matched to:
css/admission-form.css
============================================================ */

/* ============================================================
ADMISSIONS JOURNEY
============================================================ */

.admission-journey {

position: relative;

padding:
    110px 0
    115px;

background:
    linear-gradient(
        180deg,
        #faf9f5 0%,
        #f5f8f5 100%
    );

overflow: hidden;

}

/* ============================================================
CONTAINER
============================================================ */

.admission-journey > .container,
.admissions > .container {

width: min(
    calc(100% - 40px),
    1220px
);

margin-inline: auto;

}

/* ============================================================
SECTION HEADING
============================================================ */

.admission-journey .section-heading {

max-width: 800px;

margin:
    0 auto
    58px;

text-align: center;

}

.admission-journey .section-label {

display: inline-flex;

align-items: center;

justify-content: center;

padding:
    7px 13px;

margin-bottom:
    18px;

border-radius:
    999px;

background:
    rgba(200, 167, 93, 0.14);

border:
    1px solid
    rgba(200, 167, 93, 0.30);

color:
    #9b7c32;

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    0.78rem;

font-weight:
    800;

line-height:
    1.2;

text-transform:
    uppercase;

letter-spacing:
    0.12em;

}

.admission-journey .section-heading h2 {

margin:
    0 0 18px;

color:
    #043c2d;

font-family:
    "Playfair Display",
    Georgia,
    serif;

font-size:
    clamp(
        2.35rem,
        4.5vw,
        4rem
    );

font-weight:
    700;

line-height:
    1.08;

}

.admission-journey .section-heading p {

max-width:
    690px;

margin:
    0 auto;

color:
    #66736d;

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    1.02rem;

line-height:
    1.75;

}

/* ============================================================
JOURNEY GRID
============================================================ */

.journey-grid {

display: grid;

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

gap:
    22px;

}

/* ============================================================
JOURNEY STEP
============================================================ */

.journey-step {

position: relative;

min-height:
    255px;

padding:
    30px 26px;

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

border:
    1px solid
    #dce5e0;

border-radius:
    24px;

box-shadow:
    0 5px 20px
    rgba(
        4,
        60,
        45,
        0.06
    );

overflow:
    hidden;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;

}

.journey-step::before {

content:
    "";

position:
    absolute;

left:
    0;

top:
    28px;

bottom:
    28px;

width:
    4px;

border-radius:
    0 8px 8px 0;

background:
    linear-gradient(
        180deg,
        #075b43,
        #9c2938
    );

}

.journey-step {

transform:
    translateY(-6px);

border-color:
    rgba(
        7,
        91,
        67,
        0.22
    );

box-shadow:
    0 18px 45px
    rgba(
        4,
        60,
        45,
        0.11
    );

}

/* ============================================================
JOURNEY NUMBER
============================================================ */

.journey-number {

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

width:
    54px;

height:
    54px;

margin-bottom:
    25px;

border-radius:
    15px;

background:
    linear-gradient(
        135deg,
        #075b43,
        #043c2d
    );

color:
    #ffffff;

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    0.82rem;

font-weight:
    800;

letter-spacing:
    0.08em;

box-shadow:
    0 8px 22px
    rgba(
        7,
        91,
        67,
        0.18
    );

}

/* ============================================================
JOURNEY TITLE
============================================================ */

.journey-step h3 {

margin:
    0 0 10px;

color:
    #043c2d;

font-family:
    "Playfair Display",
    Georgia,
    serif;

font-size:
    1.45rem;

font-weight:
    700;

line-height:
    1.2;

}

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

.journey-step p {

margin:
    0;

color:
    #66736d;

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    0.92rem;

line-height:
    1.7;

}

/* ============================================================
ADMISSIONS CTA
============================================================ */

.admissions {

position:
    relative;

padding:
    85px 0;

background:
    linear-gradient(
        135deg,
        #022d21 0%,
        #043c2d 55%,
        #075b43 100%
    );

color:
    #ffffff;

overflow:
    hidden;

}

/* ============================================================
DECORATIVE GOLD CIRCLE
============================================================ */

.admissions::before {

content:
    "";

position:
    absolute;

width:
    430px;

height:
    430px;

right:
    -160px;

top:
    -210px;

border-radius:
    50%;

border:
    1px solid
    rgba(
        234,
        216,
        165,
        0.20
    );

background:
    rgba(
        200,
        167,
        93,
        0.08
    );

}

/* ============================================================
DECORATIVE RED SHAPE
============================================================ */

.admissions::after {

content:
    "";

position:
    absolute;

width:
    300px;

height:
    300px;

left:
    -130px;

bottom:
    -180px;

border-radius:
    50%;

background:
    rgba(
        156,
        41,
        56,
        0.18
    );

filter:
    blur(2px);

}

/* ============================================================
CTA INNER
============================================================ */

.admission-inner {

position:
    relative;

z-index:
    2;

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    50px;

}

/* ============================================================
CTA LABEL
============================================================ */

.admission-inner .section-label {

display:
    inline-flex;

align-items:
    center;

padding:
    7px 13px;

margin-bottom:
    17px;

border-radius:
    999px;

background:
    rgba(
        200,
        167,
        93,
        0.16
    );

border:
    1px solid
    rgba(
        234,
        216,
        165,
        0.30
    );

color:
    #ead8a5;

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    0.78rem;

font-weight:
    800;

line-height:
    1.2;

text-transform:
    uppercase;

letter-spacing:
    0.12em;

}

/* ============================================================
CTA HEADING
============================================================ */

.admission-inner h2 {

margin:
    0 0 14px;

color:
    #ffffff;

font-family:
    "Playfair Display",
    Georgia,
    serif;

font-size:
    clamp(
        2.1rem,
        4vw,
        3.5rem
    );

font-weight:
    700;

line-height:
    1.08;

}

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

.admission-inner p {

max-width:
    650px;

margin:
    0;

color:
    rgba(
        255,
        255,
        255,
        0.76
    );

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    1rem;

line-height:
    1.75;

}

/* ============================================================
GOLD BUTTON
============================================================ */

.admission-inner .btn-gold {

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

flex:
    0 0 auto;

min-width:
    205px;

padding:
    15px 28px;

border:
    0;

border-radius:
    999px;

background:
    linear-gradient(
        135deg,
        #ead8a5,
        #c8a75d
    );

color:
    #022d21;

font-family:
    "DM Sans",
    Arial,
    sans-serif;

font-size:
    0.95rem;

font-weight:
    800;

line-height:
    1;

text-decoration:
    none;

box-shadow:
    0 12px 28px
    rgba(
        200,
        167,
        93,
        0.25
    );

white-space:
    nowrap;

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

}

.admission-inner .btn-gold {

transform:
    translateY(-3px);

background:
    linear-gradient(
        135deg,
        #f0dfae,
        #d2b568
    );

box-shadow:
    0 18px 35px
    rgba(
        200,
        167,
        93,
        0.34
    );

}

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

.admission-inner .btn-gold {

outline:
    3px solid
    rgba(
        234,
        216,
        165,
        0.55
    );

outline-offset:
    4px;

}

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

@media (
max-width: 1000px
) {

.admission-journey {

    padding:
        90px 0
        95px;

}


.journey-grid {

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

}


.journey-step {

    min-height:
        230px;

}


.admissions {

    padding:
        75px 0;

}

}

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

@media (
max-width: 700px
) {

.admission-journey > .container,
.admissions > .container {

    width:
        min(
            calc(100% - 28px),
            1220px
        );

}


.admission-journey {

    padding:
        75px 0
        80px;

}


.admission-journey .section-heading {

    margin-bottom:
        38px;

}


.admission-journey .section-heading h2 {

    font-size:
        clamp(
            2rem,
            9vw,
            3rem
        );

}


.admission-journey .section-heading p {

    font-size:
        0.94rem;

    line-height:
        1.7;

}


.journey-grid {

    grid-template-columns:
        1fr;

    gap:
        15px;

}


.journey-step {

    min-height:
        auto;

    padding:
        24px 22px;

}


.journey-number {

    width:
        48px;

    height:
        48px;

    margin-bottom:
        19px;

    border-radius:
        13px;

}


.journey-step h3 {

    font-size:
        1.35rem;

}


.journey-step p {

    font-size:
        0.9rem;

}


.admissions {

    padding:
        65px 0
        70px;

}


.admission-inner {

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        30px;

}


.admission-inner h2 {

    font-size:
        clamp(
            2rem,
            9vw,
            3rem
        );

}


.admission-inner p {

    font-size:
        0.94rem;

}


.admission-inner .btn-gold {

    width:
        100%;

    min-width:
        0;

}

}

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

@media (
max-width: 450px
) {

.admission-journey > .container,
.admissions > .container {

    width:
        calc(100% - 22px);

}


.admission-journey {

    padding:
        60px 0
        65px;

}


.journey-step {

    padding:
        22px 19px;

    border-radius:
        18px;

}


.journey-step::before {

    top:
        22px;

    bottom:
        22px;

}


.admissions {

    padding:
        55px 0
        60px;

}


.admissions::before {

    width:
        300px;

    height:
        300px;

    right:
        -160px;

    top:
        -150px;

}


.admissions::after {

    width:
        220px;

    height:
        220px;

    left:
        -120px;

    bottom:
        -140px;

}

}