/*
 * ==========================================================================
 * LAYOUT — Containers, sections, grid system
 * Mobile-first. Breakpoints: sm 480 | md 768 | lg 1024 | xl 1280 | 2xl 1536
 * ==========================================================================
 */

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

.container-sm  { max-width: var(--container-sm);  margin-inline: auto; padding-inline: var(--container-pad); }
.container-md  { max-width: var(--container-md);  margin-inline: auto; padding-inline: var(--container-pad); }
.container-lg  { max-width: var(--container-lg);  margin-inline: auto; padding-inline: var(--container-pad); }
.container-xl  { max-width: var(--container-xl);  margin-inline: auto; padding-inline: var(--container-pad); }
.container-2xl { max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--container-pad); }
.container-full { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

/* --- Section vertical rhythm --- */
.section {
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-32));
  position: relative;
}

.section-sm {
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-20));
  position: relative;
}

.section-lg {
  padding-block: clamp(var(--sp-20), 10vw, var(--sp-40));
  position: relative;
}

/* --- Section header block --- */
.section-header {
  text-align: center;
  margin-bottom: clamp(var(--sp-10), 5vw, var(--sp-16));
}

.section-header .section-label {
  display: block;
  margin-bottom: var(--sp-3);
}

.section-header .section-title {
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
  margin-bottom: var(--sp-4);
}

.section-header p {
  max-width: 55ch;
  margin-inline: auto;
}

/* --- Divider lines --- */
.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-atm-bright) 30%,
    var(--color-border-accent) 50%,
    var(--color-atm-bright) 70%,
    transparent 100%
  );
  margin-block: 0;
}

/* --- Flexible Grid --- */
.grid {
  display: grid;
  gap: var(--sp-6);
}

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

/* Auto responsive grids */
.grid-auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.grid-auto-md {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.grid-auto-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

/* --- Flex utilities --- */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* --- Aspect ratios --- */
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-cinema   { aspect-ratio: 21 / 9; }

/* --- Responsive overrides (mobile-first) --- */

/* sm: 480px */
@media (min-width: 480px) {
  .grid-2\:sm { grid-template-columns: repeat(2, 1fr); }
}

/* md: 768px */
@media (min-width: 768px) {
  .container-pad-md { padding-inline: var(--sp-8); }
  .grid-2\:md { grid-template-columns: repeat(2, 1fr); }
  .grid-3\:md { grid-template-columns: repeat(3, 1fr); }
}

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

/* xl: 1280px */
@media (min-width: 1280px) {
  .grid-4\:xl { grid-template-columns: repeat(4, 1fr); }
}