/* ===== ARCHIVE (/archive) — builds on info.css ===== */

/* info-body is a flex column: keep the long archive from squashing its spacers to 0 */
.archive > * { flex-shrink: 0; }

/* Buttons look like plain text, as the rest of the site */
.archive button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

/* ----- Tags: colored labels, Notion's select palette ----- */
/* Inline padding doesn't change the line height, so rows keep the same rhythm as info */
.archive .archive-tag {
    /* inline-block with a tight line height: filter buttons and row labels come out the same size */
    display: inline-block;
    line-height: 1.15;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    white-space: nowrap;
}

.archive .archive-tag--default { background: #efeeec; color: #32302c; }
.archive .archive-tag--gray    { background: #e3e2e0; color: #32302c; }
.archive .archive-tag--brown   { background: #eee0da; color: #442a1e; }
.archive .archive-tag--orange  { background: #fadec9; color: #49290e; }
.archive .archive-tag--yellow  { background: #f8ecc8; color: #402c1b; }
.archive .archive-tag--green   { background: #dbeddb; color: #1c3829; }
.archive .archive-tag--blue    { background: #d3e5ef; color: #183347; }
.archive .archive-tag--purple  { background: #e8deee; color: #412454; }
.archive .archive-tag--pink    { background: #f5e0e9; color: #4c2337; }
.archive .archive-tag--red     { background: #ffe2dd; color: #5d1715; }

/* ----- Filters: the same labels; selected = outlined, the others fade ----- */
.archive-filters,
.archive-filters__label { color: #aaa; }

.archive-filters__label { white-space: nowrap; }

.archive button.archive-filter:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.archive button.archive-filter[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.archive-filters--active button.archive-filter[aria-pressed="false"] { opacity: 0.45; }

/* ----- Table: real columns, no lines ----- */
/* First column = the 7rem label column of info.css, so everything lines up with it */
.archive-row {
    display: grid;
    /* start, not baseline: a button's baseline is its last line, which pushed the date down on wrapped titles */
    align-items: start;
    /* same grid in every section, so columns line up across sections too */
    grid-template-columns: 7rem minmax(0, 2.4fr) minmax(0, 1.8fr) minmax(0, 1.4fr);
}

.archive-cell { padding-right: 2rem; }

/* A little air between rows (and between the filter lines), so the labels don't touch */
.archive-row,
.archive-filters { padding: 0.2em 0; }

.archive-more[hidden] { display: none; }
.archive button.archive-more__btn { color: #aaa; }
.archive button.archive-more__btn:hover { color: #333; text-decoration: underline; }

.archive-head { color: #aaa; }

.archive-cell--meta { color: #aaa; }

.archive-cell--meta a { color: #333; text-decoration: underline; }
.archive-cell--meta a:hover { text-decoration: none; }

/* Hover highlights the whole row, so the eye can follow it to the links on the right */
.archive-item:hover,
.archive-item--open { background: #f2f2f2; }

.archive-item[hidden],
.archive-empty[hidden] { display: none; }

.archive button.archive-item__title:hover { text-decoration: underline; }

.archive-item--open .archive-item__title { text-decoration: underline; }

/* ----- Expanded details: under the title, across the other columns ----- */
.archive-details {
    grid-column: 2 / -1;
    padding: 0.5lh 0;
}

.archive-details[hidden] { display: none; }

.archive-details__row {
    display: flex;
    align-items: baseline;
}

.archive-details__label {
    width: 10rem;
    flex-shrink: 0;
    padding-right: 1rem;
    color: #aaa;
}

.archive-details__text { flex: 1; max-width: 55em; }

.archive-details__text a { text-decoration: underline; }
.archive-details__text a:hover { text-decoration: none; }

/* ===== MOBILE (portrait): date + title, the other columns stacked under the title ===== */
@media (orientation: portrait) {
    .archive-row { grid-template-columns: 4.5rem minmax(0, 1fr); }

    .archive-cell { padding-right: 0; }
    .archive-cell--when { padding-right: 0.75rem; }
    .archive-cell--meta { grid-column: 2; }
    .archive-cell--meta:empty { display: none; }

    .archive-head { display: none; }

    .archive-details__label { width: 7.5rem; padding-right: 0.75rem; }
}

/* ----- Photos in the expanded row ----- */
/* One row; when the photos don't fit it scrolls sideways (no visible scrollbar) */
.archive-photos {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.archive-photos::-webkit-scrollbar { display: none; }

.archive-photo { flex-shrink: 0; }

/* space between photos and credits only when there are credits */
.archive-photos:not(:last-child) { margin-bottom: 1lh; }

.archive-photo img {
    display: block;
    height: 16rem;
    width: auto;
    background: #f2f2f2;
}

@media (orientation: portrait) {
    .archive-photo img { height: 10rem; }
}

/* ----- No visible scrollbar (the page still scrolls) ----- */
/* Desktop scrolls the main column, portrait scrolls the whole page; this file only loads on /archive */
#info-page,
.info-body.archive {
    scrollbar-width: none;
}

#info-page::-webkit-scrollbar,
.info-body.archive::-webkit-scrollbar {
    display: none;
}

/* ----- Slideshow: over the table column, white, photo as large as it fits ----- */
.archive-slideshow {
    position: fixed;
    z-index: 30;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.archive-slideshow[hidden] { display: none; }

.archive-slideshow__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* A row with something to show opens and closes on a click anywhere in it */
.archive-item--expandable { cursor: pointer; }
.archive-item--expandable:hover .archive-item__title { text-decoration: underline; }

/* No "save image" on the thumbnails (long press on phones): only the full-size slideshow photo */
.archive-photo img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}