/*
 * layout.css — Sistema de layout base
 *
 * Contenedores, secciones, grid y utilidades flex.
 * Nomenclatura BEM con prefijo rda-.
 * Mobile-first: todos los estilos base aplican a móvil,
 * las media queries con min-width agregan estilos para desktop.
 *
 * Depende de tokens.css para todas las variables.
 */

/* ─── Contenedor base ────────────────────────────────────────────────────── */

.rda-container {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 640px) {
  .rda-container {
    padding-inline: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .rda-container {
    padding-inline: var(--space-2xl);
  }
}

/* Variante estrecha — para contenido de texto largo */
.rda-container--narrow {
  max-width: var(--container-narrow);
}

/* Variante ancha — para layouts que necesitan más espacio */
.rda-container--wide {
  max-width: var(--container-wide);
}

/* Variante full — para elementos edge-to-edge con padding interno */
.rda-container--full {
  max-width: var(--container-full);
}

/* ─── Sección ────────────────────────────────────────────────────────────── */

.rda-section {
  padding-block: var(--space-3xl);
}

@media (min-width: 1024px) {
  .rda-section {
    padding-block: var(--space-4xl);
  }
}

/* Sección pequeña */
.rda-section--sm {
  padding-block: var(--space-xl);
}

@media (min-width: 1024px) {
  .rda-section--sm {
    padding-block: var(--space-3xl);
  }
}

/* Sección grande — heroes, features destacados */
.rda-section--lg {
  padding-block: var(--space-4xl);
}

@media (min-width: 1024px) {
  .rda-section--lg {
    padding-block: var(--space-5xl);
  }
}

/* ─── Grid responsive ────────────────────────────────────────────────────── */

.rda-grid {
  display: grid;
  gap: var(--space-lg);
}

/* 2 columnas: se activa cuando el espacio lo permite */
.rda-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* 3 columnas: grids de productos */
.rda-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* 4 columnas: miniaturas y colecciones densas */
.rda-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* ─── Flex utilities ─────────────────────────────────────────────────────── */

.rda-flex {
  display: flex;
}

.rda-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.rda-flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.rda-flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rda-flex-col {
  display: flex;
  flex-direction: column;
}

.rda-flex-wrap {
  flex-wrap: wrap;
}

/* ─── Gap utilities ──────────────────────────────────────────────────────── */

.rda-gap-2xs { gap: var(--space-2xs); }
.rda-gap-xs  { gap: var(--space-xs); }
.rda-gap-sm  { gap: var(--space-sm); }
.rda-gap-md  { gap: var(--space-md); }
.rda-gap-lg  { gap: var(--space-lg); }
.rda-gap-xl  { gap: var(--space-xl); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.rda-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-3xl);
}

.rda-footer__bottom {
  text-align: center;
  padding-top: var(--space-lg);
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.1);
}

/* ─── Utilidades de visibilidad responsive ───────────────────────────────── */

/* Ocultar en móvil, mostrar en desktop */
.rda-hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .rda-hide-mobile {
    display: revert;
  }
}

/* Mostrar en móvil, ocultar en desktop */
@media (min-width: 768px) {
  .rda-hide-desktop {
    display: none;
  }
}

/* ─── WooCommerce — neutralizar wrapper y bloques que comprimen el layout ─── */

/* El shortcode [woocommerce_cart] y el bloque reemplazado añaden este div.
   Sin esto el contenedor queda width:auto y aplasta las columnas. */
.woocommerce {
  width: 100%;
}

/* Los Cart/Checkout Blocks de Gutenberg se envuelven en estas clases.
   Aseguramos que no apliquen max-width ni padding que rompan nuestro grid. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: none !important;
  padding: 0 !important;
}

/* ─── Overlay genérico ───────────────────────────────────────────────────── */

.rda-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 23, 51, 0.6);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.rda-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}