/* Oro De Las Pulgas — gallery page, extends the tokens in /css/site.css */

.odlp-header .wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
}
.odlp-back{
    text-decoration: none;
    font-size: 15px;
    color: var(--ink-soft);
}
.odlp-back:hover{ color: var(--accent); }
.odlp-wordmark{
    font-family: var(--font-display);
    font-size: 19px;
}

.odlp-intro{ padding: clamp(48px, 8vw, 88px) 0 clamp(32px, 5vw, 56px); }
.odlp-intro h1{
    font-size: clamp(36px, 6vw, 64px);
    margin: 10px 0 24px;
}
.odlp-intro .lead + .lead{ margin-top: 14px; }

.odlp-license{
    margin-top: 32px;
    padding: 24px clamp(20px, 3vw, 32px);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
    color: var(--ink-soft);
}
.odlp-license p{ margin-bottom: 10px; }
.odlp-license p:last-child{ margin-bottom: 0; }
.odlp-license a{ color: var(--ink); text-decoration: underline; }

.odlp-gallery{ padding-top: 0; }
.odlp-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.odlp-filter{
    font-family: var(--font-body);
    font-size: 13.5px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 18px;
    color: var(--ink-soft);
    cursor: pointer;
}
.odlp-filter:hover{ border-color: var(--accent); color: var(--accent); }
.odlp-filter.active{
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.odlp-grid{
    --odlp-gap: clamp(20px, 3vw, 28px);
    --odlp-row: 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--odlp-gap);
    /* Each figure is its own height rather than stretched to its row, both so
       the caption sits under its photograph and so the height measured for
       masonry below is the real one. */
    align-items: start;
}

/* Masonry. Switched on by odlp.js once it has measured the thumbnails; until
   then, and if the script never runs, the grid stays on plain rows — correct,
   but with a blank under every thumbnail shorter than the tallest in its row,
   which is unavoidable once the frames stopped being one uniform shape.
   Fine-grained rows plus a measured per-item span let each figure end where
   its photograph ends, and dense packing pulls the next one up into the space
   that frees, so the columns close up instead of stepping. */
.odlp-grid.is-masonry{
    grid-auto-rows: var(--odlp-row);
    grid-auto-flow: row dense;
    row-gap: 0;
}
.odlp-grid.is-masonry .odlp-photo{
    grid-row-end: span var(--span, 60);
    margin-bottom: var(--odlp-gap);
}
.odlp-photo{
    margin: 0;
    position: relative;
}
/* Each thumbnail keeps the shape it was shot in. A single 4/5 frame for the
   whole set meant a cover crop took just under half the width off every
   landscape photograph — on a page that exists so people can look at the
   photographs and download them, that is the wrong thing to trade away.
   odlp.js sets data-orientation once the thumbnail has loaded; the 4/5
   default is what applies until then and for anything that never loads. */
.odlp-photo picture{ aspect-ratio: 4/5; overflow: hidden; border-radius: 2px; }
.odlp-photo[data-orientation="landscape"] picture{ aspect-ratio: 3/2; }
.odlp-photo[data-orientation="portrait"] picture{ aspect-ratio: 2/3; }
.odlp-photo[data-orientation="square"] picture{ aspect-ratio: 1/1; }
.odlp-photo img{ width: 100%; height: 100%; object-fit: cover; }
.odlp-photo figcaption{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
}
.odlp-tag{
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}
.odlp-download{
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}
/* Scroll sentinel for the next batch. It sits below the grid and doubles as
   the only "more is coming" signal, so it is centred and quiet rather than
   hidden outright — a zero-height marker would read as the end of the set. */
.odlp-more{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    text-align: center;
    padding: clamp(28px, 5vw, 48px) 0 0;
}