/*
 * .gp-covers — magazine cover gallery (horizontal scroll carousel).
 *
 * Rendered above the footer site-wide via footer.php → template-parts/
 * section/cover-gallery.php. Originally lived in aboutgreg.css; promoted
 * to its own component when the section went site-wide.
 */

/*
 * Specificity / !important note: on gp-legacy pages (body map, PED,
 * calendar, anything is_single) the legacy-compat rule
 *   body.gp-legacy #gp-main * { font-family: body }
 * is (0,2,2) and would override a plain `.gp-covers__eyebrow` (0,1,0).
 * Bootstrap also adds `ul { margin: 0 0 10px 25px }` and `a:hover {
 * text-decoration: underline }`. Add !important on the load-bearing
 * declarations so the gallery looks identical everywhere it renders.
 */

/* Parent style.css sets `body.page-id-485 { text-align: center }` (body
   map) and `body.page-id-5195` (calendar). The whole cover gallery
   inherits center alignment from body unless we lock it left here. */
.gp-covers,
.gp-covers * {
    text-align: left !important;
}

.gp-covers {
    padding: var(--gp-section-py) var(--gp-page-gutter) !important;
    border-top: 1px solid var(--gp-border) !important;
}
.gp-covers__head { margin-bottom: var(--gp-space-7) !important; }
.gp-covers__eyebrow {
    font-family: var(--gp-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: var(--gp-ls-meta-wider) !important;
    color: var(--gp-gold) !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
    line-height: 1 !important;
}
.gp-covers__title {
    font-family: var(--gp-font-display) !important;
    font-size: clamp(36px, 5vw, 64px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: var(--gp-ls-display-tight) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    color: var(--gp-text) !important;
}
.gp-covers__title-accent { color: var(--gp-gold) !important; }
.gp-covers__viewport { position: relative; }
.gp-covers__track,
ul.gp-covers__track {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: var(--gp-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.gp-covers__track::-webkit-scrollbar { display: none; }
.gp-covers__item,
li.gp-covers__item {
    flex: 0 0 220px !important;
    width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    line-height: 1.2 !important;
}
.gp-covers__link,
a.gp-covers__link,
a.gp-covers__link:hover {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}
.gp-covers__thumb {
    display: block !important;
    aspect-ratio: 174 / 234;
    /* Use longhand background properties — the `background` shorthand
       resets background-image and would kill the inline thumb URL set
       via `style="background-image:url(...)"` on each cover. */
    background-color: var(--gp-surface) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    transition: transform var(--gp-dur-slow) var(--gp-ease-out);
}
.gp-covers__link:hover .gp-covers__thumb { transform: scale(1.04); }
.gp-covers__meta { display: block !important; padding: var(--gp-space-3) 0 0 !important; }
.gp-covers__name {
    display: block !important;
    font-family: var(--gp-font-display) !important;
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--gp-text) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.gp-covers__date {
    display: block !important;
    font-family: var(--gp-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: var(--gp-ls-meta) !important;
    text-transform: uppercase !important;
    color: var(--gp-gold) !important;
    margin: 4px 0 0 !important;
}
.gp-covers__arrow {
    position: absolute;
    top: calc(50% - 30px);
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    background: var(--gp-gold);
    color: var(--gp-text-on-gold);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-font-display);
    font-size: 22px;
    line-height: 1;
    transition: background var(--gp-dur-base) var(--gp-ease-out);
}
.gp-covers__arrow:hover { background: var(--gp-gold-deep); }
.gp-covers__arrow--prev { left: 0; }
.gp-covers__arrow--next { right: 0; }

@media (max-width: 600px) {
    .gp-covers__item { flex: 0 0 160px; width: 160px; }
}