/* =========================================================
   MARAMATTA GLOBAL EXPERIENCE LANDING PAGE
   02 · ORIENTATION
   ========================================================= */


/* =========================================================
   SECTION FOUNDATION
   ========================================================= */

.landing-orientation {
    position: relative;
    overflow: hidden;
}


/*
 * Give Orientation slightly more breathing room than a
 * conventional content section.
 *
 * The hero has created emotion.
 * Orientation creates understanding.
 */

.landing-orientation .section-body {
    margin-top: var(--space-xl);
}


/* =========================================================
   EDITORIAL FRAME
   ========================================================= */

.landing-orientation__editorial {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .75fr);

    grid-template-areas:
        "media statement"
        "media details";

    column-gap: clamp(
        var(--space-lg),
        5vw,
        var(--space-3xl)
    );

    row-gap: var(--space-xl);

    align-items: start;
}


/* =========================================================
   LARGE EDITORIAL IMAGE
   ========================================================= */

.landing-orientation__media {
    grid-area: media;

    position: relative;

    width: 100%;
    margin: 0;

    overflow: hidden;

    background: var(--ms-surface-soft);
}


/*
 * Cinematic image proportion.
 *
 * We intentionally avoid fixed heights.
 * The aspect ratio controls the visual rhythm.
 */

.landing-orientation__media {
    aspect-ratio: 16 / 10;
}


.landing-orientation__media > .landing-orientation__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.001);

    transition:
        transform 1.2s cubic-bezier(.22,.61,.36,1);
}


/*
 * Very restrained interaction.
 *
 * The image should feel alive,
 * but never behave like a commercial card.
 */

.landing-orientation__media:hover
.landing-orientation__image {
    transform: scale(1.035);
}


/* =========================================================
   IMAGE CAPTION
   ========================================================= */

.landing-orientation__caption {
    position: absolute;

    left: 0;
    bottom: 0;

    margin: 0;

    padding:
        var(--space-sm)
        var(--space-md);

    background: rgba(255,255,255,.92);

    color: var(--ms-green);

    font-size: .72rem;
    font-weight: 600;

    letter-spacing: .12em;
    text-transform: uppercase;

    line-height: 1.4;
}


/* =========================================================
   EDITORIAL STATEMENT
   ========================================================= */

.landing-orientation__statement {
    grid-area: statement;

    align-self: center;

    max-width: 520px;

    padding-top: var(--space-md);
}


/* Small editorial label */

.landing-orientation__eyebrow {
    display: inline-block;

    margin-bottom: var(--space-md);

    color: var(--ms-orange);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .16em;
    text-transform: uppercase;

    line-height: 1.4;
}


/* Main editorial statement */

.landing-orientation__title {
    margin: 0 0 var(--space-lg);

    max-width: 9ch;

    color: var(--ms-green);

    font-size: clamp(
        2rem,
        3.3vw,
        3.5rem
    );

    font-weight: 500;

    line-height: 1.04;

    letter-spacing: -.025em;
}


/* Supporting paragraphs */

.landing-orientation__text {
    max-width: 52ch;

    margin: 0 0 var(--space-md);

    color: var(--ms-text, #4b4b46);

    font-size: .98rem;

    line-height: 1.85;
}


.landing-orientation__text:last-child {
    margin-bottom: 0;
}


/* =========================================================
   EDITORIAL DETAILS
   ========================================================= */

.landing-orientation__details {
    grid-area: details;

    display: flex;
    flex-direction: column;

    margin-top: var(--space-md);

    border-top: 1px solid
        rgba(39,73,33,.16);
}


/* Individual detail */

.landing-orientation__detail {
    display: grid;

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

    column-gap: var(--space-md);

    padding:
        var(--space-md)
        0;

    border-bottom: 1px solid
        rgba(39,73,33,.12);
}


/* Number */

.landing-orientation__detail-number {
    display: block;

    padding-top: 2px;

    color: var(--ms-orange);

    font-size: .72rem;
    font-weight: 600;

    letter-spacing: .12em;

    line-height: 1.4;
}


/* Detail label */

.landing-orientation__detail-label {
    display: block;

    margin-bottom: .4rem;

    color: var(--ms-green);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;

    line-height: 1.4;
}


/* Detail description */

.landing-orientation__detail p {
    max-width: 38ch;

    margin: 0;

    color: var(--ms-text-soft, #686860);

    font-size: .88rem;

    line-height: 1.65;
}


/* =========================================================
   SUBTLE EDITORIAL ATMOSPHERE
   ========================================================= */

/*
 * A very quiet background treatment.
 *
 * It prevents the section from feeling like a collection
 * of unrelated elements while keeping the surface clean.
 */

.landing-orientation::before {
    content: "";

    position: absolute;

    top: 20%;
    right: -12%;

    width: 42%;
    height: 55%;

    background:
        radial-gradient(
            circle,
            rgba(242,239,232,.75) 0%,
            rgba(242,239,232,0) 70%
        );

    pointer-events: none;

    z-index: 0;
}


/*
 * Keep actual content above the atmosphere.
 */

.landing-orientation .container {
    position: relative;
    z-index: 1;
}


/* =========================================================
   REVEAL COMPATIBILITY
   ========================================================= */

/*
 * The global reveal system remains responsible for
 * animation. This section should not introduce a second
 * animation engine.
 */

.landing-orientation__media,
.landing-orientation__statement,
.landing-orientation__details {
    will-change: transform, opacity;
}


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

@media (max-width: 1024px) {

    .landing-orientation__editorial {

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        column-gap: var(--space-lg);

    }


    .landing-orientation__statement {
        padding-top: 0;
    }


    .landing-orientation__title {
        font-size: clamp(
            1.9rem,
            4vw,
            2.8rem
        );
    }


    .landing-orientation__text {
        font-size: .94rem;
    }

}


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

@media (max-width: 767px) {

    .landing-orientation .section-body {
        margin-top: var(--space-lg);
    }


    /*
     * On mobile the editorial composition becomes a
     * deliberate vertical narrative.
     */

    .landing-orientation__editorial {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-areas:
            "media"
            "statement"
            "details";

        gap: var(--space-xl);

    }


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

    .landing-orientation__media {
        aspect-ratio: 4 / 3;
    }


    .landing-orientation__caption {
        padding:
            .55rem
            .75rem;

        font-size: .64rem;
    }


    /* -----------------------------------------------------
       STATEMENT
       ----------------------------------------------------- */

    .landing-orientation__statement {
        max-width: none;

        padding: 0;
    }


    .landing-orientation__eyebrow {
        margin-bottom: var(--space-sm);
    }


    .landing-orientation__title {
        max-width: 12ch;

        margin-bottom: var(--space-md);

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

        line-height: 1.05;
    }


    .landing-orientation__text {
        max-width: none;

        font-size: .94rem;

        line-height: 1.75;
    }


    /* -----------------------------------------------------
       DETAILS
       ----------------------------------------------------- */

    .landing-orientation__details {
        margin-top: 0;
    }


    .landing-orientation__detail {
        grid-template-columns:
            36px minmax(0, 1fr);

        column-gap: var(--space-sm);

        padding:
            var(--space-md)
            0;
    }


    .landing-orientation__detail p {
        max-width: none;

        font-size: .86rem;
    }


    /* -----------------------------------------------------
       ATMOSPHERE
       ----------------------------------------------------- */

    .landing-orientation::before {
        top: 30%;

        right: -40%;

        width: 90%;
        height: 45%;
    }

}


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

@media (max-width: 480px) {

    .landing-orientation__media {
        aspect-ratio: 1 / .78;
    }


    .landing-orientation__title {
        font-size: 2rem;
    }


    .landing-orientation__detail {
        grid-template-columns: 32px 1fr;
    }


    .landing-orientation__detail-number {
        font-size: .66rem;
    }


    .landing-orientation__detail-label {
        font-size: .66rem;
    }


    .landing-orientation__detail p {
        font-size: .82rem;

        line-height: 1.6;
    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

/*
 * Don't create a hover illusion on touch screens.
 */

@media (hover: none) {

    .landing-orientation__media:hover
    .landing-orientation__image {
        transform: none;
    }

}