/* ==========================================================================
   COMPONENT — .c-archive controls  +  .c-video-card
   The filter / search / sort bar above the video timeline, plus the card used
   by the related strip on a single-video page. The timeline layout itself
   lives in timeline.css.

   WP Phase 2 targets:
     template-parts/archive/archive-controls.php
     template-parts/card/card-video.php
   ========================================================================== */

.c-archive {
  position: relative;
  background: var(--c-bg);
  padding-block: var(--section-pad);
}

/* --------------------------------------------------------------------------
   Controls — a mono ledger bar, not a dropdown.
   -------------------------------------------------------------------------- */

.c-archive__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-4);
  border-block: var(--bw-hair) solid var(--c-line);
  margin-block-end: var(--sp-8);
}

.c-archive__readout {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.c-archive__readout b {
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.c-archive__sort {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: var(--bw-hair) solid var(--c-line-strong);
}

.c-archive__sort-label {
  display: flex;
  align-items: center;
  padding-inline: var(--sp-4);
  border-inline-end: var(--bw-hair) solid var(--c-line-strong);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.c-archive__sort-btn {
  position: relative;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.c-archive__sort-btn + .c-archive__sort-btn {
  border-inline-start: var(--bw-hair) solid var(--c-line-strong);
}

.c-archive__sort-btn:hover { color: var(--c-ink); }

.c-archive__sort-btn[aria-pressed="true"] {
  background: var(--c-ink);
  color: var(--c-bg);
}

/* Sort direction glyph rotates to match the active order. */
.c-archive__sort-btn svg {
  display: inline-block;
  inline-size: 0.7em;
  block-size: auto;
  margin-inline-end: var(--sp-2);
  vertical-align: baseline;
}

.c-archive__sort-btn--asc svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */

.c-video-card {
  --card-title-size: var(--fs-lg);
  position: relative;
}

.c-video-card__link {
  display: block;
  outline-offset: 6px;
}

/* --- Thumbnail ----------------------------------------------------------- */

.c-video-card__thumb {
  position: relative;
  aspect-ratio: var(--card-ar, var(--ar-wide));
  overflow: hidden;
  background: var(--slate-900);
}

/*
  .c-video-card__image is the swap point. In WordPress this element becomes
  the real thumbnail and every transition below applies unchanged:

    <img class="c-video-card__image"
         src="<?php echo esc_url( $thumb_url ); ?>"
         alt="" width="1280" height="720" loading="lazy" decoding="async">

  Until then it renders an on-palette limestone/slate placeholder built from
  the two per-card custom properties set inline on the card.
*/
.c-video-card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background:
    linear-gradient(
      var(--thumb-angle, 155deg),
      var(--thumb-a, var(--slate-700)) 0%,
      var(--thumb-b, var(--slate-950)) 100%);
  filter: saturate(0.9) contrast(1.02);
  transform: scale(1.001);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
  will-change: transform;
}

.c-video-card__link:hover .c-video-card__image,
.c-video-card__link:focus-visible .c-video-card__image {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.06);
}

/* Bottom scrim, revealed rather than always-on. */
.c-video-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--slate-950) 76%, transparent) 0%,
    transparent 46%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.c-video-card__link:hover .c-video-card__thumb::after,
.c-video-card__link:focus-visible .c-video-card__thumb::after { opacity: 1; }

.c-video-card__duration {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: var(--z-overlap);
  padding: var(--sp-1) var(--sp-2);
  background: color-mix(in oklab, var(--slate-950) 84%, transparent);
  backdrop-filter: blur(4px);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  color: var(--stone-50);
  line-height: 1.4;
}

/* Play affordance — a mono tag that slides in from the left edge. */
.c-video-card__play {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-start: 0;
  z-index: var(--z-overlap);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-accent);
  color: var(--c-accent-on);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1.4;
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.c-video-card__link:hover .c-video-card__play,
.c-video-card__link:focus-visible .c-video-card__play { transform: translateX(0); }

.c-video-card__play svg { inline-size: 0.6em; block-size: auto; }

/* --- Body ---------------------------------------------------------------- */

.c-video-card__body { padding-block-start: var(--sp-4); }

.c-video-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: 1;
}

.c-video-card__no { color: var(--c-accent-text); }

.c-video-card__meta::after {
  content: "";
  flex: 1;
  block-size: var(--bw-hair);
  background: var(--c-line);
}

.c-video-card__title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: var(--fw-regular);
  font-size: var(--card-title-size);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

/* Underline draws from the left on hover — no colour change, no glow. */
.c-video-card__title span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--bw-hair);
  transition: background-size var(--dur-base) var(--ease-out);
  padding-block-end: 0.06em;
}

.c-video-card__link:hover .c-video-card__title span,
.c-video-card__link:focus-visible .c-video-card__title span {
  background-size: 100% var(--bw-hair);
}

.c-video-card__excerpt {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — the cycle collapses to a two-slot, then one-slot rhythm.
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .c-archive__index      { grid-column: content-start / content-end; grid-row: auto; padding-block-start: 0; }
  .c-archive__title      { grid-column: content-start / content-end; grid-row: auto; }
  .c-archive__standfirst { grid-column: content-start / span 9; grid-row: auto; align-self: auto; }



}

@media (max-width: 40rem) {

  .c-archive__sort { inline-size: 100%; }
  .c-archive__sort-btn { flex: 1; }
}

/* Long archives: let the browser skip offscreen card layout entirely.
   Matters at 650 posts, harmless at 10. */
@supports (content-visibility: auto) {
  .c-video-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
}


@keyframes card-reveal {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   FILTER BAR — subject chips on the left, live search on the right.
   Sits above the ledger row that carries the count and the sort control.
   -------------------------------------------------------------------------- */

.c-archive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-block-end: var(--sp-4);
}

.c-archive__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-archive__chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw-hair) solid var(--c-line);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: 1.5;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.c-archive__chip:hover { color: var(--c-ink); border-color: var(--c-line-strong); }

.c-archive__chip[aria-pressed="true"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

.c-archive__chip b {
  font-weight: var(--fw-regular);
  font-size: 0.85em;
  opacity: 0.62;
}

/* --- Search -------------------------------------------------------------- */

.c-archive__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: min(22rem, 100%);
  padding-block-end: var(--sp-2);
  border-block-end: var(--bw-hair) solid var(--c-line-strong);
}

.c-archive__search:focus-within { border-block-end-color: var(--c-accent); }

.c-archive__search svg {
  inline-size: 0.95rem;
  block-size: auto;
  color: var(--c-ink-muted);
  flex: none;
}

.c-archive__search input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  color: var(--c-ink);
  padding: 0;
}

.c-archive__search input::placeholder { color: var(--c-ink-muted); text-transform: uppercase; }
.c-archive__search input:focus { outline: none; }
.c-archive__search input::-webkit-search-cancel-button { display: none; }

.c-archive__search-clear {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.c-archive__search[data-filled] .c-archive__search-clear { opacity: 1; pointer-events: auto; }
.c-archive__search-clear:hover { color: var(--c-accent-text); }

/* --------------------------------------------------------------------------
   FILTERED-OUT CARDS + EMPTY STATE
   Cards are hidden with `hidden`, so :nth-child slot assignment still counts
   them. The script therefore re-appends the visible set in place, keeping the
   bento rhythm correct for whatever subset is on screen.
   -------------------------------------------------------------------------- */


.c-archive__empty {
  display: none;
  padding-block: var(--sp-9);
  border-block-start: var(--bw-hair) solid var(--c-line);
}

.c-archive[data-empty] .c-archive__empty { display: block; }

.c-archive__empty p {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
  margin-block-end: var(--sp-4);
}

.c-archive__empty span {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* --------------------------------------------------------------------------
   CARD EXTRAS for real YouTube records
   -------------------------------------------------------------------------- */

.c-video-card__thumb img.c-video-card__image { background: var(--slate-800); }

.c-video-card__topic {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: var(--z-overlap);
  padding: var(--sp-1) var(--sp-2);
  background: color-mix(in oklab, var(--slate-950) 72%, transparent);
  backdrop-filter: blur(4px);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--stone-100);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-0.35rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.c-video-card__link:hover .c-video-card__topic,
.c-video-card__link:focus-visible .c-video-card__topic { opacity: 1; transform: none; }

.c-video-card__views { color: var(--c-ink-muted); }

/* Archive footer — the link out to the full 650. */
.c-archive__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw-hair) solid var(--c-line);
}

.c-archive__more p {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  max-inline-size: 34rem;
}

@media (max-width: 48rem) {
  .c-archive__search { min-inline-size: 100%; }
  .c-archive__bar { gap: var(--sp-5); }
}


/* --------------------------------------------------------------------------
   CARD INTERACTION
   Micro-border rather than a drop shadow: the frame tightens and the whole
   card lifts. Shadows would fight the flat editorial surface; a hairline
   that resolves from transparent to accent does the same job quietly.
   -------------------------------------------------------------------------- */

.c-video-card {
  transition: transform var(--dur-base) var(--ease-out);
}

.c-video-card:has(.c-video-card__link:hover),
.c-video-card:has(.c-video-card__link:focus-visible) {
  transform: translateY(-0.35rem);
}

.c-video-card__thumb {
  outline: var(--bw-hair) solid transparent;
  outline-offset: 0;
  transition: outline-color var(--dur-base) var(--ease-out);
}

.c-video-card__link:hover .c-video-card__thumb,
.c-video-card__link:focus-visible .c-video-card__thumb {
  outline-color: var(--c-accent);
}

.c-video-card__link:active { transform: translateY(0.05rem); }

/* --------------------------------------------------------------------------
   THE CHANNEL BANNER
   The door to the other 655 videos. Deliberately the largest single control
   on the page after the hero: one message, one action, and a red sheen that
   sweeps across it on hover so it reads as a live link rather than a notice.
   -------------------------------------------------------------------------- */

.c-channel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  margin-block-start: var(--sp-8);
  padding: var(--sp-7) var(--sp-7);
  overflow: hidden;
  border: var(--bw-hair) solid var(--c-line-strong);
  background: color-mix(in oklab, var(--c-ink) 4%, transparent);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.c-channel:hover {
  border-color: #FF0000;
  background: color-mix(in oklab, #FF0000 7%, transparent);
}

/* The sweep. Sits under the content and crosses once per hover. */
.c-channel__sheen {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  inline-size: 35%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in oklab, #FF0000 26%, transparent) 50%,
    transparent 100%);
  transform: skewX(-14deg);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .c-channel:hover .c-channel__sheen { animation: channel-sweep 0.9s var(--ease-out) forwards; }
}

@keyframes channel-sweep {
  from { inset-inline-start: -40%; opacity: 0; }
  20%  { opacity: 1; }
  to   { inset-inline-start: 115%; opacity: 0; }
}

.c-channel__glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 5.5rem;
  block-size: 3.9rem;
  background: #FF0000;
  color: #FFFFFF;
  transition: transform var(--dur-base) var(--ease-out);
}

.c-channel:hover .c-channel__glyph { transform: scale(1.06); }
.c-channel__glyph svg { inline-size: 2.5rem; block-size: auto; }

.c-channel__text { position: relative; z-index: 1; min-inline-size: 0; }

.c-channel__text b {
  display: block;
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--c-ink);
  white-space: nowrap;
}

.c-channel__text small {
  display: block;
  margin-block-start: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  white-space: nowrap;
}

.c-channel__arrow {
  position: relative;
  z-index: 1;
  inline-size: 2.75rem;
  block-size: auto;
  color: #FF0000;
  transition: transform var(--dur-base) var(--ease-out);
}

.c-channel:hover .c-channel__arrow { transform: translateX(0.5rem); }

@media (max-width: 56rem) {
  .c-channel { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-4); padding: var(--sp-6); }
  .c-channel__arrow { grid-column: 1 / -1; justify-self: start; }
  .c-channel__text b { font-size: var(--fs-xl); }
  .c-channel__text small { white-space: normal; }
}


/* --------------------------------------------------------------------------
   MOBILE: the channel banner

   Three columns of `auto minmax(0,1fr) auto` inside a 311px card left the
   title 125px to live in, so "View YouTube Channel" was cut mid-word. It
   stacks and centres instead.
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .c-channel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-5);
  }

  .c-channel__sheen { display: none; }
}