/**
 * @file grid.css
 * Sistema de grelha baseado no Figma Design System (ADS | 01 - Guia de Estilos).
 *
 * Extraído do Figma: ADS | 01 - Guia de Estilos (node 6:4 — Grelha)
 * @see https://www.figma.com/design/bG1jYfmWeD94EJM78ClGp5/ADS-%7C-01---Guia-de-Estilos?node-id=6-4&m=dev
 *
 * Unidade base da grelha: 8px (quadrado e linha)
 *
 * Especificações por breakpoint (3 dimensões Figma):
 *
 * | Breakpoint           | Largura  | Colunas | Gutter | Margem | Container  |
 * |----------------------|----------|---------|--------|--------|------------|
 * | Phone (xs)  ≥ 360px  | Fluid    | 4       | 32px   | 32px   | Fluid      |
 * | Tablet (md) ≥ 768px  | Fluid    | 8       | 32px   | 64px   | Fluid      |
 * | Desktop (xl) ≥1280px | Fixed    | 12      | 32px   | Auto   | 1216px     |
 */

/* ==========================================================================
   CSS Custom Properties — Grid System
   ========================================================================== */

:root {
  /* ---- Unidade base ---- */
  --grid-base-unit: 8px;

  /* ---- Breakpoints (3 dimensões Figma) ---- */
  --breakpoint-xs: 360px;
  --breakpoint-md: 768px;
  --breakpoint-xl: 1280px;

  /* ---- Gutter (constante em todos os breakpoints) ---- */
  --grid-gutter: 32px;

  /* ---- Mobile First: Phone defaults ---- */
  --grid-columns: 4;
  --grid-margin: 32px;
  --grid-container-max-width: none;
}

/* Tablet: md (>= 768px) */
@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-margin: 64px;
  }
}

/* Desktop: xl (>= 1280px) */
@media (min-width: 1280px) {
  :root {
    --grid-columns: 12;
    --grid-margin: 0px;
    --grid-container-max-width: 1216px;
  }
}

/* ==========================================================================
   Container — Contentor principal da grelha
   ========================================================================== */

.grid-container {
  width: 100%;
  max-width: var(--grid-container-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  box-sizing: border-box;
}

/* No desktop, o container é fixo com max-width e margens automáticas */
@media (min-width: 1280px) {
  .grid-container {
    padding-inline: 0;
  }
}

/* ==========================================================================
   Grid — Layout CSS Grid com colunas e gutters
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

/* ==========================================================================
   Column Span — Classes utilitárias para ocupar colunas
   Abordagem mobile-first: define spans para phone (4 cols),
   depois adapta para tablet (8 cols) e desktop (12 cols).
   ========================================================================== */

/* ---- Phone: 4 colunas (default) ---- */

.col-span-1 {
  grid-column: span 1;
}
.col-span-2 {
  grid-column: span 2;
}
.col-span-3 {
  grid-column: span 3;
}
.col-span-4 {
  grid-column: span 4;
}
.col-span-full {
  grid-column: 1 / -1;
}

/* ---- Tablet: 8 colunas (>= 768px) ---- */

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4;
  }
  .md\:col-span-5 {
    grid-column: span 5;
  }
  .md\:col-span-6 {
    grid-column: span 6;
  }
  .md\:col-span-7 {
    grid-column: span 7;
  }
  .md\:col-span-8 {
    grid-column: span 8;
  }
  .md\:col-span-full {
    grid-column: 1 / -1;
  }
}

/* ---- Desktop: 12 colunas (>= 1280px) ---- */

@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1;
  }
  .xl\:col-span-2 {
    grid-column: span 2;
  }
  .xl\:col-span-3 {
    grid-column: span 3;
  }
  .xl\:col-span-4 {
    grid-column: span 4;
  }
  .xl\:col-span-5 {
    grid-column: span 5;
  }
  .xl\:col-span-6 {
    grid-column: span 6;
  }
  .xl\:col-span-7 {
    grid-column: span 7;
  }
  .xl\:col-span-8 {
    grid-column: span 8;
  }
  .xl\:col-span-9 {
    grid-column: span 9;
  }
  .xl\:col-span-10 {
    grid-column: span 10;
  }
  .xl\:col-span-11 {
    grid-column: span 11;
  }
  .xl\:col-span-12 {
    grid-column: span 12;
  }
  .xl\:col-span-full {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Column Start — Classes utilitárias para posicionar o início da coluna
   ========================================================================== */

/* ---- Phone (default) ---- */

.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.col-start-4 {
  grid-column-start: 4;
}
.col-start-auto {
  grid-column-start: auto;
}

/* ---- Tablet (>= 768px) ---- */

@media (min-width: 768px) {
  .md\:col-start-1 {
    grid-column-start: 1;
  }
  .md\:col-start-2 {
    grid-column-start: 2;
  }
  .md\:col-start-3 {
    grid-column-start: 3;
  }
  .md\:col-start-4 {
    grid-column-start: 4;
  }
  .md\:col-start-5 {
    grid-column-start: 5;
  }
  .md\:col-start-6 {
    grid-column-start: 6;
  }
  .md\:col-start-7 {
    grid-column-start: 7;
  }
  .md\:col-start-8 {
    grid-column-start: 8;
  }
  .md\:col-start-auto {
    grid-column-start: auto;
  }
}

/* ---- Desktop (>= 1280px) ---- */

@media (min-width: 1280px) {
  .xl\:col-start-1 {
    grid-column-start: 1;
  }
  .xl\:col-start-2 {
    grid-column-start: 2;
  }
  .xl\:col-start-3 {
    grid-column-start: 3;
  }
  .xl\:col-start-4 {
    grid-column-start: 4;
  }
  .xl\:col-start-5 {
    grid-column-start: 5;
  }
  .xl\:col-start-6 {
    grid-column-start: 6;
  }
  .xl\:col-start-7 {
    grid-column-start: 7;
  }
  .xl\:col-start-8 {
    grid-column-start: 8;
  }
  .xl\:col-start-9 {
    grid-column-start: 9;
  }
  .xl\:col-start-10 {
    grid-column-start: 10;
  }
  .xl\:col-start-11 {
    grid-column-start: 11;
  }
  .xl\:col-start-12 {
    grid-column-start: 12;
  }
  .xl\:col-start-auto {
    grid-column-start: auto;
  }
}

/* ==========================================================================
   Row Utilities — Controlo de linhas na grelha
   ========================================================================== */

.row-span-1 {
  grid-row: span 1;
}
.row-span-2 {
  grid-row: span 2;
}
.row-span-3 {
  grid-row: span 3;
}
.row-span-full {
  grid-row: 1 / -1;
}

/* ==========================================================================
   Gap Overrides — Permite gutters personalizados
   Baseado na unidade base de 8px
   ========================================================================== */

.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: var(--grid-base-unit);
} /* 8px  */
.gap-2 {
  gap: calc(var(--grid-base-unit) * 2);
} /* 16px */
.gap-3 {
  gap: calc(var(--grid-base-unit) * 3);
} /* 24px */
.gap-4 {
  gap: var(--grid-gutter);
} /* 32px (default) */
.gap-5 {
  gap: calc(var(--grid-base-unit) * 5);
} /* 40px */
.gap-6 {
  gap: calc(var(--grid-base-unit) * 6);
} /* 48px */
.gap-8 {
  gap: calc(var(--grid-base-unit) * 8);
} /* 64px */
.gap-10 {
  gap: calc(var(--grid-base-unit) * 10);
} /* 80px */

.gap-x-0 {
  column-gap: 0;
}
.gap-x-4 {
  column-gap: var(--grid-gutter);
} /* 32px */
.gap-y-0 {
  row-gap: 0;
}
.gap-y-4 {
  row-gap: var(--grid-gutter);
} /* 32px */

/* ==========================================================================
   Alignment — Alinhamento de itens na grelha
   ========================================================================== */

.grid-items-start {
  align-items: start;
}
.grid-items-center {
  align-items: center;
}
.grid-items-end {
  align-items: end;
}
.grid-items-stretch {
  align-items: stretch;
}

.grid-justify-start {
  justify-items: start;
}
.grid-justify-center {
  justify-items: center;
}
.grid-justify-end {
  justify-items: end;
}
.grid-justify-stretch {
  justify-items: stretch;
}

.grid-self-start {
  align-self: start;
}
.grid-self-center {
  align-self: center;
}
.grid-self-end {
  align-self: end;
}
.grid-self-stretch {
  align-self: stretch;
}

/* ==========================================================================
   Predefined Layouts — Layouts pré-definidos comuns
   Inspirados no "Grid System" do Figma (secção inferior).
   ========================================================================== */

/* Full width: 1 coluna que ocupa toda a largura */
.grid-layout-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

/* 2 colunas iguais (stacked em mobile) */
.grid-layout-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

@media (min-width: 768px) {
  .grid-layout-2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 colunas iguais (stacked em mobile, 2 cols em tablet) */
.grid-layout-3-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

@media (min-width: 768px) {
  .grid-layout-3-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .grid-layout-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 colunas iguais (stacked em mobile, 2 cols em tablet) */
.grid-layout-4-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

@media (min-width: 768px) {
  .grid-layout-4-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .grid-layout-4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Sidebar esquerda (1/3 + 2/3 no desktop) */
.grid-layout-sidebar-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

@media (min-width: 768px) {
  .grid-layout-sidebar-left {
    grid-template-columns: 1fr 2fr;
  }
}

@media (min-width: 1280px) {
  .grid-layout-sidebar-left {
    grid-template-columns: 4fr 8fr;
  }
}

/* Sidebar direita (2/3 + 1/3 no desktop) */
.grid-layout-sidebar-right {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

@media (min-width: 768px) {
  .grid-layout-sidebar-right {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 1280px) {
  .grid-layout-sidebar-right {
    grid-template-columns: 8fr 4fr;
  }
}

/* ==========================================================================
   Subgrid — Para grelhas aninhadas que herdam as colunas do pai
   ========================================================================== */

.grid-subgrid {
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--grid-gutter);
}

/* ==========================================================================
   Debug — Classes auxiliares para visualizar a grelha em desenvolvimento
   Ative adicionando a classe .grid-debug ao contentor
   ========================================================================== */

.grid-debug {
  position: relative;
}

.grid-debug::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to right,
    rgba(26, 101, 250, 0.08) 0,
    rgba(26, 101, 250, 0.08) calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)),
    transparent calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)),
    transparent calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + var(--grid-gutter))
  );
}