/* themes/_shared/primitives.css
 * Primitivas estructurales reutilizables por todos los temas. Cero look de identidad acá
 * (eso vive en themes/<slug>/theme.css). Solo geometría / layout.
 *
 * Regla CLAUDE.md §5: el módulo no almacena diseño. Acá tampoco. Esto es vocabulario neutral.
 */

.lcl-container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Section: un bloque vertical de la landing. Cada sección ocupa el ancho del viewport. */
.lcl-section {
  display: block;
  width: 100%;
  padding-block: var(--space-9);
}

/* Inner: limita el ancho útil dentro de una sección. Centrado horizontal. */
.lcl-section__inner {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.lcl-section__inner--narrow { max-width: var(--container-narrow); }
.lcl-section__inner--wide   { max-width: var(--container-wide); }

/* Stack: bloque vertical con gap controlado. */
.lcl-stack       { display: flex; flex-direction: column; }
.lcl-stack--1    { gap: var(--space-1); }
.lcl-stack--2    { gap: var(--space-2); }
.lcl-stack--3    { gap: var(--space-3); }
.lcl-stack--4    { gap: var(--space-4); }
.lcl-stack--5    { gap: var(--space-5); }
.lcl-stack--6    { gap: var(--space-6); }

/* Row: línea horizontal con gap. */
.lcl-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Grid responsivo simple. */
.lcl-grid {
  display: grid;
  gap: var(--space-5);
}
.lcl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lcl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 880px) {
  .lcl-grid--3, .lcl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lcl-grid--2, .lcl-grid--3, .lcl-grid--4 { grid-template-columns: 1fr; }
  .lcl-section { padding-block: var(--space-7); }
  .lcl-section__inner { padding-inline: var(--space-4); }
}

/* Frame transversal de sección (lo emite el core: SiteRenderer). Cumple dos roles neutrales:
   · contexto de posicionamiento para el CTA de scroll (la flecha va `position: absolute`);
   · alto libre: la prop `__min_height` se emite como `min-height` inline en el frame y la sección lo
     hereda, así se estira a ese alto (el operador lo agranda con el drag del preview / el input).
   Sin min-height ni CTA no hay frame: la sección queda igual que siempre. */
.lcl-section-frame {
  position: relative;
}
.lcl-section-frame > .lcl-section {
  min-height: inherit;
}

/* Utilidades atómicas documentadas (única excepción al no-!important de la regla #9). */
.is-hidden { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}