/* 
ERIKA FURTADO - GRID SYSTEM
Sistema de grid invisível inspirado no design editorial da Massimo Dutti
*/

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

/* Colunas para layout editorial */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Offset para criar assimetria elegante */
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }
.offset-4 { grid-column-start: 5; }
.offset-5 { grid-column-start: 6; }
.offset-6 { grid-column-start: 7; }

/* Layout para blocos editoriais alternados */
.editorial-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  margin: 8rem 0;
}

.editorial-block:nth-child(odd) .editorial-image {
  grid-column: 1 / 8;
  grid-row: 1;
}

.editorial-block:nth-child(odd) .editorial-content {
  grid-column: 8 / 13;
  grid-row: 1;
  padding-left: 2rem;
}

.editorial-block:nth-child(even) .editorial-image {
  grid-column: 6 / 13;
  grid-row: 1;
}

.editorial-block:nth-child(even) .editorial-content {
  grid-column: 1 / 6;
  grid-row: 1;
  padding-right: 2rem;
}

/* Seção de métricas */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

/* Seção de cases */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

/* Seção de passos */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Flexbox para alinhamentos específicos */
.flex {
  display: flex;
}

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

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

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

/* Espaçamento editorial */
.editorial-spacing {
  padding: 0 10%;
}

/* Responsividade do grid */
@media (max-width: 1200px) {
  .grid, .editorial-block {
    gap: 1.5rem;
  }
  
  .editorial-spacing {
    padding: 0 5%;
  }
}

@media (max-width: 992px) {
  .editorial-block {
    margin: 6rem 0;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .editorial-block {
    display: flex;
    flex-direction: column;
    margin: 4rem 0;
  }
  
  .editorial-block .editorial-image,
  .editorial-block .editorial-content,
  .editorial-block:nth-child(odd) .editorial-image,
  .editorial-block:nth-child(odd) .editorial-content,
  .editorial-block:nth-child(even) .editorial-image,
  .editorial-block:nth-child(even) .editorial-content {
    grid-column: 1 / 13;
    padding: 0;
  }
  
  .editorial-block .editorial-content {
    margin-top: 2rem;
  }
  
  .cases-grid,
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 576px) {
  .grid {
    gap: 1rem;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .editorial-spacing {
    padding: 0;
  }
}