/*
 * ===============================================
 * LAYOUT CSS - Boulangeri
 * ===============================================
 * Estructura general del sitio, containers,
 * grid y utilidades de layout
 * ===============================================
 */

/* === CONTENEDOR PRINCIPAL === */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

/* === WRAPPER PÁGINA === */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === MAIN CONTENT === */
main {
  flex: 1;
  padding-top: var(--header-height);
}

/* === SECCIONES === */
.section {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
  }
}

/* === GRID SYSTEM === */
.grid {
  display: grid;
  gap: var(--spacing-6);
}

/* Grid de 2 columnas */
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Grid de 3 columnas */
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid de 4 columnas */
.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid responsive - 1 columna en móvil */
@media (max-width: 767px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Grid responsive - 2 columnas en tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === FLEXBOX UTILITIES === */
.flex {
  display: flex;
}

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

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

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-end {
  justify-content: flex-end;
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-4 {
  gap: var(--spacing-4);
}

.gap-6 {
  gap: var(--spacing-6);
}

.gap-8 {
  gap: var(--spacing-8);
}

/* === UTILIDADES DE ESPACIADO === */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }

.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--spacing-4); }
.pt-6 { padding-top: var(--spacing-6); }
.pt-8 { padding-top: var(--spacing-8); }
.pt-12 { padding-top: var(--spacing-12); }
.pt-16 { padding-top: var(--spacing-16); }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pb-16 { padding-bottom: var(--spacing-16); }

/* === UTILIDADES DE TEXTO === */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* === UTILIDADES DE DISPLAY === */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

/* === UTILIDADES RESPONSIVE === */
/* Ocultar en móvil */
.hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hidden-mobile {
    display: block;
  }
}

/* Ocultar en desktop */
.hidden-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none;
  }
}

/* === UTILIDADES DE ANCHO === */
.w-full {
  width: 100%;
}

.max-w-2xl {
  max-width: 42rem; /* 672px */
}

.max-w-4xl {
  max-width: 56rem; /* 896px */
}

.max-w-6xl {
  max-width: 72rem; /* 1152px */
}

/* === UTILIDADES GENERALES === */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.overflow-hidden {
  overflow: hidden;
}