/* ==================================================
   hero-banner.css — Mascotas Ayacucho (AA, robusto)
   - Texto anclado abajo con gradiente legible
   - Botones accesibles (contraste + focus)
   - Controles Swiper fuera del contenido, sin solapar
   - Extras: variables, safe-areas, forced-colors, :has()
   ================================================== */

/* ===== Variables de diseño (scoped) ===== */
.hero-banner {
  --hb-radius: 12px;
  --hb-height-min: 240px;
  --hb-height-max: 540px;
  --hb-height-vw: 45vw;

  --hb-pad-min: 14px;
  --hb-pad-max: 42px;
  --hb-pad-vw: 4.5vw;

  --hb-grad-strong: linear-gradient(
    to top,
    rgba(0, 0, 0, .60) 0%,
    rgba(0, 0, 0, .42) 32%,
    rgba(0, 0, 0, .18) 58%,
    rgba(0, 0, 0, 0) 78%
  );

  --hb-grad-soft: linear-gradient(
    to top,
    rgba(0, 0, 0, .38) 0%,
    rgba(0, 0, 0, .24) 30%,
    rgba(0, 0, 0, 0) 75%
  );

  --hb-surface: var(--surface, #fff);
  --hb-title-font: var(--fuente-titulos, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --hb-base-font: var(--fuente-base, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* Fallbacks por si no hay color-mix() */
  --hb-accent: var(--support, #0AC5CA);
  --hb-brand:  var(--brand,  #FF0000);
  --hb-btn-text: #fff;

  position: relative;
  isolation: isolate; /* separa overlays del resto */
  background: var(--hb-surface);
  z-index: 0; /* evita tapar header sticky */
}

/* Afinar colores con color-mix cuando está disponible */
@supports (color: color-mix(in oklab, white, black)) {
  .hero-banner {
    /* leve oscurecido para mejorar contraste de CTA */
    --hb-accent: color-mix(in oklab, var(--support, #0AC5CA) 100%, black 6%);
    --hb-brand:  color-mix(in oklab, var(--brand,  #FF0000) 90%,  black 10%);
  }
}

/* ===== Contenedor del slider ===== */
.hero-banner .hero-slider {
  width: 100%;
  height: clamp(var(--hb-height-min), var(--hb-height-vw), var(--hb-height-max));
  position: relative;
  overflow: hidden;
  contain: layout paint; /* menos CLS */
  border-radius: var(--hb-radius);
  background: #000; /* mejor transición mientras carga */
}

/* ===== Slides ===== */
.hero-banner .swiper-slide {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Si usas <img> dentro del slide (opcional) */
.hero-banner .slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ===== Gradiente inferior (legibilidad del texto) ===== */
.hero-banner .hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hb-grad-strong);
  z-index: 1;
  pointer-events: none;
}

/* Fallback por slide si NO hay overlay global
   (se anula automáticamente si existe .hero-overlay con :has()) */
.hero-banner .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hb-grad-strong);
  z-index: 1;
  pointer-events: none;
}
@supports selector(:has(*)) {
  .hero-banner:has(.hero-overlay) .swiper-slide::after { content: none; }
}

/* ===== Contenido pegado abajo ===== */
.hero-banner .hero-content {
  position: absolute;
  inset: auto 0 0 0; /* pegado abajo */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(var(--hb-pad-min), var(--hb-pad-vw), var(--hb-pad-max));
  padding-bottom: calc(clamp(var(--hb-pad-min), var(--hb-pad-vw), var(--hb-pad-max)) + env(safe-area-inset-bottom, 0px));
  color: #fff;
  text-align: left;
  align-items: flex-start;
  max-width: 1100px;
  margin-inline: auto;
  pointer-events: auto;
}

/* Alineaciones */
.hero-banner .hero-content.align-center { text-align: center; align-items: center; }
.hero-banner .hero-content.align-right  { text-align: right;  align-items: flex-end; }

/* Tonos predecibles (desde PHP: text-light | text-dark) */
.hero-banner .hero-content.text-light { color: #fff; }
.hero-banner .hero-content.text-dark  { color: #111; text-shadow: none; }

/* Refuerzo suave de contraste sólo detrás del texto cuando es light */
.hero-banner .hero-content.text-light::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: var(--hb-grad-soft);
}

/* ===== Tipografía ===== */
.hero-banner .hero-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.06;
  font-size: clamp(22px, 4.4vw, 44px);
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  font-family: var(--hb-title-font);
}
.hero-banner .hero-subtitle {
  margin: .1em 0 .6em;
  line-height: 1.28;
  font-size: clamp(14px, 2.6vw, 18px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
  font-family: var(--hb-base-font);
}

/* ===== Botón principal ===== */
.hero-banner .hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68em 1.15em;
  min-height: 40px; /* touch target */
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: var(--hb-btn-text);
  background: var(--hb-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-banner .hero-btn:hover,
.hero-banner .hero-btn:focus { opacity: .96; transform: translateY(-1px); }
.hero-banner .hero-btn:active { transform: translateY(0); }
.hero-banner .hero-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Variante de marca (CTA principal) con contraste mejorado */
.hero-banner .hero-btn--brand { background: var(--hb-brand); }
.hero-banner .hero-btn--brand:hover,
.hero-banner .hero-btn--brand:focus { filter: brightness(.92); }

/* ===== Controles Swiper ===== */
.hero-banner .swiper-pagination {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(10px, 2.4vw, 18px) !important; /* Swiper a veces inyecta inline */
  z-index: 3;
  pointer-events: auto;
}
.hero-banner .swiper-pagination-bullet {
  width: 10px; height: 10px;
  background: #fff;
  opacity: .65;
  transition: opacity .2s, transform .15s;
}
.hero-banner .swiper-pagination-bullet:hover { opacity: .95; transform: scale(1.12); }
.hero-banner .swiper-pagination-bullet-active { opacity: 1; }

/* Flechas centradas verticalmente y con hit-area generosa */
.hero-banner .swiper-button-prev,
.hero-banner .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 44px; height: 44px;
  z-index: 3;
  border-radius: 999px;
  background: rgba(0, 0, 0, .24);
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
  outline: none;
}
.hero-banner .swiper-button-prev { left: 10px; }
.hero-banner .swiper-button-next { right: 10px; }

.hero-banner .swiper-button-prev::after,
.hero-banner .swiper-button-next::after {
  font-size: 18px; /* tamaño del ícono de Swiper */
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  /* Evita que cambie por root vars de Swiper */
}

.hero-banner .swiper-button-prev:hover,
.hero-banner .swiper-button-next:hover {
  background: rgba(0, 0, 0, .34);
  transform: translateY(-50%) scale(1.05);
}

/* Backdrop sólo si el navegador lo soporta */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .hero-banner .swiper-button-prev,
  .hero-banner .swiper-button-next {
    -webkit-backdrop-filter: saturate(120%) blur(2px);
    backdrop-filter: saturate(120%) blur(2px);
  }
}

/* Estados deshabilitados de Swiper (cuando no hay más slides) */
.hero-banner .swiper-button-disabled {
  opacity: .38 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ===== Responsive fino ===== */
@media (max-width: 640px) {
  .hero-banner .hero-content {
    padding: clamp(14px, 6vw, 26px);
    gap: .4rem;
  }
  .hero-banner .hero-title   { font-size: clamp(20px, 6.2vw, 30px); }
  .hero-banner .hero-subtitle{ font-size: clamp(13px, 3.6vw, 16px); }
  .hero-banner .hero-btn     { padding: .56em 1em; font-size: .92rem; min-height: 38px; }

  /* Flechas más pegadas al borde para no tapar contenido */
  .hero-banner .swiper-button-prev { left: 6px; }
  .hero-banner .swiper-button-next { right: 6px; }
}

/* ===== Accesibilidad / rendimiento extra ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-banner * { animation: none !important; transition: none !important; }
}

/* Alto contraste forzado (Windows/UA modes) */
@media (forced-colors: active) {
  .hero-banner .swiper-button-prev,
  .hero-banner .swiper-button-next {
    background: CanvasText;
    color: Canvas;
    border: 1px solid Canvas;
  }
  .hero-banner .swiper-pagination-bullet { background: CanvasText; }
  .hero-banner .hero-btn,
  .hero-banner .hero-btn--brand {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
    outline: 1px solid CanvasText;
  }
}

/* Evita que el overlay tape interacciones si hay elementos interactivos en contenido */
.hero-banner .hero-overlay,
.hero-banner .swiper-slide::after { pointer-events: none; }

/* ===== Soporte RTL básico ===== */
:root[dir="rtl"] .hero-banner .hero-content.align-right { align-items: flex-start; text-align: left; }
:root[dir="rtl"] .hero-banner .hero-content { text-align: right; align-items: flex-end; }
:root[dir="rtl"] .hero-banner .swiper-button-prev { right: 10px; left: auto; }
:root[dir="rtl"] .hero-banner .swiper-button-next { left: 10px; right: auto; }