/* ============================================
   CJ Home 2605 — Prototype E styles
   Page template: page-cj-home-2605.php
   Block styles: welcome (variants), crisis-stats, gap-visual,
   founder-word, lead-callout, versus, outcome-cards, respond-banner.
   Tokens (--primary, --secondary, etc.) come from theme.css :root.
   ============================================ */

/* ============================================
   BUTTONS — additions not in theme.css
   ============================================ */
.btn-outline-dark {
    background: transparent;
    color: var(--text);
    border-color: var(--text);
}
.btn-outline-dark:hover {
    background: var(--text);
    color: var(--bg);
}

/* ============================================
   WELCOME — two-column & centered variants
   ============================================ */
.welcome--centered {
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
}
.welcome--centered .eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
    display: block;
}
.welcome--centered h2 {
    font-size: 2.6rem;
    font-weight: 400;
    margin-bottom: 14px;
    line-height: 1.15;
}
.welcome--centered h2 em {
    font-style: italic;
    color: var(--primary-dk, #9A5258);
}
.welcome--centered p {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
}

.welcome--two-column {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 36px;
    align-items: center;
    text-align: left;
    margin-bottom: 56px;
}
.welcome--two-column .welcome-text .eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 14px;
    display: block;
}
.welcome--two-column .welcome-text h2 {
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 16px;
    text-align: left;
}
.welcome--two-column .welcome-text p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text);
    margin: 0 0 12px;
    max-width: none;
}
.welcome--two-column .welcome-sidebar {
    background: var(--bg);
    border-left: 3px solid var(--primary);
    padding: 24px 28px;
    border-radius: 0 16px 16px 0;
    font-family: 'Cormorant Garamond', serif;
}
.welcome--two-column .welcome-sidebar blockquote {
    font-style: italic;
    font-size: 1.18rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 14px;
}
.welcome--two-column .welcome-sidebar-attribution {
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.welcome--two-column .welcome-sidebar-attribution strong {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}

/* ============================================
   CRISIS STATS — dark gradient panel
   ============================================ */
.crisis-strip {
    background: linear-gradient(135deg, var(--text) 0%, #3D302C 100%);
    color: var(--bg);
    padding: 48px 40px;
    border-radius: 20px;
    margin-bottom: 56px;
}
.crisis-strip .crisis-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 14px;
    text-align: center;
}
.crisis-strip h2 {
    color: var(--bg);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 32px;
}
.crisis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.crisis-stat { text-align: center; padding: 0 8px; }
.crisis-stat .num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}
.crisis-stat--primary   .num { color: #E9A0A6; }
.crisis-stat--secondary .num { color: #B8CCAF; }
.crisis-stat--accent    .num { color: #D5BFAF; }
.crisis-stat--muted     .num { color: #C9B8AC; }
.crisis-stat .label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(253,248,240,0.85);
}
.crisis-source {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(253,248,240,0.5);
    margin-top: 24px;
    letter-spacing: 0.04em;
}

/* ============================================
   GAP VISUAL — photographic split panel
   ============================================ */
.gap-visual {
    position: relative;
    width: 100%;
    min-height: 440px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 64px;
    isolation: isolate;
}
.gap-visual .gap-image { position: absolute; inset: 0; z-index: 0; }
.gap-visual .gap-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}
.gap-visual .gap-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.gap-visual .gap-overlay--left {
    left: 0;
    right: 50%;
    background: linear-gradient(90deg, rgba(44,35,33,0.92) 0%, rgba(44,35,33,0.84) 65%, rgba(44,35,33,0.62) 100%);
}
.gap-visual .gap-overlay--right {
    left: 50%;
    right: 0;
    background: linear-gradient(90deg, rgba(253,248,240,0.55) 0%, rgba(253,248,240,0.86) 35%, rgba(253,248,240,0.96) 100%);
}
.gap-visual .gap-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 440px;
}
.gap-visual .gap-pane {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gap-visual .gap-pane--offered { color: rgba(253,248,240,0.95); }
.gap-visual .gap-pane--needed  { color: var(--text); }
.gap-visual .gap-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}
.gap-visual .gap-pane--offered .gap-eyebrow { color: rgba(143,166,138,0.85); }
.gap-visual .gap-pane--needed  .gap-eyebrow { color: var(--primary); }
.gap-visual .gap-pane h3 {
    font-size: 1.6rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    margin-bottom: 18px;
}
.gap-visual .gap-pane--offered h3 { color: rgba(253,248,240,0.95); }
.gap-visual .gap-pane--needed  h3 { color: var(--text); }
.gap-visual .gap-pane ul { list-style: none; padding: 0; margin: 0; }
.gap-visual .gap-pane li {
    padding: 7px 0 7px 24px;
    position: relative;
    font-size: 0.98rem;
    line-height: 1.55;
}
.gap-visual .gap-pane--offered li { color: rgba(253,248,240,0.85); }
.gap-visual .gap-pane--offered li::before {
    content: '·';
    position: absolute;
    left: 4px;
    top: -2px;
    color: rgba(143,166,138,0.7);
    font-size: 1.6rem;
}
.gap-visual .gap-pane--needed li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--primary);
    font-size: 0.85rem;
}
.gap-visual .gap-divider {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
}
.gap-visual .gap-divider .chevron {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface, #FFFFFF);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 24px rgba(44,35,33,0.35), 0 0 0 4px rgba(253,248,240,0.6);
}

/* ============================================
   FOUNDER'S WORD — full-width pull quote
   ============================================ */
.duo { margin-bottom: 64px; }
.duo .duo-pane {
    background: var(--bg);
    border-radius: 0 16px 16px 0;
    padding: 36px 44px;
    position: relative;
}
.duo .duo-pane--quote { border-left: 3px solid var(--primary); }
.duo .duo-pane .duo-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
    display: block;
}
.duo .duo-pane blockquote {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--text);
    max-width: 880px;
}
.duo .duo-pane .attribution {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.duo .duo-pane .attribution strong {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text);
    display: inline-block;
    margin-right: 6px;
}

/* ============================================
   LEAD CALLOUT — drop-cap intro + gradient pull quote
   ============================================ */
.families-lead {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 56px;
}
.families-lead .lead-text p {
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 14px;
    max-width: none;
}
.families-lead .lead-text p:first-child::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 4.2rem;
    float: left;
    line-height: 0.9;
    padding: 6px 12px 0 0;
    color: var(--primary);
}
.families-lead .lead-text .inline-stat {
    color: var(--primary-dk, #9A5258);
    font-weight: 700;
}
.harvard-callout {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    padding: 32px 32px 28px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(181,100,106,0.22);
    overflow: hidden;
}
.harvard-callout::before {
    content: '"';
    position: absolute;
    top: -10px;
    right: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 9rem;
    line-height: 1;
    color: rgba(253,248,240,0.18);
    font-weight: 700;
    pointer-events: none;
}
.harvard-callout .source-tag {
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(253,248,240,0.85);
    margin-bottom: 12px;
    display: block;
}
.harvard-callout blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.45;
    color: #fff;
    position: relative;
    z-index: 1;
}
.harvard-callout .source-credit {
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    color: rgba(253,248,240,0.78);
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(253,248,240,0.25);
}

/* ============================================
   VERSUS — comparison + closer
   ============================================ */
.versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    margin-bottom: 40px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 44px rgba(44,35,33,0.10);
}
.versus-card {
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
}
.versus-card--sports  { background: var(--bg); }
.versus-card--serving { background: var(--text); color: var(--bg); }
.versus-card .versus-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}
.versus-card--sports  .versus-eyebrow { color: var(--accent); }
.versus-card--serving .versus-eyebrow { color: #B8CCAF; }
.versus-card h4 {
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 22px;
}
.versus-card--serving h4 { color: var(--bg); }
.versus-card ul { list-style: none; padding: 0; margin: 0; }
.versus-card li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    border-bottom: 1px dashed rgba(168,144,128,0.25);
}
.versus-card li:last-child { border-bottom: none; }
.versus-card--sports li::before {
    content: '·';
    position: absolute;
    left: 8px;
    top: 1px;
    color: var(--accent);
    font-size: 1.8rem;
    line-height: 1;
}
.versus-card--serving li {
    border-bottom-color: rgba(184,204,175,0.18);
    color: rgba(253,248,240,0.92);
}
.versus-card--serving li::before {
    content: '✦';
    position: absolute;
    left: 4px;
    top: 14px;
    color: #B8CCAF;
    font-size: 0.85rem;
}
.versus-card li strong {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.08rem;
}
.versus-card--sports  li strong { color: var(--text); }
.versus-card--serving li strong { color: var(--bg); }

.versus-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface, #FFFFFF);
    width: 72px;
}
.versus-divider::before, .versus-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    background: var(--border);
    transform: translateX(-50%);
}
.versus-divider::before { top: 0; bottom: calc(50% + 30px); }
.versus-divider::after  { top: calc(50% + 30px); bottom: 0; }
.versus-divider .vs-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.3rem;
    box-shadow: 0 6px 22px rgba(181,100,106,0.35);
    position: relative;
    z-index: 1;
}

.families-closer {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 56px;
    padding: 0 24px;
}
.families-closer p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.85rem;
    line-height: 1.4;
    color: var(--text);
    max-width: none;
}
.families-closer p .accent {
    color: var(--primary-dk, #9A5258);
    font-weight: 600;
    display: block;
    margin-top: 6px;
}

/* ============================================
   OUTCOME CARDS — eyebrow + heading + 4 icon cards
   ============================================ */
.outcome-section { margin-bottom: 48px; }
.outcome-eyebrow {
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
    display: block;
}
.outcome-heading {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text);
    margin-bottom: 28px;
}
.outcome-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.outcome-card {
    background: var(--bg);
    border-radius: 14px;
    padding: 26px 22px 24px;
    text-align: center;
    border-top: 3px solid var(--primary);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.outcome-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(44,35,33,0.10);
}
.outcome-card .symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--surface, #FFFFFF);
    color: var(--primary);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(181,100,106,0.15);
}
.outcome-card h5 {
    font-size: 1.15rem;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.25;
}
.outcome-card p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.55;
    max-width: none;
}

/* ============================================
   RESPOND BANNER — gradient panel with down-fade
   ============================================ */
.respond-top {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    padding: 56px 48px 44px;
    text-align: center;
    position: relative;
    border-radius: 20px 20px 0 0;
    margin-top: 32px;
    box-shadow: 0 12px 40px rgba(44,35,33,0.08);
}
.respond-top .eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(253,248,240,0.85);
    margin-bottom: 12px;
    display: block;
}
.respond-top h2 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 14px;
}
.respond-top p {
    color: rgba(253,248,240,0.94);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 12px;
}
.respond-top .leadin {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(253,248,240,0.95);
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* When the Respond banner is immediately followed by a card-row, treat them
   as one continuous container: drop the cards onto a surface that visually
   joins the banner above. */
.respond-top + .card-row {
    background: var(--surface, #FFFFFF);
    border-radius: 0 0 20px 20px;
    padding: 32px 32px 40px;
    margin-top: 0;
    box-shadow: 0 12px 40px rgba(44,35,33,0.08);
}

/* ============================================
   FAMILIES SECTION HEADER (welcome--centered eyebrow color override)
   ============================================ */
/* Already handled in .welcome--centered. The Families header reuses welcome
   with eyebrow + centered variant; the global rose color from .welcome--centered
   .eyebrow above gives it the same look as Prototype E's families-header. */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1000px) {
    .crisis-grid       { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .welcome--two-column { grid-template-columns: 1fr; }
    .families-lead     { grid-template-columns: 1fr; }
    .versus            { grid-template-columns: 1fr; }
    .versus-divider    { width: 100%; height: 72px; }
    .versus-divider::before { top: 0; bottom: calc(50% + 30px); left: 50%; width: 1px; height: auto; }
    .versus-divider::after  { top: calc(50% + 30px); bottom: 0; left: 50%; width: 1px; height: auto; }
    .outcome-row       { grid-template-columns: repeat(2, 1fr); }
    .gap-visual .gap-content     { grid-template-columns: 1fr; min-height: 0; }
    .gap-visual .gap-overlay--left  { left: 0; right: 0; top: 0; bottom: 50%; background: linear-gradient(180deg, rgba(44,35,33,0.92) 0%, rgba(44,35,33,0.86) 100%); }
    .gap-visual .gap-overlay--right { left: 0; right: 0; top: 50%; bottom: 0; background: linear-gradient(180deg, rgba(253,248,240,0.6) 0%, rgba(253,248,240,0.96) 100%); }
    .gap-visual .gap-divider     { width: 100%; padding: 8px 0; transform: rotate(90deg); }
}
@media (max-width: 900px) {
    .crisis-strip      { padding: 36px 24px; }
    .gap-visual .gap-pane { padding: 36px 28px; }
    .duo .duo-pane     { padding: 28px 28px; }
    .welcome--centered h2 { font-size: 2.1rem; }
    .families-closer p { font-size: 1.5rem; }
    .respond-top       { padding: 48px 28px 36px; }
}
@media (max-width: 768px) {
    .crisis-grid       { grid-template-columns: 1fr 1fr; }
    .crisis-stat .num  { font-size: 2.6rem; }
    .outcome-row       { grid-template-columns: 1fr; }
    .versus-card       { padding: 32px 24px; }
    .families-closer p { font-size: 1.35rem; }
    .respond-top h2    { font-size: 1.8rem; }
}
@media (max-width: 480px) {
    .crisis-grid       { grid-template-columns: 1fr; }
}