/* Marquesina "Texto e imagenes" — estilo de la seccion `marquee`, tomado de la
   referencia Local (su <scrolling-text>): una banda alta donde un titular
   grande se repite y entre repeticion y repeticion aparece una foto redonda.

   Las medidas son las de la referencia, expresadas en relacion a la altura de
   la banda para que un solo ajuste ("Alto de la banda") mueva todo junto:
   separacion = 70% del alto, foto = 75% del alto. En pantallas chicas la banda
   entera se achica con --marquee-ti-scale (y el titular un poco mas, con
   --marquee-ti-font-scale), asi que el texto no desborda sin necesidad de un
   segundo ajuste de tamano para movil.

   El estilo clasico (solo texto) sigue viviendo en dawn/assets/dawn.css. Este
   archivo, en cambio, se basta solo: repite el armazon (banda, pista, bucle)
   acotado a .section-marquee--text-image, porque hay temas que no cargan
   dawn.css (cielo, olive-luxe) y sin esto la banda se veria sin animacion. Al
   ser mas especifico que el selector de dawn, no hay dos animaciones a la vez
   en los temas que si lo cargan. */

/* ── Armazon propio ── */

.section-marquee--text-image {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background: var(--marquee-bg, #ffffff);
  color: var(--marquee-fg, inherit);
}

.section-marquee--text-image .section-marquee__container {
  display: flex;
  width: 100%;
  overflow: hidden;
  user-select: none;
}

.section-marquee--text-image .section-marquee__track {
  display: flex;
  white-space: nowrap;
  animation: marquee-ti-scroll var(--marquee-speed, 20s) linear infinite var(--marquee-direction, normal);
}

.section-marquee--text-image .section-marquee__container.pause-on-hover:hover .section-marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-ti-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .section-marquee--text-image .section-marquee__track { animation: none; }
}

/* ── Medidas del estilo ── */

.section-marquee--text-image {
  --marquee-ti-scale: 1;
  /* El titular encoge por su cuenta, con mas escalones que la banda. En la
     referencia el tamano sale de multiplicar un porcentaje (400%, y 250% en
     movil) por una base que a su vez cambia de ancho en ancho (24px sobre
     1024, 20px entre 475 y 1023, 16px por debajo). De ahi salen 96 / 80 / 50 /
     40px, que es lo que reproducen estos factores sobre los 96px por defecto.
     Ver themes/gratitude/assets/theme.css (.text-size--xlarge). */
  --marquee-ti-font-scale: 1;
  --marquee-ti-height: calc(var(--marquee-ti-size, 200px) * var(--marquee-ti-scale));
  /* La banda manda su propia altura: sin el padding ni los bordes que la
     variante clasica usa para verse como una cinta de anuncios. */
  padding-block: 0;
  border-top: 0;
  border-bottom: 0;
}

@media (max-width: 1023px) {
  /* 96 * 0.833 = 80px */
  .section-marquee--text-image { --marquee-ti-scale: 0.8; --marquee-ti-font-scale: 0.833; }
}

@media (max-width: 767px) {
  /* 96 * 0.52 = 50px */
  .section-marquee--text-image { --marquee-ti-scale: 0.6; --marquee-ti-font-scale: 0.52; }
}

@media (max-width: 474px) {
  /* 96 * 0.4167 = 40px. La banda no cambia aqui: la referencia solo baja el
     texto en este ultimo escalon. */
  .section-marquee--text-image { --marquee-ti-font-scale: 0.4167; }
}

.section-marquee--text-image .section-marquee__container {
  height: var(--marquee-ti-height);
  align-items: center;
}

.section-marquee--text-image .section-marquee__track {
  /* La separacion la pone el padding de cada pieza (como en la referencia),
     no el gap: asi el hueco es igual entre texto y foto que entre foto y
     texto, y sigue el alto de la banda. */
  gap: 0;
  height: 100%;
  align-items: center;
}

.section-marquee__ti-text,
.section-marquee__ti-image {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  /* El ajuste llega en porcentaje (70 = 70% del alto): la division va aca y no
     en la plantilla, que no tiene helper para decimales. */
  padding-inline: calc(var(--marquee-ti-height) * var(--marquee-ti-space, 70) / 100);
}

.section-marquee__ti-text {
  font-family: var(--font-heading, inherit);
  font-size: calc(var(--marquee-ti-font-size, 96px) * var(--marquee-ti-font-scale));
  /* La referencia marca el titular con <strong>, y su strong pesa 500
     (--font-weight-body-bold), no 700: a 700 el trazo sale mas grueso que el
     de Local. */
  font-weight: 500;
  line-height: 1;
  /* Sin letter-spacing: la referencia no lo toca, y el -0.01em que habia aqui
     encogia la cadena 20px a 96px, que era toda la diferencia que quedaba
     entre nuestro titular y el suyo. */
  /* La clasica va en versalitas; esta es un titular, va tal cual se escribe. */
  text-transform: none;
  white-space: nowrap;
}

/* Lo que el comerciante escribe entre *asteriscos* sale en cursiva y subrayado,
   como el "New York" de la referencia. El subrayado va en el <em> y no en el
   enlace, para que al poner URL no se subraye tambien la parte normal. */
.section-marquee__ti-text em {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.05em;
}

.section-marquee__ti-text a {
  color: inherit;
  text-decoration: none;
}

.section-marquee__ti-image img {
  display: block;
  width: calc(var(--marquee-ti-height) * 0.75);
  height: calc(var(--marquee-ti-height) * 0.75);
  object-fit: cover;
  border-radius: var(--marquee-ti-radius, 50%);
}