/* =======================================================
   ARR COLLECTORS — ALBUM DETAILS PAGE
   Organic theme — depends on style.css tokens
   ======================================================= */

/* --- Hero --- */
#album-hero { padding: 0 20px; text-align: left; margin-bottom: 10px; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; }

#album-hero .hero-title {
    font-family: var(--font-head);
    font-size: clamp(30px, 5vw, 44px);
    margin-bottom: 6px;
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
    color: var(--ink);
}

#album-hero .hero-subtitle {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.2px;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 auto;
    line-height: 1.5;
}

/* --- Layout --- */
.album-detail-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--font-body);
    text-align: left;
}

.album-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 30px 40px;
    align-items: start;
    margin-bottom: 50px;
}

.cover-thumb, .cover-close { display: none; }

/* Left column: carousel on top, name / year / language panel below it.
   Right column: release tabs and their contents. */
.album-left  { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.album-left > .glass-panel { order: 2; }
.album-right { min-width: 0; }

/* --- Glass Panel (now: rounded surface card) --- */
.glass-panel {
    background: var(--color-surface);
    backdrop-filter: none;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px;
}

/* --- Sidebar --- */
.sidebar-title {
    font-family: var(--font-head);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: var(--font-heading-weight);
    color: var(--ink);
    margin-bottom: 24px;
    line-height: 1.15;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 14px;
}

.info-group { margin-bottom: 22px; }

.info-group h3 {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.info-group p,
.info-group ul {
    color: var(--copy);
    font-size: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-group li { margin-bottom: 6px; display: flex; align-items: center; }

.info-group li::before {
    content: '\2013';
    color: var(--accent);
    margin-right: 10px;
    font-size: 1.2rem;
    line-height: 0;
}

/* --- Carousel (Glide) --- */
.album-cover-carousel {
    max-width: 700px;
    margin: 0 auto;
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.glide__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 460px;
    min-height: 460px;
    background: var(--divider);
    padding: 20px;
}

.carousel-figure { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }

.carousel-img {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 340px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    transition: none;
    filter: none;
    color: transparent;
}

.carousel-caption {
    margin-top: 14px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: center;
    padding: 7px 18px;
    background: var(--color-neutral-100);
    border-radius: 999px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
}

.glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--color-divider);
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 21px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: none;
    box-shadow: var(--shadow-sm);
    transition: 0.2s ease;
}

.glide__arrow:hover {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
    transform: translateY(-50%);
    box-shadow: var(--shadow-md);
}

.glide__arrow--left  { left: 15px; }
.glide__arrow--right { right: 15px; }

.glide__bullets { text-align: center; padding: 14px 0 0; }

.glide__bullet {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--hairline);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: 0.2s;
    border: none;
    padding: 0;
}

.glide__bullet--active,
.glide__bullet:hover { background: var(--accent); transform: scale(1.3); box-shadow: none; }

/* --- Back Button --- */
.back-btn-container { text-align: left; margin-top: 24px; }

/* Desktop / tablet (701px and up): "Back to Collections" sits above the image carousel */
@media (min-width: 701px) {
    .album-left > div:not(.glass-panel) { display: flex; flex-direction: column; }
    .album-left > div:not(.glass-panel) > .back-btn-container { order: -1; margin: 0 0 16px; }
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    color: var(--accent);
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: none;
    border-bottom: 1px solid transparent;
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.back-btn:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); transform: none; box-shadow: none; }

/* --- Main Release Tabs --- */
.release-tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.tab-button {
    padding: 10px 22px;
    background: transparent;
    color: var(--ink);
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    transition: 0.2s;
    border-radius: 999px;
}

.tab-button:hover:not(.disabled) { background: var(--divider); }
.tab-button.active  { color: var(--paper); background: var(--accent); box-shadow: var(--shadow-sm); }
.tab-button.active:hover { background: var(--accent-deep); }
.tab-button.disabled { color: var(--hairline); cursor: not-allowed; opacity: 1; }

/* --- Sub-Tabs --- */
.sub-tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.sub-tab-button {
    padding: 8px 18px;
    background: none;
    color: var(--ink);
    border: 1px solid var(--color-divider);
    cursor: pointer;
    font-size: 13px;
    border-radius: 999px;
    transition: 0.2s;
    font-family: var(--font-mono);
    letter-spacing: 1px;
}

.sub-tab-button:hover:not(.disabled) { background: var(--color-accent-100); border-color: var(--accent); }
.sub-tab-button.active   { background: var(--color-accent-100); color: var(--accent-deep); border-color: var(--accent); font-weight: 600; box-shadow: none; }
.sub-tab-button.active:hover { background: var(--color-accent-200); border-color: var(--accent); }
.sub-tab-button.disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--hairline); color: var(--hairline); }

/* --- Format Dividers --- */
.format-block { margin-bottom: 46px; }

.format-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
}

.format-divider::before, .format-divider::after {
    content: '';
    flex-grow: 1;
    border-top: 1px solid var(--hairline);
}

.format-divider::before { margin-right: 20px; }
.format-divider::after  { margin-left: 20px; }

/* --- Format Badges --- */
.format-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 22px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid var(--color-divider);
    background: var(--paper);
    color: var(--ink);
    backdrop-filter: none;
    transition: all 0.2s ease;
}

.format-badge-icon { font-size: 1.2rem; color: var(--accent); }

.format-badge:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.format-badge:hover .format-badge-icon { color: var(--paper); }

/* --- Release Cards Grid --- */
.release-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
}
/* While a card is hovered (its info panel opens), neighbours in the same row keep their own height instead of stretching to match */
.release-cards-grid:has(.release-card:hover),
.release-cards-grid:has(.release-card.expanded) { align-items: start; }

/* --- Release Card --- */
.release-card {
    background: var(--color-surface);
    backdrop-filter: none;
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    cursor: pointer;
}

.release-card:hover {
    transform: translateY(-4px);
    background: var(--color-surface);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

/* Collection status next to the year: green "Owned" = in my collection (Album.InCollection = 1), orange "Wanted" = not yet (0) */
.card-year::after {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.in-collection     .card-year::after { content: "\25CF  In My Collection";  color: #2e8b4f; }
.not-in-collection .card-year::after { content: "\25CF  Seeking"; color: var(--accent); }

/* --- Card Image Wrapper --- */
.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--divider);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    transition: transform 0.4s ease;
    border-radius: 0;
}

.release-card:hover .card-img { transform: scale(1.03); }

/* --- Tooltip (additional images) --- */
.tooltip-images {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: auto;
}

.card-image-wrapper:hover .tooltip-images { display: block; }

.tooltip-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: var(--paper);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    max-width: 400px;
    justify-content: center;
}

.tooltip-inner img {
    max-height: 120px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-divider);
    cursor: zoom-in;
    transition: border-color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.tooltip-inner img:hover { border-color: var(--accent); }

/* --- Card Details --- */
.card-details { padding: 15px; text-align: left; }
.card-title   { overflow-wrap: anywhere; font-family: var(--font-head); font-size: 22px; font-weight: var(--font-heading-weight); color: var(--ink); margin-bottom: 4px; line-height: 1.2; transition: color 0.2s ease; }
.release-card:hover .card-title { color: var(--accent-deep); }
.card-year    { font-family: var(--font-mono); font-size: 14px; color: var(--accent); font-weight: 600; letter-spacing: 0.5px; }

.card-extra {
    max-height: 0;
    overflow: hidden;
    background: var(--divider);
    transition: max-height 0.3s ease;
    border-top: 1px solid transparent;
}

.release-card:hover .card-extra { max-height: 300px; border-top-color: var(--hairline); }

.compact-info {
    list-style: none;
    padding: 13px;
    margin: 0;
    font-size: 13px;
    color: var(--copy);
    text-align: left;
}

.compact-info li { margin-bottom: 6px; border-bottom: 1px dashed var(--hairline); padding-bottom: 6px; }
.compact-info li:last-child { border: none; margin: 0; padding: 0; }
.compact-info strong { color: var(--ink); display: inline-block; width: 70px; font-weight: 600; }

/* --- Tracklist --- */
.tracklist-table {
    overflow-x: auto;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}

.language-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--paper);
    border: none;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 15px;
    letter-spacing: 1.5px;
}

.track { width: 100%; border-collapse: collapse; min-width: 700px; }

.track th {
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.4px;
    padding: 12px 10px;
    border-bottom: 2px solid var(--ink);
    font-weight: 600;
    text-align: left;
}

.track td { padding: 12px 10px; border-bottom: 1px solid var(--hairline); color: var(--copy); font-size: 16px; }
.track tr:hover td { background: var(--divider); }
.track tr:last-child td { border-bottom: none; }

.artist-link { color: var(--accent); text-decoration: none; transition: color 0.2s ease; border-bottom: 1px solid transparent; }
.artist-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); text-shadow: none; }

.listen-icons { display: flex; gap: 14px; }
.listen-icons a { color: var(--muted); font-size: 1.2rem; transition: 0.2s; }
.listen-icons .spotify:hover { color: #1db954; transform: none; }
.listen-icons .youtube:hover { color: #ff0000; transform: none; }
.listen-icons .apple:hover   { color: #fa243c; transform: none; }

/* --- Accordions --- */
details {
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    padding: 14px 22px;
    transition: 0.2s;
    box-shadow: var(--shadow-sm);
}

details:hover { box-shadow: var(--shadow-md); }

details summary {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    font-weight: var(--font-heading-weight);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; color: var(--accent); font-size: 1.5rem; transition: 0.2s; }
details[open] summary::after { content: '\2212'; color: var(--accent); }

details ul, details div { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--hairline); color: var(--muted); line-height: 1.6; }
details li { margin-bottom: 8px; }

/* --- Carousel Lightbox --- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 21, 15, 0.97);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    overflow: auto;
}

.lightbox.active { display: flex; }

.lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: opacity 0.2s ease;
    cursor: zoom-in;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: var(--light);
    border: 1px solid rgba(244, 241, 234, 0.4);
    width: 54px; height: 54px;
    border-radius: 50%;
    font-size: 31px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: none;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-arrow:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); transform: translateY(-50%); box-shadow: none; }
.lightbox-arrow.left  { left: 20px; }
.lightbox-arrow.right { right: 20px; }

.lightbox-controls-group {
    position: absolute;
    top: 20px; right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.lightbox-close,
.lightbox-zoom-btn {
    background: transparent;
    color: var(--light);
    border: 1px solid rgba(244, 241, 234, 0.4);
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 23px;
    cursor: pointer;
    backdrop-filter: none;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-zoom-btn:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); box-shadow: none; }
.lightbox-close:hover    { background: var(--accent); border-color: var(--accent); transform: none; }

.lightbox-caption {
    position: absolute;
    bottom: 20px;
    text-align: center;
    color: var(--light);
    font-family: var(--font-mono);
    font-size: 14px;
    background: none;
    padding: 8px 22px;
    border-radius: 999px;
    max-width: 70%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    border: 1px solid rgba(244, 241, 234, 0.3);
    transition: bottom 0.3s ease;
}
.lightbox.has-thumbs .lightbox-caption { bottom: 112px; }

/* --- Lightbox Thumbnail Strip --- */
.lightbox-thumbs {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 88vw;
    padding: 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 241, 234, 0.4) transparent;
}
.lightbox-thumbs::-webkit-scrollbar { height: 4px; }
.lightbox-thumbs::-webkit-scrollbar-track { background: transparent; }
.lightbox-thumbs::-webkit-scrollbar-thumb { background: rgba(244, 241, 234, 0.4); border-radius: 999px; }
.lightbox-thumbs .lightbox-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(244, 241, 234, 0.25);
    object-fit: cover;
    cursor: pointer;
    opacity: 0.55;
    box-shadow: none;
    transition: opacity 0.2s, border-color 0.25s;
}
.lightbox-thumbs .lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumbs .lightbox-thumb.active {
    border-color: var(--accent);
    opacity: 1;
    box-shadow: none;
}

/* --- Card Lightbox --- */
.card-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 21, 15, 0.97);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.card-lightbox.active { display: flex; }

.card-lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: opacity 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.clb-controls {
    position: absolute;
    top: 20px; right: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
}

.clb-close, .clb-zoom-btn {
    background: transparent;
    color: var(--light);
    border: 1px solid rgba(244, 241, 234, 0.4);
    width: 42px; height: 42px;
    border-radius: 50%;
    font-size: 23px;
    cursor: pointer;
    backdrop-filter: none;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clb-zoom-btn:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); box-shadow: none; }
.clb-close:hover    { background: var(--accent); border-color: var(--accent); transform: none; }

.clb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: var(--light);
    border: 1px solid rgba(244, 241, 234, 0.4);
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 29px;
    cursor: pointer;
    backdrop-filter: none;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clb-arrow:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); transform: translateY(-50%); box-shadow: none; }
.clb-left  { left: 20px; }
.clb-right { right: 20px; }

/* --- Card Lightbox Thumbnails --- */
.card-lightbox.has-thumbs img { max-height: calc(88vh - 100px); }
.clb-thumbs {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 88vw;
    padding: 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 241, 234, 0.4) transparent;
}
.clb-thumbs::-webkit-scrollbar { height: 4px; }
.clb-thumbs::-webkit-scrollbar-track { background: transparent; }
.clb-thumbs::-webkit-scrollbar-thumb { background: rgba(244, 241, 234, 0.4); border-radius: 999px; }
.clb-thumbs .clb-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(244, 241, 234, 0.25);
    object-fit: cover;
    cursor: pointer;
    opacity: 0.55;
    box-shadow: none;
    transition: opacity 0.2s, border-color 0.25s;
}
.clb-thumbs .clb-thumb:hover { opacity: 0.85; }
.clb-thumbs .clb-thumb.active {
    border-color: var(--accent);
    opacity: 1;
    box-shadow: none;
}

/* --- Image Protection --- */
img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* =======================================================
   RESPONSIVE
   ======================================================= */
/* Tablet: keep two columns, with a fixed narrow left column */
@media (max-width: 900px) {
    .album-header-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
    .album-left { gap: 20px; }
    .album-left .glass-panel { padding: 20px 18px; }
    .album-left .sidebar-title { font-size: 1.5rem; }
}

/* Phone (700px and below): the cover becomes a thumbnail inside the info card; tapping it opens the carousel in a popup */
@media (max-width: 700px) {
    .album-header-grid { grid-template-columns: 1fr; gap: 20px; }
    .album-left { max-width: 520px; width: 100%; margin: 0 auto; gap: 0; }

    /* info card = compact header (thumbnail left, text right) */
    .album-left .glass-panel { order: 1; display: flex; align-items: center; gap: 14px; padding: 12px; }
    .album-left > div:not(.glass-panel) { order: 2; }
    .cover-thumb { display: block; position: relative; flex: none; width: 140px; height: 140px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--divider); cursor: pointer; }
    .cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cover-thumb-badge { position: absolute; right: 6px; bottom: 6px; background: rgba(30, 26, 20, 0.72); color: #fff; font: 600 11px/1 var(--font-body); padding: 4px 7px; border-radius: 99px; }
    .panel-info { min-width: 0; flex: 1; }
    .album-left .sidebar-title { font-size: 1.3rem; line-height: 1.15; margin: 0 0 8px; }
    .album-left .sidebar-title span { font-size: 1rem !important; }
    .album-left .info-group { margin-bottom: 6px; }
    .album-left .info-group h3 { font-size: 10px; margin-bottom: 2px; }
    .album-left .info-group p,
    .album-left .info-group ul { font-size: 14px; line-height: 1.35; }
    .album-left .info-group ul { display: flex; flex-wrap: wrap; column-gap: 5px; }
    .album-left .info-group li { margin: 0; }
    .album-left .info-group li::before { content: none; }
    .album-left .info-group li:not(:last-child)::after { content: ','; }

    .back-btn-container { margin: 12px 0 8px; text-align: left; }

    /* the carousel becomes a popup (kept in the layout off-screen state so Glide can measure it) */
    .album-detail-container .album-cover-carousel {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(92vw, 520px); max-width: none; margin: 0; z-index: 2000;
        visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    body.cover-open { overflow: hidden; }
    body.cover-open::after { content: ''; position: fixed; inset: 0; background: rgba(30, 26, 20, 0.65); z-index: 1999; }
    body.cover-open .album-detail-container .album-cover-carousel { visibility: visible; opacity: 1; pointer-events: auto; }
    .cover-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 8px; z-index: 6; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 22px; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; }
}

@media (max-width: 768px) {
    .glass-panel { padding: 18px 15px; }

    .album-cover-carousel,
    .album-image-wrapper { width: 100%; max-width: 320px; margin: 0 auto; }

    .release-tabs  { flex-wrap: wrap; gap: 8px; }
    .tab-button    { padding: 10px; font-size: 12px; flex: 1 1 calc(50% - 8px); text-align: center; }
    .tab-button:last-child { flex: 1 1 100%; }

    .sub-tabs      { flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
    .sub-tab-button { padding: 8px 12px; font-size: 12px; flex-grow: 1; text-align: center; }

    .release-cards-grid { grid-template-columns: repeat(auto-fit, 150px) !important; justify-content: center !important; gap: 15px !important; }
    .release-card  { max-width: 150px; margin: 0 auto; }
    .card-details  { padding: 10px !important; }
    .card-title    { font-size: 17px !important; }
    .card-year     { font-size: 13px !important; }
    /* keep the hover info panel on small screens, laid out to fit a narrow tile (label above value) */
    .release-card:hover .card-extra { max-height: 360px; }
    .compact-info { padding: 10px 12px; font-size: 12px; }
    .compact-info li { margin-bottom: 5px; padding-bottom: 5px; }
    .compact-info strong { display: block; width: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

    .track, .tracklist-table, table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table th, table td { white-space: nowrap; padding: 10px 12px; font-size: 14px; }

    .format-divider { margin: 24px 0 15px; }
    .format-badge   { font-size: 12px; padding: 6px 15px; }

    .lightbox-controls-group { gap: 6px; top: 12px; right: 12px; }
    .lightbox-close, .lightbox-zoom-btn { width: 36px; height: 36px; font-size: 18px; }
    .lightbox-arrow { width: 44px; height: 44px; font-size: 25px; }
    .lightbox-arrow.left  { left: 8px; }
    .lightbox-arrow.right { right: 8px; }

    .clb-arrow { width: 40px; height: 40px; font-size: 23px; }
    .clb-left  { left: 8px; }
    .clb-right { right: 8px; }

    .tooltip-images { display: none !important; }
}

@media (max-width: 600px) {
    .release-cards-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* =======================================================
   TOUCH / SMALL SCREENS: tap the text area of a tile to open or close its details
   (a chevron button on the tile shows that it can be tapped; the cover still opens the image viewer)
   ======================================================= */
@media (hover: none), (max-width: 768px) {
    .release-card .card-details { position: relative; padding-right: 38px !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .release-card .card-details::after {
        content: "\25BE";
        position: absolute; right: 8px; bottom: 9px;
        width: 24px; height: 24px;
        display: flex; align-items: center; justify-content: center;
        border: 1.5px solid var(--accent); border-radius: 50%;
        color: var(--accent); background: var(--color-surface);
        font-size: 14px; line-height: 1;
        transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
    }
    .release-card.expanded .card-details::after { transform: rotate(180deg); background: var(--accent); color: var(--paper); }
    .release-card.expanded .card-extra { max-height: 360px; border-top-color: var(--hairline); }
}
/* real touch devices: a tap must not leave the tile "hovered" (it would open the panel or lift the card by itself) */
@media (hover: none) {
    .release-card:hover { transform: none; }
    .release-card:hover .card-img { transform: none; }
    .release-card:hover .card-extra { max-height: 0; border-top-color: transparent; }
    .release-card.expanded:hover .card-extra { max-height: 360px; border-top-color: var(--hairline); }
}

/* =======================================================
   ALL RELEASES TAB
   ======================================================= */
.all-toolbar { background: var(--color-surface); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 20px; display: grid; gap: 10px; box-shadow: var(--shadow-sm); }
.all-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.all-label { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); width: 64px; flex: none; }
.all-search { flex: 1; min-width: 180px; border: 1px solid var(--hairline); background: var(--paper); border-radius: 99px; padding: 8px 14px; font-family: var(--font-body); font-size: 13px; color: var(--ink); }
.all-sort { border: 1px solid var(--hairline); background: var(--paper); border-radius: 99px; padding: 7px 12px; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--ink); }
.all-view { display: flex; border: 1px solid var(--hairline); border-radius: 99px; overflow: hidden; }
.all-view button { padding: 7px 12px; font-family: var(--font-body); font-weight: 700; font-size: 12px; background: var(--paper); color: var(--ink); border: 0; cursor: pointer; }
.all-view button.on { background: var(--ink); color: var(--paper); }
.all-chip { font-family: var(--font-body); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); white-space: nowrap; cursor: pointer; }
.all-chip:hover { border-color: var(--accent); }
.all-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.all-chip small { opacity: 0.65; margin-left: 4px; font-weight: 600; font-size: 11px; }
.all-count { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.all-more-wrap { text-align: center; margin: 26px 0 6px; }
.all-more { font-family: var(--font-body); font-weight: 700; font-size: 13px; padding: 10px 24px; border-radius: 99px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent-deep); cursor: pointer; }
.all-more:hover { background: var(--accent); color: var(--paper); }
.all-more[hidden], .all-card[hidden] { display: none !important; }

.all-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); justify-content: stretch; }
.all-card .card-year::after { content: none !important; }          /* status is a pill on the cover instead */
.all-card .card-sub { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.all-card .fmt-pill { position: absolute; top: 10px; left: 10px; z-index: 5; font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.08em; padding: 5px 9px; border-radius: 99px; background: rgba(30, 26, 20, 0.82); color: #fff; }
.all-card .st-pill  { position: absolute; top: 10px; right: 10px; z-index: 5; font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 1; padding: 5px 9px; border-radius: 99px; background: rgba(245, 234, 216, 0.95); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); white-space: nowrap; }
.all-card .st-owned  { color: #2e8b4f; }
.all-card .st-wanted { color: var(--accent); }
.all-card .rtype { display: inline-block; margin: 0 14px 14px; font-family: var(--font-body); font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; color: #fff; background: #8a6a4a; }
.rt-orig { background: #5b3a29 !important; } .rt-lang { background: #2f6f8f !important; } .rt-promo { background: #7a5ea8 !important; }
.rt-reis { background: #b0842f !important; } .rt-comp { background: #3d7f7a !important; } .rt-olbl { background: #8a6a4a !important; }
.rt-ocomp { background: #5a7a4a !important; } .rt-boot { background: #a23b3b !important; }

/* List view (desktop / tablet): one row per release */
@media (min-width: 701px) {
    .all-grid.is-list { grid-template-columns: 1fr; gap: 10px; }
    .all-grid.is-list .release-card {
        display: grid; max-width: none; align-items: center; gap: 16px; overflow: hidden;
        grid-template-columns: 76px minmax(170px, 1.3fr) 70px 170px minmax(0, 1.7fr) 80px;
        padding: 10px 16px 10px 10px;
    }
    .all-grid.is-list .release-card:hover { transform: none; }
    .all-grid.is-list .card-image-wrapper { grid-column: 1; grid-row: 1; width: 76px; height: 76px; aspect-ratio: auto; border-radius: 10px; overflow: hidden; }
    .all-grid.is-list .card-img { object-fit: contain; }
    .all-grid.is-list .card-details { grid-column: 2; grid-row: 1; padding: 0 !important; }
    .all-grid.is-list .fmt-pill { grid-column: 3; grid-row: 1; position: static; justify-self: start; }
    .all-grid.is-list .rtype { grid-column: 4; grid-row: 1; margin: 0; justify-self: start; }
    .all-grid.is-list .card-extra { grid-column: 5; grid-row: 1; max-height: none !important; background: none; border: 0; }
    .all-grid.is-list .compact-info { display: block; padding: 0; font-size: 12px; }
    .all-grid.is-list .compact-info li { border: 0; margin: 0; padding: 0; }
    .all-grid.is-list .compact-info li:nth-child(2),
    .all-grid.is-list .compact-info li:nth-child(3),
    .all-grid.is-list .compact-info li.is-empty { display: none; }
    .all-grid.is-list .compact-info li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .all-grid.is-list .compact-info strong { display: inline; width: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-right: 6px; }
    .all-grid.is-list .st-pill { grid-column: 6; grid-row: 1; position: static; justify-self: start; background: none; box-shadow: none; padding: 0; }
    .all-grid.is-list .card-details::after { display: none; }
    .all-grid.is-list .tooltip-images { display: none !important; }
}

/* Phones: two tiles across, filter rows scroll sideways, no list view */
@media (max-width: 700px) {
    .all-view { display: none; }
    .all-toolbar { padding: 12px; }
    .all-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    .all-chips::-webkit-scrollbar { display: none; }
    .all-label { width: auto; margin-right: 2px; }
}
@media (max-width: 768px) {
    .all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 12px !important; }
    .all-grid .release-card { max-width: none; }
    .all-card .rtype { margin: 0 10px 12px; }
    .all-card .card-sub { display: block; }
}

/* List view: long titles shrink and wrap on word boundaries */
@media (min-width: 701px) {
    .all-grid.is-list .card-title { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
    .all-grid.is-list .card-title.t-long  { font-size: 18px; line-height: 1.2; }
    .all-grid.is-list .card-title.t-xlong { font-size: 15px; line-height: 1.25; }
    .all-grid.is-list .card-year { white-space: normal; }
}

/* List view: label / code / barcode / variant / edition on a second row at the bottom of the tile */
@media (min-width: 701px) {
    .all-grid.is-list .release-card {
        grid-template-columns: 76px minmax(170px, 1fr) 70px 170px 90px;
        grid-template-rows: auto auto; row-gap: 8px;
    }
    .all-grid.is-list .card-image-wrapper { grid-row: 1 / span 2; align-self: center; }
    .all-grid.is-list .card-details { grid-row: 1; }
    .all-grid.is-list .fmt-pill     { grid-row: 1; }
    .all-grid.is-list .rtype        { grid-row: 1; }
    .all-grid.is-list .st-pill      { grid-column: 5; grid-row: 1; }
    .all-grid.is-list .card-extra   { grid-column: 2 / -1; grid-row: 2; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08) !important; }
    .all-grid.is-list .compact-info { display: flex; flex-wrap: wrap; gap: 4px 26px; }
    .all-grid.is-list .compact-info li { font-size: 13px; font-weight: 600; color: var(--ink); max-width: 100%; }
    .all-grid.is-list .compact-info strong { font-weight: 700; }
}

/* Desktop: left column (back link, carousel, info) stays pinned while the right column scrolls */
@media (min-width: 901px) {
    .album-left {
        /* --album-left-top is set by a small script (album-details.php): header height + gap when the column fits
           the viewport, or a negative value when it is taller, so its bottom pins instead of being cut off.
           No inner scroll area, so the mouse wheel always scrolls the page. 84px is the no-JS fallback. */
        position: sticky; top: var(--album-left-top, 84px); align-self: start;
        padding-bottom: 4px;
    }
}

/* Back to top link above the footer */
.back-to-top-wrap { text-align: center; margin: 10px 0 40px; }
.back-to-top {
    display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #c4703a);
    text-decoration: none; padding: 10px 20px; border: 1px solid var(--hairline, rgba(0,0,0,.15));
    border-radius: 99px; transition: background .2s ease, color .2s ease;
}
.back-to-top:hover { background: var(--accent, #F2A93B); color: var(--on-accent); }

/* The site stylesheet sets overflow-x:hidden on html/body, which turns body into a scroll container and breaks position:sticky. "clip" hides the same overflow without that side effect. */
html, body { overflow-x: clip; }

/* Edit page: keep the Edit button clear of the Owned/Wanted pill on All Releases cards */
.all-card .btn-edit-card { top: 44px; }
@media (min-width: 701px) {
    .all-grid.is-list .btn-edit-card { top: auto; bottom: 10px; right: 14px; }
}


/* =======================================================
   DESIGN SHELL ADAPTATION (sidebar layout, arr-* tokens)
   ======================================================= */
.album-hero-text { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.album-detail-container { max-width: none; width: 100%; margin: 0; padding: 0; }
.album-header-grid { margin-bottom: 24px; }
.sidebar-title { display: none; }              /* the title lives in the page hero now */
.glass-panel { background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: var(--arr-radius); box-shadow: none; }
.info-group h3 { font-family: var(--arr-font-body); }

/* Back link above the carousel duplicates the hero's back link */
.back-btn-container { display: none; }

/* Tabs → Design's segmented control */
.release-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--arr-surface-2); border-radius: var(--arr-radius); margin-bottom: 20px; }
.tab-button { height: 36px; padding: 0 14px; border-radius: 9px; font-family: var(--arr-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--arr-text-2); }
.tab-button:hover:not(.disabled) { background: var(--arr-surface-3); color: var(--arr-text); }
.tab-button.active, .tab-button.active:hover { background: var(--arr-accent); color: var(--arr-on-accent); box-shadow: none; }
.tab-button.disabled { color: var(--arr-text-faint); opacity: .5; }

/* Sub-tabs and filter chips → Design's chips */
.sub-tab-button, .all-chip { font-family: var(--arr-font-body); text-transform: none; letter-spacing: 0; background: transparent; border: 1px solid var(--arr-border-2); color: var(--arr-text-2); }
.sub-tab-button:hover:not(.disabled), .all-chip:hover { border-color: var(--arr-text-muted); color: var(--arr-text); background: transparent; }
.sub-tab-button.active, .sub-tab-button.active:hover, .all-chip.on { background: var(--arr-text); border-color: var(--arr-text); color: var(--arr-bg); }

/* Toolbar + cards */
.all-toolbar { background: transparent; padding: 0; }
.all-search, .all-sort { background: var(--arr-surface-2); border-color: var(--arr-border-2); color: var(--arr-text); border-radius: 10px; }
.all-view { border-color: var(--arr-border-2); border-radius: 10px; }
.all-view button { color: var(--arr-text-2); }
.all-view button.on { background: var(--arr-text); color: var(--arr-bg); }
.release-card { background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: var(--arr-radius); box-shadow: none; overflow: hidden; }
.release-card:hover { border-color: var(--arr-border-2); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.card-title { font-family: var(--arr-font-body); font-weight: 600; font-size: 16px; }
.card-year, .artist-link { color: var(--arr-accent); }
.in-collection .card-year::after { color: #4ADE80; }
.all-card .st-owned { color: #4ADE80; }
details { background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: var(--arr-radius); box-shadow: none; }
.track { background: transparent; }

/* ---- Release cards: no-scan placeholder + pills ---- */
.card-image-wrapper.is-ph { aspect-ratio: 16 / 9; background: var(--tile-bg, var(--lang-other)); }
.card-image-wrapper.is-ph ~ .fmt-pill { display: none; }     /* format is already the big label on the tile */
.all-card .fmt-pill { background: rgba(12,12,14,.82); backdrop-filter: blur(4px); }
.all-card .st-pill { background: rgba(12,12,14,.82); backdrop-filter: blur(4px); box-shadow: none; font-family: var(--arr-font-body); font-weight: 600; }
.all-card .st-owned { color: #4ADE80; }
.all-card .st-wanted { color: var(--arr-text-2); }

/* Stacked (tablet) layout: don't let the cover + info stretch edge to edge */
@media (min-width: 701px) and (max-width: 900px) {
    .album-left { width: 100%; max-width: 520px; margin-inline: 0 auto; gap: 20px; }
    .album-left .glass-panel { padding: 20px; }
}

/* "Seeking" status: orange, placed exactly like "In My Collection" (top-right pill / inline after the year) */
.all-card .st-wanted, .all-card .st-pill.st-wanted { color: var(--arr-accent); }
.not-in-collection .card-year::after { color: var(--arr-accent); }
.all-chip[data-val="wanted"].on { background: var(--arr-accent); border-color: var(--arr-accent); color: var(--arr-on-accent); }
.all-chip[data-val="wanted"]:not(.on) { color: var(--arr-accent); }
.all-chip[data-val="owned"]:not(.on) { color: #4ADE80; }

/* Cover/info column on desktop: 44% of the grid, max 540px, the releases get the rest */
@media (min-width: 901px) {
    .album-header-grid { grid-template-columns: minmax(300px, min(540px, 44%)) minmax(0, 1fr); gap: 30px 36px; }
}

/* Phones / small windows: line the cover + info column up with the page title (was centred) */
@media (max-width: 700px) {
    .album-left { margin: 0; max-width: none; }
}

/* Desktop: cover + info column on the RIGHT, releases on the left */
@media (min-width: 901px) {
    .album-header-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, min(540px, 44%)); }
    .album-right { order: 1; }
    .album-left  { order: 2; }
}

/* Desktop: the title block shares the top row with the cover column, so the cover lines up with the eyebrow / "Roja" */
@media (min-width: 901px) {
    .album-hero-text { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .album-right     { grid-column: 1; grid-row: 2; }
    .album-left      { grid-column: 2; grid-row: 1 / span 2; }
}

/* Tighter carousel: less empty grey around the cover (desktop / tablet; the phone popup keeps its size) */
@media (min-width: 701px) {
    .album-cover-carousel .glide__slide { height: auto; min-height: 0; padding: 14px 14px 12px; }
    .album-cover-carousel .carousel-img { height: 280px; }
    .album-cover-carousel .carousel-caption { margin-top: 10px; padding: 5px 14px; }
    .album-cover-carousel .glide__bullets { padding: 8px 0 10px; }
}

/* Tighter language / dubbed-versions card (desktop / tablet) */
@media (min-width: 701px) {
    .album-left .glass-panel { padding: 16px 20px; }
    .album-left .info-group { margin-bottom: 12px; }
    .album-left .info-group:last-child { margin-bottom: 0; }
    .album-left .info-group h3 { margin-bottom: 4px; }
    .album-left .info-group li { margin-bottom: 3px; }
    .album-left .info-group p { margin: 0; }
}

/* Release cards: shorter image area (4:3 instead of square) so wide scans don't float in grey */
.card-image-wrapper { aspect-ratio: 4 / 3; }

/* Mobile: "In My Collection" / "Seeking" no longer runs under the chevron button.
   The status drops onto its own line under the year and may wrap; the chevron keeps its reserved space. */
@media (hover: none), (max-width: 768px) {
    .release-card .card-year::after {
        display: block;
        margin: 4px 0 0;
        white-space: normal;
        line-height: 1.3;
    }
    .release-card .card-details { padding-right: 42px !important; min-height: 64px; }
}

/* =======================================================
   All-releases LIST view: pills never clip, at any width.
   The grid sizes the format / type / status columns to their content, and the
   row reflows by the width of the list itself (container query), so it also
   works in the narrower sidebar layout.
   ======================================================= */
@media (min-width: 701px) {
    .all-grid.is-list { container-type: inline-size; }
    .all-grid.is-list .release-card {
        grid-template-columns: 76px minmax(0, 1fr) max-content max-content max-content;
        column-gap: 16px;
    }
    .all-grid.is-list .fmt-pill, .all-grid.is-list .rtype, .all-grid.is-list .st-pill { white-space: nowrap; max-width: none; }
    .all-grid.is-list .rtype   { grid-column: 4; }
    .all-grid.is-list .st-pill { grid-column: 5; }
    /* edit page: keep the Edit button clear of the details row */
    .all-grid.is-list .release-card:has(.btn-edit-card) .card-extra { padding-right: 96px; }
}
/* narrower list (tablet, or a wide window with a cramped content column): pills drop under the title */
@container (max-width: 780px) {
    .all-grid.is-list .release-card {
        grid-template-columns: 76px max-content max-content minmax(0, 1fr);
        grid-template-rows: auto auto auto; row-gap: 8px;
    }
    .all-grid.is-list .card-image-wrapper { grid-row: 1 / span 3; }
    .all-grid.is-list .card-details { grid-column: 2 / -1; grid-row: 1; }
    .all-grid.is-list .fmt-pill { grid-column: 2; grid-row: 2; }
    .all-grid.is-list .rtype    { grid-column: 3; grid-row: 2; }
    .all-grid.is-list .st-pill  { grid-column: 4; grid-row: 2; }
    .all-grid.is-list .card-extra { grid-column: 2 / -1; grid-row: 3; }
    .all-grid.is-list .release-card:has(.btn-edit-card) { padding-bottom: 52px; }
    .all-grid.is-list .release-card:has(.btn-edit-card) .card-extra { padding-right: 0; }
}

/* very narrow list (phone-width content column): the pills stack under the title */
@container (max-width: 470px) {
    .all-grid.is-list .release-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: none; row-gap: 6px; }
    .all-grid.is-list .card-image-wrapper { grid-row: 1 / span 5; align-self: start; }
    .all-grid.is-list .card-details { grid-column: 2; grid-row: 1; }
    .all-grid.is-list .st-pill  { grid-column: 2; grid-row: 2; justify-self: start; }
    .all-grid.is-list .fmt-pill { grid-column: 2; grid-row: 3; justify-self: start; }
    .all-grid.is-list .rtype    { grid-column: 2; grid-row: 4; justify-self: start; }
    .all-grid.is-list .card-extra { grid-column: 2; grid-row: 5; }
}

/* 701-768px: the list view stays one row per release (the 2-tile rule above is for the grid view only) */
@media (min-width: 701px) and (max-width: 768px) {
    .all-grid.is-list { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
}
/* --- Members-only tabs (Later Releases / All Releases for signed-out visitors) --- */
.tab-button.locked { opacity: .85; }
.tab-lock-icon { font-size: 11px; margin-left: 6px; color: var(--accent, #F2A93B); vertical-align: 1px; }
.tab-button.locked.active .tab-lock-icon { color: inherit; }

.member-gate {
    max-width: 520px;
    margin: 28px auto 40px;
    padding: 36px 28px;
    text-align: center;
    background: var(--arr-surface-2, #1E1E22);
    border: 1px solid var(--arr-border-2, #2E2E34);
    border-radius: var(--arr-radius-lg, 14px);
}
.member-gate__icon {
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(242, 169, 59, .12);
    color: var(--accent, #F2A93B);
    font-size: 20px;
}
.member-gate__title { margin: 0 0 8px; font-size: 1.25rem; color: var(--arr-text, #F4F2EE); }
.member-gate__text  { margin: 0 0 22px; color: var(--arr-text-muted, #A9A6A0); line-height: 1.55; font-size: .95rem; }
.member-gate__text a { color: var(--accent, #F2A93B); }
.member-gate__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: 999px;
    background: #fff; color: #3c4043;
    font-weight: 700; font-size: .95rem; text-decoration: none;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    transition: transform .15s, box-shadow .2s;
}
.member-gate__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.member-gate__link { color: var(--arr-text-muted, #A9A6A0); font-size: .85rem; }
@media (max-width: 600px) { .member-gate { margin: 18px 0 28px; padding: 28px 18px; } }
.arr a.member-gate__btn, .arr a.member-gate__btn:hover { color: #3c4043; }
.arr a.member-gate__link { color: var(--arr-text-muted, #A9A6A0); }
/* Locked cover slider note (signed-out visitors) */
.cover-gate { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; padding: 10px 14px; border: 1px dashed var(--arr-border-2, #2E2E34); border-radius: var(--arr-radius, 12px); color: var(--arr-text-muted, #A9A6A0); font-size: 13px; text-align: center; }
.cover-gate i { color: var(--accent, #F2A93B); }
.arr .cover-gate a { color: var(--accent, #F2A93B); font-weight: 700; }
.cover-gate em { font-style: normal; color: var(--accent, #F2A93B); }
/* Signed-in member waiting for approval */
.pending-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1500; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: #2A2215; border: 1px solid rgba(242,169,59,.45); color: var(--arr-text-2, #D6D3CD); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.pending-banner i { color: var(--accent, #F2A93B); }
.pending-banner strong { color: var(--accent, #F2A93B); }
.pending-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.65); }
.pending-modal__box { width: 100%; max-width: 440px; padding: 32px 26px; text-align: center; background: var(--arr-surface-2, #1E1E22); border: 1px solid var(--arr-border-2, #2E2E34); border-radius: var(--arr-radius-lg, 14px); box-shadow: 0 28px 70px rgba(0,0,0,.6); }
.pending-modal__box h3 { margin: 0 0 10px; color: var(--arr-text, #F4F2EE); font-size: 1.3rem; }
.pending-modal__box p { margin: 0 0 22px; color: var(--arr-text-muted, #A9A6A0); line-height: 1.55; }
.pending-modal__box p strong { color: var(--accent, #F2A93B); }
.pending-modal__ok { border: 0; cursor: pointer; font: inherit; font-weight: 700; }