/**
 * 03-layout.css
 *
 * Decisión: Sistema de layout basado en CSS Grid moderno.
 * Sin frameworks. Sin columnas de 12. Solo lo que necesitamos.
 */

/* ── Container ───────────────────────────────────────────────────────────────── */
.container {
  width: min(var(--ic-container), 100% - var(--ic-section-px) * 2);
  margin-inline: auto;
}

.container--wide {
  width: min(var(--ic-container-wide), 100% - var(--ic-section-px) * 2);
  margin-inline: auto;
}

.container--narrow {
  width: min(var(--ic-container-narrow), 100% - var(--ic-section-px) * 2);
  margin-inline: auto;
}

/* ── Sección base ────────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--ic-section-py);
  position: relative;
  overflow: hidden; /* Contener pseudo-elementos decorativos */
}

/* Variantes de fondo */
.section--dark   { background-color: var(--ic-bg-dark); }
.section--deeper { background-color: var(--ic-bg-deep); }
.section--mid    { background-color: var(--ic-bg-mid); }
.section--light  { background-color: var(--ic-bg-light); color: var(--ic-text-dark); }
.section--cream  { background-color: var(--ic-bg-cream); color: var(--ic-text-dark); }

/* ── Grids ───────────────────────────────────────────────────────────────────── */

/* Grid de 2 columnas: layout 50/50 */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--ic-space-8), 5vw, var(--ic-space-16));
  align-items: center;
}

/* Grid de 3 columnas */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--ic-space-6), 3vw, var(--ic-space-10));
}

/* Grid auto-fill — responsivo automático */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(var(--ic-space-6), 3vw, var(--ic-space-10));
}

/* ── Flex utilities ──────────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-column   { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.gap-2         { gap: var(--ic-space-2); }
.gap-4         { gap: var(--ic-space-4); }
.gap-6         { gap: var(--ic-space-6); }
.gap-8         { gap: var(--ic-space-8); }

/* ── Responsive breakpoints ──────────────────────────────────────────────────── */
/*
  Filosofía mobile-first:
  - Base: móvil (<768px)
  - md: tablet (≥768px)
  - lg: desktop (≥1024px)
  - xl: desktop grande (≥1280px)
*/

@media (max-width: 1023px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Invertir columnas en móvil si se necesita */
  .grid-2.mobile-reverse {
    direction: ltr; /* Reset */
  }
  .grid-2.mobile-reverse > *:first-child {
    order: 2;
  }
  .grid-2.mobile-reverse > *:last-child {
    order: 1;
  }
}

/* ── Espaciado vertical entre secciones ──────────────────────────────────────── */
.mt-section { margin-top: var(--ic-section-py); }
.mb-section { margin-bottom: var(--ic-section-py); }

/* ── Header principal ────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ic-z-header);
  padding-block: var(--ic-space-4);
  background: transparent;
  transition: background var(--ic-duration-slow) var(--ic-ease),
              backdrop-filter var(--ic-duration-slow) var(--ic-ease);
}

/* Header scrolleado — fondo opaco sutil */
.site-header.is-scrolled {
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ic-border-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ic-text-primary);
  transition: opacity var(--ic-duration-base) var(--ic-ease);
}
.site-logo:hover {
  opacity: 0.80;
}

/* Offset del body para el header fijo */
.admin-bar .site-header {
  top: 32px;
}