/* components.css, reusable UI primitives shared across pages.
   Reads only tokens.css variables. Loaded after base.css.

   Present now (M1): buttons, chips/tags, cards, panels, section headings.
   Added later: .shelf (M6 home), .lightbox (M4), block styles for post bodies
   (M4, mirrored by js/site/blocks.js). Keep those additions in this file. */

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.btn-secondary { background: var(--secondary); color: var(--on-secondary); }
.btn-secondary:hover { background: var(--secondary-hover); color: var(--on-secondary); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.btn-ghost { background: var(--surface-1); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }

/* --- Chips / tags (legacy .tag look: light fill, dark ink, uppercase) --- */
.chip {
    display: inline-block;
    padding: 4px 12px;
    background: var(--chip-bg);
    color: var(--chip-text);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Accent-outline chip variant (for skill categories on cards, filters, etc.) */
.chip-accent {
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent);
    text-transform: none;
    letter-spacing: 0;
}

/* --- Panel: a translucent section block (about/catalogue backdrops) --- */
.panel {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* --- Card: the base for project/blog cards and shelf tiles --- */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.card__media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: #000; }
.card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.card__title { font-size: 1.25rem; color: var(--accent); }
.card__text { color: var(--text); opacity: 0.85; font-size: 0.98rem; }

/* --- Section heading (centered accent title used atop page sections) --- */
.section-title { text-align: center; color: var(--accent); margin-bottom: var(--space-6); }

/* --- Collection tile: big blurred banner + fanned deck of covers (home) --- */
.collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-5); }
.collection-tile {
    position: relative;
    display: block;
    min-height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--text);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.collection-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: var(--accent); color: var(--text); }
.collection-tile__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; filter: blur(14px) saturate(1.15); transform: scale(1.15);
    transition: transform var(--ease);
}
.collection-tile:hover .collection-tile__bg { transform: scale(1.22); }
.collection-tile__shade {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(11, 14, 25, 0.9) 0%, rgba(11, 14, 25, 0.72) 50%, rgba(11, 14, 25, 0.88) 100%);
}
/* Fanned deck of covers, top-right */
.collection-tile__deck { position: absolute; top: var(--space-5); right: var(--space-5); z-index: 2; display: flex; }
.collection-tile__thumb {
    width: 96px; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--radius-sm); border: 2px solid var(--surface-solid);
    box-shadow: var(--shadow-card);
    transition: transform var(--ease), margin var(--ease);
}
.collection-tile__thumb:not(:first-child) { margin-left: -46px; }
.collection-tile__thumb:nth-child(1) { transform: rotate(-6deg); }
.collection-tile__thumb:nth-child(2) { transform: rotate(1deg) translateY(-4px); }
.collection-tile__thumb:nth-child(3) { transform: rotate(7deg) translateY(2px); }
.collection-tile:hover .collection-tile__thumb:not(:first-child) { margin-left: -22px; }
.collection-tile:hover .collection-tile__thumb { transform: rotate(0deg) translateY(0); }
/* Label block, bottom-left */
.collection-tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--space-6) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.collection-tile__count { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.collection-tile__title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); color: var(--accent); margin: 0; line-height: 1.1; }
.collection-tile__cta { font-size: 0.9rem; font-weight: 700; color: var(--text); opacity: 0.85; transition: color var(--ease), opacity var(--ease); }
.collection-tile:hover .collection-tile__cta { color: var(--accent); opacity: 1; }
@media (max-width: 560px) {
    .collection-tile__deck { display: none; }   /* keep the label readable on phones */
}

/* --- Social icon row (reused by footer and about page) --- */
.social-row { display: flex; gap: var(--space-5); align-items: center; }
.social-row a { display: block; transition: transform var(--ease), opacity var(--ease); }
.social-row a:hover { transform: scale(1.15); opacity: 0.85; }
.social-row img { object-fit: contain; }

/* =========================================================================
   POST BODY BLOCKS  (rendered by js/site/blocks.js, shared with editor preview)
   ========================================================================= */
.post-body { max-width: 800px; margin: 0 auto; }
.post-body > * { margin-bottom: var(--space-5); }
.post-heading { color: var(--accent); margin-top: var(--space-6); }
.post-text { font-size: var(--fs-400); line-height: var(--lh-normal); }
.post-text p { margin: 0 0 var(--space-4); }
.post-text a { text-decoration: underline; }
.post-text ul, .post-text ol { margin: 0 0 var(--space-4) var(--space-5); }
.post-bullets { margin-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.post-bullets li { font-size: var(--fs-400); }

.post-figure { margin: 0; }
.post-image {
    width: 100%;
    border-radius: var(--radius-lg);
    cursor: zoom-in;
    background: #000;
    box-shadow: var(--shadow-card);
}
.post-figcaption { margin-top: var(--space-2); font-size: 0.9rem; color: var(--text-muted); text-align: center; }

.post-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
}
.post-gallery__item {
    padding: 0; border: 0; background: none; cursor: zoom-in;
    border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1;
}
.post-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease); background: #000; }
.post-gallery__item:hover .post-gallery__img { transform: scale(1.06); }

/* Click-to-play video (built by media.js makeVideo) */
.post-video { margin: 0; position: relative; }
.post-video__play {
    display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: #000; aspect-ratio: 16 / 9;
}
.post-video__poster { width: 100%; height: 100%; object-fit: cover; }
.post-video__icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 74px; height: 74px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); border: 2px solid #fff; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; padding-left: 4px; transition: background var(--ease), transform var(--ease);
}
.post-video__play:hover .post-video__icon { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
.post-video__player { width: 100%; border-radius: var(--radius-lg); background: #000; display: block; }

/* Slideshow (Steam-style stage + thumb strip; built by media.js makeSlideshow) */
.pshow { display: flex; flex-direction: column; gap: var(--space-2); }
/* [❮][ image ][❯], arrows sit beside the stage, kept narrow so the image keeps
   as much of the row's width as possible. */
.pshow__stagewrap { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.pshow__stage {
    position: relative;          /* slides stack here to cross-fade */
    flex: 1; min-width: 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
/* One layer per slide: stacked, cross-fading between each other. The resting
   state is OPAQUE and the fade is an animation on top, so if animations never
   run (reduced motion, an old engine, a headless render) a slide still shows
   at full opacity and the show degrades to a hard cut instead of going blank. */
.pshow__slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 1;
}
.pshow__slide.is-entering { animation: pshow-fade-in 350ms ease both; }
.pshow__slide.is-leaving { animation: pshow-fade-out 350ms ease both; }
@keyframes pshow-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pshow-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .pshow__slide.is-entering, .pshow__slide.is-leaving { animation: none; }
    .pshow__slide.is-leaving { opacity: 0; }
}
.pshow__stage .pshow__img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.pshow__stage .pshow__video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.pshow__stage .post-video, .pshow__stage .post-video__play, .pshow__stage .post-video__player { width: 100%; height: 100%; border-radius: 0; }
/* Arrows sit OUTSIDE the image, in the gutters either side of the stage. */
.pshow__arrow {
    flex: 0 0 auto;
    width: 20px; padding: var(--space-3) 0;
    background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--text);
    font-size: 0.95rem; font-weight: 900; line-height: 1; cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease);
}
.pshow__arrow:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); transform: scale(1.08); }
.pshow__thumbs {
    display: flex; gap: var(--space-2);
    overflow-x: auto; padding: var(--space-1) 2px var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.pshow__thumbs::-webkit-scrollbar { height: 6px; }
.pshow__thumbs::-webkit-scrollbar-track { background: transparent; }
.pshow__thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.pshow__thumbs::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Center when they fit; `safe` avoids clipping the first thumb when they overflow. */
.pshow__thumbs { justify-content: safe center; }
.pshow__thumb {
    position: relative; flex: 0 0 auto;
    width: 112px; aspect-ratio: 16 / 9;
    padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
    overflow: hidden; background: #000; cursor: pointer;
    opacity: 0.55; transition: opacity var(--ease), border-color var(--ease), transform var(--ease);
}
.pshow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pshow__thumb:hover { opacity: 1; }
.pshow__thumb.is-active { opacity: 1; border-color: var(--accent); transform: scale(1.04); }
.pshow__thumb-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; text-shadow: 0 0 8px #000;
    background: rgba(0, 0, 0, 0.35); pointer-events: none;
}

/* YouTube embed */
.post-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; }
.post-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.post-quote {
    border-left: 3px solid var(--accent);
    padding: var(--space-2) var(--space-5);
    color: var(--text);
    font-style: italic;
    font-size: var(--fs-400);
}
.post-quote__cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: 0.9rem; color: var(--text-muted); }
.post-divider { border: 0; border-top: 1px solid var(--border); }

/* =========================================================================
   LIGHTBOX  (singleton built by media.js; originals loaded on open)
   ========================================================================= */
body.lightbox-open { overflow: hidden; }
.lightbox {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0, 0, 0, 0.9);
    display: none; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox__stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.lightbox__img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__cap { color: var(--text-muted); font-size: 0.95rem; text-align: center; }
.lightbox__close {
    position: absolute; top: 18px; right: 24px;
    background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
}
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4); border: 0; color: #fff;
    font-size: 2.4rem; cursor: pointer; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius); transition: color var(--ease), background var(--ease);
}
.lightbox__nav:hover { color: var(--accent); background: rgba(0, 0, 0, 0.7); }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
.lightbox__close:hover { color: var(--accent); }