/* Homepage only (body.home). index.css is shared by many pages, so the homepage's own
   look lives here, overriding it where needed. Colours follow Bootstrap's theme
   variables, so light and dark mode both work. */

.home {
    --home-accent: #4f46e5;
    --home-accent-2: #0e7490;
    --home-radius: 1rem;
}
[data-bs-theme="dark"] .home {
    --home-accent: #a5b4fc;
    --home-accent-2: #67e8f9;
}

.home main { padding-block: 0.5rem 3rem; }

/* ---------- hero ---------- */
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    margin: 1rem 0 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--home-radius);
    background:
        radial-gradient(60rem 30rem at 0% 0%, color-mix(in srgb, var(--home-accent) 12%, transparent), transparent 60%),
        radial-gradient(40rem 25rem at 100% 100%, color-mix(in srgb, var(--home-accent-2) 12%, transparent), transparent 60%),
        var(--bs-tertiary-bg);
}
.home-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--home-accent);
    margin-bottom: 0.6rem;
}
.home-hero h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-bottom: 0.75rem;
    color: var(--bs-emphasis-color);
}
.home-lead {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--bs-body-color);
    max-width: 36rem;
}
.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.1rem 0 1.25rem;
}
.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-emphasis-color);
    background: var(--bs-body-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.home-btn:hover, .home-btn:focus-visible { border-color: var(--bs-emphasis-color); }
.home-btn.primary {
    background: var(--bs-emphasis-color);
    border-color: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
}
.home-btn.primary:hover, .home-btn.primary:focus-visible { opacity: 0.88; }
.home-name {
    font-size: 0.92rem;
    color: var(--bs-secondary-color);
    border-left: 3px solid var(--home-accent-2);
    padding-left: 0.85rem;
    max-width: 34rem;
    margin: 0;
}
.home-name strong { color: var(--bs-body-color); }
.home-art {
    display: block;
    border-radius: calc(var(--home-radius) - 0.25rem);
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    /* The picture's own shape and size (700 × 350): shown whole, never enlarged */
    aspect-ratio: 2 / 1;
    max-width: 700px;
    margin-inline: auto;
}
.home-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.home-art-caption {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-top: 0.5rem;
    text-align: center;
}

/* ---------- featured ---------- */
.home-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bs-emphasis-color);
    margin-bottom: 0.25rem;
}
.home-section-sub {
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}
.home-featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-bottom: 2.75rem;
}
.home-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem 1.3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--home-radius);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-feature:hover, .home-feature:focus-visible {
    transform: translateY(-2px);
    border-color: var(--home-accent);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}
.home-feature-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 0.35rem; }
.home-feature strong { font-size: 1.05rem; color: var(--bs-emphasis-color); }
.home-feature span { font-size: 0.92rem; color: var(--bs-secondary-color); }
.home-feature .home-feature-more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--home-accent);
}
@media (prefers-reduced-motion: reduce) {
    .home-feature, .home-btn { transition: none; }
    .home-feature:hover, .home-feature:focus-visible { transform: none; }
}

/* ---------- topics: a subject sidebar beside the cards ---------- */
/* On a phone the subjects are a row of buttons above the cards */
.home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.home-chips a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background: var(--bs-body-bg);
}
.home-chips a:hover, .home-chips a:focus-visible { border-color: var(--bs-emphasis-color); }
.home-chip-count {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}
/* On wider screens: a sticky sidebar, the subject being read highlighted */
@media (min-width: 992px) {
    .home-topics {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }
    .home-sidebar {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    .home-chips {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.15rem;
        margin: 0;
        padding: 0.5rem;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--home-radius);
        background: var(--bs-tertiary-bg);
    }
    .home-chips a {
        justify-content: space-between;
        border: 0;
        border-radius: 0.6rem;
        padding: 0.55rem 0.75rem;
        font-size: 0.92rem;
        background: transparent;
    }
    .home-chips a:hover, .home-chips a:focus-visible { background: var(--bs-secondary-bg); }
    .home-chips a.active {
        background: var(--bs-body-bg);
        color: var(--bs-emphasis-color);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--home-accent);
    }
}
.home #cards-container { margin-top: 0; }
.home .cards-sections { gap: 2.5rem; }
.home .cards-section { scroll-margin-top: 1rem; }
.home .cards-section > .text-center { text-align: left !important; margin-bottom: 0.75rem !important; }
/* Subject headings between the cards: large and clear, with a rule beneath */
.home .cards-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bs-emphasis-color);
    padding: 0 0 0.5rem;
    margin: 0;
    display: block;
    border-bottom: 2px solid var(--bs-border-color);
}
.home .cards-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
/* A card: its picture fills the left half with the title over it; its links fill the right half */
.home #cards-container .welcome-box {
    min-height: 11.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "art links";
    padding: 0 !important;
    overflow: hidden;
    background: var(--bs-tertiary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--home-radius) !important;
    box-shadow: none;
    backdrop-filter: none;
    cursor: default;
}
.home #cards-container .welcome-box::after { display: none; }
.home #cards-container .welcome-box:hover { transform: none; border-color: var(--home-accent) !important; }
.home #cards-container .welcome-box > div.text-center {
    grid-area: art;
    position: relative;
    margin: 0 !important;
    background: #000;
}
/* styleImageIcons (loadObjects.js) gives these inline sizes, a round frame and a hover zoom; undo them here */
.home #cards-container .image-section-icon {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.home #cards-container .welcome-box h5 {
    grid-area: art;
    align-self: end;
    position: relative;
    z-index: 1;
    text-align: left !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 !important;
    padding: 2.5rem 0.9rem 0.8rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 55%, transparent);
}
.home #cards-container .welcome-box ul {
    grid-area: links;
    align-self: center;
    margin: 0;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
}
.home #cards-container ul li { margin: 0 0 0.35rem; padding: 0; }
.home #cards-container ul li:last-child { margin-bottom: 0; }
.home #cards-container ul li::before { content: none; }
/* index.css gives card links a hover arrow that holds its space even when hidden,
   which indents every link; drop it here (the animated underline stays) */
.home #cards-container ul li a::before { content: none; }
@media (max-width: 768px) {
    .home #cards-container ul li a { padding: 0.25rem 0; }
}

@media (max-width: 767.98px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-art { max-width: min(100%, 700px); }
}