/* Sydak Living — layout global (§4): página, contenedores, main + sidebar,
   secciones y full-bleed. */

.l-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* clip (no hidden): no rompe position: sticky y evita el scroll
     horizontal que introduciría .l-bleed con 100vw. */
  overflow-x: clip;
}

.l-page > main,
.l-page > .l-main {
  flex: 1 0 auto;
}

/* ——— Contenedores centrados; el max-width absorbe el gutter para que el
   contenido útil mida exactamente 42/70/82.5rem. ——— */

.l-container {
  width: 100%;
  max-width: calc(var(--container-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--text {
  max-width: calc(var(--container-text) + 2 * var(--gutter));
}

.l-container--content {
  max-width: calc(var(--container-content) + 2 * var(--gutter));
}

.l-container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

/* ——— Main: 1 columna; con sidebar presente, contenido + 280–320px en md+. ——— */

.l-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.l-content,
.l-sidebar {
  min-width: 0;
}

@media (min-width: 960px) {
  .l-main:has(> .l-sidebar) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  }
}

/* ——— Secciones ——— */

.l-section {
  position: relative;
  padding-block: var(--space-section);
}

/* Sección pegada a lo que la precede: suprime el hueco superior cuando el
   elemento anterior ya aporta el suyo (p. ej. el padding inferior del hero). */
.l-section--flush-top {
  padding-block-start: 0;
}

/* Banda de sección sobre fondo profundo (mockups CURATED / PRIVATE). */
.l-section--deep {
  background: var(--div-bg-deep);
  color: var(--div-on-deep);
}

/* ——— Full-bleed dentro de un contenedor centrado (banda de fondo). ——— */

.l-bleed {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}