/* ==========================================================================
   Layout — Container / Grid / Section Scaffolding
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--wide {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* --------------------------------------------------------------------------
   Section Wrapper
   -------------------------------------------------------------------------- */

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

.section--alt {
  background-color: var(--theme_bg-surface);
  border-top: 1px solid var(--theme_border);
  border-bottom: 1px solid var(--theme_border);
}

/* Section heading row */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.section-header__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--theme_cta);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--theme_text-primary);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-h2);
  white-space: nowrap;
}

.section-header__line {
  flex: 1;
  height: 1px;
  background-color: var(--theme_border);
  margin-left: var(--space-2);
}

.section-header__link {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--theme_cta);
  text-decoration: none;
  margin-left: var(--space-4);
  letter-spacing: 0.05em;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.section-header__link:hover {
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Grid Systems
   -------------------------------------------------------------------------- */

/* Skills 2→4 col */
.grid--skills {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Projects category grouping */
.projects-category {
  margin-bottom: var(--space-16);
}

.projects-category:last-child {
  margin-bottom: 0;
}

.projects-category__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--theme_text-primary);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--theme_border);
}

/* Projects 1→2→3 col */
.grid--projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* About 1→2 col */
.grid--about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Detail Page 1→2 col */
.grid--detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints (DESIGN.md §8: 425–1664px)
   -------------------------------------------------------------------------- */

/* Tablet ≥ 768px */
@media (min-width: 768px) {
  .section {
    padding-block: var(--space-24);
  }

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

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

  .grid--about {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

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

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

  .grid--detail {
    grid-template-columns: 2.2fr 1fr;
    gap: var(--space-20);
  }
}

/* Wide ≥ 1280px */
@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Flex Utilities
   -------------------------------------------------------------------------- */

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* --------------------------------------------------------------------------
   Visibility Helpers
   -------------------------------------------------------------------------- */

.hidden { display: none; }

@media (min-width: 768px) {
  .md\:flex  { display: flex; }
  .md\:hidden { display: none; }
}

/* --------------------------------------------------------------------------
   Visually Hidden (accessibility)
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}