/*==============================================================================
    The Nathan Family
    OUR STORIES PORTAL
    Version : 1.0
    Purpose : Landing page for every family story collection
==============================================================================*/

.stories-portal-page{
    background:#fbf8f3;
}

/*==============================================================================
    01. HERO
==============================================================================*/

.stories-portal-hero{
    position:relative;
    min-height:64vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#493b31;
}

.stories-portal-hero > img:not(.stories-portal-hero__logo){
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 48%;
}

.stories-portal-hero__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(31,22,16,.74) 0%,rgba(31,22,16,.48) 42%,rgba(31,22,16,.12) 76%),
        linear-gradient(0deg,rgba(24,17,12,.62) 0%,transparent 55%);
}

.stories-portal-hero__content{
    position:relative;
    z-index:2;
    width:min(1180px,90%);
    margin:0 auto;
    padding:110px 0 52px;
    color:#fff;
}

.stories-portal-hero__logo{
    position:absolute;
    z-index:3;
    top:12px;
    left:24px;
    width:150px;
    height:150px;
    object-fit:contain;
}

.stories-eyebrow,
.stories-section__label,
.special-story-card__label{
    margin:0 0 8px;
    color:#ead1aa;
    font-family:"Inter",sans-serif;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.stories-portal-hero h1{
    margin:0;
    font-size:clamp(3.8rem,8vw,7rem);
    line-height:.92;
    text-shadow:0 3px 18px rgba(0,0,0,.45);
}

.stories-portal-hero__content > p:last-child{
    max-width:600px;
    margin:20px 0 0;
    color:rgba(255,255,255,.94);
    font-size:1.08rem;
    line-height:1.75;
    text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.stories-flourish{
    display:flex;
    align-items:center;
    gap:10px;
    width:150px;
    margin-top:25px;
    color:#f0c47e;
}

.stories-flourish span{
    flex:1;
    height:1px;
    background:currentColor;
}

.stories-flourish b{
    font-size:1.3rem;
    font-weight:400;
}

/*==============================================================================
    02. PAGE AND SECTION LAYOUT
==============================================================================*/

.stories-portal-container{
    width:min(1180px,92%);
    margin:0 auto;
    padding:72px 0 90px;
}

.stories-section{
    padding:0 0 74px;
}

.stories-section + .stories-section{
    padding-top:72px;
    border-top:1px solid var(--border);
}

.stories-section__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:30px;
}

.stories-section__header h2{
    margin:0;
    color:#513727;
    font-size:clamp(2.3rem,4vw,3.3rem);
    line-height:1;
}

.stories-section__header > p{
    max-width:440px;
    margin:0;
    color:var(--text-light);
    font-family:"Inter",sans-serif;
    font-size:.94rem;
    text-align:right;
}

.stories-section__label,
.special-story-card__label{
    color:#ae7419;
}

/*==============================================================================
    03. MAJOR STORY CARDS
==============================================================================*/

.major-story-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.portal-story-card,
.collection-card,
.special-story-card{
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(103,75,55,.09);
    border-radius:14px;
    box-shadow:0 8px 24px rgba(75,54,39,.09);
    transition:transform .25s ease,box-shadow .25s ease;
}

.portal-story-card:hover,
.collection-card:not(.collection-card--coming-soon):hover,
.special-story-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 35px rgba(75,54,39,.15);
}

.portal-story-card > a{
    display:flex;
    flex-direction:column;
    height:100%;
}

.portal-story-card__image{
    position:relative;
    height:245px;
    overflow:hidden;
    background:#e8e0d5;
}

.portal-story-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s ease;
}

.portal-story-card:hover .portal-story-card__image img,
.special-story-card:hover > a > img{
    transform:scale(1.035);
}

.story-year,
.coming-soon-label{
    position:absolute;
    top:14px;
    left:14px;
    padding:5px 11px;
    background:#b47a1c;
    border-radius:5px;
    color:#fff;
    font-family:"Inter",sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}

.portal-story-card__content{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:24px;
}

.portal-story-card__content h3,
.collection-card__content h3,
.special-story-card__content h3{
    margin:0 0 10px;
    color:#513727;
    font-size:1.75rem;
    line-height:1.12;
}

.portal-story-card__content p,
.collection-card__content p,
.special-story-card__content p{
    color:#5f5751;
    font-family:"Inter",sans-serif;
    font-size:.9rem;
    line-height:1.75;
}

.portal-story-card__meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:auto;
    padding-top:10px;
    color:#8a8179;
    font-family:"Inter",sans-serif;
    font-size:.78rem;
}

.portal-story-card__meta strong,
.special-story-card__content strong{
    color:#ae7419;
    font-weight:700;
    white-space:nowrap;
}

/*==============================================================================
    04. LIFE BETWEEN THE CHAPTERS
==============================================================================*/

.collection-card-grid{
    display:grid;
    grid-template-columns:1.45fr .75fr;
    gap:24px;
}

.collection-card > a{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    height:100%;
}

.collection-card__mosaic{
    position:relative;
    min-height:360px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:3px;
    overflow:hidden;
    background:#eee5d9;
}

.collection-card__mosaic img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.collection-card__mosaic .story-year{
    z-index:2;
}

.collection-card__content{
    display:flex;
    flex-direction:column;
    padding:34px;
}

.collection-card__content h3{
    font-size:2.25rem;
}

.collection-card--coming-soon{
    display:flex;
    min-height:360px;
    background:
        radial-gradient(circle at 75% 20%,rgba(200,169,126,.19),transparent 30%),
        linear-gradient(145deg,#fffdf8,#f3eadc);
}

.collection-card__placeholder{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    padding:42px;
    text-align:center;
}

.collection-card__placeholder .coming-soon-label{
    right:auto;
}

.placeholder-mark{
    margin-bottom:18px;
    color:var(--gold);
    font-size:3rem;
}

.collection-card__placeholder h3{
    margin-bottom:10px;
    color:#513727;
    font-size:2rem;
}

.collection-card__placeholder p{
    margin:0;
    color:var(--text-light);
    font-family:"Inter",sans-serif;
    font-size:.9rem;
}

/*==============================================================================
    05. SPECIAL STORIES
==============================================================================*/

.special-story-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.special-story-card > a{
    display:grid;
    grid-template-columns:42% 58%;
    min-height:230px;
}

.special-story-card > a > img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s ease;
}

.special-story-card__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
}

.special-story-card__content h3{
    font-size:1.55rem;
}

.special-story-card__content p{
    margin-bottom:15px;
    font-size:.82rem;
}

.special-story-card__content .special-story-card__label{
    margin-bottom:7px;
    font-size:.65rem;
    line-height:1.4;
}

.special-story-card__content strong{
    margin-top:auto;
    font-family:"Inter",sans-serif;
    font-size:.78rem;
}

/*==============================================================================
    06. FOOTER
==============================================================================*/

.stories-portal-footer{
    margin:0;
    padding:0;
    background:#f1e9df;
    color:var(--text);
    font-family:"Inter",sans-serif;
    text-align:left;
}

.stories-portal-footer__inner{
    width:min(1180px,92%);
    margin:0 auto;
    padding:58px 0;
    display:grid;
    grid-template-columns:1.25fr .65fr 1fr;
    gap:80px;
}

.stories-portal-footer h2{
    margin-bottom:14px;
    color:#513727;
    font-size:1.15rem;
}

.stories-portal-footer p{
    margin:0;
    color:#6f665f;
    font-size:.85rem;
}

.stories-portal-footer nav a{
    display:block;
    margin:5px 0;
    color:#6f665f;
    font-size:.82rem;
}

.stories-portal-footer nav a:hover{
    color:#ae7419;
}

.footer-reflection p{
    font-family:"Cormorant Garamond",serif;
    font-size:1.25rem;
    font-style:italic;
    line-height:1.55;
}

.footer-reflection span{
    display:block;
    margin-top:12px;
    color:#ae7419;
    font-size:1.3rem;
}

.stories-portal-footer__copyright{
    padding:16px max(4%,calc((100% - 1180px)/2));
    background:#4c3326;
    color:rgba(255,255,255,.85);
    font-size:.72rem;
}

/*==============================================================================
    07. RESPONSIVE
==============================================================================*/

@media(max-width:1050px){

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

    .collection-card-grid{
        grid-template-columns:1fr;
    }

    .special-story-grid{
        grid-template-columns:1fr;
    }

    .special-story-card > a{
        grid-template-columns:280px 1fr;
    }

}

@media(max-width:720px){

    .stories-portal-hero{
        min-height:72vh;
    }

    .stories-portal-hero > img:not(.stories-portal-hero__logo){
        object-position:58% center;
    }

    .stories-portal-hero__overlay{
        background:linear-gradient(0deg,rgba(30,21,15,.82),rgba(30,21,15,.18));
    }

    .stories-portal-hero__content{
        padding-bottom:48px;
    }

    .stories-portal-hero__logo{
        top:18px;
        left:18px;
        width:120px;
        height:120px;
    }

    .stories-section__header{
        display:block;
    }

    .stories-section__header > p{
        margin-top:12px;
        text-align:left;
    }

    .major-story-grid{
        grid-template-columns:1fr;
    }

    .collection-card > a{
        grid-template-columns:1fr;
    }

    .collection-card__mosaic{
        min-height:310px;
    }

    .special-story-card > a{
        grid-template-columns:1fr;
    }

    .special-story-card > a > img{
        height:240px;
    }

    .stories-portal-footer__inner{
        grid-template-columns:1fr;
        gap:35px;
    }

}

@media(max-width:450px){

    .stories-portal-container{
        width:min(94%,1180px);
        padding-top:52px;
    }

    .portal-story-card__image{
        height:220px;
    }

    .collection-card__content,
    .collection-card__placeholder{
        padding:28px;
    }

    .portal-story-card__meta{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

}

@media(max-width:720px){

    .special-story-card > a > img.special-story-card__image--portrait{
        width:100%;
        height:auto;
        object-fit:contain;
        object-position:center;
        background:#fff;
    }

}

/*==============================================================================
    END OF OUR STORIES PORTAL
==============================================================================*/