/*==================================================
ESSAYS LANDING PAGE
Awaken Your Inner Compass
==================================================*/


/*==================================================
GENERAL
==================================================*/

.essays-page {
    overflow:hidden;
}

.essays-page .container {
    width:min(1180px, 92%);
    margin:0 auto;
}

.theme-icon {
    width: 72px;
    height: 72px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(200, 161, 90, 0.10);
}

.theme-icon img {
    width: 40px;
    height: 40px;

    display: block;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%);
}
/*==================================================
HERO
==================================================*/

.essays-hero {
    padding:11rem 0 7rem;
    background:#FAF8F4;
    position:relative;
}

.essays-hero-content {
    max-width:850px;
}

.essays-hero .page-kicker {
    display:inline-block;

    margin-bottom:1.5rem;

    color:var(--gold);

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

    letter-spacing:.3em;
    text-transform:uppercase;
}

.essays-hero h1 {
    margin:0 0 2rem;

    font-family:var(--font-heading);

    font-size:clamp(3.5rem,7vw,6rem);
    font-weight:500;
    line-height:.98;

    color:var(--green);

    letter-spacing:-.025em;
}

.essays-hero h1 span {
    display:block;
    color:var(--rose);
}

.essays-hero p {
    max-width:700px;

    margin:0;

    font-size:1.18rem;
    line-height:1.9;

    color:#555;
}

.essays-hero-divider {
    width:80px;
    height:2px;

    margin-top:3rem;

    background:var(--gold);
}

/*===============================================
new..
==================================================*/

.essay-pullquote {
    margin: 3rem auto;
    padding: 1.5rem 2rem;
    max-width: 650px;
    text-align: center;
    border: none;
}

.essay-pullquote p {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--color-text);
}



/*==================================================
SECTION HEADINGS
==================================================*/

.essays-page .section-heading {
    max-width:760px;
    margin-bottom:4rem;
}

.essays-page .section-kicker {
    display:inline-block;

    margin-bottom:1rem;

    color:var(--gold);

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

    letter-spacing:.25em;
    text-transform:uppercase;
}

.essays-page .section-heading h2 {
    margin:0 0 1.2rem;

    font-family:var(--font-heading);

    font-size:clamp(2.3rem,4vw,3.5rem);
    font-weight:500;
    line-height:1.15;

    color:var(--green);
}

.essays-page .section-heading p {
    max-width:680px;

    margin:0;

    color:#666;

    font-size:1.05rem;
    line-height:1.9;
}


/*==================================================
FEATURED ESSAY
==================================================*/

.essays-featured {
    padding:7rem 0;

    background:#fff;
}

.featured-essay-card {
    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:520px;

    background:#FAF8F4;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.featured-essay-image {
    min-height:520px;
    overflow:hidden;
}

.featured-essay-image img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;
}

.featured-essay-card:hover .featured-essay-image img {
    transform:scale(1.03);
}

.featured-essay-placeholder {
    width:100%;
    height:100%;

    min-height:520px;

    background:
        linear-gradient(
            135deg,
            #eee7dc,
            #e5d9c8
        );
}

.featured-essay-content {
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:4.5rem;
}

.essay-category {
    display:inline-block;

    color:var(--gold);

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

    letter-spacing:.2em;

    text-transform:uppercase;
}

.featured-essay-content h3 {
    margin:1rem 0 1.5rem;

    font-family:var(--font-heading);

    font-size:clamp(2.3rem,4vw,3.5rem);
    font-weight:500;
    line-height:1.1;

    color:var(--green);
}

.featured-essay-excerpt {
    margin-bottom:1.5rem;

    color:#555;

    font-size:1.05rem;
    line-height:1.9;
}

.featured-essay-excerpt p {
    margin:0;
}

.featured-essay-meta {
    display:flex;
    align-items:center;
    gap:.8rem;

    margin-bottom:2rem;

    color:#888;

    font-size:.85rem;
}

.meta-divider {
    color:var(--gold);
}


/*==================================================
ESSAY LIBRARY
==================================================*/

.essays-library {
    padding:7rem 0;

    background:#FAF8F4;
}


/*==================================================
ESSAY GRID
==================================================*/

.essays-grid {
    display:grid;

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

    gap:2rem;
}


/*==================================================
ESSAY CARD
==================================================*/

.essay-card {
    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.essay-card:hover {
    transform:translateY(-7px);

    box-shadow:0 25px 55px rgba(0,0,0,.1);
}

.essay-card-image {
    display:block;

    width:100%;
    height:250px;

    overflow:hidden;
}

.essay-card-image img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .5s ease;
}

.essay-card:hover .essay-card-image img {
    transform:scale(1.04);
}

.essay-card-placeholder {
    width:100%;
    height:100%;

    background:
        linear-gradient(
            135deg,
            #eee7dc,
            #e7ddd0
        );
}

.essay-card-content {
    padding:1.8rem;
}

.essay-card-top {
    display:flex;

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

    margin-bottom:1rem;
}

.essay-date {
    color:#999;
    font-size:.8rem;
}

.essay-card h3 {
    margin:0 0 1rem;

    font-family:var(--font-heading);

    font-size:1.8rem;
    font-weight:500;

    line-height:1.2;

    color:var(--green);
}

.essay-card h3 a {
    color:inherit;
    text-decoration:none;
}

.essay-card-content > p {
    margin:0 0 1.5rem;

    color:#666;

    font-size:.95rem;
    line-height:1.8;
}

.essay-card-footer {
    display:flex;

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

    padding-top:1.2rem;

    border-top:1px solid rgba(0,0,0,.07);
}

.essay-read-time {
    color:#999;

    font-size:.8rem;
}

.essay-read-link {
    display:inline-flex;

    align-items:center;

    gap:.5rem;

    color:var(--green);

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

    text-decoration:none;

    transition:.3s;
}

.essay-read-link span {
    transition:.3s;
}

.essay-read-link:hover {
    color:var(--gold);
}

.essay-read-link:hover span {
    transform:translateX(4px);
}


/*==================================================
PAGINATION
==================================================*/

.essays-pagination {
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:.5rem;

    margin-top:4rem;
}

.essays-pagination .page-numbers {
    display:flex;

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

    min-width:42px;
    height:42px;

    padding:0 .8rem;

    border:1px solid rgba(0,0,0,.08);

    border-radius:50%;

    color:var(--green);

    text-decoration:none;

    font-size:.85rem;

    transition:.3s;
}

.essays-pagination .page-numbers:hover,
.essays-pagination .page-numbers.current {
    background:var(--green);

    border-color:var(--green);

    color:#fff;
}

.essays-pagination .prev,
.essays-pagination .next {
    border-radius:30px;
}


/*==================================================
EMPTY STATE
==================================================*/

.essays-empty {
    max-width:650px;

    margin:0 auto;

    padding:5rem 2rem;

    text-align:center;

    background:#fff;

    border-radius:20px;
}

.essays-empty h3 {
    margin:1rem 0;

    font-family:var(--font-heading);

    font-size:2rem;

    color:var(--green);
}

.essays-empty p {
    color:#666;
    line-height:1.8;
}


/*==================================================
THEMES
==================================================*/

.essays-themes {
    padding:7rem 0;

    background:#fff;
}

.essays-themes .section-heading {
    text-align:center;

    margin-left:auto;
    margin-right:auto;
}

.essay-themes-grid {
    display:grid;

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

    gap:1.5rem;
}

.essay-theme-card {
    display:flex;

    flex-direction:column;

    padding:2.2rem;

    background:#FAF8F4;

    border:1px solid rgba(0,0,0,.05);

    border-radius:18px;

    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.essay-theme-card:hover {
    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.theme-icon {
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    margin-bottom:1.5rem;

    border-radius:50%;

    background:rgba(47,79,70,.08);

    color:var(--gold);

    font-size:1.05rem;
}

.essay-theme-card h3 {
    margin:0 0 .8rem;

    font-family:var(--font-heading);

    font-size:1.65rem;
    font-weight:500;

    color:var(--green);
}

.essay-theme-card p {
    margin:0 0 1.5rem;

    color:#666;

    font-size:.95rem;
    line-height:1.8;
}

.theme-link {
    margin-top:auto;

    color:var(--green);

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

    transition:.3s;
}

.essay-theme-card:hover .theme-link {
    color:var(--gold);
}


/*==================================================
REFLECTION
==================================================*/

.essays-reflection {
    padding:8rem 0;

    background:#FAF8F4;

    text-align:center;
}

.reflection-feather {
    width:70px;

    margin:0 auto 2rem;
}

.reflection-feather img {
    width:100%;

    display:block;
}

.essays-reflection blockquote {
    max-width:760px;

    margin:0 auto 1.5rem;

    font-family:var(--font-heading);

    font-size:clamp(2rem,4vw,3.2rem);

    font-weight:400;

    line-height:1.4;

    font-style:italic;

    color:var(--green);
}

.reflection-author {
    margin:0;

    color:var(--gold);

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

    letter-spacing:.15em;

    text-transform:uppercase;
}


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

.essays-next {
    padding:7rem 0;

    background:#fff;

    text-align:center;
}

.essays-next > .container > .section-kicker {
    display:inline-block;

    margin-bottom:1rem;

    color:var(--gold);

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

    letter-spacing:.25em;

    text-transform:uppercase;
}

.essays-next h2 {
    max-width:800px;

    margin:0 auto 1.2rem;

    font-family:var(--font-heading);

    font-size:clamp(2.4rem,5vw,4rem);

    font-weight:500;

    line-height:1.15;

    color:var(--green);
}

.essays-next > .container > p {
    max-width:650px;

    margin:0 auto 3.5rem;

    color:#666;

    line-height:1.8;
}

.essays-next-grid {
    display:grid;

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

    gap:1.5rem;

    max-width:850px;

    margin:0 auto;
}

.essays-next-card {
    padding:2.5rem;

    text-align:left;

    background:#FAF8F4;

    border-radius:18px;

    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.essays-next-card:hover {
    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.essays-next-card h3 {
    margin:0 0 .8rem;

    font-family:var(--font-heading);

    font-size:1.7rem;
    font-weight:500;

    color:var(--green);
}

.essays-next-card p {
    margin:0 0 1.5rem;

    color:#666;

    line-height:1.8;
}

.essays-next-card span {
    color:var(--gold);

    font-size:.85rem;
    font-weight:600;
}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:980px) {

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

    .featured-essay-image {
        min-height:380px;
    }

    .featured-essay-placeholder {
        min-height:380px;
    }

    .featured-essay-content {
        padding:3.5rem;
    }

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

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

}


@media (max-width:768px) {

    .essays-hero {
        padding:9rem 0 5rem;
    }

    .essays-featured,
    .essays-library,
    .essays-themes,
    .essays-reflection,
    .essays-next {
        padding:5rem 0;
    }

    .essays-hero h1 {
        font-size:3.4rem;
    }

    .featured-essay-image,
    .featured-essay-placeholder {
        min-height:300px;
    }

    .featured-essay-content {
        padding:2.5rem 2rem;
    }

    .featured-essay-content h3 {
        font-size:2.5rem;
    }

    .essays-grid {
        grid-template-columns:1fr;
    }

    .essay-themes-grid {
        grid-template-columns:1fr;
    }

    .essays-next-grid {
        grid-template-columns:1fr;
    }

    .essay-card-image {
        height:230px;
    }

}


@media (max-width:480px) {

    .essays-page .container {
        width:90%;
    }

    .essays-hero {
        padding-top:8rem;
    }

    .essays-hero h1 {
        font-size:2.8rem;
    }

    .essays-hero p {
        font-size:1rem;
    }

    .featured-essay-content {
        padding:2rem 1.5rem;
    }

    .featured-essay-content h3 {
        font-size:2.2rem;
    }

    .featured-essay-meta {
        flex-wrap:wrap;
    }

    .essays-reflection blockquote {
        font-size:2rem;
    }

    .essays-next-card {
        padding:2rem;
    }

}