/* ============================================================
   HLAVOUNI.CZ — 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.
   ============================================================ */
/* Layered base — deep black to brand-red shadow, with red glow on the right */
/* Subtle perspective grid suggesting a track stretching to the horizon */
/* Light streaks streaming right→left to evoke high-speed motion */
/* Pulsing red glow over the photo region */
/* 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. */
/* 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. */
/* When more than one slide, all default invisible; only `.is-active` shows. */
/* ===== Effect: fade (default) — opacity-only crossfade ===== */
/* ===== Effect: slide-left — incoming slides in from the right ===== */
/* ===== Effect: slide-right — incoming from the left ===== */
/* ===== Effect: slide-up — incoming from below ===== */
/* ===== Effect: zoom (Ken Burns) — slow continuous zoom on the active slide ===== */
/* ===== Effect: cut — instant swap, no transition ===== */
/* 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`. */
/* 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. */

/* On smaller screens stats wrap onto a new row below the buttons. */



/* Floating "live" meta card top-right */
/* Floating "bestseller" feature card bottom-right */
/* Tachometer-style RPM bars in the bottom-left of the hero */
/* Tablet — keep two-column visual but compress */


/* 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) {
/* Tmavý overlay pro čitelnost textu */
}



/* ===== 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: normal;
  
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  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 ===== */
@keyframes tdsMarquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}



/* ===== Legacy hero (kept for any other view that might still reference it) ===== */
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

@keyframes tdsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* ===== CAR PICKER ===== */
@media (max-width: 800px) { .car-picker-form { grid-template-columns: 1fr; } }
/* ===== Categories ===== */
/* ===== Featured banners ===== */
@media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; } }
/* ===== Brand strip ===== */
@media (max-width: 1100px) { .brand-strip { grid-template-columns: repeat(4, 1fr); } }
/* ===== Trackday teaser ===== */
@media (max-width: 900px) { .trackday-teaser { grid-template-columns: 1fr; padding: 32px; } }
/* ===== 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: normal;
  font-size: 22px;
  color: var(--fg-0);
  
  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-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; } }
/* Mobile: pull the single-banner bannery back into the page gutter so it sits
   inset like the other padded home sections instead of touching the viewport
   edges. The card gets its rounded corners and subtle shadow back. */
@media (max-width: 700px) {
  .bannery-fullbleed {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
  }
  .bannery-fullbleed .bannery-card {
    border-radius: var(--r-md, 14px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  }
}
/* 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. */
@media (max-width: 900px) { .car-picker-section .car-picker { padding: 36px 20px; } }
/* Trackday teaser as a full-bleed dark ribbon — same pattern as car-picker
   and newsletter. Drop the rounded corners on the inner card and use fluid
   horizontal padding that aligns to a 1600px content column on wide screens. */

.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; }