/*
 * responsive.css — GSIEM Website
 * Mobile-first: base styles are in sections.css / layout.css / components.css (1fr defaults)
 * This file only contains min-width expansions.
 *
 * Breakpoints:
 *   480px  — small phones
 *   768px  — tablet / large phone landscape
 *   1024px — desktop (original designed layout)
 *   1440px — large screens
 */

/* ══════════════════════════════════════════════════════════════
   480px+ — small adjustments for larger phones
══════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  /* Services: 2 columns */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ══════════════════════════════════════════════════════════════
   768px+ — tablet
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Layout utilities ── */
  .grid-2  { grid-template-columns: repeat(2, 1fr); }
  .grid-3  { grid-template-columns: repeat(2, 1fr); }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .grid-60-40 { grid-template-columns: 45fr 55fr; align-items: center; }
  .grid-40-60 { grid-template-columns: 40fr 60fr; align-items: center; }

  /* Nosotros — 2 columnas en tablet+ */
  .nosotros-layout { grid-template-columns: 1fr 1fr; }

  /* ── Section padding ── */
  .section    { padding-block: var(--space-xl); }
  .section--lg { padding-block: var(--space-2xl); }

  /* ── Hero ── */
  .hero-deco  { display: flex; }         /* show decorative line at tablet+ */
  .hero-content {
    padding-top: 80px;
    gap: var(--space-md);
  }
  .hero-ctas {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
  .btn-hero-outline,
  .btn-hero-filled {
    width: auto;
    justify-content: initial;
  }
  .hero-scroll { bottom: 2.5rem; }

  /* ── Services: 2 columns at 768 (override 480px) ── */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Certificaciones: 2 columns ── */
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Stats bar: 3-in-row ── */
  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
    padding: 3rem var(--container-padding);
  }

  /* ── Cobertura layout: text left, map right ── */
  .cobertura-layout {
    /* Mapa a la izquierda, líneas de negocio a la derecha (orden visual por `order`,
       el DOM conserva el texto primero para lectores de pantalla). */
    grid-template-columns: 55fr 45fr;
    align-items: center;
  }
  .cobertura-map  { order: 1; }

  /* ── Projects: 2 columns ── */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .proj-card { min-height: 300px; }

  /* ── Contact layout — info LEFT (40), form RIGHT (60) ── */
  .contact-layout {
    grid-template-columns: 40fr 60fr;
  }
  .form-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Footer: 2×2 grid ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* ── Marquee logos ── */
  .logo-item {
    width: 190px;
    height: 100px;
  }
}


/* ══════════════════════════════════════════════════════════════
   1024px+ — desktop (original design restored)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Layout utilities ── */
  .grid-3  { grid-template-columns: repeat(3, 1fr); }
  .grid-4  { grid-template-columns: repeat(4, 1fr); }

  /* ── Services: 3 columns ── */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Certificaciones: 3 columns ── */
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Projects: bento grid — 15 fractional columns (LCM of 60/40 and 33%) ── */
  .projects-grid {
    grid-template-columns: repeat(15, 1fr);
  }

  /* Row 1: large (60%) + medium (40%) */
  .proj-card:nth-child(1) { grid-column: span 9; min-height: 350px; }
  .proj-card:nth-child(2) { grid-column: span 6; min-height: 300px; }

  /* Row 2: medium (40%) + large (60%) */
  .proj-card:nth-child(3) { grid-column: span 6; min-height: 300px; }
  .proj-card:nth-child(4) { grid-column: span 9; min-height: 350px; }

  /* Row 3: three equal thirds (33%) */
  .proj-card:nth-child(5),
  .proj-card:nth-child(6),
  .proj-card:nth-child(7) { grid-column: span 5; min-height: 280px; }

  /* ── Footer: full 4-column layout ── */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-lg);
  }

  /* ── Cobertura: imagen grande a la derecha ── */
  .cobertura-layout {
    grid-template-columns: 60fr 40fr;
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════════════
   1440px+ — large screens
══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --container-max: 1400px;
  }

  /* ── Services: 4 columns ── */
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ══ Cobertura en tablet — colocación explícita ══════════════════════════════
   El HTML dejó de tener el contenedor `.cobertura-text`: el mapa, el rótulo y
   la lista son ahora hermanos directos de la rejilla. La regla de 2 columnas
   seguía ordenando un elemento que ya no existe, así que los 3 hijos caían en
   flujo automático: rótulo y lista arriba lado a lado, y el MAPA SOLO en una
   segunda fila con medio ancho vacío. Roto de 768 a 1199px, en portada y en
   Nosotros. No era un desbordamiento, por eso ninguna prueba de anchos lo vio.
   Se acota hasta 1199 porque desde 1200 manda la variante de 3 columnas con el
   rótulo vertical, que sí coloca los tres a mano. */
@media (min-width: 768px) and (max-width: 1199px) {
  .cobertura-map   { grid-column: 1; grid-row: 1 / span 2; }
  .cobertura-intro { grid-column: 2; grid-row: 1; align-self: end; }
  .cobertura-list  { grid-column: 2; grid-row: 2; align-self: start; }
}

/* ── Líneas de negocio: cortes PROPIOS, no los de .services-grid ──
   Aquélla lleva un gancho de una línea; ésta, párrafos de 221 a 489 caracteres.
   Heredar sus cortes dejaba la medida en 14 golpes por renglón a 480px y un
   hueco muerto de 304px.
   Medida real con estos cortes (medida, no estimada): 34 golpes a 768px,
   49 a 1024, 36 a 1200 y 44 a 1920. Un comentario anterior decía "41-47" y
   era falso.
   Tope en 3 columnas. Son 9 tarjetas, así que entre 768 y 1199px (2 columnas)
   la novena queda huérfana: es inevitable con un número impar y se prefiere a
   bajar la medida a ~23 golpes metiendo 3 columnas a 768px. */
@media (min-width: 768px) {
  .lineas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .lineas-grid { grid-template-columns: repeat(3, 1fr); }
}