/* ═══════════════════════════════════════════════════════════ */
/* FILE: styles/layout.css                                    */
/* JURI PROJE — Interior Architecture                          */
/* Grid system, containers, spacing utilities                 */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Container ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* ─── 12-Column Grid ───────────────────────────────────────── */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

/* ─── Column Spans ─────────────────────────────────────────── */
.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; }

/* ─── Named Column Positions ───────────────────────────────── */
.col-left-6  { grid-column: 1 / 7; }
.col-right-6 { grid-column: 7 / 13; }

/* Ethos section column positions */
.col-1-2   { grid-column: 1 / 3; }
.col-3-7   { grid-column: 3 / 8; }
.col-9-12  { grid-column: 9 / 13; }

/* Footer column positions */
.col-1-5   { grid-column: 1 / 6; }
.col-7-9   { grid-column: 7 / 10; }
.col-10-12 { grid-column: 10 / 13; }

/* ─── Section Wrapper ──────────────────────────────────────── */
.section-block {
  padding-block: var(--space-8);
}

/* ─── Hairline Dividers ────────────────────────────────────── */
.hairline {
  height: 1px;
  border: none;
  background-color: var(--color-border);
  width: 100%;
}

.hairline-v {
  width: 1px;
  background-color: var(--color-border);
  height: 100%;
}

/* ─── Responsive Grid ──────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }

  .col-1-2,
  .col-3-7,
  .col-9-12,
  .col-1-5,
  .col-7-9,
  .col-10-12,
  .col-left-6,
  .col-right-6 {
    grid-column: 1 / -1;
  }
}