/* Penyesuaian responsif dimuat terakhir agar aturan lama tidak bertabrakan. */
img {
    max-width: 100%;
}

/* Halaman publik: cover portrait 600 × 900, ditampilkan proporsional. */
.event-page .event-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px;
    gap: clamp(24px, 5vw, 72px);
}

.event-page .event-cover {
    padding: 0;
    width: min(100%, 600px);
    margin: 0 auto;
    background: #eceae5;
    aspect-ratio: 600 / 900;
}

.event-page .event-cover img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: 600 / 900;
    object-fit: cover;
}

.event-page .event-intro {
    min-width: 0;
    padding: 32px 0;
    overflow-wrap: anywhere;
}

.event-page .event-intro h1 {
    font-size: clamp(32px, 5vw, 72px);
}

#youlook-events {
    padding-left: 24px;
    padding-right: 24px;
}

#youlook-events .events-grid {
    grid-template-columns: repeat(3, minmax(0, 336px));
    gap: 48px 28px;
}

#youlook-events .event-item,
#youlook-events .event-picture,
#youlook-events .event-picture img {
    width: 100%;
    min-width: 0;
}

#youlook-events .event-picture,
#youlook-events .event-picture img {
    height: auto;
    aspect-ratio: 600 / 900;
}

#youlook-events .event-text {
    overflow-wrap: anywhere;
}

.public-body .photo-grid {
    grid-template-columns: repeat(5, minmax(0, 278px)) !important;
    justify-content: space-between !important;
    gap: 40px 24px !important;
    align-items: start;
}

.public-body .photo-grid figure,
.public-body .photo-grid figure.wide,
.public-body .photo-grid figure > img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 278px !important;
}

.public-header nav a.instagram-icon {
    display: inline-flex;
}

.public-body .gallery-heading {
    gap: 20px;
    flex-wrap: wrap;
}

.public-body .gallery-heading h2 {
    overflow-wrap: anywhere;
}

/* Struktur admin: sidebar tetap di kiri; semua konten berada di admin-main. */
.admin-body .admin-layout {
    display: block;
    min-height: 100vh;
}

.admin-body .sidebar {
    width: 250px;
    height: 100dvh;
    overflow-y: auto;
    padding: 28px 18px;
}

.admin-body .admin-main {
    min-width: 0;
    margin-left: 250px;
}

.admin-body .admin-top {
    height: auto;
    min-height: 100px;
    padding: 22px 32px;
}

.admin-body .admin-top h1 {
    font-size: clamp(26px, 3vw, 38px);
    overflow-wrap: anywhere;
}

.admin-body .admin-content {
    min-width: 0;
    width: 100%;
    max-width: 1500px;
    padding: 28px 32px 48px;
}

.admin-body .panel,
.admin-body .panel-head > div,
.admin-body .stats-grid > *,
.admin-body .event-cell,
.admin-body .event-cell > div,
.admin-body .recent-list article > div,
.admin-body .event-information,
.admin-body .cover-upload-card {
    min-width: 0;
}

.admin-body .panel-head,
.admin-body .overview-actions,
.admin-body .manager-title,
.admin-body .table-toolbar {
    gap: 16px;
    flex-wrap: wrap;
}

.admin-body .panel-head {
    padding: 22px 24px;
}

.admin-body .panel-head h2,
.admin-body .event-cell strong,
.admin-body .event-cell small,
.admin-body .recent-list strong,
.admin-body .user-chip strong {
    overflow-wrap: anywhere;
}

.admin-body .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-body .stats-grid article {
    min-height: 155px;
    padding: 22px;
}

.admin-body .stats-grid strong {
    font-size: clamp(28px, 3vw, 44px);
}

.admin-body .recent-list article {
    grid-template-columns: 60px minmax(0, 1.5fr) 70px 92px 32px;
    gap: 14px;
    padding: 16px 24px;
}

.admin-body .recent-list img {
    width: 60px;
    height: 75px;
}

.admin-body .event-table {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.admin-body .create-event-grid,
.admin-body .event-edit-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 24px;
    gap: 24px;
}

.admin-body .gallery-upload-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.admin-body .gallery-upload-main,
.admin-body .gallery-monitor {
    min-width: 0;
    padding: 24px;
}

.admin-body .manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 16px;
}

.admin-body .gallery-dropzone,
.admin-body .cover-dropzone {
    max-width: 100%;
}

.admin-body .upload-queue article {
    grid-template-columns: 48px minmax(0, 1fr) 70px;
}

.admin-body .upload-queue strong {
    overflow-wrap: anywhere;
    white-space: normal;
}

.admin-body input,
.admin-body select,
.admin-body button {
    max-width: 100%;
}

.admin-body .team-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
}

.admin-body .form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .public-body .photo-grid {
        grid-template-columns: repeat(4, minmax(0, 278px)) !important;
    }
    .admin-body .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-body .gallery-upload-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .admin-body .gallery-monitor {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 1000px) {
    #youlook-events .events-grid {
        grid-template-columns: repeat(2, minmax(0, 336px));
    }
    .admin-body .create-event-grid,
    .admin-body .event-edit-grid,
    .admin-body .team-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .admin-body .recent-list article {
        grid-template-columns: 50px minmax(0, 1fr) 32px;
    }
    .admin-body .recent-list article > span,
    .admin-body .recent-list article > .badge {
        display: none;
    }
    .admin-body .recent-list img {
        width: 50px;
        height: 65px;
    }
}

@media (max-width: 900px) {
    .public-body .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 278px)) !important;
    }
    .admin-body .sidebar {
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .admin-body .sidebar.open {
        transform: translateX(0);
    }
    .admin-body .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(0, 0, 0, 0.45);
    }
    .admin-body .sidebar.open + .sidebar-overlay {
        display: block;
    }
    .admin-body .admin-main {
        margin-left: 0;
    }
    .admin-body .menu-toggle,
    .admin-body .close-menu {
        display: block;
        border: 0;
        background: transparent;
        min-width: 40px;
        min-height: 40px;
        font-size: 24px;
    }
    .admin-body .menu-toggle {
        margin-right: 12px;
    }
    .admin-body .close-menu {
        position: absolute;
        top: 14px;
        right: 12px;
        color: white;
    }
}

@media (max-width: 700px) {
    .public-header {
        padding: 0 16px;
    }
    .public-header nav {
        gap: 12px;
    }
    .public-header .search-toggle {
        display: none;
    }
    .public-hero h1 {
        font-size: clamp(40px, 10vw, 65px);
    }
    .public-hero .contact-line {
        flex-wrap: wrap;
    }
    #youlook-events {
        padding: 0 18px 70px;
    }
    #youlook-events .events-grid {
        grid-template-columns: minmax(0, 336px);
        justify-content: center;
        row-gap: 32px;
    }
    .event-page .event-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 18px;
        gap: 24px;
    }
    .event-page .event-cover {
        max-width: 400px;
    }
    .event-page .event-intro {
        padding: 0;
    }
    .public-body .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 278px)) !important;
        gap: 20px 10px !important;
    }
    .public-body .photo-grid figcaption {
        opacity: 1;
    }
    .public-footer {
        flex-wrap: wrap;
        gap: 12px;
    }
    .admin-body .admin-top {
        min-height: 88px;
        padding: 16px;
    }
    .admin-body .admin-content {
        padding: 20px 16px 40px;
    }
    .admin-body .panel-head,
    .admin-body .create-event-grid,
    .admin-body .event-edit-grid,
    .admin-body .gallery-upload-main,
    .admin-body .gallery-monitor {
        padding: 18px;
    }
    .admin-body .stats-grid article {
        padding: 16px;
        min-height: 140px;
    }
    .admin-body .panel-head h2 {
        font-size: 24px;
    }
    .admin-body .table-header {
        display: none;
    }
    .admin-body .table-row:not(.table-header) {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 18px;
    }
    .admin-body .event-cell,
    .admin-body .row-actions {
        grid-column: 1 / -1;
    }
    .admin-body .table-row:not(.table-header) > span:nth-child(4) {
        grid-column: 1 / -1;
    }
    .admin-body .table-toolbar form {
        width: 100%;
        min-width: 0;
    }
    .admin-body .table-toolbar input {
        flex: 1;
        min-width: 0;
    }
    .admin-body .form-actions .btn {
        flex: 1 1 150px;
        white-space: normal;
        padding: 12px;
    }
    .admin-body .manager-title > strong {
        flex-shrink: 0;
    }
}

@media (max-width: 380px) {
    .public-header .brand-logo {
        --logo-width: 120px;
    }
    .public-header nav {
        gap: 8px;
    }
    .admin-body .stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .admin-body .upload-queue article {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .admin-body .upload-queue article > b {
        grid-column: 2;
    }
}

/* Form login juga mengikuti lebar perangkat. */
.login-page,
.login-panel,
.login-card {
    min-width: 0;
}

@media (max-width: 700px) {
    .login-panel {
        padding: 32px 20px;
    }
    .login-card {
        width: 100%;
        max-width: 410px;
    }
    .login-card input {
        min-width: 0;
    }
}

.login-page {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.login-visual {
    min-width: 0;
    overflow-wrap: anywhere;
}

.login-visual h2 {
    font-size: clamp(32px, 4vw, 58px);
}

@media (max-width: 760px) {
    .login-page {
        grid-template-columns: minmax(0, 1fr);
    }
    .login-visual h2 {
        font-size: 35px;
    }
}