/* Layout: Containers, Sections, Grid */

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

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

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

/* Sections */
.section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section--compact {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* Section title */
.section__title {
  font-family: var(--font-mincho-demibold);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 56px;
}

.section__title--small {
  font-size: var(--text-base);
  margin-bottom: var(--space-2xl);
}

/* Text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

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

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

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

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

/* Two-column layout (text + image) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

/* Photo pairs (side by side) */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.photo-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient transition between themes */
.theme-gradient {
  height: 30vh;
  background: linear-gradient(to bottom, var(--gradient-from), var(--gradient-to));
  pointer-events: none;
}

.theme-gradient--light-to-dark {
  --gradient-from: var(--color-bg-light);
  --gradient-to: var(--color-bg-dark);
}

.theme-gradient--dark-to-light {
  --gradient-from: var(--color-bg-dark);
  --gradient-to: var(--color-bg-light);
}

/* Spacing utilities */
.mt-section { margin-top: var(--space-section); }
.mb-section { margin-bottom: var(--space-section); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xl { margin-bottom: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }