/* ==============================================================================
   🍃 Eole.me - Photo Galleries - photos.css
   Justified grid, gallery cards, PhotoSwipe chrome. Uses design-system tokens.
   ============================================================================== */

body.photos-page {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body, var(--font-sans));
    margin: 0;
    min-height: 100vh;
    transition: var(--theme-transition);
    /* layouts.css sets `body { overflow: hidden }` because the home page drives
       its own scroll through a snap container. The photo pages are ordinary
       documents with nothing of the sort, so inheriting it left a 35-item grid
       with no way to reach item 4 — neither wheel nor keyboard. */
    overflow-y: auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ph-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem 1rem;
}

.ph-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.ph-back {
    color: var(--text-muted, #999);
    text-decoration: none;
    font-family: var(--font-title, var(--font-title-sans));
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}

.ph-back:hover { color: var(--accent-color); }

.ph-logo {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--accent-color);
    text-decoration: none;
}

.ph-titleblock h1 {
    font-family: var(--font-title, var(--font-title-sans));
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}

.ph-meta {
    color: var(--text-muted, #999);
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
}

.ph-description {
    font-family: var(--font-serif);
    max-width: 65ch;
    line-height: 1.6;
    margin: 0;
}

/* ── Nav toggles (theme + lang) ──────────────────────────────────────────── */
.ph-nav-right {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.ph-toggle {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    font-family: var(--font-title, var(--font-title-sans));
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ph-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); }

.ph-copyright { color: var(--text-muted, #999); }

/* The theme button now carries three SVGs, one shown at a time (variables.css
   picks it from theme-mode-*). Centre it rather than treating it as a text pill. */
.ph-toggle#theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ── "Nouveautés" strip (scroll-snap carousel) ───────────────────────────── */
.ph-strip-section {
    max-width: 1400px;
    margin: 0 auto 1.6rem;
    padding: 0 1rem;
}

.ph-strip-section.hidden { display: none; }

.ph-strip-title {
    font-family: var(--font-title, var(--font-title-sans));
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #999);
    margin: 0 0 0.7rem;
}

.ph-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.ph-strip-item {
    position: relative;
    flex: 0 0 auto;
    height: 230px;
    aspect-ratio: var(--ratio, 1.5);
    scroll-snap-align: start;
    border-radius: 6px;
    overflow: hidden;
    background: var(--card-bg);
}

.ph-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ph-strip-item:hover img { transform: scale(1.04); }

.ph-strip-label {
    position: absolute;
    left: 0.7rem;
    bottom: 0.55rem;
    color: #fff;
    font-family: var(--font-title, var(--font-title-sans));
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

@media (max-width: 700px) {
    .ph-strip-item { height: 160px; }
}

.ph-filterbar { padding-top: 0; }

/* ── Thematic filter chips ───────────────────────────────────────────────── */
.ph-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.4rem;
}

.ph-chip {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-family: var(--font-title, var(--font-title-sans));
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ph-chip:hover { border-color: var(--accent-color); color: var(--accent-color); }

.ph-chip.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

/* ── Justified grid (flex ratio trick, zero JS) ──────────────────────────── */
.ph-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.ph-grid::after {
    /* prevents the last row from over-stretching */
    content: "";
    flex-grow: 999999;
    min-width: calc(var(--row-h, 320px) / 2);
}

.ph-item {
    position: relative;
    flex-grow: calc(var(--ratio) * 100);
    flex-basis: calc(var(--ratio) * var(--row-h, 320px));
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    background: var(--card-bg);
}

.ph-item picture, .ph-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ph-item img {
    aspect-ratio: var(--ratio);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.ph-item:hover img { transform: scale(1.025); }

.ph-item-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.8rem 0.55rem;
    color: #fff;
    font-family: var(--font-title, var(--font-title-sans));
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.ph-item:hover .ph-item-title { opacity: 1; }

@media (max-width: 700px) {
    .ph-grid { --row-h: 220px; gap: 4px; }
}

@media (min-width: 1600px) {
    .ph-grid { --row-h: 380px; }
}

/* ── Gallery cards (photos index) ────────────────────────────────────────── */
.ph-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 14px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.ph-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    background: var(--card-bg);
    text-decoration: none;
    color: #fff;
}

.ph-card.hidden { display: none; }

.ph-card picture, .ph-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ph-card:hover img { transform: scale(1.04); }

.ph-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.2rem 1.2rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
}

.ph-card-overlay h2 {
    font-family: var(--font-title, var(--font-title-sans));
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.ph-card-overlay p {
    margin: 0;
    font-size: 0.82rem;
    opacity: 0.85;
}

.ph-card-count { float: right; }

/* ── Empty state (fresh platform, before any import) ─────────────────────── */
.ph-chips.hidden { display: none; }

.ph-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 5rem 1rem 6rem;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}

.ph-empty-mark {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2.6rem;
    color: var(--accent-color);
    margin: 0 0 0.6rem;
}

.ph-empty h2 {
    font-family: var(--font-title, var(--font-title-sans));
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
}

.ph-empty p {
    color: var(--text-muted, #999);
    font-family: var(--font-serif);
    line-height: 1.7;
    margin: 0 0 1.6rem;
}

.ph-empty .ph-chip { text-decoration: none; display: inline-block; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ph-footer {
    text-align: center;
    padding: 2rem 1rem 3rem;
    color: var(--text-muted, #999);
    font-size: 0.9rem;
}

.ph-footer a { color: var(--text-muted, #999); text-decoration: none; }
.ph-footer a:hover { color: var(--accent-color); }
.ph-footer-sep { margin: 0 0.6rem; }

/* ── PhotoSwipe chrome ───────────────────────────────────────────────────── */
.ph-pswp-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.8rem 1.2rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    pointer-events: none;
}

.ph-pswp-caption .sep { margin: 0 0.5rem; opacity: 0.5; }
.ph-pswp-caption strong { font-weight: 500; color: #fff; }

.ph-cap-text {
    margin: 0 0 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: #fff;
}

/* Technical block: an instrument readout rather than a sentence. Values first
   and aligned, labels underneath — a photographer scans for the aperture, and
   should not have to read a run of dot-separated text to find it. */
.ph-cap-tech { display: block; }

.ph-gear {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.ph-cells {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 1.6rem;
}

.ph-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.ph-cell-v {
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 0.9rem;
    /* Tabular figures keep the columns from shuffling as the photo changes. */
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.ph-cell-k {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 767.98px) {
    /* Six cells will not sit on one phone line; let them scroll rather than
       stack into a wall that eats the photograph. */
    .ph-cells {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        /* The caption bar is pointer-events: none so it never blocks the photo;
           this strip is the one part that has to be draggable. */
        pointer-events: auto;
        gap: 0.15rem 1.1rem;
        scrollbar-width: none;
        padding-bottom: 0.2rem;
    }
    .ph-cells::-webkit-scrollbar { display: none; }
    .ph-cell { flex: 0 0 auto; }
    .ph-gear { text-align: left; }
}

/* ── Immersive full screen ────────────────────────────────────────────────
   The photograph, and nothing else. Chrome and caption fade back in on the
   first pointer move and fade out three still seconds later. Transitions are
   on the hidden state so the return is instant and the exit is gentle. */
.pswp.ph-immersive .pswp__top-bar,
.pswp.ph-immersive .pswp__button--arrow,
.pswp.ph-immersive .ph-pswp-caption {
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.pswp.ph-immersive.ph-awake .pswp__top-bar,
.pswp.ph-immersive.ph-awake .pswp__button--arrow,
.pswp.ph-immersive.ph-awake .ph-pswp-caption {
    opacity: 1;
    transition: opacity 0.12s ease;
}

.pswp.ph-immersive.ph-awake .pswp__top-bar,
.pswp.ph-immersive.ph-awake .pswp__button--arrow { pointer-events: auto; }

.pswp.ph-immersive { cursor: none; }
.pswp.ph-immersive.ph-awake { cursor: auto; }

@media (prefers-reduced-motion: reduce) {
    .pswp.ph-immersive .pswp__top-bar,
    .pswp.ph-immersive .pswp__button--arrow,
    .pswp.ph-immersive .ph-pswp-caption { transition: none; }
}

/* ── Keyboard shortcuts panel ─────────────────────────────────────────── */
.ph-help {
    position: fixed;
    inset: 0;
    z-index: 100000;              /* above the PhotoSwipe root */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.ph-help[hidden] { display: none; }

.ph-help-panel {
    max-width: 30rem;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.6rem 1.8rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(var(--bg-color-rgb), 0.82);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    color: var(--text-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ph-help-panel h2 {
    margin: 0 0 1.1rem;
    font-family: var(--font-title, var(--font-title-sans));
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
}

.ph-help-keys {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1rem;
    align-items: baseline;
    margin: 0 0 1.3rem;
}

.ph-help-keys dt { display: flex; gap: 0.3rem; }
.ph-help-keys dd { margin: 0; color: var(--text-muted, #999); font-size: 0.9rem; }

.ph-help-keys kbd {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--card-bg);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    text-align: center;
    white-space: nowrap;
}

.ph-help-note {
    margin: 0 0 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted, #999);
    font-size: 0.85rem;
    line-height: 1.55;
}

.ph-help-close {
    display: block;
    margin-left: auto;
    padding: 0.45rem 1.2rem;
    border: 1px solid var(--accent-color);
    border-radius: 999px;
    background: transparent;
    color: var(--accent-color);
    font-family: var(--font-title-sans, inherit);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ph-help-close:hover { background: var(--accent-color); color: var(--bg-color); }

/* Like button (lightbox) */
.pswp__button--eole-like { width: auto !important; padding: 0 6px; }

.ph-like {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 60px;
}

.ph-like-heart { font-size: 1.25rem; transition: transform 0.25s ease; }
.pswp__button--eole-like:hover .ph-like-heart { transform: scale(1.15); }
.pswp__button--eole-like.liked .ph-like-heart { color: #f43f5e; }

.ph-toast {
    position: fixed;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    z-index: 100000;
    animation: ph-toast-in 0.25s ease;
}

@keyframes ph-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%); }
}