/* ==========================================================================
   Photognome — block layout
   Every page: a .page-wrap holding an optional left-nav block + a main block.
   ========================================================================== */

.page-wrap {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* With a left nav: two-column grid (sidebar + main). */
.page-wrap--with-left {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.block {
    background: var(--pg-white);
    border: 1px solid rgba(91,70,54,0.12);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    padding: 1.5rem;
}
.block--left { position: sticky; top: 1rem; }
.block--left nav { display: flex; flex-direction: column; gap: 0.4rem; }
.block--main { min-width: 0; }

/* Gallery grid (used by the gallery page). */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.media-item { text-align: center; }
.media-item img { width: 200px; height: 300px; object-fit: cover; border-radius: var(--pg-radius-sm); }
.media-item__controls { display: flex; gap: 0.3rem; justify-content: center; margin-top: 0.4rem; }

/* Responsive: collapse the sidebar. */
@media (max-width: 780px) {
    .page-wrap--with-left { grid-template-columns: 1fr; }
    .site-header__bar { flex-wrap: wrap; }
    .site-nav { order: 3; width: 100%; }
}

/* Simple modal for confirm popups (e.g. "Really delete?"). */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(44,38,32,0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 50;
}
.modal-backdrop.is-open { display: flex; }
.modal {
    background: var(--pg-white);
    border-radius: var(--pg-radius);
    padding: 1.5rem;
    max-width: 360px;
    text-align: center;
    box-shadow: var(--pg-shadow-lg);
}
.modal__actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }