/* Education-specific composition; brand, frames and reveal are reused. */
.screenshot-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #60a5fa #eff6ff;
}
.screenshot-scroll:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}
.screenshot-scroll > img { display: block; width: 100%; height: auto; }
.gallery-stage {
    width: 100%;
    aspect-ratio: 1.55;
    background: #f8fafc;
}
.gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.education-tab {
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.education-tab[aria-selected="true"] {
    color: #fff;
    background: #0f172a;
    border-color: #0f172a;
}
.education-tab:hover { border-color: #60a5fa; }
.extension-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(96, 165, 250, 0.2);
    transition: transform 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
}
.education-contact { min-height: 44px; }
@media (max-width: 639px) {
    /* Dense real screenshots scroll inside their own frame, not the page. */
    .screenshot-scroll > img, .gallery-stage { min-width: 640px; }
}
@media (hover: hover) and (pointer: fine) {
    .extension-card:hover {
        transform: translateY(-4px);
        border-color: rgba(96, 165, 250, 0.55);
        background: rgba(59, 130, 246, 0.1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .education-tab, .extension-card { transition: none; }
    .extension-card:hover { transform: none; }
}