/* ==========================================================================
   JOBA Stolárstvo — Layout System
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ── Sections ──────────────────────────────────────── */

.section {
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}

/* Full-bleed fallback for sections nested inside a constrained
   post-content layout (e.g. single-ponuka.html). When a `.section`
   carries `.alignfull`, force it to span the viewport edges even if
   the parent layout would otherwise constrain it. */
.section.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.section--warm {
  background: var(--color-bg-warm);
}

/* Contact page split: right column warm bg fills full column height */
.contact-split.wp-block-columns {
  gap: 0;
  background: linear-gradient(to right, transparent 50%, var(--color-bg-warm) 50%);
}
.contact-split .wp-block-column > .section {
  background: transparent;
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section--dark .section-label {
  color: var(--color-primary-light);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-text-on-dark);
}

/* ── Grid ──────────────────────────────────────────── */

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

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

.grid--asymmetric {
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
}

.grid--asymmetric-reverse {
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}

/* ── Responsive ────────────────────────────────────── */

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

@media (max-width: 768px) {
  .section { padding: var(--space-8) 0; }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--asymmetric,
  .grid--asymmetric-reverse {
    grid-template-columns: 1fr;
  }
}