/*
 * Layout: Grid + Containers
 *
 * Developed by: Rhyll Neri
 */

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

.container--narrow { max-width: var(--container-md); }
.container--reading { max-width: var(--container-sm); }
.container--wide   { max-width: var(--container-2xl); }
.container--fluid  { max-width: none; }

/* On ultra-wide screens (beyond 1920px) stop the whole site from stretching:
   centre the page at 1920px and align the fixed header to it. */
@media (min-width: 1921px) {
  html { background: var(--color-mist); }

  body {
    max-width: 1920px;
    margin-inline: auto;
    position: relative;
    overflow-x: hidden;
    box-shadow: 0 0 80px rgba(15, 27, 34, 0.12);
  }

  .header {
    left: 50%;
    right: auto;
    width: 1920px;
    max-width: 1920px;
    transform: unset;
    margin: 0 auto; 
  }

  .header--hidden {
    transform: translateX(-50%) translateY(-100%);
  }
}

/* CSS Grid layout helpers */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.grid--gap-sm { gap: var(--space-4); }
.grid--gap-md { gap: var(--space-6); }
.grid--gap-lg { gap: var(--space-8); }

.grid--asym {
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--space-10);
}

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

@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .grid--asym { grid-template-columns: 1fr; gap: var(--space-7); }
}

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

/* Spacing utilities (deliberate, not utility-first overload) */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }