/*==============================================================================
    The Nathan Family
    LIFE BETWEEN THE CHAPTERS STYLESHEET
    Version : 1.2
    Purpose : Page-specific presentation for collections of smaller moments

    DEPENDENCY
    ----------
    Load framework.css before this stylesheet.

    SCOPE
    -----
    All rules are scoped to `.life-between-page` so this file cannot alter the
    homepage, standard story pages, or legacy pages.
==============================================================================*/

/*==============================================================================
    01. PAGE FOUNDATION
==============================================================================*/

.life-between-page{
    line-height:1.85;
}

.life-between-page h1,
.life-between-page h2,
.life-between-page h3{
    font-family:"Cormorant Garamond",serif;
    font-weight:600;
    letter-spacing:.5px;
}

.life-between-page p{
    margin-bottom:24px;
}

.life-container{
    width:min(var(--reading-width),92%);
    margin-inline:auto;
    padding:70px 0 42px;
}

/*==============================================================================
    02. COMPACT COLLECTION HERO
==============================================================================*/

.life-hero{
    position:relative;
    min-height:58vh;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.collection-cover{
    position:absolute;
    inset:0;
    display:grid;
}

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

/* One event: one full-width collection image. */
.collection-cover--one{
    grid-template-columns:1fr;
}

/* Two events: an equal split, one image per event. */
.collection-cover--two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Three events: one feature image and two supporting images. */
.collection-cover--three{
    grid-template-columns:1.35fr 1fr;
    grid-template-rows:repeat(2,minmax(0,1fr));
}

.collection-cover--three img:first-child{
    grid-row:1 / 3;
}

/* Four events: a balanced two-by-two collection collage. */
.collection-cover--four{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
}

/* Optional positioning helpers for individual collection images. */
.collection-cover .cover-position-top{
    object-position:center 20%;
}

.collection-cover .cover-position-upper{
    object-position:center 40%;
}

.collection-cover .cover-position-center{
    object-position:center center;
}

.life-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.34) 46%,
        rgba(0,0,0,.76) 100%
    );
}

.life-hero-content{
    position:relative;
    z-index:2;
    width:min(900px,90%);
    padding:80px 20px 62px;
    color:#fff;
    text-align:center;
}

.life-hero-content h1{
    margin:10px 0 14px;
    font-size:4rem;
    line-height:1.05;
    text-shadow:0 4px 18px rgba(0,0,0,.8);
}

.collection-label,
.collection-period,
.section-eyebrow{
    font-family:"Inter",sans-serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.collection-label{
    margin:0;
    color:#f2ddc1;
}

.collection-subtitle{
    margin:0 auto 18px;
    max-width:650px;
    color:rgba(255,255,255,.94);
    font-family:"Inter",sans-serif;
    font-size:1.18rem;
    line-height:1.55;
    text-shadow:0 2px 10px rgba(0,0,0,.75);
}

.collection-period{
    margin:0;
    color:rgba(255,255,255,.82);
    letter-spacing:.12em;
}

/*==============================================================================
    03. OPENING AND CLOSING REFLECTIONS
==============================================================================*/

.collection-introduction,
.collection-closing{
    position:relative;
    margin-bottom:72px;
    padding:54px 58px;
    text-align:center;
}

.collection-introduction::after{
    content:"❦";
    position:absolute;
    bottom:-20px;
    left:50%;
    padding:0 18px;
    transform:translateX(-50%);
    background:var(--bg);
    color:var(--gold);
    font-size:1.4rem;
}

.collection-introduction{
    border-bottom:1px solid var(--border);
}

.collection-introduction h2,
.collection-closing h2{
    margin:8px 0 22px;
    color:var(--green);
    font-size:2.65rem;
    line-height:1.15;
}

.collection-introduction p:last-child,
.collection-closing p{
    max-width:680px;
    margin-right:auto;
    margin-left:auto;
    color:#5d5650;
    font-size:1.06rem;
}

.section-eyebrow{
    margin-bottom:0;
    color:var(--accent);
}

.collection-closing{
    margin-top:82px;
    padding:58px;
    background:linear-gradient(135deg,#fffdf8 0%,#faf4ea 100%);
    border-left:7px solid var(--accent);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.collection-closing blockquote{
    max-width:620px;
    margin:34px auto 0;
    padding-top:28px;
    border-top:1px solid var(--border);
    color:var(--green);
    font-size:1.2rem;
    font-style:italic;
}

/*==============================================================================
    04. JOURNAL MOMENTS
==============================================================================*/

.journal-moment{
    margin-bottom:64px;
    padding:50px 54px 54px;
    background:var(--paper);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.journal-moment--tinted{
    background:#fffaf5;
}

.moment-header{
    margin-bottom:26px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
}

.moment-header h2{
    margin:5px 0 0;
    color:var(--text);
    font-size:2.35rem;
    line-height:1.15;
}

.moment-date{
    margin:0;
    color:var(--accent);
    font-family:"Inter",sans-serif;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.moment-copy{
    color:#514b46;
}

.moment-copy h3{
    margin:34px 0 12px;
    color:var(--green);
    font-size:1.45rem;
    line-height:1.25;
}

.moment-lead{
    color:var(--green);
    font-size:1.14rem;
    font-style:italic;
}

.moment-copy p:last-child{
    margin-bottom:0;
}

/*==============================================================================
    05. MOMENT PHOTO SYSTEM
==============================================================================*/

.moment-gallery{
    margin-top:38px;
    margin-bottom:38px;
}

.moment-gallery figure{
    margin:0;
}

.moment-gallery img{
    width:100%;
    object-fit:cover;
    border-radius:13px;
    box-shadow:0 10px 26px rgba(0,0,0,.11);
}

.moment-gallery figcaption,
.gallery-caption{
    margin:13px 6px 0;
    color:var(--text-light);
    font-size:.88rem;
    font-style:italic;
    line-height:1.55;
    text-align:center;
}

.moment-gallery--single img{
    max-height:620px;
}

.moment-gallery--two,
.moment-gallery--three{
    display:grid;
    gap:18px;
}

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

.moment-gallery--two img{
    aspect-ratio:4 / 3;
}

.moment-gallery--three{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.moment-gallery--three img{
    aspect-ratio:3 / 4;
}

.birthday-photo-story{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr);
    gap:18px;
    margin:38px 0;
    align-items:start;
}

.birthday-photo-story figure{
    margin:0;
}

.birthday-photo-story img{
    display:block;
    width:100%;
    height:auto;
    border-radius:13px;
    box-shadow:0 10px 26px rgba(0,0,0,.11);
}

.birthday-photo-story__panoramas{
    display:grid;
    gap:18px;
}

.birthday-photo-story figcaption{
    margin:13px 6px 0;
    color:var(--text-light);
    font-size:.88rem;
    font-style:italic;
    line-height:1.55;
    text-align:center;
}

.gallery-button--placeholder{
    display:inline-block;
    opacity:.76;
    cursor:default;
}

.gallery-caption{
    margin-top:16px;
}

/*==============================================================================
    06. GALLERY LINK AND COLLECTION NAVIGATION
==============================================================================*/

.collection-gallery-link{
    margin:0 0 65px;
    text-align:center;
}

.life-between-page .gallery-button{
    padding:18px 40px;
    background:var(--gold);
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    font-family:"Inter",sans-serif;
    font-size:1rem;
}

.life-between-page .gallery-button:hover{
    background:#b89668;
}

.collection-nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:30px;
    padding-top:34px;
    border-top:1px solid var(--border);
    font-family:"Inter",sans-serif;
}

.collection-nav a{
    color:var(--green);
    font-weight:600;
    transition:var(--transition);
}

.collection-nav a:nth-child(2){
    text-align:center;
}

.collection-nav a:last-child{
    text-align:right;
}

.collection-nav a:hover{
    color:var(--gold);
}

.life-between-page footer{
    margin-top:0;
    padding:60px 20px;
    color:var(--text-light);
    font-family:"Inter",sans-serif;
    text-align:center;
}

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

@media(max-width:768px){

    .life-hero{
        min-height:52vh;
    }

    .life-hero-content{
        padding-bottom:46px;
    }

    .life-hero-content h1{
        font-size:2.75rem;
    }

    .collection-cover--three{
        grid-template-columns:1fr 1fr;
        grid-template-rows:minmax(0,1.2fr) minmax(0,.8fr);
    }

    .collection-cover--three img:first-child{
        grid-column:1 / 3;
        grid-row:auto;
    }

    .collection-subtitle{
        font-size:1rem;
    }

    .life-container{
        padding:48px 0 34px;
    }

    .collection-introduction,
    .collection-closing{
        padding:38px 24px;
    }

    .collection-introduction h2,
    .collection-closing h2{
        font-size:2.15rem;
    }

    .journal-moment{
        margin-bottom:44px;
        padding:34px 24px 38px;
    }

    .moment-header h2{
        font-size:2rem;
    }

    .moment-gallery--two,
    .moment-gallery--three{
        grid-template-columns:1fr;
    }

    .moment-gallery--three img{
        aspect-ratio:4 / 3;
    }

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

    .birthday-photo-story__panoramas{
        grid-template-rows:auto;
    }

    .collection-nav{
        grid-template-columns:1fr;
        gap:18px;
        text-align:center;
    }

    .collection-nav a:last-child{
        text-align:center;
    }

}

/*==============================================================================
    END OF LIFE BETWEEN THE CHAPTERS STYLESHEET
==============================================================================*/