/* ==========================================================================
   MCP | Media | Cinema | Projection
   Layout — container, grid system, section wrappers
   ========================================================================== */

/* Container */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Anchor scroll offset — keep targets clear of sticky header */

#main-content,
#what-mcp-does,
#platform,
#insights,
#vault,
#creative-labs,
#about,
#contact {
  scroll-margin-top: var(--header-height);
}

/* Section wrapper */

.section {
  padding-block: var(--section-gap);
}

.section--flush-top {
  padding-top: 0;
}

.section--flush-bottom {
  padding-bottom: 0;
}

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

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

.section--ruled-top {
  border-top: 1px solid var(--color-rule);
}

/* Grid system — 12 columns */

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

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

/* Common column span patterns */

.col-full   { grid-column: 1 / -1; }
.col-8      { grid-column: span 8; }
.col-7      { grid-column: span 7; }
.col-6      { grid-column: span 6; }
.col-5      { grid-column: span 5; }
.col-4      { grid-column: span 4; }
.col-3      { grid-column: span 3; }

/* Flex utility */

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start  { display: flex; align-items: center; justify-content: flex-start; }
.flex-wrap   { flex-wrap: wrap; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.gap-lg      { gap: var(--space-lg); }

/* Section intro block */

.section-intro {
  max-width: 60ch;
}

.section-intro--centred {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* Card grids */

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

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

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

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

.card-grid--brands {
  grid-template-columns: repeat(4, 1fr);
}

.card-grid--insights {
  grid-template-columns: 2fr 1fr;
  align-items: start;
}

/* Responsive adjustments */

@media (max-width: 1023px) {
  .card-grid--2 {
    grid-template-columns: 1fr;
  }

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

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

  .card-grid--brands {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--insights {
    grid-template-columns: 1fr;
  }

  .col-8,
  .col-7,
  .col-6,
  .col-5,
  .col-4,
  .col-3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .card-grid--3 {
    grid-template-columns: 1fr;
  }

  .card-grid--4 {
    grid-template-columns: 1fr;
  }

  .card-grid--brands {
    grid-template-columns: 1fr;
  }
}