/*
 * Andaluza de Inmobiliaria — Layout primitives
 * Composable, single-responsibility layout blocks (the "primitivas de layout"
 * built BEFORE any section — Brava lesson). Every section is assembled from
 * these; they never carry colour or type, only structure. Consumes tokens.css.
 * Each primitive exposes a `--adi-*` custom property so instances can tune
 * spacing inline without new classes.
 */

/* ---- Container: centered max-width with gutters ---- */
.adi-container {
  width: 100%;
  max-width: var(--adi-container);
  margin-inline: auto;
  padding-inline: var(--adi-sp-6);
}
.adi-container--narrow { max-width: var(--adi-container-narrow); }
.adi-container--flush { padding-inline: 0; }

/* ---- Stack: vertical rhythm between direct children ---- */
.adi-stack { display: flex; flex-direction: column; }
.adi-stack > * { margin-block: 0; }
.adi-stack > * + * { margin-block-start: var(--adi-stack-space); }
.adi-stack--2 { --adi-stack-space: var(--adi-sp-2); }
.adi-stack--4 { --adi-stack-space: var(--adi-sp-4); }
.adi-stack--8 { --adi-stack-space: var(--adi-sp-8); }
.adi-stack--12 { --adi-stack-space: var(--adi-sp-12); }

/* ---- Cluster: horizontal group that wraps (tags, button rows, meta) ---- */
.adi-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adi-cluster-space);
}
.adi-cluster--between { justify-content: space-between; }
.adi-cluster--center { justify-content: center; }
.adi-cluster--tight { --adi-cluster-space: var(--adi-sp-2); }

/* ---- Grid: responsive auto-fit, no media queries needed ---- */
.adi-grid {
  display: grid;
  gap: var(--adi-sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--adi-grid-min), 100%), 1fr));
}
.adi-grid--wide { --adi-grid-min: 340px; }
.adi-grid--tight { gap: var(--adi-sp-4); }

/* ---- Center: center a single child horizontally, cap its width ---- */
.adi-center {
  box-sizing: content-box;
  max-width: var(--adi-container-narrow);
  margin-inline: auto;
}

/* ---- Section: consistent vertical block spacing ---- */
.adi-section { padding-block: var(--adi-section-y); }
.adi-section--sm { --adi-section-y: var(--adi-sp-12); }
.adi-section--lg { --adi-section-y: calc(var(--adi-sp-16) + var(--adi-sp-8)); }

/* ---- Cover: min-height region with centered content (heroes) ---- */
.adi-cover {
  display: grid;
  align-content: center;
  min-height: var(--adi-cover-min, 60vh);
}

/* ---- Reel: horizontal scroll row (mobile card carousels) ---- */
.adi-reel {
  display: flex;
  gap: var(--adi-sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.adi-reel > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---- Frame: fixed aspect ratio media slot ---- */
.adi-frame {
  position: relative;
  aspect-ratio: var(--adi-frame-ratio, 4 / 3);
  overflow: hidden;
  background: var(--adi-img-bg);
}
.adi-frame > img { width: 100%; height: 100%; object-fit: cover; }
.adi-frame--square { --adi-frame-ratio: 1 / 1; }
.adi-frame--wide { --adi-frame-ratio: 16 / 9; }