
/* ZUUL FX VIDEOS V1.40 — visual / legacy-safe */
.page-videos { background:#050505; color:#efefef; }

.video-hero {
  position:relative;
  min-height:600px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid #242424;
  background:
    linear-gradient(to right, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 50%, rgba(0,0,0,.28) 100%),
    url('../img/live-bg-band.png') center 30% / cover no-repeat;
}
.video-hero .container {
  position:relative;
  z-index:2;
  padding-bottom:72px;
}
.video-kicker {
  color:#d71919;
  font-size:15px;
  font-weight:bold;
  letter-spacing:3px;
  text-transform:uppercase;
}
.video-hero h1 {
  margin:8px 0 0;
  font-size:92px;
  line-height:.92;
}
.video-hero .lead {
  max-width:760px;
  margin-top:20px;
  color:#c8c8c8;
  font-size:18px;
  line-height:1.65;
}
.video-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.video-actions a {
  display:inline-block;
  padding:12px 15px;
  border:1px solid #343434;
  color:#eee;
  text-decoration:none;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.3px;
  text-transform:uppercase;
}
.video-actions a.primary {
  background:#aa1111;
  border-color:#c01818;
}
.video-actions a:hover { border-color:#e02020; }

.video-section {
  padding:88px 0;
  border-bottom:1px solid #222;
}
.video-section--red {
  background:
    radial-gradient(circle at 78% 20%, rgba(150,12,12,.14), rgba(0,0,0,0) 30%),
    #070606;
}
.video-section--dark { background:#070707; }

.video-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:34px;
}
.video-head h2 {
  margin:0;
  font-size:58px;
}
.video-head p {
  max-width:520px;
  margin:0;
  color:#969696;
  font-size:14px;
  line-height:1.7;
}

.feature-video {
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:24px;
  align-items:stretch;
}
.feature-player,
.archive-player {
  border:1px solid #2d2d2d;
  background:#000;
}
.video-frame-v140 {
  position:relative;
  padding-top:56.25%;
  background:#000;
}
.video-frame-v140 iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.feature-copy {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  border:1px solid #303030;
  background:#090909;
}
.feature-copy .year,
.archive-copy .year {
  color:#d71919;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.5px;
}
.feature-copy h3,
.archive-copy h3 {
  margin:8px 0 10px;
  font-size:27px;
  line-height:1.1;
  text-transform:uppercase;
}
.feature-copy p,
.archive-copy p {
  margin:0;
  color:#9a9a9a;
  font-size:13px;
  line-height:1.65;
}

.archive-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.archive-card {
  border:1px solid #303030;
  background:#080808;
}
.archive-copy {
  padding:24px;
}

.live-2026-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.live-2026-card {
  min-height:330px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border:1px solid #2d2d2d;
  background:#090909;
}
.live-2026-card:before {
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  opacity:.66;
  transform:scale(1.02);
}
.live-2026-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.36) 62%, rgba(0,0,0,.12) 100%);
}
.live-2026-card:nth-child(1):before {
  background-image:url('../img/live-bg-band.png');
}
.live-2026-card:nth-child(2):before {
  background-image:url('../img/hero-band.jpg');
}
.live-2026-card:nth-child(3):before {
  background-image:url('../img/about-band.jpg');
}
.live-2026-card .content {
  position:relative;
  z-index:2;
  padding:24px;
  width:100%;
}
.live-2026-card .meta {
  color:#d71919;
  font-size:9px;
  font-weight:bold;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.live-2026-card h3 {
  margin:7px 0 8px;
  font-size:22px;
  text-transform:uppercase;
}
.live-2026-card p {
  margin:0;
  color:#b5b5b5;
  font-size:12px;
  line-height:1.55;
}

.channel-banner {
  padding:50px 0;
  background:#090909;
  border-top:1px solid #242424;
  border-bottom:1px solid #242424;
}
.channel-inner {
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
}
.channel-inner h2 {
  margin:0;
  font-size:48px;
}
.channel-inner p {
  margin:10px 0 0;
  color:#969696;
  font-size:14px;
  line-height:1.65;
}

@media screen and (max-width:980px) {
  .video-hero h1 { font-size:78px; }
  .feature-video { grid-template-columns:1fr; }
  .live-2026-grid { grid-template-columns:1fr 1fr; }
  .live-2026-card:last-child { grid-column:1 / 3; }
}
@media screen and (max-width:760px) {
  .video-head { display:block; }
  .video-head p { margin-top:14px; }
  .archive-grid { grid-template-columns:1fr; }
  .channel-inner { grid-template-columns:1fr; }
}
@media screen and (max-width:560px) {
  .video-hero { min-height:520px; }
  .video-hero h1 { font-size:58px; }
  .video-hero .lead { font-size:15px; }
  .video-section { padding:68px 0; }
  .video-head h2 { font-size:46px; }
  .live-2026-grid { grid-template-columns:1fr; }
  .live-2026-card:last-child { grid-column:auto; }
  .channel-inner h2 { font-size:38px; }
}


/* V1.41 — real video links */
.page-videos .live-2026-grid {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.page-videos .live-video-card {
  min-height: 0;
}
@media screen and (max-width:760px) {
  .page-videos .live-2026-grid {
    grid-template-columns: 1fr;
  }
}


/* V1.42 — local-safe video cards: no iframe dependency */
.page-videos .feature-video {
  display:block;
}
.page-videos .archive-grid,
.page-videos .live-2026-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.video-link-card {
  display:block;
  border:1px solid #303030;
  background:#080808;
  color:#efefef;
  text-decoration:none;
  overflow:hidden;
}
.video-link-card:hover {
  border-color:#a71818;
}
.video-link-visual {
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  background:#000;
}
.video-link-visual img {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.video-link-card--feature .video-link-visual {
  padding-top:50%;
}
.video-play {
  position:absolute;
  left:50%;
  top:50%;
  width:72px;
  height:72px;
  margin-left:-36px;
  margin-top:-36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(155,8,8,.82);
  color:#fff;
  font-size:28px;
  line-height:1;
  border-radius:50%;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.video-link-copy {
  padding:24px;
}
.video-link-card--feature .video-link-copy {
  padding:28px;
}
.video-link-copy .year {
  color:#d71919;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.5px;
}
.video-link-copy h3 {
  margin:8px 0 10px;
  font-size:27px;
  line-height:1.08;
  text-transform:uppercase;
}
.video-link-copy p {
  margin:0;
  color:#9a9a9a;
  font-size:13px;
  line-height:1.65;
}
.video-watch {
  display:inline-block;
  margin-top:18px;
  color:#eee;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.2px;
}
@media screen and (max-width:760px) {
  .page-videos .archive-grid,
  .page-videos .live-2026-grid {
    grid-template-columns:1fr;
  }
  .video-link-copy h3 { font-size:23px; }
}


/* V1.43 — reordered / expanded videos page */
.video-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.video-grid-2 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.video-grid-1 {
  display:block;
}
.video-link-card--feature .video-link-copy h3 {
  font-size:30px;
}
.video-link-card--feature .video-link-visual {
  padding-top:46%;
}
.video-link-card .video-watch {
  color:#ffffff;
}
.video-link-card .video-link-copy p em {
  color:#d9d9d9;
  font-style:normal;
}
.video-section .section-note {
  max-width:760px;
  margin:0 0 28px;
  color:#7f7f7f;
  font-size:13px;
  line-height:1.7;
}
.video-head--stacked {
  display:block;
  margin-bottom:30px;
}
.video-head--stacked h2 {
  margin-bottom:14px;
}
.video-hero .lead em {
  color:#f1f1f1;
  font-style:normal;
}
@media screen and (max-width:980px) {
  .video-grid-3 {
    grid-template-columns:1fr 1fr;
  }
  .video-grid-3 .video-link-card:last-child {
    grid-column:1 / 3;
    max-width:520px;
    width:100%;
    margin:0 auto;
  }
}
@media screen and (max-width:760px) {
  .video-grid-3,
  .video-grid-2 {
    grid-template-columns:1fr;
  }
  .video-grid-3 .video-link-card:last-child {
    grid-column:auto;
    max-width:none;
  }
}


/* V1.43B — use the same ZUUL FX SVG display typeface as the other pages */
.page-videos h1.zfx-title-svg,
.page-videos h2.zfx-title-svg {
  justify-content:flex-start;
  text-align:left;
}
.page-videos .video-hero h1.zfx-title-svg {
  font-size:96px;
}
.page-videos .video-head h2.zfx-title-svg,
.page-videos .channel-inner h2.zfx-title-svg {
  font-size:58px;
}
.page-videos .zfx-title-svg .zfx-char-accent {
  color:#d71919 !important;
}
.page-videos .zfx-title-svg .zfx-char:not(.zfx-char-accent) {
  color:#f1f1f1 !important;
}
@media screen and (max-width:760px) {
  .page-videos .video-hero h1.zfx-title-svg { font-size:70px; }
  .page-videos .video-head h2.zfx-title-svg,
  .page-videos .channel-inner h2.zfx-title-svg { font-size:46px; }
}
@media screen and (max-width:520px) {
  .page-videos .video-hero h1.zfx-title-svg { font-size:58px; }
  .page-videos .video-head h2.zfx-title-svg,
  .page-videos .channel-inner h2.zfx-title-svg { font-size:40px; }
}


/* V1.46 — VIDEOS readability */
.video-actions a {
  font-size:12px;
  padding:14px 17px;
}
.video-head p,
.channel-inner p {
  font-size:17px;
}
.video-link-copy .year {
  font-size:12px;
}
.video-link-copy p {
  font-size:15px;
  line-height:1.72;
}
.video-watch {
  font-size:12px;
}
.video-section .section-note {
  font-size:15px;
}


/* V1.48 — Zombie Followers archive links */
.page-videos .video-section:last-of-type .video-grid-3 {
  grid-template-columns:1fr 1fr;
}
@media screen and (max-width:760px) {
  .page-videos .video-section:last-of-type .video-grid-3 {
    grid-template-columns:1fr;
  }
}
