/* ============================================================
 * Chris Harris — Category page shared styles
 * Powers /launch-and-commercial.html, /brand-and-product-storytelling.html,
 * /trailers-and-entertainment.html, etc.
 * ============================================================ */

/* ---------------------------------------------------------------
 * Category hero — lighter than the homepage hero: no video, no WebGL,
 * just big serif title + tagline + breadcrumb.
 * --------------------------------------------------------------- */
.cat-hero {
  position: relative;
  min-height: 60vh;
  padding: 160px var(--pad-x) 40px;
  margin-bottom: -1px;                /* eliminate any sub-pixel seam */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    /* soft fade to the section base at the bottom so the hero bleeds
     * into the .cat-services below (both share var(--char)). */
    linear-gradient(to bottom,
      transparent 0%,
      transparent 82%,
      var(--char) 100%),
    radial-gradient(ellipse at 50% 30%, oklch(0.18 0.02 55 / 0.6) 0%, transparent 60%),
    var(--char);
  overflow: hidden;
}
.cat-hero::before {
  /* subtle ember glow bottom */
  content: '';
  position: absolute;
  inset: auto 0 -60% 0;
  height: 120%;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.75 0.14 55 / 0.10) 0%, transparent 60%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .cat-hero { min-height: 68vh; padding: 200px var(--pad-x) 60px; }
}
.cat-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.cat-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 36px;
  transition: color .3s;
}
.cat-breadcrumb:hover { color: var(--ivory); }
.cat-breadcrumb .arrow {
  width: 16px; height: 1px;
  background: var(--ember);
}
.cat-title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(48px, 8vw, 128px);
  color: var(--ivory);
  margin: 0 0 32px;
  text-wrap: balance;
}
.cat-title .it { font-style: italic; color: oklch(0.85 0.14 55); }
.cat-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--bone);
  max-width: 780px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
 * Service list — each service is a bullet card with a 16:9 slot,
 * a 9:16 slot, and text.
 * --------------------------------------------------------------- */
.cat-services {
  padding: var(--sec-y) var(--pad-x);
  background: var(--char);
}
.cat-services-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.cat-services-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(64px, 8vw, 120px);
}
.cat-services-lead .eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}

.svc-list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
}
/* Per bullet:
 *   Row 1: centered title + copy
 *   Row 2: 16:9 LEFT + 9:16 RIGHT, same height
 * On mobile everything stacks. */
.svc-item {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .svc-item { gap: 40px; }
}

/* The media row that holds both videos. On mobile it stacks; on desktop
 * it's a nowrap flex row with an EXPLICIT height so both aspect-ratio
 * panes can size from it. */
.svc-media-row {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;              /* mobile stack */
}
@media (min-width: 900px) {
  .svc-media-row {
    flex-wrap: nowrap;
    gap: 28px;
    /* Row height = 16:9's natural height when it fills ~64% of viewport width.
     * Clamped to avoid tiny/huge extremes. */
    height: clamp(360px, 40vw, 640px);
  }
}

/* 16:9 media */
.svc-media-h {
  position: relative;
  aspect-ratio: 16 / 9;
  background: oklch(0.08 0.006 60);
  border: 1px solid var(--line);
  overflow: hidden;
  width: 100%;
}
@media (min-width: 900px) {
  .svc-media-h {
    height: 100%;                 /* fills row height */
    width: auto;                  /* width follows 16:9 aspect */
    flex: 0 0 auto;
  }
}

/* 9:16 media */
.svc-media-v {
  position: relative;
  aspect-ratio: 9 / 16;
  background: oklch(0.08 0.006 60);
  border: 1px solid var(--line);
  overflow: hidden;
  max-width: 360px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .svc-media-v {
    max-width: none;
    margin: 0;
    height: 100%;                 /* fills row height, same as 16:9 */
    width: auto;                  /* width follows 9:16 aspect */
    flex: 0 0 auto;
  }
}

/* When the 9:16 is missing (removed by JS), let 16:9 fill the row width. */
@media (min-width: 900px) {
  .svc-media-row:not(:has(.svc-media-v)) .svc-media-h {
    width: 100%;
    height: auto;
  }
  .svc-media-row:not(:has(.svc-media-v)) {
    height: auto;                 /* row collapses to 16:9's own height */
  }
}

/* Alternate media order per bullet: even rows swap the 9:16 to the left. */
@media (min-width: 900px) {
  .svc-list .svc-item:nth-child(even) .svc-media-row {
    flex-direction: row-reverse;
  }
}

/* ============================================================
 * Video controls — floating bar with play/pause + mute + volume
 * Sits inside each .svc-media-h / .svc-media-v. Revealed on hover
 * and while focus is inside; touch-friendly on mobile (always shown
 * at low opacity).
 * ============================================================ */
.svc-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;                     /* above corner ticks (z-index: 3) */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: oklch(0.10 0.006 60 / 0.72);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid oklch(0.32 0.008 60 / 0.6);
  color: var(--ivory);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.svc-media-h:hover .svc-controls,
.svc-media-v:hover .svc-controls,
.svc-media-h:focus-within .svc-controls,
.svc-media-v:focus-within .svc-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* On touch devices (no hover), keep controls visible but faint */
@media (hover: none) {
  .svc-controls { opacity: 0.85; transform: none; pointer-events: auto; }
}

.svc-controls .sc-btn {
  background: transparent;
  border: 0;
  color: var(--ivory);
  padding: 6px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, background .2s, transform .2s;
}
.svc-controls .sc-btn:hover {
  color: var(--ember);
  background: oklch(0.75 0.14 55 / 0.12);
}
.svc-controls .sc-btn:active { transform: scale(0.94); }
.svc-controls .sc-btn:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 2px;
}

/* Volume slider — minimalist, amber accent */
.svc-controls .sc-vol {
  flex: 1 1 60px;
  min-width: 40px;
  max-width: 120px;
  height: 20px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.svc-controls .sc-vol:focus { outline: none; }
.svc-controls .sc-vol::-webkit-slider-runnable-track {
  height: 2px;
  background: oklch(0.32 0.008 60 / 0.7);
  border-radius: 2px;
}
.svc-controls .sc-vol::-moz-range-track {
  height: 2px;
  background: oklch(0.32 0.008 60 / 0.7);
  border-radius: 2px;
}
.svc-controls .sc-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ember);
  border: 0;
  margin-top: -4px;
  box-shadow: 0 0 0 3px oklch(0.75 0.14 55 / 0.15);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.svc-controls .sc-vol::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ember);
  border: 0;
  box-shadow: 0 0 0 3px oklch(0.75 0.14 55 / 0.15);
  cursor: pointer;
}
.svc-controls .sc-vol:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px oklch(0.75 0.14 55 / 0.25);
}
.svc-controls .sc-vol:hover::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px oklch(0.75 0.14 55 / 0.25);
}

/* On the 9:16 pane, compress the layout so it fits the narrower box */
.svc-media-v .svc-controls {
  left: 8px;
  right: 8px;
  gap: 6px;
  padding: 6px 8px;
}
.svc-media-v .svc-controls .sc-vol {
  max-width: 70px;
}
.svc-media-h video,
.svc-media-h img,
.svc-media-v video,
.svc-media-v img,
.svc-media-h iframe,
.svc-media-v iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
/* YouTube embed sits above the placeholder card by default */
.svc-youtube {
  z-index: 2;
  background: #000;
}
/* Corner ticks — same visual grammar as homepage frames */
.svc-media-h::before,
.svc-media-h::after,
.svc-media-v::before,
.svc-media-v::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--ember);
  opacity: 0.5;
  z-index: 3;
  pointer-events: none;
}
.svc-media-h::before,
.svc-media-v::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.svc-media-h::after,
.svc-media-v::after  { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* Media placeholder — visible until the real file lands */
.svc-slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  color: var(--bone);
  background:
    repeating-linear-gradient(45deg,
      oklch(0.10 0.006 60) 0 12px,
      oklch(0.09 0.006 60) 12px 24px);
}
.svc-slot-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  opacity: 0.9;
}
.svc-slot-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ivory);
  opacity: 0.75;
  word-break: break-all;
  line-height: 1.4;
  max-width: 260px;
}
.svc-slot-hint {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--bone);
  opacity: 0.6;
  font-style: italic;
}

/* Text block — sits ABOVE the media row, centered. */
.svc-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.svc-index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  opacity: 0.85;
}
.svc-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0;
}
.svc-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
 * Category-page mid CTA (repeat of homepage brief invite)
 * --------------------------------------------------------------- */
.cat-cta {
  padding: clamp(80px, 12vw, 160px) var(--pad-x);
  background:
    radial-gradient(ellipse at 50% 50%, oklch(0.16 0.02 55) 0%, oklch(0.09 0.006 60) 70%);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cat-cta .eyebrow { justify-content: center; margin-bottom: 24px; }
.cat-cta h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  color: var(--ivory);
  margin: 0 0 24px;
  text-wrap: balance;
}
.cat-cta h2 .it { font-style: italic; color: oklch(0.85 0.14 55); }
.cat-cta p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bone);
  font-size: clamp(18px, 2vw, 22px);
  max-width: 640px;
  margin: 0 auto 40px;
}
.cat-cta .btn-row {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------------------------------------------------------
 * Explore-more grid — links to the other 5 category pages
 * --------------------------------------------------------------- */
.cat-more {
  padding: var(--sec-y) var(--pad-x);
  background: var(--char);
}
.cat-more-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.cat-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px)  { .cat-more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cat-more-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

.cat-more-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: linear-gradient(180deg,
              oklch(0.14 0.008 60) 0%,
              oklch(0.115 0.008 60) 100%);
  border: 1px solid var(--line);
  color: var(--ivory);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s;
  min-height: 160px;
  justify-content: space-between;
}
.cat-more-card:hover {
  transform: translateY(-4px);
  border-color: oklch(0.75 0.14 55 / 0.45);
}
.cat-more-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  opacity: 0.9;
}
.cat-more-name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cat-more-name .it { font-style: italic; color: oklch(0.85 0.14 55); }
.cat-more-arrow {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone);
  opacity: 0.7;
  transition: opacity .3s;
}
.cat-more-card:hover .cat-more-arrow { opacity: 1; color: var(--ember); }