/*
 * gallery.css — page-specific layout for the gallery surface
 * (/gallery/login and the upcoming Story #6 browse view).
 *
 * Loaded by gallery/login.html, gallery/unavailable.html and
 * gallery/browse.html alongside admin.css (which carries the shared
 * brand tokens). The gallery surface introduces a deliberately
 * editorial typography family
 * (Didot/Bodoni/Playfair-Display serif wordmark) that does NOT belong
 * in admin.css — the gallery is the guest surface, designed warmer
 * and more magazine-like than the admin workspace.
 *
 * Visual decisions captured in project_ui_decisions_loran.md
 * (Variante E — split hero + editorial form, chosen 2026-05-21).
 */

/* ── Editorial paper palette — scoped to the gallery surface only ────────── */
body.gallery-login,
body.gallery-unavailable,
body.gallery-browse,
body.gallery-albums,
body.gallery-whats-new,
body.gallery-upload,
body.private-login,
body.private-vault {
    --paper:        #f7f1e3;
    --paper-edge:   #ebe2c7;
    --ink:          #1c1b18;
    --ink-muted:    #6b6760;
    --rule:         #b58a28;

    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: Georgia, "Iowan Old Style", "Source Serif Pro", serif;
}

/* ── Login layout: split hero (left) + form (right) ──────────────────────── */
.gallery-layout {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 320px 1fr;
}
@media (min-width: 768px) {
    .gallery-layout {
        grid-template-rows: 1fr;
        grid-template-columns: 1.2fr 1fr;
    }
}

/* ── Left pane: warm mustard hero with drifting polaroids + brand ─────────── */
.gallery-hero {
    position: relative;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 230, 150, 0.55), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(200, 160, 45, 0.55), transparent 60%),
        linear-gradient(135deg, var(--brand-mustard-light) 0%, var(--brand-mustard) 50%, var(--brand-mustard-darker) 100%);
    overflow: hidden;
}

/* Polaroid placeholders: pure CSS pseudo-elements, no real image files.
   Photo-album hint that respects the strict CSP without committing to
   specific family photos. */
.gallery-polaroid {
    position: absolute;
    width: 140px;
    background: #fdfaf2;
    padding: 8px 8px 32px;
    border-radius: 2px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.10);
}
.gallery-polaroid::after {
    content: "";
    display: block;
    height: 110px;
    background: linear-gradient(135deg, #c8a55a 0%, #8a6e20 100%);
    border-radius: 1px;
}
.gallery-polaroid-1 { top: 18%; left: 8%;  transform: rotate(-8deg); }
.gallery-polaroid-2 { top: 12%; right: 14%; transform: rotate(6deg); }
.gallery-polaroid-3 { bottom: 14%; left: 38%; transform: rotate(-3deg); width: 120px; }

@media (max-width: 767px) {
    .gallery-polaroid-1 { width: 110px; top: 12%; left: 6%; }
    .gallery-polaroid-2 { width: 100px; top: 8%;  right: 6%; }
    .gallery-polaroid-3 { display: none; }
}

.gallery-hero-brand {
    position: absolute; inset: 0;
    display: grid; place-items: center; text-align: center;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.gallery-brand-name {
    font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
    margin: 0;
    font-size: 92px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 0.92;
}
.gallery-brand-name em {
    font-style: italic;
    color: #fff7d8;
}
.gallery-tagline {
    margin: 14px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.92;
    font-weight: 500;
}

/* ── Right pane: editorial paper form ────────────────────────────────────── */
.gallery-form-pane {
    display: grid; place-items: center;
    padding: 56px 32px 48px;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(217, 177, 74, 0.18), transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-edge) 100%);
}
.gallery-wrapper {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.gallery-divider {
    width: 60px;
    height: 1px;
    background: var(--rule);
    margin: 0 auto 28px;
}

.gallery-lede {
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 auto 28px;
    max-width: 320px;
}

.gallery-notice {
    margin: 0 auto 22px;
    max-width: 320px;
    padding: 10px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: #7a2a1f;
    background: #fff5f3;
    border: 1px solid #f5c4ba;
    border-radius: 0;
    text-align: left;
}

.gallery-form {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: left;
}
.gallery-field {
    margin-bottom: 18px;
}
.gallery-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--ink-muted);
}
.gallery-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--rule);
    border-radius: 0;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.gallery-field input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--brand-mustard-darker);
    box-shadow: 0 0 0 3px rgba(181, 138, 40, 0.18);
}

.gallery-submit {
    width: 100%;
    height: 48px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 0;
    transition: background 120ms ease, color 120ms ease;
}
.gallery-submit:hover {
    background: var(--ink);
    color: var(--paper);
}
.gallery-submit:focus-visible {
    outline: 3px solid rgba(181, 138, 40, 0.45);
    outline-offset: 2px;
}

.gallery-hint {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-top: 28px;
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.05em;
    text-align: center;
}

/* ── Unavailable / paused page (Variante A — centered card) ──────────────── */
/* body is the flex column (shared by gallery + upload paused pages) so the
   app-wide footer (#260/#498) sits at the true bottom of the viewport instead
   of leaving a gap below it; .gallery-unavailable-pane is the flex item that
   absorbs the leftover space (flex: 1) and centres the card inside
   itself via its own nested grid — display: grid on body itself was the old
   approach, but an implicit, content-sized grid track left the leftover
   space stranded after the footer rather than pushing the footer down, the
   same trap #494 hit in the lightbox stage. */
body.gallery-unavailable {
    display: flex;
    flex-direction: column;
}
.gallery-unavailable-pane {
    flex: 1;
    display: grid; place-items: center;
    padding: 56px 24px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(217, 177, 74, 0.18), transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-edge) 100%);
}
.gallery-unavailable-pane .gallery-brand-name {
    color: var(--ink);
    font-size: 72px;
    text-shadow: none;
}
.gallery-unavailable-pane .gallery-brand-name em {
    color: var(--brand-mustard-darker);
}
.gallery-unavailable-pane .gallery-tagline {
    color: var(--ink-muted);
}
.gallery-unavailable-pane .gallery-divider {
    margin: 40px auto 36px;
}

/* Pause glyph — two thick mustard-darker bars, a typographic pause that
   reads at every viewport size without committing to an emoji. */
.gallery-pause-glyph {
    display: inline-flex;
    gap: 10px;
    margin: 0 0 28px;
    opacity: 0.85;
}
.gallery-pause-glyph span {
    display: block;
    width: 8px;
    height: 36px;
    background: var(--brand-mustard-darker);
    border-radius: 1px;
}

.gallery-unavailable-heading {
    font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 18px;
    letter-spacing: -0.005em;
}
.gallery-unavailable-pane .gallery-lede {
    margin-bottom: 0;
}