/**
 * Layout Objects - Layer 04
 * Objetos genéricos de layout reutilizáveis (Container, Grid, Wrapper)
 * Sem estilos cosméticos, apenas estruturais
 */

/* Container - Wrapper principal com max-width e padding */
.o-container,
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

@media (min-width: 768px) {
  .o-container,
  .container {
    padding-inline: var(--margin-tablet);
  }
}

@media (min-width: 1024px) {
  .o-container,
  .container {
    padding-inline: var(--margin-desktop);
  }
}

/* Grid System - Sistema de grid genérico */
.o-grid {
  display: grid;
  gap: var(--gutter);
}

.o-grid--1 {
  grid-template-columns: repeat(1, 1fr);
}

.o-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.o-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.o-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.o-grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.o-grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
  .o-grid--3,
  .o-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Flexbox Layouts */
.o-flex {
  display: flex;
}

.o-flex--row {
  flex-direction: row;
}

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

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

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

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

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

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

/* Wrapper - Bloco com padding vertical */
.o-wrapper {
  padding-block: var(--spacing-8);
}

.o-wrapper--sm {
  padding-block: var(--spacing-4);
}

.o-wrapper--lg {
  padding-block: var(--spacing-16);
}

/* Stack - Fluxo vertical com espaçamento consistente */
.o-stack {
  display: flex;
  flex-direction: column;
}

.o-stack > * + * {
  margin-top: var(--spacing-4);
}

.o-stack--sm > * + * {
  margin-top: var(--spacing-2);
}

.o-stack--lg > * + * {
  margin-top: var(--spacing-8);
}

/* Cluster - Fluxo horizontal com wrap */
.o-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

/* Sidebar Layout */
.o-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}

.o-sidebar > :first-child {
  flex-basis: 250px;
  flex-grow: 1;
}

.o-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* Bootstrap-like Row/Col System (BEM-style) */
.o-layout__row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter) * -0.5);
}

.o-layout__row--mb-3 {
  margin-bottom: var(--spacing-6);
}

.o-layout__row--mb-4 {
  margin-bottom: var(--spacing-8);
}

[class*="o-layout__col"] {
  flex: 1 0 0%;
  padding-inline: calc(var(--gutter) * 0.5);
}

.o-layout__col-full {
  flex: 0 0 100%;
  max-width: 100%;
}

.o-layout__col-md-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.o-layout__col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.o-layout__col-md-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.o-layout__col-offset-md-2 {
  margin-left: 16.666667%;
}

.o-layout__col-offset-md-3 {
  margin-left: 25%;
}

.o-layout__text-end {
  text-align: right;
}

@media (max-width: 768px) {
  .o-layout__col-md-4,
  .o-layout__col-md-6,
  .o-layout__col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .o-layout__col-offset-md-2,
  .o-layout__col-offset-md-3 {
    margin-left: 0;
  }

  .o-layout__text-end {
    text-align: left;
  }
}