/* ==========================================================================
   hero.css

   Composicion: columna de texto estrecha anclada ABAJO, foto sangrando arriba
   y hacia el borde derecho de la ventana. El ojo entra por la cubierta y baja
   hasta el nombre y el numero, que es donde ya esta el pulgar.

   Movil: la foto va arriba, con altura limitada para que el boton de llamar
   quede cerca del primer pliegue.

   Unico momento animado de toda la pagina: la linea de tiza. El boton de
   llamar NO la espera — se pinta en el primer cuadro.
   ========================================================================== */

.hero {
  display: grid;
  background: var(--fog);

  /* Alinea el borde izquierdo del texto con el resto de la pagina, mientras la
     foto sigue libre para llegar al borde derecho de la ventana. */
  --hero-inset: max(var(--gutter), calc((100% - var(--measure-page)) / 2 + var(--gutter)));
}

.hero__media {
  grid-row: 1;
  position: relative;      /* la foto se posiciona contra esto, no contra
                              <picture>, que no tiene altura definida */
  overflow: hidden;
  /* Contenida a proposito: en un telefono, cada pixel de foto empuja el boton
     de llamar hacia la barra fija. */
  height: clamp(160px, 24vh, 230px);
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.hero__text {
  grid-row: 2;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter) var(--space-7);
}

/* --- Tipografia ----------------------------------------------------------- */

/* El H1 lleva servicio + ubicacion. Su trabajo es que lo lea el buscador; el
   peso visual lo lleva la frase de la lluvia, asi que va a tamano y peso de
   cuerpo. Sigue en frase y en tinta plena — una linea de texto, no una
   etiqueta encima del titular: sin mayusculas, sin espaciado, sin negrita. */
.hero__h1 {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
  max-width: var(--measure-narrow);
}

/* La frase estacional lleva el tratamiento dominante. */
.hero__line {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--display-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  max-width: 17ch;
  text-wrap: balance;
}

.hero__support {
  font-size: var(--text-base);
  color: var(--ink-soft);
  max-width: var(--measure-narrow);
}

.hero__license {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  display: flex;
  gap: 0.6ch;
}

/* --- Linea de tiza -------------------------------------------------------- */
/* Lo primero que se hace sobre una cubierta desnuda es tirar la linea para que
   la primera hilada salga recta. Se traza una vez, al cargar, y nada mas. */

.chalk-line {
  display: block;
  width: 100%;
  margin-top: var(--space-3);   /* se agrupa con el boton, no con el parrafo */
  height: var(--rule-weight);
  background: var(--slate);
  transform-origin: left center;

  /* El estado en reposo es la linea ENTERA, no scaleX(0). Si la animacion no
     llega a correr — pestana en segundo plano, navegador que la limita, JS
     caido — la linea sigue estando ahi. Nada de la pagina queda escondido
     esperando a que algo se dispare. */
  transform: scaleX(1);
  animation: chalk-snap var(--chalk-duration) var(--ease-snap) 140ms;
}

@keyframes chalk-snap {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .chalk-line {
    animation: none;
    transform: scaleX(1);
  }
}

/* --- Boton de llamar ------------------------------------------------------ */
/* El unico sitio de la pagina donde aparece el naranja. Sin animacion de
   entrada y sin retardo: existe desde el primer cuadro. */

.action {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6ch;
  padding: 0.85rem 1.5rem;
  background: var(--action);
  color: var(--action-ink);
  border-radius: var(--radius-control);
  font-size: var(--text-lg);
  font-weight: var(--weight-body-bold);
  text-decoration: none;
  transition: background-color var(--transition-control);
}

.action:hover { background: var(--action-hover); }

.action[data-pending] { cursor: default; }

/* --- Escritorio ----------------------------------------------------------- */

@media (min-width: 900px) {

  /* La altura la manda el contenido de la columna de texto, con un suelo. Un
     hero mas alto que la ventana deja el boton de llamar fuera del primer
     pliegue, y el trabajo de la pagina es producir una llamada. */
  .hero {
    grid-template-columns: 38fr 62fr;
    align-items: end;
    /* Alto para que quede aire encima del texto y el anclaje abajo se lea,
       pero por debajo del punto donde el boton se saldria del primer pliegue. */
    min-height: clamp(520px, 76vh, 720px);
    padding-left: var(--hero-inset);
  }

  .hero__media {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;     /* la foto sangra arriba */
    height: auto;            /* la altura la da la fila, no el clamp de movil */
  }

  .hero__photo { object-position: 50% 46%; }

  .hero__text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;         /* la columna de texto queda anclada abajo */
    padding: var(--space-8) var(--space-7) var(--space-8) 0;
  }

  .hero__line { font-size: var(--display-sm); }
}