/**
 * Promo Banners — TShop
 * Migrado desde PromoBanners.astro (Tailwind) a CSS puro.
 * Todo el comportamiento del original era CSS (hover:scale, group-hover),
 * así que no hace falta JS.
 *
 * Auditoría responsive 2026-07: el grid vivía fijo en 3 columnas (cards de
 * 73px a 320px de viewport, con el texto 2.7× más alto que la card). Ahora:
 * 1 columna base, 3 columnas desde 640px, tipografía fluida.
 */

.promo-banners {
  padding-block: 3rem;
}

@media (min-width: 1024px) {
  .promo-banners {
    padding-block: 5rem;
  }
}

.promo-banners__container {
  max-width: 90svw;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Selector doble: Astra pinta h1/h2 de página con `.entry-content hN`
   (0,1,1) y pisaba la clase sola — medido 34px con clamp de 32px. */
.promo-banners .promo-banners__header {
  /* Preferido en vw: el clamp anterior tenía preferido estático (2rem)
     y congelaba el tamaño en todos los anchos. */
  font-size: clamp(1.625rem, 1rem + 2.5vw, 3.25rem);
  font-weight: 700;
  color: var(--on-surface);
  font-family: var(--font-headline);
  text-align: center;
  padding-block: 2rem;
  text-transform: uppercase;
  line-height: 1.15;
  /* Reparte las palabras entre líneas: sin esto, el centrado deja
     viudas feas en las 4-5 líneas que ocupa en móvil. */
  text-wrap: balance;
}

.promo-banners__header-highlight {
  color: var(--secondary);
}

.promo-banners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* 3 columnas desde 768: a 640 las columnas quedan en 169px y el texto
   de la card 3 medía 110% del alto de la card. Por debajo, 1 columna. */
@media (min-width: 768px) {
  .promo-banners__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.promo-banners__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
  text-decoration: none;
}

/* 3:4 en todos los anchos: los bentos fuente son 9:16 y este ratio
   conserva ~75% de la composición sin cortar el sujeto. */
.promo-banners__card--main {
  aspect-ratio: 3 / 4;
}

.promo-banners__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s ease-out;
}

.promo-banners__card:hover .promo-banners__image {
  transform: scale(1.1);
}

.promo-banners__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.6),
    rgb(0 0 0 / 0.2) 60%,
    transparent
  );
}

.promo-banners__content {
  position: absolute;
  /* right: 0 además de left: el shrink-to-fit de un absoluto usa
     min-content, y "Encerramientos" a 29px desbordaba la card en
     tablet (texto cortado contra el borde). Anclado a ambos lados
     el texto envuelve dentro de la card, siempre. */
  inset: auto 0 0 0;
  z-index: 10;
  padding: 1.5rem;
}

/* Banda de 3 columnas estrechas (768-1023): menos padding para que el
   bloque de texto no cubra la imagen completa (medido 89-101% en 768). */
@media (min-width: 768px) and (max-width: 1023px) {
  .promo-banners__content {
    padding: 1.25rem;
  }
}

/* El padding generoso espera a columnas anchas (≥1280, cards de 400px+). */
@media (min-width: 1280px) {
  .promo-banners__content--main {
    padding: 2rem;
  }
}

.promo-banners__label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* 0.85 (antes 0.7) + sombra: el label cae en la zona media del
     degradado (alpha ~0.3) y sobre imagen clara no garantizaba 4.5:1. */
  color: rgb(255 255 255 / 0.85);
  font-weight: 500;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.promo-banners__title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-top: 0.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.45);
  /* Palabras largas ("Encerramientos") en columnas estrechas. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* 1 columna móvil: la card es ancha, el título puede ser generoso. */
.promo-banners__title--main {
  font-size: 1.5rem;
}

/* 3 columnas: escala con el viewport, calibrado para que "Encerramientos"
   quepa en una línea en columnas de ~207px (22px en 768 → 30px en 1280+). */
@media (min-width: 768px) {
  .promo-banners__title--main {
    font-size: clamp(1.125rem, 0.25rem + 2.35vw, 1.875rem);
  }
}

.promo-banners__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.4);
  padding-bottom: 0.125rem;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  transition: border-color 0.3s ease-out;
}

.promo-banners__content--main .promo-banners__cta {
  margin-top: 1rem;
}

.promo-banners__card:hover .promo-banners__cta {
  border-color: #fff;
}

.promo-banners__cta svg {
  transition: transform 0.3s ease-out;
}

.promo-banners__card:hover .promo-banners__cta svg {
  transform: translateX(0.25rem);
}

/* --accent (no --primary-container): el outline se dibuja sobre el fondo
   claro de la página y el teal claro daba ~1.35:1 — invisible. */
.promo-banners__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .promo-banners__image,
  .promo-banners__cta,
  .promo-banners__cta svg {
    transition: none;
  }
}