/* =========================================================
Responsive: Small Phones
========================================================= */
@media (max-width: 480px) {
    .page-shell,
    .section-inner,
    .navbar,
    .hero,
    .play-block,
    .detail-section,
    .filters-section,
    .auth-shell,
    .form-card,
    .wide-form-card,
    .page-hero,
    .events-hero,
    .flash-container,
    .backoffice-nav,
    .admin-wide-container {
        width: calc(100% - 24px);
    }

    .main-nav,
    .mobile-backoffice-nav,
    .account-nav {
        grid-template-columns: 1fr;
    }

    .hero h1,
    .page-hero h1,
    .events-hero h1,
    .detail-content h1 {
        font-size: 34px;
    }

    .hero-images {
        --hero-main-w: clamp(236px, 63vw, 300px);
        --hero-small-w: clamp(124px, 33vw, 156px);
    }

    .events-grid,
    .card-grid,
    .about-features,
    .department-grid,
    .registered-events-grid,
    .related-event-grid {
        gap: 10px;
    }

    .dashboard-metric-grid,
    .snapshot-grid,
    .event-details {
        gap: 10px;
    }

    .poster-info,
    .info-card,
    .feature,
    .registered-event-card,
    .related-event-card,
    .snapshot-card,
    .dashboard-metric-card {
        padding: 12px;
    }

    .su-photo-frame img {
        height: 250px;
        object-position: center 58%;
    }


    .poster-info h3,
    .info-card h3,
    .feature h3,
    .registered-event-card h3,
    .related-event-card h3 {
        font-size: 18px;
    }

    .poster-card img {
        aspect-ratio: 1 / 0.78;
    }

    .info-card img,
    .department-card img {
        height: 155px;
    }

    .department-member-photo {
       height: 210px;
        
    }

    .department-member-photo img {
        object-position: center 65%;
    }

    .album-grid .page-actions .primary-button {
        width: 100%;
    }

    .event-neighbor-nav {
        grid-template-columns: 1fr;
    }

    .event-neighbor-card-empty {
        display: none;
    }

    .filters-main-row,
    .admin-filter-panel,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .admin-filter-panel select,
    .admin-filter-panel input,
    .admin-filter-panel button {
        grid-column: 1;
    }

    .profile-identity-header {
        flex-direction: column;
    }

    .auth-brand-panel {
        min-height: 190px;
        padding: 22px;
    }

    .auth-card {
        padding: 20px;
    }
}

/* --- Extra Small Phones --- */

@media (max-width: 430px) {
    .department-grid {
        grid-template-columns: 1fr;
    }

    .department-card img {
        height: clamp(145px, 48vw, 160px);
    }
}


@media (max-width: 360px) {
    .events-grid,
    .card-grid,
    .about-features,
    .department-grid,
    .registered-events-grid,
    .related-event-grid,
    .dashboard-metric-grid,
    .snapshot-grid,
    .event-details {
        grid-template-columns: 1fr;
    }
}