/**
 * Layout for the built-in generated-pages archive template
 * (templates/archive.php). Deliberately no colors, fonts, or heading sizes
 * here — the page inherits those entirely from the active theme, only
 * spacing/structure is set. See AI-MEMORY.md §55.
 */

/* width:100% confirmed needed live — without it this container didn't
 * reliably fill its parent's width in every theme, reading as a narrow,
 * mobile-like column even on desktop. */
.spg-archive {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Settings tab → Archive page → Content width. */
.spg-archive--full {
    max-width: none;
}

.spg-archive-header {
    margin-bottom: 24px;
}

/* box-sizing keeps the padding below from pushing past 100% of .spg-archive
 * (the actual fix for this container reliably filling its parent's width). */
.spg-archive-filters {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.spg-archive-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Only applied while the panel is actually shown — a plain, unscoped
 * `display: flex` here would win over the browser's own `[hidden]{display:
 * none}` default (an author stylesheet rule always beats a UA one), which
 * is exactly what kept this panel visible regardless of the `hidden`
 * attribute. */
.spg-archive-adv:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Themes commonly set form fields to width:100% (sometimes with !important,
 * which is why these need it too), which forces each one onto its own line
 * inside a flex row (a 100%-wide flex item pushes anything after it to
 * wrap) — these override just the width, nothing else, so the search box/
 * selects/button sit in one row, each sized to its own content. min-width:0
 * lets the search box actually shrink/wrap instead of forcing the whole
 * form (and with it, the page) wider than its own max-width. */
.spg-archive-filters-row input[type="search"] {
    flex: 2 1 200px;
    min-width: 0;
    width: auto !important;
}

/* max-width caps a long real keyword/location value (e.g. a whole city or
 * service name) from stretching the select — and with it this form, and
 * with it the whole page — wider than intended; still sized to content
 * up to that cap, not stretched full-width. */
.spg-archive-adv select {
    flex: 0 0 auto;
    max-width: 220px;
    width: auto !important;
}

.spg-archive-filters-row button {
    flex: 0 0 auto;
    width: auto !important;
    padding: 8px 20px;
}

/* Minimal, link-styled toggle, its own line under the search/Filter row —
 * not a second big button crowding that row. */
.spg-archive-adv-toggle,
.spg-archive-adv-toggle:hover,
.spg-archive-adv-toggle:focus,
.spg-archive-adv-toggle:active {
    display: block;
    margin-top: 12px;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.spg-archive-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.spg-archive-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s ease;
}

.spg-archive-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.spg-archive-item a {
    display: block;
    padding: 16px;
}

.spg-archive-empty {
    opacity: 0.7;
}

.spg-archive .pagination {
    margin-top: 32px;
    text-align: center;
}

.spg-archive .page-numbers {
    margin: 0 4px;
}