/* ============================================================
   TRACK DAY SHOP — Page-specific styles
   Sections used on homepage, catalog, product detail, blog etc.
   Source: design/project/index.html inline CSS, abstracted.
   ============================================================ */

/* ============================================================
   HERO v2 — full-bleed dark racing hero with animated background.
   Replaces the old split light/dark hero that overflowed horizontally.
   Self-contains via overflow:hidden on the section. Background is pure
   CSS (gradients + animated pseudo-streaks) — no extra HTTP requests.
   ============================================================ */
.hero-v2 {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  /* Flush under the dark header — no empty top band. Compact vertical rhythm:
     less padding, smaller min-height, so hero doesn't dominate the fold. */
  margin-top: -1px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px);
  background: #0a0a0c;
  min-height: clamp(420px, 56vh, 580px);
  display: flex;
  align-items: center;
}

.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg > * { position: absolute; }

/* Layered base — deep black to brand-red shadow, with red glow on the right */
.hero-bg-grad {
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 78% 50%, rgba(227,6,19,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 5% 100%, rgba(227,6,19,0.10) 0%, transparent 60%),
    linear-gradient(155deg, #15151a 0%, #0a0a0c 60%, #050507 100%);
}

/* Subtle perspective grid suggesting a track stretching to the horizon */
.hero-bg-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
  opacity: 0.6;
}

/* Light streaks streaming right→left to evoke high-speed motion */
.hero-bg-streaks {
  inset: 0;
  overflow: hidden;
}
.hero-bg-streaks span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  width: 35%;
  transform: translateX(110vw);
  animation: heroStreak 4.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.hero-bg-streaks span:nth-child(1) { top: 18%; animation-duration: 5.2s; animation-delay: 0s;   width: 40%; opacity: 0.55; }
.hero-bg-streaks span:nth-child(2) { top: 32%; animation-duration: 3.8s; animation-delay: 1.1s; width: 28%; opacity: 0.7;  background: linear-gradient(90deg, transparent, rgba(227,6,19,0.65), transparent); }
.hero-bg-streaks span:nth-child(3) { top: 47%; animation-duration: 6.0s; animation-delay: 2.4s; width: 50%; opacity: 0.4; }
.hero-bg-streaks span:nth-child(4) { top: 58%; animation-duration: 4.2s; animation-delay: 0.6s; width: 22%; opacity: 0.85; }
.hero-bg-streaks span:nth-child(5) { top: 72%; animation-duration: 5.6s; animation-delay: 3.0s; width: 38%; opacity: 0.45; }
.hero-bg-streaks span:nth-child(6) { top: 82%; animation-duration: 3.4s; animation-delay: 1.8s; width: 18%; opacity: 0.95; background: linear-gradient(90deg, transparent, rgba(255,26,44,0.85), transparent); }
.hero-bg-streaks span:nth-child(7) { top: 90%; animation-duration: 5.0s; animation-delay: 0.3s; width: 30%; opacity: 0.55; }
@keyframes heroStreak {
  0%   { transform: translateX(110vw); }
  100% { transform: translateX(-110vw); }
}

/* Pulsing red glow over the photo region */
.hero-bg-glow {
  right: -12%;
  top: 10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(227,6,19,0.32) 0%, transparent 65%);
  filter: blur(20px);
  animation: heroGlowPulse 5s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.05); }
}

/* Chequered finish-line stripe — clearly a layer OF the hero (not a band above it).
   Sits at the bottom of the section; small drop-shadow so it floats over the photo. */
.hero-bg-flag {
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, #fff 0 16px, #0e0e10 16px 32px);
  opacity: 0.85;
  z-index: 3;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.hero-bg-flag::before,
.hero-bg-flag::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}
.hero-bg-flag::before { top: -2px; }
.hero-bg-flag::after  { bottom: -2px; opacity: 0.6; }

/* Photo slot — supports a single image or a crossfading slideshow.
   Fills the full height of the hero so there's no empty band above/below it. */
.hero-bg-photos {
  position: absolute;
  right: -4%;
  top: 0;
  bottom: 0;
  width: clamp(560px, 60%, 1100px);
  /* Vignette + fade-to-black on the left edge so the car blends behind the headline */
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 35%, #000 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%, #000 50%, transparent 95%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}
.hero-bg-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.85;
  /* Default crossfade transition, overridden per effect below.
     --hero-tx is set inline by hp.php from the admin's "Délka přechodu" setting. */
  transition: opacity var(--hero-tx, 1.1s) ease-in-out,
              transform var(--hero-tx, 1.1s) ease-in-out;
}

/* When more than one slide, all default invisible; only `.is-active` shows. */
.hero-bg-photos.is-slideshow .hero-bg-photo { opacity: 0; }
.hero-bg-photos.is-slideshow .hero-bg-photo.is-active { opacity: 0.85; }

/* ===== Effect: fade (default) — opacity-only crossfade ===== */
.hero-bg-photos.hero-fx-fade .hero-bg-photo { transform: none; }

/* ===== Effect: slide-left — incoming slides in from the right ===== */
.hero-bg-photos.hero-fx-slide-left .hero-bg-photo  { transform: translate3d(8%, 0, 0); }
.hero-bg-photos.hero-fx-slide-left .hero-bg-photo.is-active { transform: translate3d(0, 0, 0); }

/* ===== Effect: slide-right — incoming from the left ===== */
.hero-bg-photos.hero-fx-slide-right .hero-bg-photo  { transform: translate3d(-8%, 0, 0); }
.hero-bg-photos.hero-fx-slide-right .hero-bg-photo.is-active { transform: translate3d(0, 0, 0); }

/* ===== Effect: slide-up — incoming from below ===== */
.hero-bg-photos.hero-fx-slide-up .hero-bg-photo { transform: translate3d(0, 6%, 0); }
.hero-bg-photos.hero-fx-slide-up .hero-bg-photo.is-active { transform: translate3d(0, 0, 0); }

/* ===== Effect: zoom (Ken Burns) — slow continuous zoom on the active slide ===== */
.hero-bg-photos.hero-fx-zoom .hero-bg-photo { transform: scale(1.0); }
.hero-bg-photos.hero-fx-zoom .hero-bg-photo.is-active {
  transform: scale(1.06);
  transition: opacity var(--hero-tx, 1.1s) ease-in-out,
              transform 7s ease-out;
}

/* ===== Effect: cut — instant swap, no transition ===== */
.hero-bg-photos.hero-fx-cut .hero-bg-photo { transition: none; }

/* Inner content layer — grid with bottom-aligned columns. The CTA row (last
   item in the left column) and the last stat card (last item in the right
   aside) end up on exactly the same baseline thanks to `align-items: end`. */
.hero-v2-inner {
  position: relative;
  width: 100%;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
.hero-v2-content {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-v2-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}
.hero-v2-pulse {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--red);
  animation: heroPulse 1.6s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

.hero-v2-headline {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  /* Smaller headline so hero doesn't dominate. Was clamp(54px,8.5vw,132px). */
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.hero-v2-headline .line { display: block; }
.hero-v2-headline .line.red {
  color: var(--red);
  position: relative;
  display: inline-block;
}
.hero-v2-headline .line.red::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 0; right: 0;
  height: 6px;
  background: var(--red);
  transform: skewX(-12deg);
  box-shadow: 0 4px 20px rgba(227,6,19,0.55);
}

.hero-v2-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.74);
  max-width: 540px;
  line-height: 1.6;
  margin: 6px 0 0;
}

.hero-v2-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}
.hero-v2-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: all .18s;
}
.hero-v2-ghost:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.10);
  color: #fff;
}

/* Stats — horizontal row of glass cards on the right side of the hero.
   Sits in the grid as the right column of `.hero-v2-inner` with
   `align-items: end`, so its baseline lines up with the CTA buttons row. */
.hero-v2-aside {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  z-index: 2;
}
.hero-v2-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 18px;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  min-width: 110px;
}
.hero-v2-stat-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}
.hero-v2-stat-card .num em { color: var(--red); font-style: italic; }
.hero-v2-stat-card .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  .hero-v2-stat-card { padding: 10px 14px; min-width: 90px; }
  .hero-v2-stat-card .num { font-size: 24px; }
}
/* On smaller screens stats wrap onto a new row below the buttons. */
@media (max-width: 900px) {
  .hero-v2-inner { grid-template-columns: 1fr; }
  .hero-v2-aside { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .hero-v2-aside { display: none; }
}

/* Floating "live" meta card top-right */
.hero-v2-meta {
  position: absolute;
  top: 0;
  right: max(24px, calc((100% - 1340px) / 2 + 24px));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-v2-meta .dot {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--red);
  animation: heroPulse 1.6s ease-in-out infinite;
}

/* Floating "bestseller" feature card bottom-right */
.hero-v2-feature {
  position: absolute;
  bottom: 0;
  right: max(24px, calc((100% - 1340px) / 2 + 24px));
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 14px;
  background: rgba(20,20,24,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  transition: transform .2s, border-color .2s;
}
.hero-v2-feature:hover { transform: translateY(-2px); border-color: rgba(227,6,19,0.5); color: #fff; }
.hero-v2-feature-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: rgba(227,6,19,0.18);
  color: var(--red);
}
.hero-v2-feature-mark svg { width: 22px; height: 22px; }
.hero-v2-feature-body .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-v2-feature-body .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  margin-top: 4px;
}
.hero-v2-feature-arrow { color: rgba(255,255,255,0.5); }

/* Tachometer-style RPM bars in the bottom-left of the hero */
.hero-v2-tach {
  position: absolute;
  left: max(24px, calc((100% - 1340px) / 2 + 24px));
  bottom: 0;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.hero-v2-tach-track {
  display: flex; align-items: flex-end; gap: 4px;
  height: 36px;
}
.hero-v2-tach-track .bar {
  display: block;
  width: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  transform-origin: bottom;
  animation: heroTachBar 1.4s ease-in-out infinite;
}
.hero-v2-tach-track .b1 { height: 16%; animation-delay: 0.0s; }
.hero-v2-tach-track .b2 { height: 28%; animation-delay: 0.08s; }
.hero-v2-tach-track .b3 { height: 42%; animation-delay: 0.16s; }
.hero-v2-tach-track .b4 { height: 56%; animation-delay: 0.24s; }
.hero-v2-tach-track .b5 { height: 70%; animation-delay: 0.32s; background: rgba(255,200,30,0.7); }
.hero-v2-tach-track .b6 { height: 82%; animation-delay: 0.40s; background: rgba(255,140,30,0.85); }
.hero-v2-tach-track .b7 { height: 92%; animation-delay: 0.48s; background: var(--red); }
.hero-v2-tach-track .b8 { height: 100%; animation-delay: 0.56s; background: var(--red-hot); box-shadow: 0 0 8px var(--red); }
@keyframes heroTachBar {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.55); opacity: 0.55; }
}
.hero-v2-tach-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 2px;
}

/* Tablet — keep two-column visual but compress */
@media (max-width: 1100px) {
  .hero-bg-photo { right: -16%; width: 78%; opacity: 0.5; }
  .hero-v2-feature { right: 24px; }
  .hero-v2-meta { right: 24px; }
  .hero-v2-tach { left: 24px; }
}

/* Mobile — photo fills the ENTIRE hero (top to bottom, edge to edge, full
   opacity). !important sem patří aby přebilo desktop pravidla nastavující
   right:-4%, width:clamp(...), opacity:0.85 a další posuny. */
@media (max-width: 700px) {
  .hero-v2 {
    padding: 28px 0 36px !important;
    min-height: 65vh;
    text-align: left;
  }
  .hero-bg, .hero-bg-photos {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .hero-bg-photo {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    opacity: 1 !important;
    background-position: center center !important;
    background-size: cover !important;
  }
  .hero-bg-photos.is-slideshow .hero-bg-photo { opacity: 0 !important; }
  .hero-bg-photos.is-slideshow .hero-bg-photo.is-active { opacity: 1 !important; }
  /* Tmavý overlay pro čitelnost textu */
  .hero-v2::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        rgba(10,10,12,0.78) 0%,
        rgba(10,10,12,0.42) 40%,
        rgba(10,10,12,0.55) 70%,
        rgba(10,10,12,0.85) 100%);
    z-index: 0;
    pointer-events: none;
  }
  .hero-v2-inner { z-index: 2; position: relative; }
  .hero-v2-content { max-width: 100%; }
  .hero-v2-headline { font-size: clamp(42px, 13vw, 72px); }
  .hero-v2-sub { font-size: 15px; }
  .hero-v2-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-v2-stat { padding: 12px 10px; }
  .hero-v2-stat .num { font-size: 26px; }
  .hero-v2-meta { display: none; }
  .hero-v2-feature {
    position: static;
    margin-top: 28px;
    width: 100%;
  }
  .hero-v2-tach { display: none; }
  .hero-bg-flag { width: 100px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-streaks span,
  .hero-bg-glow,
  .hero-v2-pulse,
  .hero-v2-meta .dot,
  .hero-v2-tach-track .bar { animation: none !important; }
}

/* ===== Article cards (v2) — homepage blog grid =====
   Card with image on top + body below, hover-zoom thumbnail, category badge over
   the image, "Read article" arrow row that animates on hover. Grid columns are
   set inline by hp.php from the admin "Počet sloupců" setting. */
.article-card-v2 {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-0);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.article-card-v2:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  color: var(--fg-0);
}
.article-card-v2 .ac2-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  overflow: hidden;
  transition: transform .35s ease;
}
.article-card-v2 .ac2-img.img-ph::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3);
}
.article-card-v2:hover .ac2-img { transform: scale(1.04); }

.article-card-v2 .ac2-cat {
  position: absolute; top: 12px; left: 12px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(227,6,19,0.3);
}
.article-card-v2 .ac2-cat-inline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 6px;
}
.article-card-v2 .ac2-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.article-card-v2 .ac2-title {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--fg-0);
  margin: 0;
}
.article-card-v2 .ac2-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-v2 .ac2-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.article-card-v2 .ac2-read {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red);
  transition: gap .2s ease;
}
.article-card-v2:hover .ac2-read { gap: 10px; }

/* When image hidden, the body grows the card and the title stays prominent. */
.article-card-v2:not(:has(.ac2-img)) .ac2-body { padding-top: 28px; }

@media (max-width: 1100px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .article-grid { grid-template-columns: 1fr !important; }
  .article-card-v2 .ac2-title { font-size: 20px; }
}

/* ===== MARQUEE strip — running ticker between hero and the rest of the page ===== */
.marquee-strip {
  background: var(--bg-dark);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before { left: 0;  background: linear-gradient(90deg, var(--bg-dark), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--bg-dark), transparent); }

.marquee-track {
  display: inline-flex;
  align-items: center;
  /* No gap on the flex container — spacing lives ON each item/separator so
     the duplicated half is byte-identical and the -50% loop is seamless. */
  gap: 0;
  padding: 14px 0;
  white-space: nowrap;
  animation: tdsMarquee 40s linear infinite;
  will-change: transform;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  padding: 0 14px;
}
.marquee-sep {
  color: var(--red);
  font-size: 12px;
  text-shadow: 0 0 10px var(--red);
  padding: 0 14px;
}

@keyframes tdsMarquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ===== Legacy hero (kept for any other view that might still reference it) ===== */
.hero { position: relative; padding: 56px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-text { display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(64px, 9vw, 148px);
  line-height: 0.84;
  letter-spacing: 0.005em;
  color: var(--fg-0);
}
.hero-headline .red {
  color: var(--red);
  display: inline-block;
  position: relative;
}
.hero-headline .red::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 5px;
  background: var(--red);
  transform: skewX(-12deg);
}
.hero-sub { font-size: 17px; color: var(--fg-2); max-width: 520px; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  max-width: 560px;
}
.hero-stats > div { padding: 18px 22px; border-right: 1px solid var(--line); }
.hero-stats > div:last-child { border-right: none; }
.hero-stats .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 38px;
  color: var(--fg-0);
  line-height: 1;
}
.hero-stats .num em { color: var(--red); font-style: italic; }
.hero-stats .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.hero-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #1a1a1d 0%, #0a0a0c 70%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.018) 18px 36px);
  pointer-events: none;
}
.hero-image-ph {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-meta-card {
  position: absolute;
  left: 24px; top: 24px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-meta-card .pulse {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 6px;
  animation: tdsPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--red);
}
@keyframes tdsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero-bottom-card {
  position: absolute;
  right: 24px; bottom: 24px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.hero-bottom-card .car-shape {
  width: 56px; height: 32px;
  border-radius: 6px 12px 4px 4px / 12px 18px 4px 4px;
  background: linear-gradient(180deg, #2a2a2e 0%, #0e0e10 100%);
  position: relative;
  flex-shrink: 0;
}
.hero-bottom-card .car-shape::before,
.hero-bottom-card .car-shape::after {
  content: "";
  position: absolute;
  bottom: -3px;
  width: 10px; height: 10px;
  background: var(--bg-0);
  border: 2px solid var(--red);
  border-radius: 50%;
}
.hero-bottom-card .car-shape::before { left: 5px; }
.hero-bottom-card .car-shape::after { right: 5px; }
.hero-bottom-card .car-info .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-bottom-card .car-info .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-0);
  line-height: 1;
}

/* ===== CAR PICKER ===== */
.car-picker {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  border-radius: var(--r-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.car-picker::before {
  content: "TVOJE AUTO";
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 120px;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  letter-spacing: 0.05em;
}
.car-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
}
.car-picker-head .h2 { margin-top: 6px; color: white; }
.car-picker-head .eyebrow { color: rgba(255,255,255,0.6); }
.car-picker-head .eyebrow::before { background: var(--red); }
.car-picker-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  position: relative;
}
@media (max-width: 800px) { .car-picker-form { grid-template-columns: 1fr; } }
.car-picker-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14px;
  color: white;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 48px;
  cursor: pointer;
  transition: border-color .15s;
}
.car-picker-select:hover, .car-picker-select:focus { outline: none; border-color: var(--red); }
.car-picker-select option { background: var(--bg-dark); color: white; }

/* ===== Categories ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: all .15s;
  overflow: hidden;
  min-height: 168px;
  color: inherit;
}
.cat-tile:hover {
  border-color: var(--fg-0);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cat-tile .ct-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-tint);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.cat-tile .ct-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--fg-0);
  margin-top: auto;
  line-height: 1.05;
}
.cat-tile .ct-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cat-tile .ct-arrow {
  position: absolute;
  top: 18px; right: 18px;
  color: var(--fg-3);
  transition: all .15s;
}
.cat-tile:hover .ct-arrow {
  color: var(--red);
  transform: translate(2px, -2px);
}

/* ===== Featured banners ===== */
.feat-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; } }
.feat-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  transition: all .2s;
  color: inherit;
}
.feat-card.lg {
  background: linear-gradient(135deg, #0e0e10 0%, #1a1a1d 60%, #2a0a0e 100%);
  color: white;
  border: none;
}
.feat-card.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(227,6,19,0.25), transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.02) 20px 40px);
  pointer-events: none;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat-card .feat-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.feat-card.lg .feat-eyebrow { color: var(--red-hot); }
.feat-card .feat-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 60px);
  text-transform: uppercase;
  color: var(--fg-0);
  line-height: 0.95;
  margin-bottom: 12px;
}
.feat-card.lg .feat-title { color: white; }
.feat-card .feat-desc {
  color: var(--fg-2);
  font-size: 14px;
  margin-bottom: 22px;
  max-width: 420px;
}
.feat-card.lg .feat-desc { color: rgba(255,255,255,0.7); }
.feat-card .feat-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.feat-card .feat-watermark {
  position: absolute;
  right: -20px; top: -20px;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(227,6,19,0.3);
  pointer-events: none;
}
.feat-card .feat-watermark::after {
  content: "";
  position: absolute; inset: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(227,6,19,0.18);
}
.feat-side { display: flex; flex-direction: column; gap: 16px; }
.feat-mini {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  transition: all .15s;
  color: inherit;
}
.feat-mini:hover { border-color: var(--fg-0); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.feat-mini .feat-mini-img { width: 90px; height: 90px; border-radius: var(--r-md); flex-shrink: 0; background-size: cover; background-position: center; }
.feat-mini .feat-mini-text { flex: 1; }
.feat-mini .feat-mini-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.feat-mini .feat-mini-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--fg-0);
  line-height: 1;
}
.feat-mini .feat-mini-desc { font-size: 13px; color: var(--fg-2); margin-top: 6px; }

/* ===== Brand strip ===== */
.brand-strip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 1100px) { .brand-strip { grid-template-columns: repeat(4, 1fr); } }
.brand-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: 0.05em;
  transition: color .15s;
  cursor: pointer;
}
.brand-logo:hover { color: var(--fg-0); }

/* ===== Trackday teaser ===== */
.trackday-teaser {
  background: var(--bg-dark);
  color: white;
  border-radius: var(--r-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) { .trackday-teaser { grid-template-columns: 1fr; padding: 32px; } }
.trackday-teaser::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 100% 50%, rgba(227,6,19,0.22), transparent 50%);
}
.trackday-teaser > * { position: relative; }
.trackday-teaser .h1 { color: white; }
.trackday-teaser .eyebrow { color: rgba(255,255,255,0.6); }
.trackday-events { display: flex; flex-direction: column; gap: 8px; }
.trackday-event {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  transition: all .15s;
  color: white;
}
.trackday-event:hover { background: rgba(255,255,255,0.1); border-color: var(--red); color: white; }
.trackday-event .te-date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  color: var(--red-hot);
  text-align: center;
  line-height: 1;
  min-width: 56px;
}
.trackday-event .te-date small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-style: normal;
  margin-top: 2px;
  letter-spacing: 0.1em;
}
.trackday-event .te-name { font-weight: 600; color: white; font-size: 15px; }
.trackday-event .te-name small { display: block; color: rgba(255,255,255,0.6); font-weight: 400; font-size: 12px; margin-top: 2px; }
.trackday-event .te-spots { font-family: var(--font-mono); font-size: 11px; color: #4ade80; letter-spacing: 0.05em; }
.trackday-event .te-spots.low { color: #fbbf24; }
.trackday-event .te-arrow { color: rgba(255,255,255,0.4); }

/* ===== Reviews ===== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .15s;
}
.review-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.review-card .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; }
.review-card .quote { color: var(--fg-1); font-size: 14px; line-height: 1.6; flex: 1; }
.review-card .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.review-card .meta .product {
  display: block;
  color: var(--fg-0);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ===== Article cards ===== */
.article-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .2s;
  color: inherit;
}
.article-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.article-card .ac-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-3); }
.article-card.lg .ac-img { aspect-ratio: 4 / 3; }
.article-card .ac-body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.article-card .ac-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-card .ac-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-0);
  text-transform: uppercase;
  line-height: 1.05;
}
.article-card.lg .ac-title { font-size: 32px; }
.article-card .ac-meta {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ===== About block ===== */
.about-block {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .about-block { grid-template-columns: 1fr; padding: 32px; } }

/* ===== Newsletter ===== */
.newsletter {
  background: var(--bg-dark);
  color: white;
  border-radius: var(--r-xl);
  padding: 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 100%;
  background: radial-gradient(ellipse, rgba(227,6,19,0.18), transparent 60%);
}
.newsletter .eyebrow { color: rgba(255,255,255,0.6); position: relative; }
.newsletter .h2 { color: white; position: relative; margin: 12px 0 12px; }
.newsletter p { position: relative; color: rgba(255,255,255,0.7); }
.newsletter-form {
  max-width: 520px;
  margin: 24px auto 0;
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  padding: 6px;
  position: relative;
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 18px;
  color: white;
  font-size: 14px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-msg { position: relative; max-width: 520px; margin: 12px auto 0; padding: 8px 14px; border-radius: var(--r-md); font-size: 13px; }
.newsletter-msg.ok { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.newsletter-msg.err { background: rgba(239,68,68,0.18); color: #fca5a5; }

/* Full-bleed newsletter — drop border radius (no longer floating) and add
   inner padding that aligns to the centered content column on wide screens.
   Hero-style animated background sits behind the content; reuses the same
   CSS rules as .hero-bg-grid / .hero-bg-streaks / .hero-bg-glow so visuals
   match. */
.newsletter-section .newsletter {
  border-radius: 0;
  padding: 64px max(24px, calc((100vw - 1100px) / 2 + 24px));
}
@media (max-width: 900px) {
  .newsletter-section .newsletter { padding: 48px 20px; }
}
.newsletter-section .newsletter::before { display: none; } /* replaced by .hero-bg-glow */
.newsletter-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.newsletter-bg > * { position: absolute; }
/* Position the glow on the right side of the section so the layout mirrors
   the hero (red glow drifting in from the side). */
.newsletter-section .newsletter-bg .hero-bg-glow {
  right: -20%; top: -20%; width: 50%; aspect-ratio: 1;
}
.newsletter-inner { position: relative; z-index: 1; text-align: center; }

/* ===== Homepage bannery (admin-managed click-through banners) =====
   Outer card supplies aspect-ratio + overflow:hidden; .bannery-img is the
   background image layer that the hover effect transforms. Effects use
   .bannery-card.hover-<name> .bannery-img so they don't fight other layers
   (overlay, content). Mobile collapses the grid to a single column.
   The section is a flex item inside .hp-sections (display:flex column);
   .container-wide's `margin: 0 auto` would make it shrink-to-fit, and
   since cards use aspect-ratio with no intrinsic width the whole section
   would collapse to its padding. Explicit width:100% prevents that. */
.bannery-section { width: 100%; box-sizing: border-box; }
.bannery-grid { width: 100%; }
@media (max-width: 900px) {
  .bannery-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}
/* Full-bleed: section breaks out of any container max-width and spans the
   viewport edge to edge. Used by single-banner bannery and car-picker. */
.section-fullbleed,
.bannery-fullbleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding-left: 0; padding-right: 0; box-sizing: border-box; }
.bannery-fullbleed .bannery-card { border-radius: 0; box-shadow: none; aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .bannery-fullbleed .bannery-card { aspect-ratio: 4 / 3; } }
/* Car picker as a full-bleed ribbon — drop the rounded corners on the card
   (no longer needed when it covers the full viewport) and add inner padding
   so the form doesn't kiss the viewport edges. */
.car-picker-section .car-picker { border-radius: 0; padding: 56px max(24px, calc((100vw - 1600px) / 2 + 24px)); }
@media (max-width: 900px) { .car-picker-section .car-picker { padding: 36px 20px; } }
.bannery-card { box-shadow: 0 4px 18px rgba(0,0,0,0.18); transition: transform .35s ease, box-shadow .35s ease; }
.bannery-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.bannery-img { transition: transform .6s ease, filter .4s ease, opacity .4s ease; will-change: transform, filter; }

/* Hover effects — applied to the image layer only */
.bannery-card.hover-zoom:hover       .bannery-img { transform: scale(1.06); }
.bannery-card.hover-zoom-slow:hover  .bannery-img { transform: scale(1.12); transition-duration: 1.2s; }
.bannery-card.hover-brightness:hover .bannery-img { filter: brightness(1.18); }
.bannery-card.hover-darken:hover     .bannery-img { filter: brightness(0.7); }
.bannery-card.hover-grayscale       .bannery-img { filter: grayscale(0.85); }
.bannery-card.hover-grayscale:hover .bannery-img { filter: grayscale(0); }
.bannery-card.hover-blur            .bannery-img { filter: blur(4px); }
.bannery-card.hover-blur:hover      .bannery-img { filter: blur(0); }
.bannery-card.hover-lift:hover { transform: translateY(-6px); }

/* Shine sweep — diagonal gloss across the card on hover */
.bannery-card.hover-shine::after {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .8s ease;
  z-index: 2;
}
.bannery-card.hover-shine:hover::after { left: 125%; }

/* Button hover — uses CSS vars set inline by PHP so admin colors win */
.bannery-card .bannery-btn { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.bannery-card:hover .bannery-btn,
.bannery-card .bannery-btn:hover {
  background: var(--bn-btn-bg-hover, var(--red-hot, #ff1a2c));
  color: var(--bn-btn-fg-hover, #fff);
  border-color: var(--bn-btn-bg-hover, var(--red-hot, #ff1a2c));
}

/* Content layer should sit above image + overlay */
.bannery-card .bannery-content { z-index: 3; }
.bannery-card .bannery-img { z-index: 0; }