/* ============================================================
   KJ YouTube Gallery — Scoped Styles
   All rules nested under .kj-yt-gallery to prevent theme bleed.
   Ported from Watch.html prototype (two-concept design).
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --kj-cream:        #f6f2ea;
  --kj-paper:        #ffffff;
  --kj-ink:          #121818;
  --kj-ink-2:        #2d3c3b;
  --kj-ink-soft:     #424242;
  --kj-mute:         #757575;
  --kj-rule:         #e7e2d8;
  --kj-terracotta:   #b44e3d;
  --kj-terracotta-2: #a75443;
  --kj-olive:        #8c845d;
  --kj-noir:         #0d0d0d;
  --kj-noir-2:       #161616;
  --kj-noir-rule:    #2a2a2a;
  --kj-noir-text:    #f3f0e8;
  --kj-noir-mute:    #8a8a8a;
  --kj-f-sans:       "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kj-f-serif:      "Times New Roman", Times, "EB Garamond", Georgia, serif;
  --kj-f-mono:       "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --kj-r-sm:         3px;
  --kj-r-md:         4px;
  --kj-r-lg:         10px;
  --kj-r-pill:       999px;
}

/* ============================================================
   2. SCOPED BASE RESET
   ============================================================ */
.kj-yt-gallery *,
.kj-yt-gallery *::before,
.kj-yt-gallery *::after { box-sizing: border-box; }

.kj-yt-gallery img  { display: block; max-width: 100%; }
.kj-yt-gallery a    { color: inherit; }

.kj-yt-gallery {
  /* No font-family here — let the theme's heading font cascade through.
     Specific elements (kicker, duration, CTA copy) set their own families below. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* kicker — small-caps mono tag line */
.kj-yt-gallery .kicker {
  display: block;
  font-family: var(--kj-f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kj-mute);
}

/* ============================================================
   3. CONCEPT 1 — EDITORIAL MAGAZINE
   ============================================================ */
.kj-yt-gallery.kj-style-editorial {
  background: var(--kj-cream);
  color: var(--kj-ink);
  padding: 56px 28px 96px;
}

.kj-yt-gallery.kj-style-editorial .c1-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* — masthead — */
.kj-yt-gallery.kj-style-editorial .c1-mast { margin-bottom: 48px; }
.kj-yt-gallery.kj-style-editorial .c1-mast .kicker { margin-bottom: 14px; }

.kj-yt-gallery.kj-style-editorial .c1-mast h1 {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.kj-yt-gallery.kj-style-editorial .c1-mast h1 em {
  font-family: var(--kj-f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
}
.kj-yt-gallery.kj-style-editorial .c1-mast p {
  max-width: 640px;
  margin: 0;
  font-family: var(--kj-f-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--kj-ink-soft);
}

/* — asymmetric 60/40 hero — */
.kj-yt-gallery.kj-style-editorial .c1-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  margin-bottom: 64px;
}

.kj-yt-gallery.kj-style-editorial .c1-feat { cursor: pointer; }
.kj-yt-gallery.kj-style-editorial .c1-feat .thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--kj-r-md);
  overflow: hidden;
}
.kj-yt-gallery.kj-style-editorial .c1-feat h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 18px 0 10px;
}
.kj-yt-gallery.kj-style-editorial .c1-feat .desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--kj-ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* — sidebar stacked cards — */
.kj-yt-gallery.kj-style-editorial .c1-side { display: flex; flex-direction: column; gap: 20px; }

.kj-yt-gallery.kj-style-editorial .c1-side .card {
  cursor: pointer;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}
.kj-yt-gallery.kj-style-editorial .c1-side .card .thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--kj-r-md);
  overflow: hidden;
}
.kj-yt-gallery.kj-style-editorial .c1-side .card .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kj-yt-gallery.kj-style-editorial .c1-side .card h3 {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 5px;
  text-wrap: pretty;
}
/* title split: main title heavier, channel name lighter */
.kj-yt-gallery.kj-style-editorial .c1-side .card .kj-title-main {
  font-weight: 700;
  display: block;
}
.kj-yt-gallery.kj-style-editorial .c1-side .card .kj-title-chan {
  font-weight: 400;
  font-size: 12px;
  color: var(--kj-mute);
  display: block;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.kj-yt-gallery.kj-style-editorial .c1-side .card .duration {
  font-family: var(--kj-f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--kj-mute);
  text-transform: uppercase;
}

/* — subscribe CTA strip — */
.kj-yt-gallery.kj-style-editorial .c1-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--kj-rule);
  border-bottom: 1px solid var(--kj-rule);
  margin-bottom: 56px;
}
.kj-yt-gallery.kj-style-editorial .c1-cta .copy { max-width: 56ch; }
.kj-yt-gallery.kj-style-editorial .c1-cta .copy .kicker { margin-bottom: 6px; }
.kj-yt-gallery.kj-style-editorial .c1-cta .copy p {
  margin: 0;
  font-family: var(--kj-f-serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--kj-ink);
}
.kj-yt-gallery.kj-style-editorial .c1-cta .kj-btn {
  display: inline-block;
  background: var(--kj-ink);
  color: var(--kj-cream);
  padding: 16px 32px;
  border-radius: var(--kj-r-pill);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.kj-yt-gallery.kj-style-editorial .c1-cta .kj-btn:hover {
  background: var(--kj-terracotta);
  transform: translateY(-1px);
}

/* — section heading — */
.kj-yt-gallery.kj-style-editorial .c1-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kj-rule);
}
.kj-yt-gallery.kj-style-editorial .c1-section-head h2 {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}

/* — 3-col grid — */
.kj-yt-gallery.kj-style-editorial .c1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
}
.kj-yt-gallery.kj-style-editorial .c1-grid .card { cursor: pointer; }
.kj-yt-gallery.kj-style-editorial .c1-grid .card .thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--kj-r-md);
  overflow: hidden;
}
.kj-yt-gallery.kj-style-editorial .c1-grid .card h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 14px 0 6px;
  text-wrap: pretty;
}
.kj-yt-gallery.kj-style-editorial .c1-grid .card .desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--kj-ink-soft);
  margin: 0;
}
.kj-yt-gallery.kj-style-editorial .c1-grid .card .duration {
  font-family: var(--kj-f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--kj-mute);
  text-transform: uppercase;
  margin-top: 10px;
  display: inline-block;
}

/* ============================================================
   4. DESCRIPTION EXPAND (editorial, shared)
   ============================================================ */

/* "Read more / Show less" inline toggle button */
.kj-yt-gallery .kj-desc-toggle {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 5px;
  cursor: pointer;
  font-family: var(--kj-f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kj-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  vertical-align: baseline;
  line-height: inherit;
}
.kj-yt-gallery .kj-desc-toggle:hover {
  color: var(--kj-terracotta-2);
}

/* ============================================================
   5. SHARED THUMB BEHAVIORS (slow scale + play icon fade)
   ============================================================ */
.kj-yt-gallery .thumb {
  position: relative;
  background: #ddd;
  overflow: hidden;
}
.kj-yt-gallery .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s;
}

/* dark radial overlay behind play arrow */
.kj-yt-gallery .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.32) 0 38px, transparent 39px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* play arrow */
.kj-yt-gallery .thumb::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translate(-40%, -50%) scale(.85);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 2;
  pointer-events: none;
}

.kj-yt-gallery .card:hover .thumb img,
.kj-yt-gallery .c1-feat:hover .thumb img { transform: scale(1.04); }

.kj-yt-gallery .card:hover .thumb::after,
.kj-yt-gallery .c1-feat:hover .thumb::after,
.kj-yt-gallery .card:hover .thumb::before,
.kj-yt-gallery .c1-feat:hover .thumb::before { opacity: 1; }

.kj-yt-gallery .card:hover .thumb::before,
.kj-yt-gallery .c1-feat:hover .thumb::before { transform: translate(-40%, -50%) scale(1); }

/* ============================================================
   6. CONCEPT 2 — CINEMA GALLERY
   ============================================================ */
.kj-yt-gallery.kj-style-cinema {
  background: var(--kj-noir);
  color: var(--kj-noir-text);
  padding: 80px 28px 120px;
  /* Cinema style keeps its own precise typography */
  font-family: var(--kj-f-sans);
}
.kj-yt-gallery.kj-style-cinema .c2-inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* — masthead (centered) — */
.kj-yt-gallery.kj-style-cinema .c2-mast {
  text-align: center;
  margin-bottom: 56px;
}
.kj-yt-gallery.kj-style-cinema .c2-mast .kicker {
  color: var(--kj-noir-mute);
  margin-bottom: 14px;
}
.kj-yt-gallery.kj-style-cinema .c2-mast h1 {
  font-family: var(--kj-f-sans);
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 64px);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 18px;
  line-height: 1;
}
.kj-yt-gallery.kj-style-cinema .c2-mast p {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kj-noir-mute);
}

/* — outlined subscribe button — */
.kj-yt-gallery.kj-style-cinema .c2-cta-row {
  display: flex;
  justify-content: center;
  margin: 32px 0 64px;
}
.kj-yt-gallery.kj-style-cinema .c2-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border: 1px solid var(--kj-noir-text);
  color: var(--kj-noir-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--kj-r-sm);
  transition: background .25s, color .25s, border-color .25s;
}
.kj-yt-gallery.kj-style-cinema .c2-btn:hover {
  background: var(--kj-noir-text);
  color: var(--kj-noir);
}
.kj-yt-gallery.kj-style-cinema .c2-btn .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kj-terracotta);
  box-shadow: 0 0 0 4px rgba(180,78,61,.18);
  flex-shrink: 0;
}

/* — uniform 16:9 grid — */
.kj-yt-gallery.kj-style-cinema .c2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kj-yt-gallery.kj-style-cinema .c2-grid.kj-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* — cinema card — */
.kj-yt-gallery.kj-style-cinema .c2-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--kj-r-sm);
  overflow: hidden;
  cursor: pointer;
  background: #111;
}
.kj-yt-gallery.kj-style-cinema .c2-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.35) saturate(.7) brightness(.86);
  transition: filter .5s, transform .9s cubic-bezier(.2,.7,.2,1);
}
.kj-yt-gallery.kj-style-cinema .c2-card:hover img {
  filter: none;
  transform: scale(1.02);
}

/* hover overlay — gradient */
.kj-yt-gallery.kj-style-cinema .c2-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%);
  opacity: 0;
  transition: opacity .35s ease;
}
.kj-yt-gallery.kj-style-cinema .c2-card:hover .overlay { opacity: 1; }

/* play ring */
.kj-yt-gallery.kj-style-cinema .c2-card .play {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.9);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.kj-yt-gallery.kj-style-cinema .c2-card:hover .play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.kj-yt-gallery.kj-style-cinema .c2-card .play::after {
  content: "";
  width: 0; height: 0;
  border-left: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

/* title slide-up */
.kj-yt-gallery.kj-style-cinema .c2-card .title {
  font-family: var(--kj-f-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #fff;
  transform: translateY(12px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1) .05s;
  text-wrap: pretty;
}
.kj-yt-gallery.kj-style-cinema .c2-card:hover .title { transform: translateY(0); }

/* meta fade-up */
.kj-yt-gallery.kj-style-cinema .c2-card .c2-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  font-family: var(--kj-f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.7,.2,1) .1s, opacity .4s ease .1s;
}
.kj-yt-gallery.kj-style-cinema .c2-card:hover .c2-meta {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   7. MODAL LIGHTBOX (appended to <body>, shared across instances)
   ============================================================ */
.kj-yt-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,8,8,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 24px;
}
.kj-yt-modal[data-open="true"] { display: flex; }

.kj-yt-modal-inner {
  position: relative;
  width: min(1000px, 100%);
  display: flex;
  flex-direction: column;
  background: #000;
  border-radius: var(--kj-r-md);
  overflow: hidden;
  max-height: 90vh;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

.kj-yt-modal-close {
  position: absolute;
  top: -44px; right: 0;
  color: #fff;
  font-family: var(--kj-f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
}
.kj-yt-modal-close:hover { color: var(--kj-terracotta); }

/* player keeps 16:9, never shrinks */
.kj-yt-modal-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.kj-yt-modal lite-youtube,
.kj-yt-modal-player lite-youtube {
  max-width: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* description + Watch on YouTube link */
.kj-yt-modal-info {
  padding: 20px 28px 24px;
  background: var(--kj-noir-2);
  overflow-y: auto;
}
.kj-yt-modal-desc {
  font-family: var(--kj-f-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--kj-noir-text);
  margin: 0 0 14px;
}
.kj-yt-modal-watch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--kj-f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kj-noir-mute);
  text-decoration: none;
  transition: color .2s;
}
.kj-yt-modal-watch::after {
  content: "↗";
  font-size: 11px;
  line-height: 1;
}
.kj-yt-modal-watch:hover { color: var(--kj-terracotta); }

/* ============================================================
   8. UTILITY — error notice + empty state
   ============================================================ */
.kj-yt-gallery .kj-yt-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  margin: 16px 0;
  font-family: var(--kj-f-mono);
}
.kj-yt-gallery .kj-yt-notice strong { display: block; margin-bottom: 4px; }

.kj-yt-gallery .kj-yt-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--kj-mute);
  font-family: var(--kj-f-mono);
  font-size: 13px;
  letter-spacing: .1em;
}
.kj-yt-gallery.kj-style-cinema .kj-yt-empty { color: var(--kj-noir-mute); }

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .kj-yt-gallery.kj-style-editorial .c1-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kj-yt-gallery.kj-style-editorial .c1-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }
  .kj-yt-gallery.kj-style-editorial .c1-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .kj-yt-gallery.kj-style-editorial .c1-cta .kj-btn {
    width: 100%;
    text-align: center;
    padding: 18px;
  }
  .kj-yt-gallery.kj-style-cinema .c2-grid,
  .kj-yt-gallery.kj-style-cinema .c2-grid.kj-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .kj-yt-gallery.kj-style-editorial { padding: 36px 18px 72px; }
  .kj-yt-gallery.kj-style-editorial .c1-side .card {
    grid-template-columns: 120px 1fr;
  }
  .kj-yt-gallery.kj-style-editorial .c1-grid {
    grid-template-columns: 1fr;
  }
  .kj-yt-gallery.kj-style-cinema { padding: 56px 18px 80px; }
  .kj-yt-gallery.kj-style-cinema .c2-grid,
  .kj-yt-gallery.kj-style-cinema .c2-grid.kj-cols-3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kj-yt-modal { padding: 12px; }
  .kj-yt-modal-close { top: -32px; }
}