/* Homepage category scenes; colors follow the active brand theme. */
.series-showcase {
    padding: 64px 0;
    background: #fff;
    scroll-margin-top: 90px;
}

.series-showcase > .container {
    width: 100%;
    max-width: 1440px;
    padding: 0 24px;
}

.series-showcase__heading {
    max-width: 900px;
    margin: 0 auto 48px;
    text-align: center;
}

.series-showcase__eyebrow {
    margin: 0 0 12px;
    color: var(--bs-primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .16em;
}

.series-showcase__heading h2 {
    margin: 0 0 16px;
    color: var(--text-dark, #0f172a);
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.025em;
}

.series-showcase__description {
    margin: 0;
    color: #64748b;
    font-size: 18px;
    line-height: 1.7;
}

.series-showcase__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px 24px;
}

.series-card {
    display: block;
    min-width: 0;
    grid-column: span 3;
    color: var(--text-dark, #0f172a);
    text-decoration: none;
    border-radius: 8px;
}

.series-card:nth-child(n + 5) {
    grid-column: span 4;
}

/* Reuse the project's existing two-corner picture frame. */
.series-card .project-img {
    isolation: isolate;
    padding: 12px;
    height: clamp(248px, 22vw, 320px);
}

.series-card .project-img::before,
.series-card .project-img::after {
    display: block;
    width: 50%;
    height: 56%;
    opacity: 1;
    border-radius: 8px;
}

.series-card .project-img::before { background: var(--bs-secondary) !important; }
.series-card .project-img::after { background: var(--bs-primary) !important; }

.series-card picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.series-card .project-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .25s ease;
}

.series-card__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 12px 0;
}

.series-card__caption h3 {
    margin: 0;
    color: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.45;
}

.series-card__caption .bi {
    flex: 0 0 auto;
    color: var(--bs-primary);
    font-size: 24px;
    line-height: 1;
}

.series-card:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 5px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .series-card:hover .project-img img { transform: scale(1.025); }
    .series-card:hover { color: var(--bs-primary); }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .series-card,
    .series-card:nth-child(n + 5) { grid-column: span 4; }
    .series-card:last-child { grid-column: 5 / span 4; }
    .series-card__caption { gap: 14px; }
    .series-card__caption h3 { font-size: 19px; }
}

@media (max-width: 991.98px) {
    .mobile-mentor-lumia-app .series-showcase {
        padding: 40px 0;
        scroll-margin-top: 80px;
    }
    .series-showcase__heading { margin-bottom: 28px; }
    .series-showcase__eyebrow { font-size: 12px; letter-spacing: .12em; }
    .series-showcase__heading h2 { font-size: clamp(24px, 4vw, 34px); }
    .series-showcase__description { font-size: 14px; }
    .series-showcase__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
    .series-card,
    .series-card:nth-child(n + 5) { grid-column: span 2; }
    .series-card:last-child { grid-column: 2 / span 2; }
    /* The old mobile project rules force a 110px thumbnail; keep this scene full-height. */
    .series-card .project-img { height: auto; aspect-ratio: 4 / 3; padding: 10px !important; }
    .series-card .project-img::before,
    .series-card .project-img::after { display: block !important; }
    .series-card .project-img img { height: 100% !important; }
    .series-card picture { height: 100%; }
    .series-card__caption { justify-content: space-between; gap: 12px; padding: 10px 10px 0; }
    .series-card__caption h3 { font-size: 18px; }
    .series-card__caption .bi { font-size: 22px; }
}

@media (max-width: 575.98px) {
    .series-showcase__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .series-card,
    .series-card:nth-child(n + 5),
    .series-card:last-child { grid-column: auto; }
    .series-showcase__heading h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .series-card .project-img img { transition: none; }
}