/*
 * Joy Concept — Homepage Styles
 * Specific to front-page.php. Loaded only on the static front page.
 *
 * Table of contents:
 * 1.  Hero
 * 2.  Trust Bar additions
 * 3.  Pathways Grid (4-column)
 * 4.  About Teaser
 * 5.  Section Footer (View all CTA)
 * 6.  Lead Magnet Section
 * 7.  Guide Mockup
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. HERO
   ───────────────────────────────────────────────────────────────────────────── */

.jc-hero {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    min-height:            calc(100vh - var(--jc-nav-h));
    background-color:      var(--jc-green);
    overflow:              hidden;
    position:              relative;
}

/* Decorative ring behind content */
.jc-hero::before {
    content:       '';
    position:      absolute;
    top:           -120px;
    left:          -120px;
    width:         500px;
    height:        500px;
    border-radius: 50%;
    border:        1px solid rgba(184, 134, 27, 0.1);
    pointer-events: none;
}

/* ── Content column ── */
.jc-hero__content {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         clamp(3rem, 6vw, 5rem) var(--jc-gutter) clamp(3rem, 6vw, 5rem) var(--jc-gutter);
    padding-top:     calc( var(--jc-nav-h) + clamp(3rem, 6vw, 5rem) );
    position:        relative;
    z-index:         1;
}

.jc-eyebrow--light {
    color: var(--jc-gold-light);
}

.jc-eyebrow--light::before {
    background-color: var(--jc-gold-light);
}

.jc-hero__title {
    font-family:   var(--jc-serif);
    font-size:     clamp(2.8rem, 5.5vw, 5.5rem);
    font-weight:   300;
    line-height:   var(--jc-lh-tight);
    color:         var(--jc-white);
    margin-bottom: var(--jc-sp-5);
}

.jc-hero__title em {
    font-style: italic;
    color:      var(--jc-gold-light);
}

.jc-hero__sub {
    font-size:     clamp(0.95rem, 1.4vw, 1.1rem);
    color:         rgba(255, 255, 255, 0.65);
    line-height:   var(--jc-lh-relaxed);
    max-width:     460px;
    margin-bottom: var(--jc-sp-4);
}

.jc-hero__founder {
    font-size:     var(--jc-text-xs);
    font-weight:   400;
    letter-spacing: var(--jc-ls-wider);
    text-transform: uppercase;
    color:         rgba(255, 255, 255, 0.42);
    margin-bottom: var(--jc-sp-8);
}

.jc-hero__actions {
    display:   flex;
    gap:       var(--jc-sp-4);
    flex-wrap: wrap;
}

/* ── Image column ── */
.jc-hero__image {
    position:   relative;
    background: linear-gradient( 160deg, rgba(42, 92, 64, 0.4) 0%, rgba(28, 61, 43, 0.1) 100% ),
                var(--jc-green-mid);
    display:    flex;
    align-items:     flex-end;
    justify-content: center;
    overflow:   hidden;
}

.jc-hero__photo {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: top center;
}

/* Placeholder shown until Joy's photo is uploaded */
.jc-hero__photo-placeholder {
    width:           100%;
    height:          100%;
    min-height:      400px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient( 160deg, #2A5C40 0%, #1C3D2B 100% );
}

.jc-hero__photo-placeholder-inner {
    width:            120px;
    height:           120px;
    border-radius:    50%;
    background:       rgba(255, 255, 255, 0.08);
    border:           1px solid rgba(255, 255, 255, 0.15);
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.jc-hero__photo-initials {
    font-family:   var(--jc-serif);
    font-size:     2.5rem;
    font-weight:   300;
    color:         rgba(255, 255, 255, 0.5);
}

/* Floating credential badge */
.jc-hero__photo-badge {
    position:      absolute;
    bottom:        2.5rem;
    left:          -1.5rem;
    background:    var(--jc-white);
    border-radius: var(--jc-radius);
    padding:       var(--jc-sp-4) var(--jc-sp-5);
    box-shadow:    var(--jc-shadow-lg);
    min-width:     220px;
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-1);
}

.jc-hero__photo-badge-name {
    font-family:  var(--jc-serif);
    font-size:    var(--jc-text-lg);
    font-weight:  500;
    color:        var(--jc-green);
    line-height:  1.2;
}

.jc-hero__photo-badge-cred {
    font-size:      var(--jc-text-xs);
    color:          var(--jc-muted);
    letter-spacing: var(--jc-ls-wide);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. TRUST BAR — homepage additions
   ───────────────────────────────────────────────────────────────────────────── */

.jc-trust-bar__divider {
    width:            1px;
    height:           16px;
    background-color: var(--jc-border);
    flex-shrink:      0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. PATHWAYS GRID — 4 columns
   ───────────────────────────────────────────────────────────────────────────── */

.jc-pathways-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--jc-sp-5);
}

/* Faith & Encouragement card gets a warm gold tint */
.jc-pathway-card--faith {
    background-color: var(--jc-gold-pale);
    border-color:     rgba(184, 134, 27, 0.18);
}

.jc-pathway-card--faith .jc-pathway-card__icon {
    background-color: rgba(184, 134, 27, 0.12);
    color:            var(--jc-gold);
}

.jc-pathway-card--faith .jc-pathway-card__title {
    color: var(--jc-green);
}

.jc-pathway-card--faith:hover {
    border-color: var(--jc-gold);
}

@media (max-width: 1024px) {
    .jc-pathways-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .jc-pathways-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. ABOUT TEASER
   ───────────────────────────────────────────────────────────────────────────── */

.jc-about-teaser__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(3rem, 6vw, 6rem);
    align-items:           center;
}

.jc-about-teaser__body {
    font-size:     var(--jc-text-md);
    color:         var(--jc-muted);
    line-height:   var(--jc-lh-relaxed);
    margin-bottom: var(--jc-sp-6);
    max-width:     500px;
}

.jc-about-teaser__credentials {
    display:        flex;
    flex-direction: column;
    gap:            var(--jc-sp-3);
    margin-bottom:  var(--jc-sp-8);
}

.jc-about-teaser__cred {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-3);
    font-size:   var(--jc-text-sm);
    color:       var(--jc-ink);
}

.jc-about-teaser__cred svg {
    color:      var(--jc-gold);
    flex-shrink: 0;
}

/* Image column */
.jc-about-teaser__image-frame {
    position: relative;
}

.jc-about-teaser__image-placeholder {
    aspect-ratio:    4 / 5;
    background:      linear-gradient( 160deg, var(--jc-green-pale), var(--jc-cream-dark) );
    border-radius:   var(--jc-radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          1px solid var(--jc-border);
}

.jc-about-teaser__image-placeholder span {
    font-size:  var(--jc-text-sm);
    color:      var(--jc-subtle);
    font-style: italic;
}

/* Floating quote card */
.jc-about-teaser__quote-card {
    position:      absolute;
    bottom:        -2rem;
    left:          -2rem;
    background:    var(--jc-green);
    border-radius: var(--jc-radius);
    padding:       var(--jc-sp-5) var(--jc-sp-6);
    max-width:     320px;
    box-shadow:    var(--jc-shadow-lg);
}

.jc-about-teaser__quote {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-md);
    font-style:    italic;
    font-weight:   300;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-snug);
    margin-bottom: var(--jc-sp-3);
}

.jc-about-teaser__quote-attr {
    font-size:      var(--jc-text-xs);
    color:          var(--jc-gold-light);
    letter-spacing: var(--jc-ls-wide);
}

@media (max-width: 768px) {
    .jc-about-teaser__grid {
        grid-template-columns: 1fr;
    }

    .jc-about-teaser__image {
        order: -1;
    }

    .jc-about-teaser__quote-card {
        position: relative;
        bottom:   auto;
        left:     auto;
        margin-top: var(--jc-sp-4);
        max-width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. SECTION FOOTER — "View all" link row
   ───────────────────────────────────────────────────────────────────────────── */

.jc-section-footer {
    display:         flex;
    justify-content: center;
    margin-top:      var(--jc-sp-10);
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. LEAD MAGNET SECTION
   ───────────────────────────────────────────────────────────────────────────── */

.jc-lead-magnet-section {
    position:  relative;
    overflow:  hidden;
}

/* Decorative rings */
.jc-lead-magnet-section::before,
.jc-lead-magnet-section::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    pointer-events: none;
}

.jc-lead-magnet-section::before {
    top:    -100px;
    right:  -100px;
    width:  400px;
    height: 400px;
    border: 1px solid rgba(184, 134, 27, 0.12);
}

.jc-lead-magnet-section::after {
    top:    -60px;
    right:  -60px;
    width:  260px;
    height: 260px;
    border: 1px solid rgba(184, 134, 27, 0.08);
}

.jc-lead-magnet-section__grid {
    display:               grid;
    grid-template-columns: 1.2fr 1fr;
    gap:                   clamp(3rem, 6vw, 6rem);
    align-items:           center;
}

.jc-lead-magnet-section__title {
    font-family:   var(--jc-serif);
    font-size:     clamp(2rem, 4vw, 3.2rem);
    font-weight:   300;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-tight);
    margin-bottom: var(--jc-sp-5);
}

.jc-lead-magnet-section__title em {
    font-style: italic;
    color:      var(--jc-gold-light);
}

.jc-lead-magnet-section__desc {
    font-size:     var(--jc-text-base);
    color:         rgba(255, 255, 255, 0.62);
    line-height:   var(--jc-lh-relaxed);
    max-width:     480px;
    margin-bottom: var(--jc-sp-6);
}

.jc-lead-magnet-section__list {
    list-style:    none;
    margin-bottom: var(--jc-sp-8);
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-3);
}

.jc-lead-magnet-section__list li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--jc-sp-3);
    font-size:   var(--jc-text-sm);
    color:       rgba(255, 255, 255, 0.72);
    line-height: var(--jc-lh-relaxed);
}

.jc-lead-magnet-section__list li::before {
    content:        '✓';
    color:          var(--jc-gold-light);
    font-weight:    500;
    flex-shrink:    0;
    margin-top:     1px;
}

.jc-lead-magnet-section__privacy {
    margin-top:  var(--jc-sp-3);
    font-size:   var(--jc-text-xs);
    color:       rgba(255, 255, 255, 0.3);
    letter-spacing: var(--jc-ls-wide);
}

@media (max-width: 768px) {
    .jc-lead-magnet-section__grid {
        grid-template-columns: 1fr;
    }

    .jc-lead-magnet-section__mockup {
        order: -1;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. GUIDE MOCKUP — decorative book/PDF cover
   ───────────────────────────────────────────────────────────────────────────── */

.jc-guide-mockup {
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         var(--jc-sp-6);
}

.jc-guide-mockup__cover {
    background:    var(--jc-cream);
    border-radius: var(--jc-radius-md);
    padding:       var(--jc-sp-8) var(--jc-sp-6);
    max-width:     280px;
    width:         100%;
    box-shadow:    var(--jc-shadow-xl),
                   -8px 8px 0px rgba(184, 134, 27, 0.25);
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-4);
    position:      relative;
}

/* Spine effect */
.jc-guide-mockup__cover::before {
    content:          '';
    position:         absolute;
    left:             -6px;
    top:              4px;
    bottom:           -4px;
    width:            10px;
    background:       var(--jc-green);
    border-radius:    var(--jc-radius-xs) 0 0 var(--jc-radius-xs);
    box-shadow:       -2px 2px 8px rgba(0, 0, 0, 0.2);
}

.jc-guide-mockup__eyebrow {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-widest);
    text-transform: uppercase;
    color:          var(--jc-gold);
}

.jc-guide-mockup__title {
    font-family:  var(--jc-serif);
    font-size:    var(--jc-text-xl);
    font-weight:  400;
    color:        var(--jc-green);
    line-height:  var(--jc-lh-snug);
}

.jc-guide-mockup__author {
    font-size:      var(--jc-text-xs);
    color:          var(--jc-muted);
    letter-spacing: var(--jc-ls-wide);
    margin-top:     auto;
    padding-top:    var(--jc-sp-4);
    border-top:     1px solid var(--jc-border);
}


/* ─── Responsive: hero stacks on mobile ─────────────────────────────────── */

@media (max-width: 768px) {
    .jc-hero {
        grid-template-columns: 1fr;
        min-height:            auto;
    }

    .jc-hero__content {
        padding-top: calc( var(--jc-nav-h) + var(--jc-sp-10) );
        padding-bottom: var(--jc-sp-10);
    }

    .jc-hero__image {
        min-height:  320px;
        order:       -1;
    }

    .jc-hero__photo-badge {
        left:        1rem;
        bottom:      1rem;
        min-width:   auto;
    }

    .jc-hero__actions {
        flex-direction: column;
    }

    .jc-hero__actions .jc-btn {
        width:      100%;
        text-align: center;
        justify-content: center;
    }
}