/* ============================================
   CARROSSERIE CATALANO — Layout & Grid
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 5vw, 2.5rem);
  padding-right: clamp(1.25rem, 5vw, 2.5rem);
}

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

.container--narrow {
  max-width: 760px;
}

/* Section spacing */
section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

section.section--sm {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

section.section--lg {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* Grid system */
.grid {
  display: grid;
  gap: var(--space-md);
}

.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--split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
}

.grid--split-wide {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-lg);
}

/* Flex utilities */
.flex { display: flex; }
.flex--center { align-items: center; }
.flex--between { justify-content: space-between; }
.flex--gap { gap: var(--space-md); }
.flex--wrap { flex-wrap: wrap; }

/* Section bg variants */
.section--dark {
  background-color: var(--color-secondary);
}

.section--mid {
  background-color: var(--color-secondary-mid);
}

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

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

/* Diagonal clip — adds visual interest to section transitions */
.section--clip-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
  padding-bottom: calc(var(--space-xl) + 60px);
}

.section--clip-top {
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--space-xl) + 60px);
  margin-top: -60px;
}

/* Divider */
.divider {
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  margin: var(--space-md) 0;
}

.divider--center {
  margin-left: auto;
  margin-right: auto;
}

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

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

  .grid--split .grid__image--first,
  .grid--split-wide .grid__image--first {
    order: -1;
  }

  section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .section--clip-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
    padding-bottom: calc(var(--space-lg) + 30px);
  }

  .section--clip-top {
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(var(--space-lg) + 30px);
    margin-top: -30px;
  }
}

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