/* Bible Study Center — hub and shared chrome for the study pages.
 * Ported from the original build and re-skinned for the RISV2 dark
 * marble + glass system. Every class hook and the layout structure are
 * unchanged; only surfaces and colors moved to the shared tokens.
 */

.study-hub-body { background: transparent; }

.study-hub {
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(18px, 3vw, 34px);
    padding: clamp(24px, 4vw, 52px) clamp(18px, 5vw, 76px) clamp(28px, 4vw, 54px);
    background: radial-gradient(circle at 76% 12%, rgba(201, 164, 92, .10), transparent 42%);
    color: var(--ink);
}

.study-hub-head { display: grid; gap: 14px; max-width: 1500px; margin: 0 auto; width: 100%; }
.study-hub-head .eyebrow { color: var(--gold); }
.study-hub-head h1 {
    margin: 0;
    font: 400 clamp(2.5rem, 5.2vw, 4.7rem)/.94 var(--serif);
    letter-spacing: -.03em;
    color: #f4efe2;
}
.study-hub-head h1 em { font-weight: 400; font-style: italic; color: var(--gold-pale); }
.study-hub-head > p {
    margin: 0;
    max-width: 62ch;
    font: 1.02rem/1.6 var(--serif);
    color: var(--muted);
}

/* Open a passage without leaving the hub. */
.hub-jump { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 4px; }
.hub-jump label {
    text-transform: uppercase; letter-spacing: .15em;
    font-size: .61rem; font-weight: 900; color: var(--gold);
    width: 100%;
}
.hub-jump input {
    flex: 1 1 260px; min-width: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass);
    color: #f4efe2;
    padding: 13px 15px;
    font: 1rem var(--serif);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hub-jump input::placeholder { color: rgba(255, 255, 255, .38); }
.hub-jump input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.hub-jump button {
    border: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #d8b878, var(--gold) 55%, #a8843e);
    color: #141109;
    padding: 13px 26px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .09em; font-size: .74rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(201, 164, 92, .2);
}
.hub-jump button:hover { box-shadow: 0 14px 36px rgba(201, 164, 92, .35); }

/* The card grid is the whole point: everything reachable without scrolling. */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 12px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    align-content: stretch;
}

.hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    color: #f4efe2;
    text-decoration: none;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), border-color .22s, background .22s;
}
.hub-card:hover, .hub-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(201, 164, 92, .5);
    background: var(--glass-soft);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
    outline: none;
}

/* The photograph leads the card, matching the mission band on the home page.
   A gradient veil at the base lets the cream heading sit on it cleanly. */
.hub-card-art {
    display: block;
    width: 100%;
    height: clamp(120px, 11vw, 168px);
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(.92);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
.hub-card:hover .hub-card-art,
.hub-card:focus-visible .hub-card-art { transform: scale(1.05); filter: saturate(1.05); }
.hub-card:after {
    content: "";
    position: absolute; left: 0; right: 0;
    top: clamp(70px, 7vw, 110px); height: clamp(60px, 5vw, 70px);
    background: linear-gradient(rgba(10, 15, 13, 0), rgba(10, 15, 13, .92));
    pointer-events: none;
}
.hub-card-body {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 7px;
    flex: 1;
    padding: 14px clamp(16px, 1.5vw, 22px) clamp(16px, 1.5vw, 20px);
    margin-top: -14px;
}
.hub-card h2 {
    margin: 0;
    font: 400 clamp(1.3rem, 1.5vw, 1.68rem)/1.12 var(--serif);
    color: #f4efe2;
}
.hub-card p {
    margin: 0;
    font-size: .8rem; line-height: 1.5;
    color: var(--muted);
}
.hub-card-go {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: auto; padding-top: 10px;
    font-size: .66rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--gold);
}
.hub-card-go span { transition: transform .22s; }
.hub-card:hover .hub-card-go span { transform: translateX(5px); }

/* A card whose tool is not populated yet says so instead of pretending. */
.hub-card.is-pending { border-style: dashed; }
.hub-card.is-pending .hub-card-go { color: rgba(255, 255, 255, .42); }

/* ---- shared chrome for the individual study pages ---- */
.study-page-bar {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between;
    padding: 14px clamp(18px, 5vw, 76px);
    background: rgba(10, 15, 13, .6);
    color: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.study-page-bar a.back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold); text-decoration: none;
    font-weight: 900; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .12em;
}
.study-page-bar a.back:hover { color: #f4efe2; }
.study-page-bar strong { font: 400 1.3rem var(--serif); color: #f4efe2; }
.study-page-links { display: flex; flex-wrap: wrap; gap: 6px; }
.study-page-links a {
    padding: 7px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass);
    color: var(--muted);
    text-decoration: none; font-size: .69rem; font-weight: 800;
    transition: color var(--speed), background var(--speed), border-color var(--speed);
}
.study-page-links a:hover, .study-page-links a[aria-current="page"] {
    background: linear-gradient(135deg, #d8b878, var(--gold) 55%, #a8843e);
    color: #141109; border-color: transparent;
}

@media (max-width: 1180px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  {
    .hub-grid { grid-template-columns: 1fr; }
    .study-hub { min-height: 0; }
    /* On a phone the row of eight cannot fit a screen anyway, so shrink the
       photography and let the list read compactly instead of pretending. */
    .hub-card-art { height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-card, .hub-card-go span, .hub-card-art { transition: none; }
    .hub-card:hover, .hub-card:focus-visible { transform: none; }
    .hub-card:hover .hub-card-art, .hub-card:focus-visible .hub-card-art { transform: none; }
}