/* ============================================================
   WOMEN MAGAZINE — LIGHT EDITORIAL HERO
   Based on the supplied reference design.

   Design direction:
   - Short, wide landscape hero
   - Warm white / very light grey background
   - Navy editorial typography
   - Decisions blue accent
   - Magazine covers remain the visual focus
   - Soft photographic gradient on the right
   - Minimal borders and controls
   - Existing HTML / JS class names preserved
   ============================================================ */

.women-magazine-premium {
    --women-bg: #eef2f5;
    --women-bg-light: #f8fafb;
    --women-navy: #14283f;
    --women-navy-dark: #0b1d31;
    --women-blue: #2779c9;
    --women-blue-dark: #155b9d;
    --women-blue-light: #4b9ee8;
    --women-text: #182b40;
    --women-muted: #687789;
    --women-border: rgba(24, 54, 84, .16);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 0;

    color: var(--women-text);

    background:
            radial-gradient(
                    circle at 76% 35%,
                    rgba(255, 255, 255, .92) 0%,
                    rgba(246, 249, 251, .78) 25%,
                    rgba(225, 232, 238, .58) 48%,
                    rgba(206, 217, 227, .65) 100%
            );

    border-top: 1px solid rgba(18, 48, 76, .10);
    border-bottom: 1px solid rgba(18, 48, 76, .14);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .8);
}


/* ============================================================
   BACKGROUND
   ============================================================ */

.women-magazine-premium::before {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
            linear-gradient(
                    90deg,
                    rgba(211, 221, 230, .65) 0%,
                    rgba(241, 244, 247, .78) 45%,
                    rgba(248, 249, 247, .68) 73%,
                    rgba(236, 232, 219, .42) 100%
            );

    content: "";
    pointer-events: none;
}


/* Very subtle technical grid */
.women-magazine-premium::after {
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image:
            linear-gradient(
                    rgba(39, 83, 124, .025) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(39, 83, 124, .018) 1px,
                    transparent 1px
            );

    background-size:
            100% 4rem,
            4rem 100%;

    content: "";
    pointer-events: none;
}


/* ============================================================
   CONTAINER
   Reference hero is deliberately short and wide.
   ============================================================ */

.women-magazine-premium-container {
    width: min(1500px, calc(100% - 3rem));
    margin: 0 auto;

}


/* ============================================================
   MAIN TWO-COLUMN HERO
   ============================================================ */

.women-magazine-premium-showcase {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(24rem, .82fr);

    align-items: center;

    gap: clamp(1.5rem, 4vw, 5rem);

    min-height:
            clamp(25rem, 37vw, 35rem);
}


/* ============================================================
   MAGAZINE AREA
   ============================================================ */

.women-magazine-premium-stage {
    position: relative;
    min-width: 0;
}


/*
   Shorter than the previous version.
   The reference image has a wide editorial composition rather
   than a tall magazine showcase.
*/

.women-magazine-premium-covers {
    position: relative;

    width: 100%;
    height: clamp(24rem, 34vw, 33rem);

    perspective: 1200px;

    overflow: visible;
}


/* ============================================================
   MAGAZINE COVERS
   ============================================================ */

.women-magazine-premium-cover {
    position: absolute;

    top: 50%;
    left: 50%;

    /*
     * The actual magazine is 2480 × 3508.
     * Width controls the size.
     * Height is calculated automatically from the real image ratio.
     */
    width: clamp(12rem, 18vw, 17rem);
    height: auto;

    display: block;

    overflow: visible;

    background: transparent;

    border: 1px solid rgba(22, 48, 73, .20);

    box-shadow:
            0 1.4rem 2.5rem rgba(17, 39, 60, .18),
            0 .25rem .7rem rgba(17, 39, 60, .10);

    opacity: 0;

    transform:
            translate(-50%, -50%)
            scale(.62)
            rotateY(0deg)
            rotateZ(0deg);

    transform-origin: center;

    transition:
            transform .78s cubic-bezier(.2, .75, .25, 1),
            opacity .6s ease,
            filter .6s ease,
            box-shadow .6s ease;

    will-change: transform, opacity;
}


.women-magazine-premium-cover img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    object-fit: contain;

    background: transparent;
}


/* Soft cover highlight */
.women-magazine-premium-cover-gloss {
    position: absolute;
    inset: 0;

    background:
            linear-gradient(
                    120deg,
                    rgba(255, 255, 255, .34),
                    transparent 20%,
                    transparent 76%,
                    rgba(255, 255, 255, .16)
            );

    opacity: .42;

    pointer-events: none;
}


/* ============================================================
   ACTIVE MAGAZINE
   ============================================================ */

.women-magazine-premium-cover[data-position="active"] {
    z-index: 5;

    opacity: 1;

    box-shadow:
            0 1.7rem 3rem rgba(17, 39, 60, .22),
            0 .4rem 1rem rgba(17, 39, 60, .12);

    transform:
            translate(-50%, -50%)
            scale(1)
            rotateY(0deg)
            rotateZ(0deg);
}


/* ============================================================
   LEFT / RIGHT MAGAZINES
   ============================================================ */

.women-magazine-premium-cover[data-position="left"],
.women-magazine-premium-cover[data-position="right"] {
    z-index: 3;

    opacity: .66;

    filter:
            saturate(.82)
            brightness(.88);
}


.women-magazine-premium-cover[data-position="left"] {
    transform:
            translate(calc(-50% - 51%), -50%)
            scale(.79)
            rotateY(11deg)
            rotateZ(-7deg);
}


.women-magazine-premium-cover[data-position="right"] {
    transform:
            translate(calc(-50% + 51%), -50%)
            scale(.79)
            rotateY(-11deg)
            rotateZ(7deg);
}


/* ============================================================
   FAR MAGAZINES
   ============================================================ */

.women-magazine-premium-cover[data-position="far-left"],
.women-magazine-premium-cover[data-position="far-right"] {
    z-index: 1;

    opacity: .22;

    filter:
            saturate(.65)
            brightness(.86);
}


.women-magazine-premium-cover[data-position="far-left"] {
    transform:
            translate(calc(-50% - 88%), -50%)
            scale(.64)
            rotateY(17deg)
            rotateZ(-11deg);
}


.women-magazine-premium-cover[data-position="far-right"] {
    transform:
            translate(calc(-50% + 88%), -50%)
            scale(.64)
            rotateY(-17deg)
            rotateZ(11deg);
}


.women-magazine-premium-cover[data-position="hidden"] {
    z-index: 0;

    opacity: 0;

    pointer-events: none;

    transform:
            translate(-50%, -50%)
            scale(.5);
}


/* ============================================================
   CONTROLS
   ============================================================ */

.women-magazine-premium-controls {
    display: flex;

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

    gap: 1rem;

    margin-top: -1.5rem;
}


.women-magazine-premium-arrow {
    width: 2.65rem;
    height: 2.65rem;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--women-navy);
    font-size: 1.6rem;

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

    border:
            1px solid rgba(25, 64, 99, .38);

    cursor: pointer;

    transition:
            color .22s ease,
            background-color .22s ease,
            border-color .22s ease,
            transform .22s ease,
            box-shadow .22s ease;
}


.women-magazine-premium-arrow:hover {
    color: #fff;

    background:
            var(--women-blue);

    border-color:
            var(--women-blue);

    box-shadow:
            0 .4rem 1.2rem rgba(39, 121, 201, .22);

    transform:
            translateY(-2px);
}


/* Dots */
.women-magazine-premium-dots {
    display: flex;

    align-items: center;

    gap: .45rem;

    padding: 0 .15rem;
}


.women-magazine-premium-dot {
    width: .38rem;
    height: .38rem;

    padding: 0;

    background:
            rgba(31, 64, 94, .35);

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    transition:
            width .28s ease,
            background-color .28s ease,
            box-shadow .28s ease;
}


.women-magazine-premium-dot.is-active {
    width: 1.3rem;

    background:
            var(--women-blue);

    border-radius: 1rem;

    box-shadow:
            0 0 .65rem rgba(39, 121, 201, .30);
}


/* ============================================================
   RIGHT EDITORIAL CONTENT
   ============================================================ */

.women-magazine-premium-copy {
    position: relative;

    max-width: 36rem;

    padding:
            .5rem
            clamp(0rem, 2vw, 1.5rem)
            .5rem
            0;
}


/* Decorative soft image / glow area behind copy.
   It does not require another HTML element. */
.women-magazine-premium-copy::after {
    position: absolute;

    top: -7rem;
    right: -8rem;

    width: 20rem;
    height: 30rem;

    z-index: -1;

    background:
            radial-gradient(
                    ellipse at center,
                    rgba(255, 245, 221, .56),
                    rgba(222, 230, 238, .16) 52%,
                    transparent 72%
            );

    content: "";
    pointer-events: none;
}


/* ============================================================
   KICKER
   ============================================================ */

.women-magazine-premium-kicker {
    display: inline-flex;

    align-items: center;

    gap: .65rem;

    margin: 0 0 1rem;

    color:
            var(--women-blue-dark);

    font-family:
            "Inter",
            Arial,
            sans-serif;

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .21em;

    line-height: 1;

    text-transform: uppercase;
}


.women-magazine-premium-kicker::before {
    width: 1.45rem;
    height: 1px;

    background:
            var(--women-blue);

    content: "";
}


/* ============================================================
   WOMEN MAGAZINE TITLE
   Reference uses a refined editorial serif.
   ============================================================ */

.women-magazine-premium-title {
    margin: 0;

    color:
            var(--women-navy);

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size:
            clamp(3rem, 5vw, 5.3rem);

    font-weight: 600;

    line-height: .88;

    letter-spacing: -.045em;

    text-transform: uppercase;
}


/* Allow a span to carry the blue editorial accent */
.women-magazine-premium-title span {
    color:
            var(--women-blue);
}


/* ============================================================
   SUBTITLE
   ============================================================ */

.women-magazine-premium-subtitle {
    max-width: 27rem;

    margin:
            1.25rem
            0
            1.65rem;

    color:
            #5f6d7b;

    font-family:
            "Inter",
            Arial,
            sans-serif;

    font-size: .82rem;

    font-weight: 400;

    line-height: 1.72;
}


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

.women-magazine-premium-cta-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .9rem;

    min-height: 3rem;

    padding:
            .72rem
            1.2rem;

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #3d8bd2,
                    #175d9f
            );

    border:
            1px solid #2f78bd;

    box-shadow:
            0 .45rem 1.1rem rgba(35, 100, 159, .16);

    font-family:
            "Inter",
            Arial,
            sans-serif;

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .11em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
            background-color .22s ease,
            border-color .22s ease,
            transform .22s ease,
            box-shadow .22s ease;
}


.women-magazine-premium-cta-btn:hover {
    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    #4b9ee8,
                    #155b9d
            );

    border-color:
            #155b9d;

    box-shadow:
            0 .7rem 1.5rem rgba(35, 100, 159, .23);

    transform:
            translateY(-2px);
}


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

.women-magazine-premium-cover:focus-visible,
.women-magazine-premium-arrow:focus-visible,
.women-magazine-premium-dot:focus-visible,
.women-magazine-premium-cta-btn:focus-visible {
    outline:
            2px solid var(--women-blue);

    outline-offset:
            4px;
}


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

@media (max-width: 1050px) {

    .women-magazine-premium-container {
        width:
                min(100% - 2.5rem, 1400px);
    }


    .women-magazine-premium-showcase {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(19rem, .92fr);

        gap: 1.5rem;
    }


    .women-magazine-premium-covers {
        height: 27rem;
    }


    .women-magazine-premium-cover {
        width:
                clamp(11.5rem, 21vw, 15rem);
    }


    .women-magazine-premium-title {
        font-size:
                clamp(2.7rem, 5.4vw, 4.3rem);
    }
}


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

@media (max-width: 700px) {

    .women-magazine-premium-container {
        width:
                min(100% - 1.5rem, 36rem);

        padding:
                2rem 0 2.5rem;
    }


    .women-magazine-premium-showcase {
        display: flex;

        flex-direction: column;

        gap: .75rem;

        min-height: 0;
    }


    .women-magazine-premium-stage,
    .women-magazine-premium-copy {
        width: 100%;
    }


    .women-magazine-premium-covers {
        height: 22rem;
    }


    .women-magazine-premium-cover {
        width:
                min(48vw, 14rem);
    }


    .women-magazine-premium-cover[data-position="left"] {
        transform:
                translate(calc(-50% - 47%), -50%)
                scale(.70)
                rotateY(9deg)
                rotateZ(-6deg);
    }


    .women-magazine-premium-cover[data-position="right"] {
        transform:
                translate(calc(-50% + 47%), -50%)
                scale(.70)
                rotateY(-9deg)
                rotateZ(6deg);
    }


    .women-magazine-premium-cover[data-position="far-left"],
    .women-magazine-premium-cover[data-position="far-right"] {
        opacity: .12;
    }


    .women-magazine-premium-copy {
        padding:
                .5rem 0 0;

        text-align: left;
    }


    .women-magazine-premium-title {
        font-size:
                clamp(2.6rem, 13vw, 4rem);
    }


    .women-magazine-premium-subtitle {
        max-width: 30rem;
    }


    .women-magazine-premium-copy::after {
        right: -5rem;
        top: -2rem;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 430px) {

    .women-magazine-premium-covers {
        height: 20rem;
    }


    .women-magazine-premium-cover {
        width: 10.5rem;
    }


    .women-magazine-premium-cover[data-position="left"] {
        transform:
                translate(calc(-50% - 42%), -50%)
                scale(.66)
                rotateY(8deg)
                rotateZ(-5deg);
    }


    .women-magazine-premium-cover[data-position="right"] {
        transform:
                translate(calc(-50% + 42%), -50%)
                scale(.66)
                rotateY(-8deg)
                rotateZ(5deg);
    }


    .women-magazine-premium-controls {
        margin-top: 0;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .women-magazine-premium-cover,
    .women-magazine-premium-arrow,
    .women-magazine-premium-dot,
    .women-magazine-premium-cta-btn {
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   OPTIONAL MEDIA PARTNERS / PUBLICATIONS
   Keep this section visually connected to the new light hero.
   ============================================================ */

.media-partners-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
            clamp(2rem, 4vw, 3.2rem)
            clamp(1rem, 3vw, 2.5rem);

    color:
            var(--women-text);

    background:
            linear-gradient(
                    135deg,
                    #f1f4f6 0%,
                    #e7edf2 55%,
                    #f5f5f2 100%
            );

    border-top:
            1px solid rgba(28, 61, 91, .14);

    border-bottom:
            1px solid rgba(28, 61, 91, .12);
}


.media-partners-section::before {
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image:
            linear-gradient(
                    rgba(38, 82, 121, .025) 1px,
                    transparent 1px
            );

    background-size:
            100% 4rem;

    content: "";
    pointer-events: none;
}


.media-partners-heading {
    display: flex;

    align-items: center;

    gap: .85rem;

    margin:
            0 0 1.4rem;
}


.media-partners-heading::after {
    flex: 0 1 6rem;

    width: 6rem;
    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    var(--women-blue),
                    transparent
            );

    content: "";
}


.media-partners-heading h2 {
    margin: 0;

    color:
            var(--women-navy);

    font-family:
            "Inter",
            Arial,
            sans-serif;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .15em;

    line-height: 1.2;

    text-transform: uppercase;
}


.media-partners-row {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 12rem), 1fr)
        );

    gap: .85rem;

    align-items: stretch;
}


.media-partner-logo {
    min-width: 0;

    min-height: 5.5rem;

    display: flex;

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

    padding: 1rem;

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

    border:
            1px solid rgba(39, 87, 127, .16);

    box-shadow:
            0 .35rem 1rem rgba(24, 54, 84, .05);

    transition:
            border-color .22s ease,
            box-shadow .22s ease,
            transform .22s ease,
            background-color .22s ease;
}


.media-partner-logo:hover,
.media-partner-logo:focus-within {
    background:
            rgba(255, 255, 255, .95);

    border-color:
            rgba(39, 121, 201, .45);

    box-shadow:
            0 .7rem 1.5rem rgba(24, 54, 84, .10);

    transform:
            translateY(-2px);
}


.media-partner-logo img {
    display: block;

    width:
            min(100%, 11rem);

    height:
            3.25rem;

    object-fit: contain;
}


@media (max-width: 650px) {

    .media-partners-section {
        padding-right: 1rem;
        padding-left: 1rem;
    }


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


    .media-partner-logo {
        min-height: 5rem;
        padding: .75rem;
    }
}


/* ============================================================
   END
   ============================================================ */