/* Components: media, cards, kickers, buttons, search, ad zones, newsletter, hub shell. */

/* Media with reserved aspect ratio -> no layout shift. */
.media { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: var(--ratio-card); }
.media--hero { aspect-ratio: var(--ratio-hero); }
.media--tile { aspect-ratio: var(--ratio-tile); }
.media--thumb { aspect-ratio: var(--ratio-thumb); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media__placeholder { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--paper-3) 0 12px, var(--paper-2) 12px 24px); }
.img-vintage img { filter: contrast(1.08) saturate(0.55) sepia(0.25); }

/* Click-to-play video embed (docs/YOUTUBE-INTEGRATION.md): thumbnail/placeholder only until
   assets/js/video-embed.js swaps in the iframe on interaction - never loads the player up front. */
.video-embed__play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(22, 19, 17, 0.35); border: 0; cursor: pointer; padding: 0; }
.video-embed__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.9em 0 0.9em 1.4em; border-color: transparent transparent transparent var(--paper); margin-left: 0.2em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.video-embed__play:hover, .video-embed__play:focus-visible { background: rgba(22, 19, 17, 0.5); }
.video-embed__frame { width: 100%; height: 100%; border: 0; }

/* Decorative "this is a video" affordance on an ordinary article card (category-videos.php) - the
   card still links to the article as normal; the interactive click-to-play embed above is only on
   the dedicated video hub. Same triangle shape as .video-embed__play for visual consistency. */
.card__media-link { position: relative; display: block; }
.card__media-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.card__media-badge::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.7em 0 0.7em 1.1em; border-color: transparent transparent transparent var(--paper); margin-left: 0.15em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }

/* Breadcrumbs (entity hub pages only - inc/breadcrumbs.php; ordinary articles/pages already get
   AIOSEO's own breadcrumbs/schema, docs/URL-AND-SEO.md). */
.breadcrumbs { padding-top: var(--space-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; font-size: var(--fs-0); color: var(--ink-3); }
.breadcrumbs li { display: flex; align-items: center; gap: 0.4em; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--ink-3); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--red); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* Kicker + meta */
.kicker { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-0); font-weight: 600; color: var(--accent); text-decoration: none; }
.kicker--box { background: var(--accent); color: var(--accent-contrast); padding: 0.2em 0.6em; }
.meta { font-size: var(--fs-0); color: var(--ink-3); }
.deck { color: var(--ink-2); font-size: var(--fs-1); }

/* Cards */
.card { display: grid; gap: var(--space-3); align-content: start; }
.card__title { font-size: var(--fs-3); line-height: var(--lh-snug); }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; color: inherit; }
.card__body { display: grid; gap: var(--space-2); }

.card--list { grid-template-columns: 6rem 1fr; align-items: start; padding-block: var(--space-3); border-top: var(--rule-thin); }
.card--list:first-child { border-top: 0; }
.card--list .media { aspect-ratio: var(--ratio-thumb); }
.card--list .card__title { font-size: var(--fs-2); }

.card--tile { position: relative; border: var(--rule); background: var(--ink); color: var(--paper-2); transition: border-color 160ms ease-out; }
.card--tile .media { aspect-ratio: var(--ratio-tile); opacity: 0.85; }
.card--tile .media img, .card--tile .media__placeholder { transition: transform 400ms ease-out; }
.card--tile:hover .media img, .card--tile:hover .media__placeholder,
.card--tile:focus-within .media img, .card--tile:focus-within .media__placeholder { transform: scale(1.06); }
.card--tile:hover, .card--tile:focus-within { border-color: var(--accent); }
.card--tile .card__label { position: absolute; left: var(--space-3); bottom: var(--space-3); right: var(--space-3); font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-3); line-height: 1; color: var(--paper-2); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.card--tile .card__label b { color: var(--accent); font-weight: inherit; }
.card--tile a { position: absolute; inset: 0; }

/* Decorative section artwork (docs/DESIGN-ASSETS.md, docs/HIGGSFIELD-MCP.md) shown behind a tile's
   label until that section has a real article with its own featured image - never faked content,
   just branding for an empty section. */
.card--tile[data-section="legends"] .media__placeholder { background-image: url("../img/tiles/guitar-legends.jpg"); background-size: cover; background-position: center; }
.card--tile[data-section="gear"] .media__placeholder { background-image: url("../img/tiles/gear-rigs.jpg"); background-size: cover; background-position: center; }
.card--tile[data-section="diy"] .media__placeholder { background-image: url("../img/tiles/diy-builds.jpg"); background-size: cover; background-position: center; }
.card--tile[data-section="history"] .media__placeholder { background-image: url("../img/tiles/rock-history.jpg"); background-size: cover; background-position: center; }
.card--tile[data-section="news"] .media__placeholder { background-image: url("../img/tiles/news-culture.jpg"); background-size: cover; background-position: center; }
.card--tile[data-section="videos"] .media__placeholder { background-image: url("../img/tiles/videos.jpg"); background-size: cover; background-position: center; }

/* Homepage spotlight rows (template-parts/spotlight-row.php): text-forward entity cards, no image
   required (gg-platform entities carry no photo field yet) - icon + kicker + name instead. */
.card--spotlight { position: relative; border: var(--rule); background: var(--ink); color: var(--paper-2); padding: var(--space-5) var(--space-4) var(--space-4); min-height: 9rem; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); transition: border-color 120ms ease; }
.card--spotlight:hover, .card--spotlight:focus-within { border-color: var(--accent); }
.card--spotlight__icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin-bottom: auto; }
.card--spotlight .kicker { font-size: var(--fs-0); }
.card--spotlight .card__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-3); line-height: var(--lh-tight); }
.card--spotlight a { position: absolute; inset: 0; }
.spotlight__row { grid-auto-columns: minmax(10rem, 1fr); }

.card--hero { position: relative; border: var(--rule); background: var(--ink); color: var(--paper-2); }
.card--hero .media { aspect-ratio: var(--ratio-hero); }
.card--hero .media img { filter: contrast(1.05) saturate(0.8); animation: gg-ken-burns 24s ease-in-out infinite alternate; }
/* Slow, ambient - never hover-gated (the point is a magazine cover that's quietly alive, not a
   trick you have to find). prefers-reduced-motion's blanket animation:none rule (base.css) already
   turns this off for anyone who's asked for less motion. */
@keyframes gg-ken-burns { from { transform: scale(1); } to { transform: scale(1.07); } }
.card--hero .card__body { padding: var(--space-4); gap: var(--space-3); }
.card--hero .kicker { color: var(--accent-contrast); background: var(--accent); padding: 0.25em 0.6em; }
.card--hero .card__title { font-size: var(--fs-6); text-transform: uppercase; line-height: var(--lh-tight); }
.card--hero .card__title a { color: inherit; }
.card--hero .deck { color: var(--paper-3); max-width: 38rem; }
.card--hero .meta { color: var(--paper-3); }

/* Pillar-page index grid (template-parts/entity-index-grid.php): a roster of linked name cards. */
.card-grid--index { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.card--index-item { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 4.5rem; padding: var(--space-3); border: var(--rule); background: var(--paper-2); border-top: 4px solid var(--accent); text-decoration: none; transition: background var(--ease), transform var(--ease); }
.card--index-item:hover { background: var(--paper-3); color: inherit; transform: translateY(-2px); }
.card--index-item .card__title { font-size: var(--fs-2); text-transform: uppercase; letter-spacing: 0.02em; }
@media (min-width: 48rem) { .card-grid--index { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .card-grid--index { grid-template-columns: repeat(4, 1fr); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.1em; background: var(--red); color: #fff; border: 2px solid var(--red); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-1); transition: background var(--ease), border-color var(--ease); }
.btn:hover { background: var(--red-2); border-color: var(--red-2); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.btn--ink { background: var(--ink); border-color: var(--ink); }

/* Search */
.site-search { display: flex; border: var(--rule); background: var(--paper-2); }
/* Mobile-first: an <input type="search"> with no explicit width renders at its browser-default
   intrinsic size (~220px) regardless of min-width, which alone never constrained anything here -
   combined with the wordmark and masthead gutter, that genuinely doesn't fit a narrow phone
   viewport (a real horizontal-overflow bug found by e2e/tests/page-types.spec.ts, 2026-09-12).
   An explicit width (not just min-width) actually caps it; the wider, more comfortable width
   returns once the masthead has room (48rem breakpoint below). */
.site-search input { border: 0; background: transparent; padding: 0.45em 0.7em; width: 5rem; min-width: 0; }
.site-search button { border: 0; background: var(--ink); color: var(--paper-2); padding: 0 0.8em; }
/* Same 48rem breakpoint as layout.css's masthead rules - kept here instead, since assets.php
   loads layout.css before components.css and a rule of equal specificity in the later-loaded
   file always wins regardless of which one's media query is satisfied. */
@media (min-width: 48rem) {
  .site-search input { width: 9rem; }
}

/* Ad zone: fixed reserved size; never collapses after first paint (docs/ADS.md). */
.ad-zone { display: grid; place-items: center; margin-inline: auto; border: 1px dashed var(--paper-3); background: var(--paper-2); color: var(--ink-3); font-size: var(--fs-0); overflow: hidden; }
.ad-zone__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* Newsletter slot */
.newsletter { border: var(--rule); background: var(--paper-2); padding: var(--space-5); display: grid; gap: var(--space-3); }
.newsletter__title { font-size: var(--fs-4); text-transform: uppercase; color: var(--red); }
.newsletter__form { display: grid; gap: var(--space-2); }
.newsletter__form input[type="email"] { border: var(--rule); padding: 0.6em 0.8em; background: #fff; }
.newsletter__fine { font-size: var(--fs-0); color: var(--ink-3); }

/* Hub shell (artist / band / gear pages, populated in Phase 3a) */
.hub-header { border-bottom: var(--rule); padding-block: var(--space-6); display: grid; gap: var(--space-3); }
.hub-header__title { font-size: var(--fs-7); text-transform: uppercase; line-height: var(--lh-tight); }
.hub-nav { display: flex; gap: var(--space-4); overflow-x: auto; border-bottom: var(--rule-thin); }
.hub-nav a { white-space: nowrap; padding: var(--space-3) 0; text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 3px solid transparent; }
.hub-nav a[aria-current="true"] { border-color: var(--accent); }
.hub-section { padding-block: var(--space-6); border-bottom: var(--rule-thin); }

/* Pagination */
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-block: var(--space-5); }
.pagination .page-numbers { padding: 0.4em 0.8em; border: var(--rule); text-decoration: none; font-family: var(--font-display); }
.pagination .page-numbers.current { background: var(--ink); color: var(--paper-2); }