/*
 * ATV Centrum - akce-vybava-v-cene.css
 * Kampaňová stránka „Výbava v ceně čtyřkolky" (/akce-vybava-v-cene) - hero, intro, bloky výbavy, kontakt.
 * Načítá se jako pageExtraCss NAD catalog.css (grid + product-card) a akce-box.css (bloky s fotkou).
 * Stejná stavba jako /narozeninova-akce, tyrkysový akcent jako blok výbavy v detailu (#1E9AAB, text na bílé #177D8B).
 */

.hero-catalog--vybava,
.vybava-intro,
.vybava-offers,
.vybava-cta {
  --vb-teal: #1E9AAB;
  --vb-teal-dark: #177D8B;
}

/* ── HERO - tmavě modrá s tyrkysovou září vpravo ───────────────────── */
.hero-catalog--vybava {
  background: var(--navy, #0F1E2E);
  min-height: 0;
}
.hero-catalog--vybava .hero-catalog-bg::after {
  background:
    radial-gradient(ellipse at 88% 50%, rgba(30, 154, 171, 0.45) 0%, rgba(30, 154, 171, 0) 58%),
    linear-gradient(90deg, rgba(15, 30, 46, 0.96) 0%, rgba(15, 30, 46, 0.88) 55%, rgba(15, 30, 46, 0.7) 100%);
}
.hero-catalog--vybava .hero-catalog-bg::before {
  background: repeating-linear-gradient(-55deg, transparent, transparent 40px, rgba(30, 154, 171, 0.06) 40px, rgba(30, 154, 171, 0.06) 41px);
}
.hero-catalog--vybava::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--akce23-scratch);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.hero-catalog--vybava .hero-catalog-inner { padding-top: 43px; padding-bottom: 45px; }
.hero-catalog--vybava .hero-catalog-breadcrumb { margin-bottom: 8px; }
.hero-catalog--vybava .hero-catalog-breadcrumb span { color: #fff; }
.hero-catalog--vybava .hero-catalog-breadcrumb a:hover { color: var(--vb-teal); }
.hero-catalog--vybava .hero-catalog-title {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.05;
  margin-bottom: 8px;
}
.hero-catalog--vybava .hero-catalog-title .accent {
  color: var(--vb-teal);
  -webkit-text-stroke: 2px var(--vb-teal);
}
.hero-catalog--vybava .hero-catalog-subtitle {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px;
  background: var(--vb-teal-dark);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── INTRO ────────────────────────────────────────────────────────── */
.vybava-intro {
  background: var(--white, #fff);
  padding: 44px 0 0;
  text-align: center;
}
.vybava-intro-lead {
  font-family: var(--font-primary);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.65;
  color: var(--navy, #0F1E2E);
  max-width: 760px;
  margin: 0 auto;
}

/* ── ČTYŘKOLKY V AKCI ─────────────────────────────────────────────── */
.vybava-intro + .catalog-section { padding-top: 36px; }
.vybava-section-title {
  font-family: var(--font-primary);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy, #0F1E2E);
  margin: 0 0 20px;
}
.catalog-empty { text-align: center; padding: 48px 20px; max-width: 520px; margin: 0 auto; }
.catalog-empty p { color: var(--gray-500, #64748b); margin: 0 0 24px; }

/* ── BLOKY VÝBAVY - pod sebou, s mezerou ──────────────────────────── */
.vybava-offers { padding: 8px 0 48px; }
.vybava-offers .akce23-box + .akce23-box { margin-top: 24px; }

/* ── KONTAKT ──────────────────────────────────────────────────────── */
.vybava-cta { padding: 8px 0 56px; text-align: center; }
.vybava-cta-title {
  font-family: var(--font-primary);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy, #0F1E2E);
  margin: 0 0 10px;
}
.vybava-cta-text { font-size: 16px; line-height: 1.65; color: rgba(15, 30, 46, 0.85); margin: 0; }
.vybava-cta-text a { color: var(--vb-teal-dark); font-weight: 700; text-decoration: none; }
.vybava-cta-text a[href^="tel:"] { white-space: nowrap; }
.vybava-cta-text a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .hero-catalog--vybava .hero-catalog-inner { padding-top: 44px; padding-bottom: 46px; }
  .vybava-intro { padding-top: 32px; }
  .vybava-offers { padding-bottom: 32px; }
  .vybava-offers .akce23-box + .akce23-box { margin-top: 18px; }
  .vybava-cta { padding-bottom: 40px; }
}

/* 4 čtyřkolky v akci: na širokém displeji jedna řada po 4, jinak 2 + 2 (žádná osamocená karta) */
#ctyrkolky-v-akci .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { #ctyrkolky-v-akci .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #ctyrkolky-v-akci .products-grid { grid-template-columns: minmax(0, 1fr); } }