/* =========================================================================
   Template gallery
   Extends the landing-page system (style.css) with the few pieces this page
   needs on its own.
   ========================================================================= */

.gal-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: var(--border);
}
.gal-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
}
.gal-bar__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* The mark is the one from the landing page and the dashboard, in
   assets/css/brand.css. */
.gal-bar .brand { --brand-dot: 5px; --brand-gap: 3px; flex: none; }
.gal-bar .brand__word { font-size: 1rem; }

/* One label per width. */
.gal-bar__short { display: none; }

/* -------------------------------------------------------------------------
   Narrow screens

   Three full-length buttons plus a wordmark wrapped onto three rows and took
   194px of a 320px phone — a third of the screen, on a page that exists to
   show pictures. Everything below trims the row until it is one.
   ------------------------------------------------------------------------- */
@media (max-width: 46rem) {
    .gal-bar__inner { flex-wrap: nowrap; min-height: 3.9rem; gap: 0.6rem; }
    .gal-bar__actions { flex-wrap: nowrap; gap: 0.4rem; }

    .gal-bar__long { display: none; }
    .gal-bar__short { display: inline; }

    .gal-bar__actions .btn {
        padding: 0.55rem 0.7rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* Below this the admin shortcut goes: it is two taps away in the panel, and the
   row cannot hold three buttons and a wordmark. */
@media (max-width: 34rem) {
    .gal-bar__manage { display: none; }
}

/* The word stays at every width. It used to be dropped below 26rem to buy room,
   but 26rem is 416px and almost every phone in use is narrower than that — so
   the rule did not trim an edge case, it took the name off the site for most of
   the people who ever see it. The bar is made to fit around it instead. */
@media (max-width: 26rem) {
    .gal-bar .brand { --brand-dot: 4px; --brand-gap: 2px; }
    .gal-bar .brand__word { font-size: 0.875rem; letter-spacing: 0.5px; }
    .gal-bar__inner { gap: 0.45rem; }
    .gal-bar__actions .btn { padding: 0.5rem 0.55rem; font-size: 0.72rem; }
}

/* The column count is stated rather than left to `auto-fit`, because the shape
   is the point: seven templates across four columns is two rows, and two rows
   is one screen of looking instead of four of scrolling. `auto-fit` with a
   minimum track sizes itself to whatever the viewport allows and gave one
   column on a phone and three on a laptop — reasonable, and not what was
   asked for.
     Two columns on a phone, three from 44rem, four from 64rem — 64rem and not
     68rem because a 1024px laptop is exactly 64rem, and one breakpoint higher
     left the most common desktop width on three rows. */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.7rem, 2vw, 1.4rem);
}

@media (min-width: 44rem) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gal-card {
    display: flex;
    flex-direction: column;
    padding: 0.7rem;
    text-decoration: none;
    color: inherit;
}

/* The whole card is the link, so the whole card answers to a hover. */
.gal-card:hover .gal-card__go,
.gal-card:focus-visible .gal-card__go { transform: translateX(4px); }
.gal-card:hover .gal-card__name { text-decoration: underline; text-underline-offset: 3px; }

/* The miniature keeps one shape whatever the card width, so a row of them
   reads as a row rather than as seven different objects. */
.gal-card__frame {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 3px solid var(--ink);
    background: var(--paper);
}
/* The height override is all this needs; the fit is `contain` for every page
   that shows a thumbnail, set once in template-preview.css. */
.gal-card__frame .tpl-preview,
.gal-card__frame .tpl-cover { height: 100%; border: none; }

.gal-card__foot {
    display: block;
    padding: 0.7rem 0.2rem 0.15rem;
}

.gal-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Two lines and then an ellipsis. The field holds up to 120 characters and the
   longest one shipped is 41 — which is five lines inside a 127px card on a
   phone, taller than the picture it belongs to. Truncating keeps the row of
   cards even; the full line is on the preview. */
.gal-card__best {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}
.gal-card__best strong { font-weight: 800; }

/* The plan split, once above the grid. The badges on the cards carry the
   detail; this is what tells a first-time visitor what a badge means. */
.gal-plans {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    padding: 0.9rem 1.1rem;
    background: var(--purple);
    border: var(--border);
    box-shadow: var(--sh-sm);
}
.gal-plans__text { flex: 1; min-width: min(100%, 18rem); font-size: 0.9375rem; }
.gal-plans__mark { margin-right: 0.2rem; }
.gal-plans__go { flex-shrink: 0; }

@media (max-width: 34rem) {
    .gal-plans { flex-direction: column; align-items: stretch; }
    .gal-plans__go { text-align: center; }
}

/* Inline with the name rather than floating over the picture: the badge is a
   fact about the template, not a sticker on the artwork, and on a 127px card
   there is no room over the picture that does not cover the picture. */
.gal-card__plan {
    display: inline-block;
    padding: 0.05em 0.4em;
    background: var(--purple, #B39BFF);
    border: 2px solid var(--ink);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}

.gal-card__name {
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.1;
    text-transform: uppercase;
    /* `break-word`, not `anywhere`. Both stop a long name overflowing its card,
       but `anywhere` takes every character as a break opportunity and split
       "BRUTALIST GRID" as "BRUTALIS / T GRID" in a 127px card. `break-word`
       breaks inside a word only when that word cannot fit on a line by itself,
       which is the case this is guarding against in the first place. */
    overflow-wrap: break-word;
}

.gal-card__go {
    flex: none;
    font-weight: 900;
    transition: transform 0.16s var(--ease-pop);
}

/* Two columns of a 320px phone is a 127px card, and at that width the longer
   names broke onto three lines. Smaller type and less padding put them back on
   two. The arrow stays: it is the only thing on the card that says it is a
   link, and the name alone reads as a caption. */
@media (max-width: 26rem) {
    .gal-card { padding: 0.45rem; }
    .gal-card__foot { padding: 0.5rem 0.1rem 0.1rem; }
    .gal-card__head { gap: 0.35rem; }
    .gal-card__name { font-size: 0.8125rem; }
    .gal-card__go { font-size: 0.875rem; }
    .gal-card__best { margin-top: 0.3rem; font-size: 0.6875rem; }
}

.gal-note {
    margin-top: 2.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
}