/* ═══════════════════════════════════════════════════════════
   Composition — primitivas de Every Layout (Heydon Pickering / Andy Bell)
   Las 11 verificadas en fuentes abiertas. Imposter e Icon quedan FUERA a
   proposito: su CSS canonico sigue sin verificar (el libro no se compro), y
   la sintesis de notas dice explicitamente que no se usen en produccion.

   Delegan en los algoritmos de layout del navegador y se adaptan sin media
   queries. Componen: una Stack puede contener Clusters, un Sidebar puede
   contener una Stack.
   ═══════════════════════════════════════════════════════════ */

/* Stack — ritmo vertical. Sustituye cadenas de margin-top ad hoc. */
.stack { display: flex; flex-direction: column; justify-content: flex-start; }
.stack > * { margin-block: 0; }
.stack > * + * { margin-block-start: var(--space, var(--space-md)); }

/* Box — unidad de contencion con relleno (tarjetas, avisos, paneles). */
.box {
  padding: var(--space, var(--space-md));
  border: var(--border-thin, 1px) solid var(--line);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  color: var(--ink);
}

/* Center — columna de prosa con ancho maximo (45-75 caracteres, Bringhurst). */
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure, 60ch);
  padding-inline: var(--space-md);
}

/* Cluster — grupos que fluyen y envuelven: etiquetas, botoneras, migas. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--space-xs));
  justify-content: var(--justify, flex-start);
  align-items: var(--align, center);
}

/* Sidebar — dos columnas tipo "media object", sin media queries. */
.with-sidebar { display: flex; flex-wrap: wrap; gap: var(--space, var(--space-md)); }
.with-sidebar > :first-child { flex-basis: var(--sidebar-width, 16rem); flex-grow: 1; }
.with-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--content-min, 50%); }

/* Switcher — filas de igual peso que voltean horizontal/vertical. */
.switcher { display: flex; flex-wrap: wrap; gap: var(--space, var(--space-md)); }
.switcher > * { flex-grow: 1; flex-basis: calc((var(--threshold, 30rem) - 100%) * 999); }

/* Cover — alto completo con cabecera arriba y pie abajo. */
.cover { display: flex; flex-direction: column; min-block-size: var(--min-height, 100vh); padding: var(--space-md); }
.cover > * { margin-block: var(--space-md); }
.cover > :first-child:not(.cover__centered) { margin-block-start: 0; }
.cover > :last-child:not(.cover__centered) { margin-block-end: 0; }
.cover > .cover__centered { margin-block: auto; }

/* Grid — galerias que se auto-ajustan. */
.grid { display: grid; grid-gap: var(--space, var(--space-md)); }
@supports (width: min(var(--min-item, 16rem), 100%)) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--min-item, 16rem), 100%), 1fr)); }
}

/* Frame — envoltorio de medios con relacion de aspecto. */
.frame { aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; display: flex; }
.frame > img, .frame > video { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Reel — tira con desplazamiento horizontal (carruseles moviles). */
.reel { display: flex; block-size: auto; overflow-x: auto; overflow-y: hidden; gap: var(--space, var(--space-md)); }
.reel > * { flex: 0 0 var(--item-width, 16rem); }

/* Container — limite exterior del contenido del sitio. */
.container { margin-inline: auto; max-inline-size: var(--container-max, 80rem); padding-inline: var(--space-md); }