/*
 * Template gallery (FR-INT-001). Loaded per page through the layout's "Styles" section, not from
 * site.css, so the base bundle stays the base bundle (FR-UX-001).
 *
 * Every colour is a custom property from tokens.css. Nothing here hard-codes a hex value, which is
 * what keeps the light/dark toggle a one-line change rather than an audit of this file.
 *
 * NFR-ACC-001 shapes the selectors. The difficulty badge already carries its level as a word from
 * the resources and as an accessible name on the badge itself; the pip row below is decorative and
 * is marked aria-hidden in the markup, so nothing here is the only carrier of anything.
 */

/* --- Page heading ---------------------------------------------------------- */

.gallery-breadcrumb {
    margin: 0;
    font-size: var(--text-sm);
}

.gallery-head__title {
    overflow-wrap: anywhere;
}

.gallery-head__intro {
    margin-top: var(--space-2);
    max-width: 60ch;
    color: var(--color-text-muted);
}

.gallery-head__invite {
    margin-top: var(--space-3);
    max-width: 60ch;
}

.gallery-count {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.gallery-empty {
    margin: 0;
    padding: var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}

/* --- Outcome of the last action -------------------------------------------- */

.gallery-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-subtle);
}

.gallery-notice__message {
    color: var(--color-text);
}

/* --- The grid of cards ------------------------------------------------------ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    overflow: hidden;
}

/* A fixed ratio so a card keeps its height before the photo arrives — the alternative is a grid
   that jumps under the reader's cursor as each lazy image lands. */
.gallery-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
}

.gallery-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-card__nophoto {
    margin: 0;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.gallery-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
}

.gallery-card__title {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}

.gallery-card__difficulty,
.gallery-detail__difficulty {
    margin: 0;
}

/* The pips repeat what the word beside them already says. Letter-spaced only so five of them stay
   countable at a glance; they are aria-hidden, so this is presentation with no meaning attached. */
.gallery-pips {
    letter-spacing: 0.1em;
    font-size: var(--text-sm);
}

.gallery-card__summary {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.gallery-card__link {
    align-self: flex-start;
    margin-top: auto;
}

/* --- The metadata list ------------------------------------------------------ */

.gallery-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

.gallery-meta__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.gallery-meta__row dt {
    color: var(--color-text-muted);
}

.gallery-meta__row dt::after {
    content: ":";
}

.gallery-meta__row dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- One template's page ---------------------------------------------------- */

.gallery-detail {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .gallery-detail {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        align-items: start;
    }
}

.gallery-detail__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-subtle);
    overflow: hidden;
}

.gallery-detail__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-detail__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gallery-detail__title {
    margin: 0;
    overflow-wrap: anywhere;
}

.gallery-detail__heading {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}

.gallery-detail__summary {
    margin: 0;
    max-width: 65ch;
    overflow-wrap: anywhere;
}

.gallery-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
}

.gallery-questions__item {
    overflow-wrap: anywhere;
}

.gallery-start__explanation,
.gallery-signin__message {
    margin: var(--space-2) 0 var(--space-4);
    max-width: 60ch;
    color: var(--color-text-muted);
}