.java-prep-page {
    background: #f7f9fb;
}

.java-hero {
    padding: var(--space-6) 0 var(--space-5);
    color: var(--color-inverse);
    background:
        linear-gradient(135deg, rgba(17, 32, 51, 0.96), rgba(15, 118, 110, 0.9)),
        #172033;
}

.java-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
    gap: var(--space-6);
    align-items: center;
}

.java-hero .breadcrumb ol,
.java-hero .breadcrumb a,
.java-hero .hero-intro,
.java-hero .eyebrow {
    color: rgba(255, 255, 255, 0.82);
}

.java-hero .button-secondary {
    color: var(--color-inverse);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.java-hero-media {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.34);
}

.java-hero-media img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
}

.java-quick-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.java-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.java-topic-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.java-topic-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: var(--shadow-soft);
}

.java-topic-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-2);
    color: var(--color-inverse);
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius);
}

.java-topic-card p {
    color: var(--color-muted);
}

.java-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 0 var(--space-3);
}

.java-meta span {
    padding: 6px 9px;
    color: var(--color-primary-dark);
    font-size: 0.8rem;
    font-weight: 900;
    background: var(--color-surface-muted);
    border-radius: 6px;
}

.java-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary-dark);
    font-weight: 900;
}

.java-card-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.java-path-list {
    display: grid;
    gap: var(--space-2);
    max-width: 900px;
    margin-inline: auto;
}

.java-path-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-3);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
}

.java-path-item span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--color-inverse);
    font-weight: 900;
    background: var(--color-primary);
    border-radius: var(--radius);
}

.java-path-item p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.java-revision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.java-revision-grid a {
    padding: 14px 16px;
    color: var(--color-inverse);
    font-weight: 900;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    transition: transform 180ms ease, background 180ms ease;
}

.java-revision-grid a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
}

.cta-band {
    padding: var(--space-5) 0;
    color: var(--color-inverse);
    background: #172033;
}

.cta-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
}

.cta-content h2 {
    max-width: 760px;
    margin-bottom: 0;
    font-size: 1.82rem;
}

.button-light {
    color: var(--color-text);
    background: var(--color-inverse);
}

.button-light:hover {
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.22);
}

@media (max-width: 980px) {
    .java-hero-grid,
    .cta-content {
        grid-template-columns: 1fr;
    }

    .java-topic-grid,
    .java-quick-nav,
    .java-revision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .java-hero {
        padding-top: var(--space-4);
    }

    .java-topic-grid,
    .java-quick-nav,
    .java-revision-grid {
        grid-template-columns: 1fr;
    }

    .java-path-item {
        grid-template-columns: 1fr;
    }

    .cta-content .button {
        justify-self: start;
    }
}