/* =================================================================
   BOOK LANDING · LAYOUT PRIMITIVES
   ──────────────────────────────────────────────────────────────────
   Primitivas compartidas por todas las secciones de la landing.

   Principios senior:
   - Mobile-first: los estilos base son la pantalla más pequeña.
   - Padding fluido con clamp() → sin media queries para gutters.
   - Grid auto-fit + minmax() → columnas que se calculan solas.
   - Propiedades lógicas (padding-inline, padding-block, margin-inline)
     → futuras a RTL/vertical writing sin refactor.
   - Scoped bajo .book-landing → cero colisión con el host.
   ================================================================= */

/* =============================================================
   1. CONTAINER
   ──────────────────────────────────────────────────────────────
   Wrapper centrado. Máxima legibilidad. Padding fluido.
   Uso: <div class="bl-container">...</div>
   ============================================================= */

.book-landing .bl-container {
  width: 100%;
  max-width: var(--bl-container-max);
  margin-inline: auto;
  /* 16px en móvil → 32px en desktop, fluye solo */
  padding-inline: clamp(var(--bl-space-4), 3vw, var(--bl-space-6));
}

/* Variante --narrow para bloques de texto (about, checkout card) */
.book-landing .bl-container--narrow {
  max-width: 720px;
}

/* Variante --wide para hero o secciones con mucho aire */
.book-landing .bl-container--wide {
  max-width: 1280px;
}

/* Variante --full:.flush al viewport (hero a sangre) */
.book-landing .bl-container--full {
  max-width: none;
  padding-inline: 0;
}

/* =============================================================
   2. SECTION
   ──────────────────────────────────────────────────────────────
   Espaciado vertical entre secciones. Ritmo consistente.
   Uso: <section class="bl-section">...</section>

   padding-block: clamp(min, vh + base, max)
   - En móvil: 64px (respira pero no desperdicia)
   - En desktop pequeño: escala con el viewport
   - Tope 128px para no romper el ritmo en pantallas grandes
   ============================================================= */

.book-landing .bl-section {
  padding-block: clamp(var(--bl-space-8), 6vw, var(--bl-space-10));
}

/* Variante --tight para secciones densas (benefits) */
.book-landing .bl-section--tight {
  padding-block: clamp(var(--bl-space-7), 4vw, var(--bl-space-8));
}

/* Variante --loose para hero o author (quiere más aire) */
.book-landing .bl-section--loose {
  padding-block: clamp(var(--bl-space-8), 8vw, var(--bl-space-10));
}

/* Variante --muted para alternar fondo */
.book-landing .bl-section--muted {
  background-color: var(--bl-color-bg-subtle);
}

/* =============================================================
   3. GRID
   ──────────────────────────────────────────────────────────────
   Grid fluido. Las columnas se calculan solas con auto-fit.
   Uso:
     <div class="bl-grid">
       <div class="bl-card">…</div>
       <div class="bl-card">…</div>
     </div>

   auto-fit + minmax(240px, 1fr) significa:
     "Quepan tantos elementos como sea posible, mínimo 240px
      cada uno; reparte el espacio sobrante entre ellos."

   En móvil (320-639px): 1 columna (240px no cabe dos veces)
   En tablet (640-1023px): 2-3 columnas
   En desktop (1024+): 3-4 columnas

   El valor de minmax controla el "límite natural" de columnas
   sin escribir media queries. Si quiero máximo N columnas,
   cambio el min del minmax:
     --2 → minmax(360px, 1fr)   (máx 2 columnas a 720px+)
     --3 → minmax(280px, 1fr)
     --6 → minmax(160px, 1fr)
   ============================================================= */

.book-landing .bl-grid {
  display: grid;
  gap: var(--bl-space-5);
  grid-template-columns: 1fr;  /* fallback móvil */
}

@media (min-width: 640px) {
  .book-landing .bl-grid {
    /* default: fluid auto-fit. Límite natural ~3-4 columnas */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* --2: máximo 2 columnas (autor + foto, explore + preview) */
.book-landing .bl-grid--2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .book-landing .bl-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

/* --3: máximo 3 columnas (capítulos destacados) */
.book-landing .bl-grid--3 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .book-landing .bl-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* --6: máximo 6 columnas (grid de beneficios compacto) */
.book-landing .bl-grid--6 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* --tight: gap menor (densidad alta) */
.book-landing .bl-grid--tight {
  gap: var(--bl-space-4);
}

/* --loose: gap mayor (separación premium) */
.book-landing .bl-grid--loose {
  gap: var(--bl-space-6);
}

/* =============================================================
   4. FLOW (Stack helpers)
   ──────────────────────────────────────────────────────────────
   Para apilar elementos con separación consistente sin recurrir
   a margin en cada elemento (anti-patrón junior).

   El selector > * + * aplica el margin solo entre hermanos,
   no antes del primero ni después del último (Lobotomized Owl).
   ============================================================= */

.book-landing .bl-flow > * + * {
  margin-top: var(--bl-space-5);
}

.book-landing .bl-flow--sm > * + * {
  margin-top: var(--bl-space-3);
}

.book-landing .bl-flow--lg > * + * {
  margin-top: var(--bl-space-7);
}

/* =============================================================
   5. CENTER (alineación horizontal de bloques estrechos)
   ──────────────────────────────────────────────────────────────
   Para textos cortos centrados (hero, eyebrow + título + desc).
   ============================================================= */

.book-landing .bl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.book-landing .bl-center > * {
  max-width: 64ch;  /* medida de legibilidad para bloques de texto */
}

.book-landing .bl-center--narrow > * {
  max-width: 42ch;
}