/**
 * Featured Image — TShop
 * Banner full-width estilo colaboración: imagen de fondo en card
 * redondeada, título en mono (Rubik Mono One) y botón outlined, centrados.
 * El scrim radial solo oscurece el centro, donde vive el texto — el resto
 * de la foto queda limpia.
 */

.featured-image {
  padding-block: 3rem;
}

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

/*
 * El contenedor va full width: el tamaño lo controla la card, cuyo estado
 * base es el compacto (90svw menos el padding-inline de 1rem por lado que
 * tenía el contenedor original = calc(90svw - 2rem), radio clamp).
 */
.featured-image__container {
  width: 100%;
}

.featured-image__card {
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(90svw - 2rem);
  margin-inline: auto;
  border-radius: clamp(1rem, 2vw, 1.5rem);
  aspect-ratio: 21 / 9;
  text-decoration: none;
}

/*
 * Scroll motion estilo Apple: la card entra al viewport full-bleed
 * (100% de ancho, sin radio) y se encoge hasta su estado base compacto
 * conforme avanza el scroll (completa al 45% de su recorrido visible).
 * Solo el keyframe "from" está definido: el "to" implícito es el estado
 * base, así el fallback sin soporte (o con reduced motion) es la card
 * compacta estática, idéntica al diseño original.
 */
@supports (animation-timeline: view()) {
  .featured-image__card {
    animation: featured-image-shrink linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
}

@keyframes featured-image-shrink {
  from {
    width: 100%;
    border-radius: 0;
  }
}

/* Solo portrait: en landscape de teléfono una card 4:5 no cabe a lo alto. */
@media (max-width: 767px) and (orientation: portrait) {
  .featured-image__card {
    aspect-ratio: 4 / 5;
  }
}

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

@media (max-width: 767px) and (orientation: portrait) {
  .featured-image__media {
    /* En vertical prioriza el dispositivo (lado izquierdo de la foto). */
    object-position: 30% center;
  }
}

.featured-image__card:hover .featured-image__media {
  transform: scale(1.03);
}

/*
 * Scrim inferior (antes radial centrado): el contenido vive anclado abajo
 * y la elipse central lo dejaba sobre imagen sin oscurecer — el título
 * caía sobre el taxi amarillo y la SUV plateada casi sin contraste.
 */
.featured-image__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.65),
    rgb(0 0 0 / 0.25) 40%,
    transparent 65%
  );
}

.featured-image__content {
  position: absolute;
  /* Estirado a lo ancho (no left:50% + translate): el shrink-to-fit de un
     absoluto centrado resuelve contra la mitad derecha de la card y en
     móvil partía el título en una palabra por línea. */
  inset: auto 0 12px 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 1.5rem;
  text-align: center;
}

.featured-image__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 400; /* Rubik Mono One solo tiene un peso */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  /* Refuerzo sobre parches claros de la foto (cielo, carrocerías). */
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.45);
}

.featured-image__button {
  display: inline-block;
  padding: 0.9em 1.6em;
  border: 1px solid rgb(255 255 255 / 0.9);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  transition:
    background-color 0.3s ease-out,
    color 0.3s ease-out;
}

.featured-image__card:hover .featured-image__button {
  background-color: #fff;
  /* Valor fijo (no token): el fondo del hover siempre es blanco,
     también en dark mode, así que el texto debe ser siempre oscuro. */
  color: rgb(23 29 30);
}

/* --accent: el ring teal claro era invisible sobre el fondo claro. */
.featured-image__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .featured-image__media,
  .featured-image__button {
    transition: none;
  }

  .featured-image__card {
    animation: none;
  }
}