/* Homepage-only layout: hero, trust bar, FAQ accordion. Everything else reuses shared components. */

/* Full-width hero banner carousel — replaces .ap-hero below whenever the admin
   has uploaded at least one active slide via adminpanel/promo/slider_images.php.
   .ap-hero itself is kept as the zero-slides fallback so the homepage never
   renders empty before that's configured. */
.ap-banner-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ap-surface-alt);
  line-height: 0;
}
.ap-banner-carousel__track { position: relative; width: 100%; aspect-ratio: 3 / 1; }
@media (max-width: 720px) { .ap-banner-carousel__track { aspect-ratio: 16 / 9; } }

.ap-banner-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.ap-banner-carousel__slide.is-active { opacity: 1; visibility: visible; }
.ap-banner-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-banner-carousel__slide a { display: block; width: 100%; height: 100%; }

.ap-banner-carousel__caption {
  position: absolute;
  left: var(--ap-space-lg);
  bottom: var(--ap-space-lg);
  padding: 8px 18px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 700;
  font-size: var(--ap-fs-body);
  border-radius: var(--ap-radius-sm);
  line-height: 1.4;
}

.ap-banner-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ap-transition);
}
.ap-banner-carousel__nav:hover { background: rgba(0, 0, 0, .7); }
.ap-banner-carousel__nav--prev { left: var(--ap-space-md); }
.ap-banner-carousel__nav--next { right: var(--ap-space-md); }

.ap-banner-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: var(--ap-space-md);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.ap-banner-carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  padding: 0;
}
.ap-banner-carousel__dot.is-active { background: #fff; }

.ap-hero {
  position: relative;
  background: var(--ap-bg);
  padding-block: var(--ap-space-xl);
  overflow: hidden;
}

/* Soft anchored glow instead of a flat tint over the whole section — keeps
   the dark background clean while still adding depth/warmth near the visual. */
.ap-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px circle at 82% 40%, color-mix(in srgb, var(--ap-primary) 22%, transparent), transparent 60%),
    radial-gradient(480px circle at 8% 100%, color-mix(in srgb, var(--ap-accent) 12%, transparent), transparent 65%);
  pointer-events: none;
}

.ap-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ap-space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .ap-hero__grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

.ap-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-md);
}

.ap-hero__title {
  color: var(--ap-text);
  font-size: var(--ap-fs-h1);
  line-height: 1.05;
  /* .ap-hero__content (parent) already spaces its children via flex `gap` —
     without this, the h1's own base margin-bottom (03-base.css) would stack
     on top of that gap. */
  margin-bottom: 0;
}

.ap-hero__subtitle {
  color: var(--ap-text-muted);
  font-size: 1.125rem;
}

/* Groups the newsletter capture (micro-copy, form, legal) into one visually
   distinct module — previously these floated as loose lines directly under
   the headline, competing with it instead of reading as a clear secondary action. */
.ap-hero__capture {
  margin-top: var(--ap-space-sm);
  padding: var(--ap-space-lg);
  border-radius: var(--ap-radius-lg);
  border: 1px solid var(--ap-border);
  background: color-mix(in srgb, var(--ap-surface) 55%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-sm);
  max-width: 460px;
}

.ap-hero__micro {
  font-weight: 600;
  color: var(--ap-text);
}

.ap-hero__form {
  display: flex;
  gap: var(--ap-space-sm);
  flex-wrap: wrap;
}

.ap-hero__form .ap-subscribe-email {
  flex: 1;
  min-width: 200px;
  padding: var(--ap-space-md);
  border-radius: var(--ap-radius-md);
  border: 1px solid var(--ap-border);
  background: var(--ap-surface);
  color: var(--ap-text);
}

.ap-hero__form .ap-subscribe-email:focus-visible {
  outline: none;
  box-shadow: var(--ap-focus-ring);
  border-color: var(--ap-primary);
}

.ap-hero__form .ap-btn {
  white-space: nowrap;
}

.ap-hero__legal {
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

.ap-hero__legal a {
  text-decoration: underline;
}

/* Decorative visual (no illustration assets available — built from tokens/icons). */
.ap-hero__visual {
  position: relative;
  min-height: 320px;
  display: none;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .ap-hero__visual {
    display: flex;
  }
}

/* Soft blurred halo behind the blob for depth — sits a size larger, on its
   own stacking layer so it never clips the blob's own shadow/badges. */
.ap-hero__visual::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ap-primary), transparent 70%);
  filter: blur(50px);
  opacity: 0.45;
}

.ap-hero__blob {
  position: relative;
  z-index: 1;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--ap-secondary), var(--ap-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), var(--ap-shadow-md);
}

.ap-hero__blob i {
  font-size: 5.5rem;
  color: var(--ap-overlay-text);
  opacity: 0.95;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* z-index above .ap-hero__blob (which needs its own stacking context for
   the glow halo behind it) — without this, badges with the default z-index:auto
   paint BELOW an explicitly-stacked sibling regardless of DOM order, clipping
   whichever badge overlaps the circle's edge. */
.ap-hero__badge {
  position: absolute;
  z-index: 2;
  background: var(--ap-surface);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-md);
  padding: var(--ap-space-sm) var(--ap-space-md);
  display: flex;
  align-items: center;
  gap: var(--ap-space-sm);
  font-weight: 700;
  font-size: var(--ap-fs-sm);
  white-space: nowrap;
}

.ap-hero__badge i {
  color: var(--ap-primary);
}

.ap-hero__badge--stat {
  top: 6%;
  left: 0;
}

.ap-hero__badge--fresh {
  top: 2%;
  right: 4%;
  background: var(--ap-text);
  color: var(--ap-text-inverse);
}

.ap-hero__badge--fresh i {
  color: var(--ap-accent);
}

.ap-hero__badge--verified {
  bottom: 10%;
  left: 12%;
}

@media (max-width: 1023px) {
  .ap-hero__badge--fresh {
    display: none;
  }
}

.ap-hero .ap-search__input {
  background: var(--ap-surface);
  color: var(--ap-text);
}

.ap-trust-bar {
  background: var(--ap-surface-alt);
  border-block: 1px solid var(--ap-border);
}

.ap-trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ap-space-lg);
  padding-block: var(--ap-space-md);
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

.ap-trust-bar__item strong {
  color: var(--ap-text);
  font-family: var(--ap-font-heading);
}

.ap-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ap-space-xs);
  padding: var(--ap-space-md);
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  text-align: center;
  transition: box-shadow var(--ap-transition), border-color var(--ap-transition);
}

.ap-category-tile:hover {
  box-shadow: var(--ap-shadow-md);
  border-color: var(--ap-primary);
}

.ap-category-tile img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.ap-category-tile__count {
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}