/* EVA Tech: Components and animations */

/* 1) Optional reveal utilities (do NOT hide by default) */
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 360ms cubic-bezier(.2,.8,.2,1), transform 360ms cubic-bezier(.2,.8,.2,1); }

/* 2) Hero refinements */
.hero-points { margin-top: var(--space-4); list-style: none; padding: 0; }
.hero-points li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #333; }
.hero-points svg { width: 16px; height: 16px; fill: var(--brand); }

/* 2.a) Hero media standard size (scoped to .hero--split only) */
:root {
  --hero-media-min-h: 220px;
  --hero-media-max-h: 420px;
  --hero-media-radius: 14px;
}
.hero--split .hero-media {
  position: relative;
  height: clamp(var(--hero-media-min-h), 35vw, var(--hero-media-max-h));
  border-radius: var(--hero-media-radius);
  overflow: hidden;                 /* crop any overflow so all images look uniform */
  background: var(--muted-2);       /* subtle placeholder while image loads */
}
.hero--split .hero-media picture,
.hero--split .hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                 /* auto-crop to fill container */
  object-position: center;           /* crop from center for consistency */
}
.hero--split .hero-media .hero-overlay { position: absolute; inset: 0; pointer-events: none; }

/* 2.b) HOME PAGE HERO: background provides the visual; hide the <img> on Home */
.page-home .hero--split .hero-media {
  background-image: url("../img/placeholders/home-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-home .hero--split .hero-media img {
  opacity: 0; /* keeps layout and semantics while background provides the visual */
}

/* 2.c) SHOP PAGE HERO: same pattern as Home for consistency */
.page-shop .hero--split .hero-media {
  background-image: url("../img/placeholders/shop-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-shop .hero--split .hero-media img {
  opacity: 0; /* hide <img> so the page-scoped background shows */
}

/* 3) Trust strip */
.trust-inner { align-items: center; }
.trust-item { display: flex; align-items: center; gap: 8px; transition: transform var(--transition-fast); }
.trust-item:hover { transform: translateY(-2px); }
/* External SVG image icons */
.trust-item .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* 4) Features */
.feature { text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.feature:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.feature__icon { margin-inline: auto; margin-bottom: var(--space-3); }

/* 5) Section CTA */
.section-cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* 6) Shop stepper and set cards */
.stepper { list-style:none; display:flex; gap:8px; padding:0; margin:0 0 12px 0; flex-wrap: wrap; }
.stepper li { padding:8px 12px; border:1px solid var(--border); border-radius:999px; font-size:14px; color:#444; background:#fff; }
.stepper li.active { border-color: var(--brand); color: var(--brand); font-weight: 600; }

.set-grid { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .set-grid { grid-template-columns: repeat(3, 1fr); } }
.set-card {
  border:1px solid var(--border); border-radius: var(--radius);
  background:#fff; box-shadow: var(--shadow);
  cursor:pointer; overflow:hidden;
}
.set-card input { display:none; }
.set-card__body { padding:16px; }
.set-card h3 { margin:0 0 6px 0; }
.set-card .set-price { font-weight:700; margin:0; }
.set-card .set-desc { margin:4px 0 0 0; color:#555; font-size:14px; }
/* :has is supported in modern browsers; if not, the card will still look fine */
.set-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,0,0,.12), var(--shadow);
}

/* 7) Summary totals */
.totals { display:grid; gap:8px; margin-top: 12px; }
.totals-row { display:flex; align-items:center; justify-content:space-between; }
.totals-row--strong { font-weight: 700; font-size: 18px; }
.totals-row.free { color:#1a7f37; }
.totals-row.discount { color:#b00020; }
.price-pulse { animation: pulse 600ms ease; }
@keyframes pulse { 0% { background: rgba(255,0,0,.12); } 100% { background: transparent; } }

/* 8) Misc */
.promo-row { display:flex; gap:8px; }
.card .section-divider { margin: 14px 0; }