/**
 * amai/focus-tile — puertas a las colecciones.
 * Referencia: design/wireframes-amai.html, sección 03 (pin 5).
 */

.amai-focus-tiles {
  display: grid;
  grid-template-columns: repeat(var(--amai-focus-columns, 2), 1fr);
  /* Misma retícula de líneas que shop-row: el hueco es el fondo asomando. */
  gap: 1px;
  background: var(--amai-line);
  border-block: 1px solid var(--amai-line);
}

.amai-focus-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--amai-paper);
  color: var(--amai-on-ink);
  text-decoration: none;
}

.amai-focus-tile--dark {
  color: var(--amai-ink);
}

/* ---------- Media ---------- */

.amai-focus-tile__media {
  display: block;
  aspect-ratio: 4 / 3;
}

.amai-focus-tiles--ratio-1-1 .amai-focus-tile__media {
  aspect-ratio: 1 / 1;
}

.amai-focus-tiles--ratio-3-4 .amai-focus-tile__media {
  aspect-ratio: 3 / 4;
}

.amai-focus-tiles--ratio-16-9 .amai-focus-tile__media {
  aspect-ratio: 16 / 9;
}

/* ---------- Altura de pantalla ----------
   A 4:3 los tiles quedaban más bajos que las filas de producto que los rodean,
   y la jerarquía salía del revés: la puerta a una colección tiene que pesar más
   que un escaparate de piezas sueltas. Con altura medida contra la pantalla
   mandan ellos, que es lo que hace Marine Serre.

   No se llega a 100svh a propósito: si la sección ocupa la pantalla exacta
   parece el final de la página. Dejando asomar el borde de lo siguiente se ve
   que hay más abajo. */

.amai-focus-tiles--h-tall .amai-focus-tile__media,
.amai-focus-tiles--h-full .amai-focus-tile__media {
  /* La altura manda; la forma pasa a decidirla la retícula. */
  aspect-ratio: auto;
}

.amai-focus-tiles--h-tall .amai-focus-tile__media {
  block-size: 78svh;
}

.amai-focus-tiles--h-full .amai-focus-tile__media {
  block-size: 92svh;
}

/* A pantalla entera, el nombre de la colección deja de ser un pie de foto y
   pasa a ser el titular de la sección: se le da la escala h2 del sistema y una
   sangría mayor, o queda pegado a la esquina de una superficie enorme. */

.amai-focus-tiles--h-tall .amai-focus-tile__copy,
.amai-focus-tiles--h-full .amai-focus-tile__copy {
  inset-block-end: var(--amai-space-4);
  inset-inline-start: var(--amai-space-4);
}

.amai-focus-tiles--h-tall .amai-focus-tile__title,
.amai-focus-tiles--h-full .amai-focus-tile__title {
  font-size: var(--amai-scale-h2);
}

/* El velo del bloque va en porcentajes, y a pantalla entera eso lo diluye: el
   mismo 30% repartido sobre 700px llega al pie mucho más flojo que sobre 540 y
   el CTA se quedaba sin contraste sobre una prenda clara. Aquí las paradas van
   en píxeles, así que la zona densa es siempre la misma franja de abajo, la que
   ocupa el texto, mida lo que mida el tile.

   Y es plano hasta 180px en vez de un pico en el borde: el titular vive a unos
   110px del pie y con un degradado en pendiente le llegaba la mitad de velo que
   al CTA. Plano, los dos van igual de protegidos y el pie queda menos cargado
   que antes: pasa de 0,57 a 0,47 de alfa. */

.amai-focus-tiles--h-tall .amai-focus-tile__scrim,
.amai-focus-tiles--h-full .amai-focus-tile__scrim {
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, calc(var(--amai-focus-scrim, 0.3) * 1.55)) 0,
    rgba(10, 10, 10, calc(var(--amai-focus-scrim, 0.3) * 1.55)) 180px,
    transparent 380px
  );
}

.amai-focus-tiles--h-tall .amai-focus-tile--dark .amai-focus-tile__scrim,
.amai-focus-tiles--h-full .amai-focus-tile--dark .amai-focus-tile__scrim {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, calc(var(--amai-focus-scrim, 0.3) * 1.55)) 0,
    rgba(255, 255, 255, calc(var(--amai-focus-scrim, 0.3) * 1.55)) 180px,
    transparent 380px
  );
}

.amai-focus-tile__image,
.amai-focus-tile__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amai-focus-tile__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

.amai-focus-tile[data-video] .amai-focus-tile__video {
  opacity: 1;
}

/* Un empujón discreto al pasar por encima: la imagen crece un punto y avisa de
   que el tile es una puerta. Nada de sombras ni bordes. */
.amai-focus-tile__image {
  transition: transform 600ms ease;
}

.amai-focus-tile:hover .amai-focus-tile__image,
.amai-focus-tile:focus-visible .amai-focus-tile__image {
  transform: scale(1.03);
}

/* Velo para el contraste del nombre, como en el hero. */
.amai-focus-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, var(--amai-focus-scrim, 0.3)) 0%,
    rgba(10, 10, 10, calc(var(--amai-focus-scrim, 0.3) * 0.5)) 40%,
    transparent 75%
  );
}

.amai-focus-tile--dark .amai-focus-tile__scrim {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, var(--amai-focus-scrim, 0.3)) 0%,
    rgba(255, 255, 255, calc(var(--amai-focus-scrim, 0.3) * 0.5)) 40%,
    transparent 75%
  );
}

/* ---------- Texto ---------- */

.amai-focus-tile__copy {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--amai-space-3);
  inset-inline-start: var(--amai-space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--amai-space-1);
}

.amai-focus-tile__title {
  margin: 0;
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: var(--amai-leading-heading);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: inherit;
  text-shadow: 0 1px 10px rgba(10, 10, 10, 0.35);
}

.amai-focus-tile--dark .amai-focus-tile__title {
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.35);
}

.amai-focus-tile__cta {
  font-family: var(--amai-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  border-block-end: 1px solid currentColor;
  text-shadow: 0 1px 8px rgba(10, 10, 10, 0.4);
}

.amai-focus-tile--dark .amai-focus-tile__cta {
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
}

.amai-focus-tile__image--empty {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amai-paper);
}

/* ---------- Móvil ----------
   Una columna: dos tiles a media pantalla se quedan en nada, y el sentido del
   bloque es que la imagen mande. */

@media (max-width: 767px) {
  .amai-focus-tiles {
    grid-template-columns: 1fr;
  }

  /* En una columna los tiles se apilan: con la altura de escritorio la pareja
     se comería dos pantallas y media y el resto de la home quedaría enterrado
     detrás de un scroll larguísimo. Más bajos, y el segundo asoma.

     'full' baja a 70svh y no a 78: sigue mandando sobre la pantalla, pero la
     pareja pasa de 1.320px a 1.182px y la fila de producto de debajo queda algo
     más cerca. */

  .amai-focus-tiles--h-tall .amai-focus-tile__media {
    block-size: 62svh;
  }

  .amai-focus-tiles--h-full .amai-focus-tile__media {
    block-size: 70svh;
  }
}

/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .amai-focus-tile__image,
  .amai-focus-tile__video {
    transition: none;
  }

  .amai-focus-tile:hover .amai-focus-tile__image,
  .amai-focus-tile:focus-visible .amai-focus-tile__image {
    transform: none;
  }
}