/*
 * TGM LCM — Homepage bands (Phase 7a). Dark theme via theme.css tokens.
 * Track grids + the join band reuse gallery.css; this file styles the
 * hero, section headings, and the blog teaser. Mobile-first.
 */

.tgm-lcm-home { font-family: var(--tgm-lcm-font); }

.tgm-lcm-home-band {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 16px;
}

/* ── Homepage content width = internal track pages (Mike) ──
   Track pages use a full-width template (.tgm-lcm-single, 24px side padding) that
   bypasses Kadence's boxed content wrapper. The homepage runs THROUGH that
   wrapper (.entry-content-wrap: 2rem desktop / 1.5rem mobile) AND adds the band's
   side padding on top, so its content sits inset further than the track pages.
   Scoped to the homepage: drop the band side padding and trim the boxed wrapper
   to 24px, so the content lines up with the (perfect) track pages. The two-class
   selectors out-specify Kadence's inline `.entry-content-wrap{padding:2rem}`. */
body.home .tgm-lcm-home-band { padding-left: 0; padding-right: 0; }
body.home .entry-content-wrap { padding-left: 24px; padding-right: 24px; }
.tgm-lcm-home-heading {
    font-size: 22px;
    color: var(--tgm-lcm-text);
    margin: 0 0 18px;
    font-weight: 700;
}

/* Section heading row: the title + that section's own "Play all" (Dayer). */
.tgm-lcm-home-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.tgm-lcm-home-headrow .tgm-lcm-home-heading { margin: 0; }
.tgm-lcm-section-playall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: var(--tgm-lcm-accent);
    color: var(--tgm-lcm-accent-text);
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}
.tgm-lcm-section-playall:hover { background: var(--tgm-lcm-accent-hover); }
.tgm-lcm-section-playall-icon { font-size: 10px; }

/* ── Hero ── */
.tgm-lcm-home-hero { padding-top: 36px; }
.tgm-lcm-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
.tgm-lcm-hero-art {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--tgm-lcm-radius-lg);
    background-size: cover;
    background-position: center;
    box-shadow: var(--tgm-lcm-shadow);
    max-width: 380px;
}
/* Featured-track badge: the play heart + "Featured track" label, tucked
   into the art's top-left corner (per Mike's mockup). */
.tgm-lcm-hero-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tgm-lcm-hero-play {
    /* Corner chip (Dayer) — same treatment as the cards + track page: TOP-LEFT,
       38px, so the featured artwork reads clean instead of being covered by a
       big centred heart. */
    position: absolute;
    top: 10px;
    left: 10px;
    transform: none;
    width: 38px;
    height: 38px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}
.tgm-lcm-hero-play:hover { transform: scale(1.08); }
.tgm-lcm-hero-play .tgm-lcm-play-icon { width: 38px; height: 38px; }
.tgm-lcm-hero-badge-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
    white-space: nowrap; /* never wrap "FEATURED TRACK" when the art is narrow */
}

/* "FEATURED TRACK" — a centered, larger heading across the top of the band
   (moved out of the text column per Mike's mockup). */
.tgm-lcm-hero-eyebrow {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 15px;
    font-weight: 700;
    color: var(--tgm-lcm-accent);
    margin: 0 0 22px;
}
@media (min-width: 769px) {
    .tgm-lcm-hero-eyebrow { font-size: 17px; margin-bottom: 28px; }
}
.tgm-lcm-hero-title { font-size: clamp(28px, 4vw, 42px); margin: 0 0 12px; line-height: 1.15; }
.tgm-lcm-hero-title a { color: var(--tgm-lcm-text); text-decoration: none; }
.tgm-lcm-hero-title a:hover { color: var(--tgm-lcm-accent); }
.tgm-lcm-hero-artist { font-size: 17px; color: var(--tgm-lcm-text-muted); margin: -4px 0 16px; }
.tgm-lcm-hero-artist a { color: var(--tgm-lcm-text-muted); text-decoration: none; }
.tgm-lcm-hero-artist a:hover { color: var(--tgm-lcm-accent); text-decoration: underline; }
.tgm-lcm-hero-note { color: var(--tgm-lcm-text-muted); font-size: 16px; line-height: 1.6; margin: 0 0 16px; max-width: 48ch; }
.tgm-lcm-hero-rating { margin-bottom: 18px; white-space: nowrap; } /* keep "4.8 (1)" on one line in the narrow mobile column */
.tgm-lcm-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.tgm-lcm-hero-cta {
    display: inline-block;
    background: var(--tgm-lcm-accent);
    color: var(--tgm-lcm-accent-text);
    padding: 11px 26px;
    border: 0;                       /* reset: it's now a <button> that plays */
    border-radius: var(--tgm-lcm-radius-sm);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}
.tgm-lcm-hero-cta:hover { background: var(--tgm-lcm-accent-hover); }
/* Secondary "View track ›" link → the track page (the CTA now plays). */
.tgm-lcm-hero-view {
    color: var(--tgm-lcm-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}
.tgm-lcm-hero-view:hover { color: var(--tgm-lcm-accent); }

/* ── Blog teaser ── */
.tgm-lcm-blog-teaser {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--tgm-lcm-surface);
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius-lg);
    overflow: hidden;
}
.tgm-lcm-blog-teaser-img {
    display: block;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}
.tgm-lcm-blog-teaser-body { padding: 20px 22px 22px; }
.tgm-lcm-blog-teaser-title { margin: 0 0 8px; font-size: 20px; }
.tgm-lcm-blog-teaser-title a { color: var(--tgm-lcm-text); text-decoration: none; }
.tgm-lcm-blog-teaser-title a:hover { color: var(--tgm-lcm-accent); }
.tgm-lcm-blog-teaser-excerpt { color: var(--tgm-lcm-text-muted); line-height: 1.6; margin: 0 0 12px; }
.tgm-lcm-blog-teaser-more { color: var(--tgm-lcm-accent); text-decoration: none; font-weight: 600; }
.tgm-lcm-blog-teaser-more:hover { text-decoration: underline; }

/* ── CTA band: the join band carries its own styling (gallery.css); just
 *    give it breathing room and center it. ── */
.tgm-lcm-home-cta .tgm-lcm-join-band { margin: 0 auto; }

/* ── Larger screens ── */
@media (min-width: 769px) {
    .tgm-lcm-hero-inner { grid-template-columns: minmax(0, 380px) 1fr; gap: 40px; }
    .tgm-lcm-hero-art { max-width: none; }
    .tgm-lcm-home-band { padding: 44px 20px; }
    .tgm-lcm-blog-teaser { grid-template-columns: 300px 1fr; align-items: stretch; }
    /* No featured image → single column, no empty gutter. */
    .tgm-lcm-blog-teaser:not(:has(.tgm-lcm-blog-teaser-img)) { grid-template-columns: 1fr; }
    .tgm-lcm-blog-teaser-img { aspect-ratio: auto; height: 100%; min-height: 180px; }
    .tgm-lcm-blog-teaser-body { padding: 24px 28px; align-self: center; }
}

/* ==========================================================================
   Phase 10b — section layouts
   ========================================================================== */

/* Hero: explicit stack ↔ side-by-side (overrides the responsive default). */
.tgm-lcm-home-hero--side .tgm-lcm-hero-inner {
    grid-template-columns: minmax(0, 42%) 1fr; /* narrower art on mobile → portrait */
    gap: 18px;
    align-items: stretch; /* art fills the text column's height (title → CTA) */
}
/* On mobile --side, let the art run tall (portrait) instead of staying square —
   Mike: image should span from the top of the title to the bottom of the
   Listen-now button. The grid stretch gives it the text column's height. */
.tgm-lcm-home-hero--side .tgm-lcm-hero-art {
    aspect-ratio: auto;
    max-width: none;
    min-height: 200px;
}
.tgm-lcm-home-hero--stack .tgm-lcm-hero-inner {
    grid-template-columns: 1fr; /* stacked at every width */
    gap: 20px;
}
@media (min-width: 769px) {
    /* Desktop --side: original square art, vertically centered (looked great). */
    .tgm-lcm-home-hero--side .tgm-lcm-hero-inner { grid-template-columns: minmax(0, 380px) 1fr; gap: 40px; align-items: center; }
    .tgm-lcm-home-hero--side .tgm-lcm-hero-art { aspect-ratio: 1 / 1; min-height: 0; }
}

/* Phones: keep the admin's side-by-side, but shrink the page gutter so the
   featured art is BIGGER (it's background-size:cover, so it crops left/right
   rather than shrinking/distorting), give it a touch more column width, and
   stack the title/artist/rating/buttons in the text column. */
@media (max-width: 600px) {
    .tgm-lcm-home-band { padding-left: 12px; padding-right: 12px; }
    .tgm-lcm-home-hero--side .tgm-lcm-hero-inner { grid-template-columns: minmax(0, 46%) 1fr; gap: 14px; }
    .tgm-lcm-hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* List layout (compact rows): thumb · title + artist · play. */
/* Specificity bump: Kadence's content.min.css sets `.single-content ul {
   padding-left: 2em }`, which out-specifies a single-class rule and indents the
   whole list container (the blog box, a div, isn't affected → they don't line
   up). `.tgm-lcm-home .tgm-lcm-track-list` (2 classes) beats it, so the list
   container sits flush with the band like the blog box. */
.tgm-lcm-home .tgm-lcm-track-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tgm-lcm-track-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--tgm-lcm-surface);
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius);
    padding: 10px 12px; /* normal in-card padding; container alignment with the blog box is handled by the ul specificity fix above (Mike) */
    transition: border-color 0.15s ease;
}
.tgm-lcm-track-list-item:hover { border-color: var(--tgm-lcm-border-strong); }
.tgm-lcm-track-list-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--tgm-lcm-radius-sm);
    background-size: cover;
    background-position: center;
    display: block;
}
.tgm-lcm-track-list-text { flex: 1 1 auto; min-width: 0; }
.tgm-lcm-track-list-title {
    display: block;
    color: var(--tgm-lcm-text);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tgm-lcm-track-list-title:hover { color: var(--tgm-lcm-accent); }
.tgm-lcm-track-list-artist { color: var(--tgm-lcm-text-muted); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgm-lcm-track-list-artist a { color: var(--tgm-lcm-text-muted); text-decoration: none; }
.tgm-lcm-track-list-artist a:hover { color: var(--tgm-lcm-accent); }
/* The play button reuses .tgm-lcm-card-play (for the JS handler) but is a
   simple round button here, not the card's overlay button. */
.tgm-lcm-track-list-play {
    position: static;
    flex: 0 0 auto;
    align-self: center;            /* vertical center in the row */
    /* .tgm-lcm-card-play (gallery.css) sets margin:0 !important + a
       translate(-50%,-50%) for its absolute overlay role — both leak here, so
       reset them: !important margin to win the right-push, transform:none so
       the button isn't shifted up-left by half its size. */
    margin: 0 0 0 auto !important;
    transform: none;
    top: auto;
    left: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.tgm-lcm-track-list-play .tgm-lcm-play-icon { width: 48px; height: 48px; }
/* HOVER/FOCUS/ACTIVE TRANSFORM RESET — the base reset above pins transform:none,
   but .tgm-lcm-card-play:hover (gallery.css) re-applies translate(-50%,-50%)
   scale(1.06) for its absolute-overlay role. On this static button that translate
   yanks it ~half its size up-left ("flies off"). Override all interactive states
   here with a contained in-place scale only — no translate, ever. homepage.css
   loads after gallery.css (enqueue dep), so this equal-specificity rule wins,
   same mechanism the base transform:none reset relies on. */
.tgm-lcm-track-list-play:hover,
.tgm-lcm-track-list-play:focus,
.tgm-lcm-track-list-play:active {
    transform: scale(1.06);
}

/* ── Top-rated / Latest carousel ───────────────────────────────────────────
   Two layers, so the cards are usable even if the engine never starts:
   • BASE (no-JS / pre-init fallback): a plain full-bleed horizontal scroll-snap
     row.
   • ENGINE (.is-ready, added by homepage-carousel.js): a transform "coverflow"
     — items go position:absolute and are driven entirely by translateX + scale
     in JS for a seamless modulo loop + continuous center-scaling, with a thin
     custom scrub bar (the native scrollbar is hidden in both layers).
   Full-bleed + the overflow-x:clip guard are kept in both. */
.tgm-lcm-home-band.tgm-lcm-home--carousel { padding-left: 0; padding-right: 0; }
/* Carousel bands go full-bleed, so inset the whole heading row (title + its
   Play all), not just the title. */
.tgm-lcm-home--carousel .tgm-lcm-home-headrow { padding-left: 16px; padding-right: 16px; }
/* Prevent any horizontal page-scroll from the full-bleed below. Scoped via
   :has() so it only engages on pages with a carousel; safe here because the
   Kadence header is position:relative (clip never affects sticky anyway). */
html:has(.tgm-lcm-track-carousel) { overflow-x: clip; }

/* Full-bleed wrap: breaks out of the theme's content gutter to the screen
   edges so the side cards can slide off the viewport. Owns the card-width var. */
.tgm-lcm-carousel-wrap {
    --tgm-cw: 54vw;                                  /* card width (mobile): ~hero art, L+R peek */
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* BASE / fallback — native scroll-snap row (used until .is-ready). */
.tgm-lcm-track-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Side padding = half the leftover width so the first/last card can reach
       dead-center and the active card is centered in the viewport at rest. */
    padding: 30px calc(50vw - var(--tgm-cw) / 2);
    scroll-padding-inline: calc(50vw - var(--tgm-cw) / 2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                           /* hide scrollbar — cleaner */
}
.tgm-lcm-track-carousel::-webkit-scrollbar { display: none; }
.tgm-lcm-carousel-item {
    flex: 0 0 var(--tgm-cw);
    scroll-snap-align: center;
}

/* ENGINE — JS-driven transform coverflow. */
.tgm-lcm-carousel-wrap.is-ready .tgm-lcm-track-carousel {
    display: block;
    position: relative;
    /* clip (not hidden) + a margin so the cards' deep drop-shadow isn't snipped
       off at the bottom edge while still hiding the off-screen coverflow items. */
    overflow: clip;
    overflow-clip-margin: 28px;
    scroll-snap-type: none;
    padding: 0;
    height: 0;                                       /* JS sets px height = tallest card */
    touch-action: pan-y;                             /* engine owns horizontal drag */
    cursor: grab;
}
.tgm-lcm-carousel-wrap.is-ready .tgm-lcm-track-carousel.is-grabbing { cursor: grabbing; }
.tgm-lcm-carousel-wrap.is-ready .tgm-lcm-carousel-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--tgm-cw);
    margin: 0;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    /* transform / opacity / z-index are set inline by JS each frame; no CSS
       transition — drag must track the finger and the engine eases settles. */
}

/* Thin custom scrub bar — shown only once the engine is live. */
.tgm-lcm-carousel-bar { display: none; }
.tgm-lcm-carousel-wrap.is-ready .tgm-lcm-carousel-bar {
    display: block;
    position: relative;
    width: min(220px, 62%);
    height: 4px;
    margin: 14px auto 2px;
    border-radius: 999px;
    background: var(--tgm-lcm-border-strong);
    cursor: pointer;
    touch-action: none;
}
.tgm-lcm-carousel-bar-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--tgm-lcm-accent);
    /* width + left set inline by JS */
}

@media (min-width: 769px) {
    .tgm-lcm-home--carousel .tgm-lcm-home-heading { padding-left: 20px; padding-right: 20px; }
    .tgm-lcm-carousel-wrap { --tgm-cw: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    /* JS flattens scale + disables drift; nothing animates here. */
    .tgm-lcm-carousel-wrap.is-ready .tgm-lcm-carousel-item { will-change: auto; }
}

/* Artists slider (10c) — circular photo + name chips → artist page. */
.tgm-lcm-artist-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 16px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--tgm-lcm-border-strong) transparent;
}
.tgm-lcm-artist-chip { flex: 0 0 auto; width: 120px; text-align: center; text-decoration: none; }
.tgm-lcm-artist-chip-photo {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--tgm-lcm-surface);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--tgm-lcm-border-strong);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.tgm-lcm-artist-chip:hover .tgm-lcm-artist-chip-photo { border-color: var(--tgm-lcm-accent); transform: translateY(-2px); }
.tgm-lcm-artist-chip-name { color: var(--tgm-lcm-text); font-weight: 600; font-size: 14px; }
.tgm-lcm-artist-chip:hover .tgm-lcm-artist-chip-name { color: var(--tgm-lcm-accent); }

/* "See all posts" link on the blog band. */
.tgm-lcm-home-seeall {
    display: inline-block;
    margin-top: 16px;
    color: var(--tgm-lcm-accent);
    text-decoration: none;
    font-weight: 600;
}
.tgm-lcm-home-seeall:hover { text-decoration: underline; }

/* ── Community wall (general comments band) ──
 * The comment list / form / gate UI is styled in gallery.css (.tgm-lcm-comments*);
 * here we only seat that block in the band and style the band-specific bits. */
.tgm-lcm-home-community .tgm-lcm-comments {
    margin: 0;            /* left-align under the heading instead of the 48px-top single-track spacing */
    max-width: 720px;
}
.tgm-lcm-community-disclaimer {
    margin: 0 0 18px;
    padding: 10px 14px;
    color: var(--tgm-lcm-text-muted);
    font-size: 14px;
    font-style: italic;
    background: var(--tgm-lcm-surface);
    border: 1px solid var(--tgm-lcm-border);
    border-left: 3px solid var(--tgm-lcm-accent);
    border-radius: var(--tgm-lcm-radius-sm);
}
.tgm-lcm-home-community .tgm-lcm-comment-list { margin-top: 24px; }
.tgm-lcm-community-empty { color: var(--tgm-lcm-text-muted); margin: 20px 0 0; }
.comment-author-name { font-weight: 600; }

/* ── Message box band (editable invite/announcement) ── */
.tgm-lcm-home-message {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
}
.tgm-lcm-home-message-body {
    color: var(--tgm-lcm-text-muted);
    font-size: 17px;
    line-height: 1.7;
}
.tgm-lcm-home-message-body p { margin: 0 0 1em; }
.tgm-lcm-home-message-body p:last-child { margin-bottom: 0; }

/* ── Copyright / policy pop-over ── */
.tgm-lcm-home-policy {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
}
.tgm-lcm-policy-link {
    background: none;
    border: 0;
    padding: 4px 8px;
    color: var(--tgm-lcm-text-muted);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.tgm-lcm-policy-link:hover { color: var(--tgm-lcm-accent); }

.tgm-lcm-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;                 /* over the app bar + player */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tgm-lcm-policy-modal[hidden] { display: none; }
.tgm-lcm-policy-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.tgm-lcm-policy-box {
    position: relative;
    background: var(--tgm-lcm-surface);
    color: var(--tgm-lcm-text);
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius-lg);
    box-shadow: var(--tgm-lcm-shadow);
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px 26px;
    text-align: left;
}
.tgm-lcm-policy-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--tgm-lcm-text-muted);
    cursor: pointer;
}
.tgm-lcm-policy-close:hover { color: var(--tgm-lcm-accent); }
.tgm-lcm-policy-title {
    margin: 0 0 14px;
    font-size: 20px;
    color: var(--tgm-lcm-text);
    padding-right: 24px;
}
.tgm-lcm-policy-body {
    color: var(--tgm-lcm-text-muted);
    font-size: 15px;
    line-height: 1.65;
}
.tgm-lcm-policy-body p { margin: 0 0 1em; }
.tgm-lcm-policy-body p:last-child { margin-bottom: 0; }

/* Lock background scroll while the policy modal is open. */
body.tgm-lcm-policy-open { overflow: hidden; }

/* ── All Tracks — minimal grid cards (image + play + title + artist only).
   Purpose-built (NOT the heavy gallery card), so nothing crowds or overflows on
   a small phone. ── */
.tgm-lcm-smallgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
@media (max-width: 560px) {
    .tgm-lcm-smallgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.tgm-lcm-mini-card { min-width: 0; }
.tgm-lcm-mini-art {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--tgm-lcm-radius);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.tgm-lcm-mini-art-link { position: absolute; inset: 0; }
.tgm-lcm-mini-body { padding: 8px 2px 0; min-width: 0; }
.tgm-lcm-mini-title {
    display: block;
    color: var(--tgm-lcm-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tgm-lcm-mini-title:hover { color: var(--tgm-lcm-accent); }
.tgm-lcm-mini-artist {
    display: block;
    color: var(--tgm-lcm-text-muted);
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tgm-lcm-mini-artist a { color: inherit; text-decoration: none; }

/* "Show more" pager for the All Tracks catalog (grid + list). */
.tgm-lcm-showmore {
    display: block;
    margin: 18px auto 0;
    background: var(--tgm-lcm-surface);
    color: var(--tgm-lcm-text);
    border: 1px solid var(--tgm-lcm-border-strong);
    border-radius: 999px;
    padding: 10px 28px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tgm-lcm-showmore:hover { border-color: var(--tgm-lcm-accent); color: var(--tgm-lcm-accent); }

.tgm-lcm-accordion { max-width: 720px; margin: 0 auto; }
.tgm-lcm-acc-item {
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius);
    background: var(--tgm-lcm-surface);
    margin: 0 0 8px;
    overflow: hidden;
}
.tgm-lcm-acc-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--tgm-lcm-text);
}
.tgm-lcm-acc-summary::-webkit-details-marker { display: none; }
.tgm-lcm-acc-summary::marker { content: ''; }
.tgm-lcm-acc-title { flex: 1 1 auto; }
.tgm-lcm-acc-play { flex: 0 0 auto; }
.tgm-lcm-acc-body { padding: 0 14px 14px; }
.tgm-lcm-acc-artist { color: var(--tgm-lcm-text-muted); margin: 0 0 8px; }
.tgm-lcm-acc-rating { margin: 0 0 10px; }
.tgm-lcm-acc-view { color: var(--tgm-lcm-accent); text-decoration: none; font-weight: 600; }
.tgm-lcm-acc-view:hover { text-decoration: underline; }