/* =====================================================
   RESOURCES HERO — "RESOURCES"
   A light-blue banner with a big blue label as the left headline and a
   hardback book on the right whose cover carries the featured "longer reads"
   line. Its own identity comes from faint ruled "journal" lines behind the
   banner and the blue-spined book that reads as a pull-out from the shelf.
===================================================== */

.resources-hero-banner{
    position:relative;
    /* Visible so the book can hang out past the banner's bottom edge. */
    overflow:visible;
    width:100%;
    background:#e9f1fc;
    text-align:left;
    /* Top padding still clears the centred nav pill (kept at the sibling
       78px); the band is made ~half as tall by cutting the bottom padding and
       letting the book's overhang shrink the content row. */
    padding:78px 0 26px;
}

/* Signature motif: faint horizontal ruled lines, like a journal page, in
   place of the hub's dot grid. */
.resources-hero-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:repeating-linear-gradient(
        to bottom,
        transparent 0 33px,
        rgba(47,103,183,.09) 33px 34px);
    pointer-events:none;
}

/* Faint blue glow highlight in the top-right corner. */
.resources-hero-banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 18%,rgba(47,103,183,.07),transparent 34%);
    pointer-events:none;
}

.resources-hero-banner__content{
    position:relative;
    z-index:5;
    /* Mirror the site .container so the banner copy lines up with the grids
       and stats below it. */
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-6);
}

/* Two-column layout: label + copy on the left, book on the right. Top-aligned
   so the book's top meets the heading and its lower half hangs out the bottom. */
.resources-hero-banner__content--split{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(24px,4vw,56px);
    align-items:start;
}

/* The label doubles as the hero's headline on the left, so it goes large. */
.resources-hero-banner__tag{
    color:#2F67B7;
    font-size:clamp(1.9rem,1rem + 3vw,3rem);
    font-weight:700;
    letter-spacing:1px;
    line-height:1.05;
    text-transform:uppercase;
    margin:0 0 14px;
    opacity:0;
    transform:scale(.8);
    animation:resourcesTagPopup .9s ease forwards;
}

@keyframes resourcesTagPopup{
    0%{opacity:0;transform:scale(.8) translateY(20px);}
    70%{transform:scale(1.05) translateY(-3px);}
    100%{opacity:1;transform:scale(1) translateY(0);}
}

.resources-hero-banner__description{
    margin:18px 0 0;
    max-width:520px;
    color:var(--fg-muted,#556);
    font-size:17px;
    line-height:1.6;
}

/* Book on the right — a hardback whose cover carries the "featured read"
   line. The thick blue spine on the left echoes the old card's blue bar, and
   the stacked page edges on the right sell the book. */
.resources-hero-book{
    position:relative;
    z-index:20;
    perspective:1400px;
    /* A large negative bottom margin both shrinks the content row (so the band
       stays short) and lets the book's lower half hang out below the banner. */
    margin-bottom:-160px;
    opacity:0;
    transform:translateX(60px) rotateY(-8deg);
    animation:resourcesBookIn 1s ease .15s forwards;
}

.resources-hero-book__cover{
    position:relative;
    width:clamp(230px,23vw,290px);
    min-height:clamp(280px,28vw,320px);
    background:linear-gradient(135deg,#3f7ccc 0%,#2F67B7 55%,#265aa1 100%);
    color:#fff;
    /* Thick spine on the left, stacked page edges implied on the right. */
    border-radius:6px 12px 12px 6px;
    border-left:10px solid #1f4c8a;
    padding:clamp(28px,2.6vw,38px) clamp(26px,2.4vw,34px);
    box-shadow:
        0 26px 60px rgba(31,54,102,.28),
        inset -14px 0 22px -14px rgba(0,0,0,.35);
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Stacked page edges peeking out on the right side of the book. */
.resources-hero-book__cover::after{
    content:"";
    position:absolute;
    top:6px;
    bottom:6px;
    right:-6px;
    width:8px;
    border-radius:0 4px 4px 0;
    background:repeating-linear-gradient(
        to bottom,
        #fff 0 3px,
        #d7deea 3px 4px);
    box-shadow:2px 0 6px rgba(31,54,102,.2);
}

.resources-hero-book__icon{
    width:44px;
    height:44px;
    color:rgba(255,255,255,.92);
    margin-bottom:6px;
}

.resources-hero-book__label{
    margin:0;
    font-size:clamp(1.3rem,0.9rem + 1.3vw,1.75rem);
    font-weight:800;
    line-height:1.24;
    letter-spacing:0.01em;
    text-transform:uppercase;
}

@keyframes resourcesBookIn{
    to{opacity:1;transform:translateX(0) rotateY(0);}
}

@media (prefers-reduced-motion: reduce){
    .resources-hero-banner__tag,
    .resources-hero-book{
        opacity:1;
        transform:none;
        animation:none;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:860px){
    .resources-hero-banner__content--split{
        grid-template-columns:1fr;
        gap:24px;
        justify-items:start;
    }
    /* Stacked: the book sits below the copy, so it only pokes out a little. */
    .resources-hero-book{
        margin-bottom:-48px;
    }
    .resources-hero-book__cover{
        width:min(290px,100%);
    }
}

@media(max-width:900px){
    .resources-hero-banner{
        /* Wider pill on small screens needs a touch more top clearance. */
        padding:84px 0 26px;
    }
    .resources-hero-banner__description{
        font-size:16px;
    }
}

@media(max-width:640px){
    .resources-hero-banner__description{
        font-size:15px;
    }
}

/* ==========================================================================
   Journal loading state
   Shown only on a cold, direct visit to Resources while the first fetch is in
   flight: a circular ring sweeping around the Lodestar compass-star, under a
   "Deciding…" label — on theme with "what you're deciding right now".
   ========================================================================== */
.journal__loader{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-6);
    min-height:clamp(320px, 42vh, 460px);
    margin-top:clamp(var(--space-8), 4vw, var(--space-10));
    text-align:center;
}
.journal-loader__spinner{
    position:relative;
    width:88px;
    height:88px;
    display:grid;
    place-items:center;
}
/* Outer + inner rings: a mostly-transparent border with one accent side, spun
   at different speeds so it reads as a robotic, orbiting dial. */
.journal-loader__ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px solid color-mix(in srgb, var(--accent) 16%, transparent);
    border-top-color:var(--accent);
    animation:journal-loader-spin 1s linear infinite;
}
.journal-loader__ring--inner{
    inset:14px;
    border-width:2px;
    border-top-color:transparent;
    border-right-color:var(--ls-navy-500);
    animation-duration:1.6s;
    animation-direction:reverse;
}
.journal-loader__star{
    width:26px;
    height:26px;
    color:var(--accent);
    animation:journal-loader-pulse 1.6s ease-in-out infinite;
}
.journal-loader__label{
    display:inline-flex;
    align-items:baseline;
    font-weight:700;
    font-size:var(--text-lg, 1.125rem);
    letter-spacing:var(--tracking-tight, -0.01em);
    color:var(--fg-muted);
}
.journal-loader__dots{
    display:inline-flex;
    width:1.25em;
    margin-left:0.1em;
}
.journal-loader__dots i{
    font-style:normal;
    animation:journal-loader-dot 1.4s ease-in-out infinite;
}
.journal-loader__dots i:nth-child(2){ animation-delay:0.2s; }
.journal-loader__dots i:nth-child(3){ animation-delay:0.4s; }

@keyframes journal-loader-spin{
    to{ transform:rotate(360deg); }
}
@keyframes journal-loader-pulse{
    0%, 100%{ transform:scale(0.82); opacity:0.65; }
    50%{ transform:scale(1); opacity:1; }
}
@keyframes journal-loader-dot{
    0%, 60%, 100%{ opacity:0.2; }
    30%{ opacity:1; }
}

@media(prefers-reduced-motion:reduce){
    .journal-loader__ring,
    .journal-loader__ring--inner,
    .journal-loader__star,
    .journal-loader__dots i{
        animation:none;
    }
    /* Keep a legible static dial when motion is off. */
    .journal-loader__star{ opacity:1; transform:none; }
}