/* ============================================================
   video.css  —  /videos pages only
   TattooToday brand · ink / cinematic aesthetic
   No !important · no inline styles · no build step
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

.videos-hero {
  padding: 52px 24px 32px;
  position: relative;
  overflow: hidden;
}

/* Atmospheric red glow from top — matches body bg radial */
.videos-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 120% at 50% -10%,
      rgba(220, 38, 38, 0.09) 0%,
      transparent 65%),
    radial-gradient(ellipse 40% 60% at 10% 50%,
      rgba(220, 38, 38, 0.04) 0%,
      transparent 60%);
  pointer-events: none;
}

/* Red line eyebrow — article-hero pattern */
.videos-hero .eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tt-red-soft, #ef4444);
  text-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
}

.videos-hero .eyebrow::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 28px;
  height: 2px;
  background: var(--tt-red, #dc2626);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.8);
}

.videos-hero h1 {
  margin: 0;
  font-family: inherit;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.95;
  letter-spacing: 3px;
  color: var(--tt-text, #f0ece4);
  background: linear-gradient(160deg, #ffffff 0%, #f0ece4 55%, #e8c4b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.videos-hero .muted {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 500px;
  color: var(--tt-muted, #8a8075);
  opacity: 1;
}

/* Bottom accent line under hero */
.videos-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--tt-red, #dc2626) 0%,
    rgba(220, 38, 38, 0.15) 40%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.3);
}

/* ── Category grid ────────────────────────────────────────── */

.video-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 20px 24px 16px;
}

.video-category-card {
  display: block;
  border: 1px solid var(--tt-border, rgba(220, 38, 38, 0.22));
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--tt-text, #f0ece4);
  background: var(--tt-card, #111318);
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}

.video-category-card:hover {
  transform: translateY(-3px);
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 8px 28px rgba(220, 38, 38, 0.14), 0 0 0 1px rgba(220, 38, 38, 0.1);
}

.video-category-card.active {
  border-color: rgba(220, 38, 38, 0.5);
  background: linear-gradient(135deg,
    rgba(220, 38, 38, 0.1) 0%,
    var(--tt-card, #111318) 100%);
}

/* Active bottom bar */
.video-category-card.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--tt-red, #dc2626),
    rgba(220, 38, 38, 0.4)
  );
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

.video-category-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--tt-ink, #0d0f14);
  transition: transform .3s ease;
}

.video-category-card--adult .video-category-card__media {
  filter: blur(9px) brightness(0.65) saturate(0.7);
}

html.age-verified .video-category-card--adult .video-category-card__media {
  filter: none;
}

.video-category-card:hover .video-category-card__media {
  transform: scale(1.04);
}

.video-category-card__media--empty {
  display: grid;
  place-items: center;
  color: var(--tt-red, #dc2626);
  font-size: 18px;
  opacity: .4;
}

.video-category-card__name {
  display: block;
  padding: 9px 12px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.3;
}

/* ── Section heading (bare h2 between categories and grid) ── */

.video-categories-grid + h2 {
  padding: 6px 24px 14px;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--tt-muted, #8a8075);
}

/* ── Video grid ───────────────────────────────────────────── */

.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 0 24px 48px;
}

@media (min-width: 1400px) {
  .videos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Video card ───────────────────────────────────────────── */

.video-card {
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 0;
  overflow: hidden;
  background: var(--tt-card, #111318);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(220, 38, 38, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  position: relative;
}

.video-card:hover {
  transform: translateY(-5px);
  border-color: rgba(220, 38, 38, 0.42);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 80px rgba(220, 38, 38, 0.10);
}

.video-card:hover .video-card__thumb img {
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.02);
}

.video-card:hover .video-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.video-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Thumbnail */
.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tt-ink, #0d0f14);
  overflow: hidden;
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.video-card--adult .video-card__thumb img {
  filter: blur(11px) brightness(0.55) saturate(0.65);
  transform: scale(1.05);
}

html.age-verified .video-card--adult .video-card__thumb img {
  filter: none;
  transform: none;
}

.video-adult-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(185, 28, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}

/* Cinematic gradient overlay on thumb */
.video-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5, 6, 8, 0.7) 0%,
    rgba(5, 6, 8, 0.1) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Centered play button */
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.82);
  opacity: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #fff;
  transition: opacity .2s ease, transform .22s ease;
  box-shadow:
    0 0 0 8px rgba(220, 38, 38, 0.15),
    0 8px 32px rgba(220, 38, 38, 0.5);
  pointer-events: none;
  z-index: 2;
}

/* Empty thumb placeholder */
.video-card__no-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--tt-red, #dc2626);
  opacity: .25;
}

/* Duration & type badges */
.video-card__duration,
.video-card__type {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: rgba(5, 6, 8, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0;
  padding: 3px 7px;
  letter-spacing: .06em;
  z-index: 3;
}

.video-card__duration {
  bottom: 10px;
  right: 10px;
  color: rgba(240, 236, 228, 0.9);
}

.video-card__type {
  top: 10px;
  left: 10px;
  text-transform: uppercase;
  color: var(--tt-red-soft, #ef4444);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Card body */
.video-card__body {
  padding: 14px 16px 6px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.video-card__body h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tt-text, #f0ece4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card__meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--tt-muted, #8a8075);
}

/* Card actions */
.video-card__actions {
  padding: 8px 16px 14px;
  position: relative;
  z-index: 1;
}

.video-like-btn {
  border-radius: 0;
}

/* ── Single video page layout ─────────────────────────────── */

.video-page {
  display: block;
  padding: 0 0 60px;
}

/* Video column — flex so we can reorder elements */
.video-view {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ── ORDER: embed first, header second, etc. ───────────────── */
/* shared constraint — matches video max-width */
.video-embed,
.video-view__header,
.video-view__desc,
.video-item-actions,
.video-view .comments-block {
  max-width: min(100%, calc(72vh * 16 / 9));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.video-embed          { order: 1; }
.video-view__header   { order: 2; }
.video-view__desc     { order: 3; }
.video-item-actions   { order: 4; }
.video-view .comments-block { order: 5; }

/* ── Video embed — flush to top, no gap to controls ──────── */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: min(100%, calc(72vh * 16 / 9));
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--tt-black, #050608);
}

/* ── Video header — below the player ─────────────────────── */

.video-view__header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--tt-border, rgba(220, 38, 38, 0.12));
  position: relative;
  background: linear-gradient(180deg,
    rgba(220, 38, 38, 0.03) 0%,
    transparent 100%
  );
}

.video-view__header .eyebrow {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tt-red-soft, #ef4444);
  text-shadow: 0 0 10px rgba(220, 38, 38, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-view__header .eyebrow::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 2px;
  background: var(--tt-red, #dc2626);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.8);
}

.video-view__header h1 {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.0;
  letter-spacing: 2px;
  color: var(--tt-text, #f0ece4);
}

.video-view__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--tt-muted, #8a8075);
}

.video-view__meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ── Description box ──────────────────────────────────────── */

.video-view__desc {
  padding: 20px 24px;
  border-bottom: 1px solid var(--tt-border, rgba(220, 38, 38, 0.12));
  border-left: 3px solid var(--tt-red, #dc2626);
  background: linear-gradient(135deg,
    rgba(220, 38, 38, 0.04) 0%,
    transparent 100%
  );
  line-height: 1.75;
  font-size: 15px;
  color: var(--tt-text, #f0ece4);
}

.video-view__desc p { margin: 0 0 12px; }
.video-view__desc p:last-child { margin-bottom: 0; }

/* ── Action row ───────────────────────────────────────────── */

.video-item-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px 24px;
  background: var(--tt-ink, #0d0f14);
  border-top: 1px solid var(--tt-border, rgba(220, 38, 38, 0.12));
}

/* ── Related videos — horizontal grid below player ────────── */

.video-related {
  border-top: 1px solid var(--tt-border, rgba(220, 38, 38, 0.15));
  background: transparent;
  position: static;
  max-height: none;
  overflow: visible;
}

.video-related h3 {
  margin: 0;
  padding: 20px 24px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tt-muted, #8a8075);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-related h3::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--tt-red, #dc2626);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.7);
}

/* Card grid — auto-fill, same style as main video grid */
.video-related__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--tt-border, rgba(220, 38, 38, 0.1));
  padding: 0;
}

/* Each related item becomes a mini video card */
.video-related__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--tt-text, #f0ece4);
  background: var(--tt-card, #111318);
  transition: background .18s ease;
  position: relative;
}

.video-related__item:hover {
  background: #141820;
}

.video-related__item:hover .video-related__thumb img {
  transform: scale(1.04);
  filter: saturate(1.06);
}

.video-related__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--tt-ink, #0d0f14);
  display: block;
  width: 100%;
  position: relative;
}

/* Red line at bottom of thumb on hover */
.video-related__item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tt-red, #dc2626);
  opacity: 0;
  transition: opacity .18s ease;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

.video-related__item:hover::after {
  opacity: 1;
}

.video-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease, filter .3s ease;
}

.video-related__thumb-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--tt-red, #dc2626);
  opacity: .25;
}

.video-related__meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.video-related__meta strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--tt-text, #f0ece4);
}

.video-related__meta span {
  font-size: 11px;
  color: var(--tt-muted, #8a8075);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1200px) {
  .videos-grid {
    gap: 16px;
    padding: 0 20px 40px;
  }

  .video-related__list {
    grid-template-columns: repeat(2, 1fr);
    padding: 8px;
    gap: 0;
  }
}

@media (max-width: 900px) {
  .video-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 16px 16px 12px;
  }
}

@media (max-width: 768px) {
  .videos-hero {
    padding: 36px 16px 24px;
  }

  .videos-hero::after {
    left: 16px;
    right: 16px;
  }

  .video-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    padding: 12px 16px 10px;
  }

  .videos-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 14px 32px;
  }

  .video-page {
    padding-bottom: 40px;
  }

  .video-view__header {
    padding: 16px 16px 14px;
  }

  .video-view__header::before {
    left: 16px;
  }

  .video-view__desc {
    padding: 16px;
    font-size: 14px;
  }

  .video-item-actions {
    padding: 14px 16px;
  }

  .video-item-actions .btn,
  .video-item-actions .like-btn {
    width: 100%;
    justify-content: center;
  }

  .video-related h3 {
    padding: 16px 16px 14px;
  }
}


/* On touch devices — always show play indicator */
@media (hover: none) {
  .video-card__play {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.88);
  }
}