/* Auris Reader - Componentes (parte 2): estilos de bloques .block-*
   Extraido de components.css (limite 600 LOC). Se encola DESPUES de
   components.css (ver auris_theme_enqueue_assets en functions.php), asi
   que hereda tokens.css y la base .section. Naming BEM .block-<n>__<el>. */


/* ============================================================
   ==============================================================
   BLOCKS — Estilos específicos de bloques de elementor-blocks/
   ==============================================================
   Cada `.block-<nombre>` corresponde a un fichero HTML en
   web/theme/elementor-blocks/. Las clases comparten naming
   BEM `.block-<nombre>__<elemento>`.
   ============================================================ */


/* ----- block-hero (home) ----- */

.block-hero {
  text-align: center;
  /* padding-block reducido para que se intuya el trust-bar debajo
   * en desktop sin scroll (mejor invitacion a explorar) */
  padding-block: var(--space-16) var(--space-20);
}

.block-hero__title {
  margin: var(--space-3) 0 var(--space-6);
  /* font-size con clamp ajustado: max --text-4xl (3.0625rem ~ 49px)
   * para que "Translate as you listen." (24 chars Inter Bold) entre
   * en una sola linea dentro de container--narrow (720px). Antes con
   * --text-6xl rompia feo dejando "listen." sola en su linea.
   *
   * Bug #K (doc): clamp(min, preferred, max) = clamp(31px, 3.5vw+8px, 49px).
   * Comportamiento por viewport:
   *   320px  (movil pequeno):  preferred = 11.2+8 = 19.2px -> clamped a 31px (min)
   *   768px  (tablet):         preferred = 26.9+8 = 34.9px -> usa preferred
   *   1280px (desktop std):    preferred = 44.8+8 = 52.8px -> clamped a 49px (max)
   *   2560px (ultrawide):      preferred = 89.6+8 = 97.6px -> clamped a 49px (max)
   * Tested visualmente en 1280/1920. */
  font-size: clamp(var(--text-2xl), 3.5vw + 0.5rem, var(--text-4xl));
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.block-hero__title-accent {
  /* Sube de gray-400 (#A3A3A3) a gray-300 (#D4D4D4) para mejor
   * contraste y legibilidad. Sigue siendo claramente jerarquia
   * secundaria respecto al blanco del titulo principal.
   *
   * Bug #M (doc WCAG):
   *   Foreground: --color-gray-300 = #D4D4D4 (luminance 0.6657)
   *   Background: --color-black-base = #0A0A0A (luminance 0.0030)
   *   Contrast ratio: (0.6657 + 0.05) / (0.0030 + 0.05) = ~13.5:1
   *   WCAG AA  needs 4.5:1 (texto normal) / 3:1 (texto grande):  PASS x3
   *   WCAG AAA needs 7:1   (texto normal) / 4.5:1 (texto grande): PASS x2
   *   Cumple AAA tanto si se considera texto normal como grande. */
  color: var(--color-gray-300);
  font-weight: 700;
}

/* Tagline hero: claim diferenciador en amarillo brand. Tercer punto
 * focal amarillo de la home (junto al wordmark "Reader" y los CTAs).
 * Jerarquia visual: H1 (blanco+gris) > tagline (amarillo, sub-H1) > lead (gris).
 */
.block-hero__tagline {
  margin: var(--space-2) auto var(--space-6);
  max-width: 56ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.block-hero__lead {
  margin: 0 auto var(--space-8);
  max-width: 56ch;
}

.block-hero__ctas {
  justify-content: center;
  margin-bottom: var(--space-3);
}

.block-hero__caption {
  margin: 0 0 var(--space-12);
  color: var(--text-muted);
}

.block-hero__trust {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.block-hero__trust-text {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .block-hero { padding-block: var(--space-16); }
  .block-hero__caption { margin-bottom: var(--space-8); }
}