/* ==========================================================================
   layout.css — Macro architecture (Layout-In / CSS Grid)
   Content-Out micro layouts live in components.css (Flexbox)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell — single-column mobile grid
   -------------------------------------------------------------------------- */

.site {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.site__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: var(--space-8) var(--space-16);
}

/* --------------------------------------------------------------------------
   Section grid — consistent vertical rhythm
   -------------------------------------------------------------------------- */

.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.section__header {
  display: grid;
  gap: var(--space-3);
  max-width: var(--content-narrow);
}

.section__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand-600);
}

[data-theme="dark"] .section__eyebrow {
  color: var(--color-brand-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section__eyebrow {
    color: var(--color-brand-300);
  }
}

.section__title {
  font-size: var(--text-3xl);
}

.section__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Hero — asymmetric grid on larger viewports
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--space-8);
}

.hero__content {
  display: grid;
  gap: var(--space-6);
  order: 2;
}

.hero__visual {
  display: grid;
  place-items: center;
  order: 1;
}

.hero__media {
  width: min(100%, 20rem);
  aspect-ratio: var(--aspect-avatar);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-muted);
}

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

@media (min-width: 48rem) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-12);
    padding-block: var(--space-12);
  }

  .hero__content {
    order: 1;
  }

  .hero__visual {
    order: 2;
    justify-items: end;
  }

  .hero__media {
    width: min(100%, 24rem);
  }
}

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .hero__media {
    width: min(100%, 28rem);
  }
}

/* --------------------------------------------------------------------------
   Bento layout — featured + supporting tiles
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.bento__item {
  min-height: 12rem;
}

.bento__item--featured {
  min-height: 16rem;
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(10rem, auto);
    gap: var(--space-5);
  }

  .bento__item--featured {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 20rem;
  }

  .bento__item--wide {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .bento__item--featured {
    grid-column: span 2;
    grid-row: span 2;
  }

  .bento__item--tall {
    grid-row: span 2;
  }

  .bento__item--wide {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   Projects showcase — responsive project grid
   -------------------------------------------------------------------------- */

.projects-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 64rem) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .projects-grid__item--span-2 {
    grid-column: span 2;
  }
}

@media (min-width: 90rem) {
  .projects-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .projects-grid__item {
    grid-column: span 4;
  }

  .projects-grid__item--span-2 {
    grid-column: span 8;
  }

  .projects-grid__item--span-full {
    grid-column: 1 / -1;
  }
}

/* Project card media — stable aspect ratio (CLS prevention) */
.project-card__media {
  aspect-ratio: var(--aspect-project);
  overflow: hidden;
  background: var(--surface-muted);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Experience + Contact — two-column split at desktop
   -------------------------------------------------------------------------- */

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

@media (min-width: 64rem) {
  .split-section {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-16);
    align-items: start;
  }

  .split-section--reverse .split-section__aside {
    order: 2;
  }

  .split-section--reverse .split-section__main {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   Experience timeline — grid track for marker + content
   -------------------------------------------------------------------------- */

.timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  padding-block-end: var(--space-8);
}

.timeline__item:last-child {
  padding-block-end: 0;
}

.timeline__marker {
  display: grid;
  justify-items: center;
  padding-block-start: var(--space-1);
}

.timeline__body {
  display: grid;
  gap: var(--space-2);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--border-default);
}

.timeline__item:last-child .timeline__body {
  padding-block-end: 0;
  border-block-end: none;
}

@media (min-width: 48rem) {
  .timeline__item {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Contact form layout — label/field pairs
   -------------------------------------------------------------------------- */

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .contact-form__row--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Footer — multi-column link grid
   -------------------------------------------------------------------------- */

.site__footer {
  margin-block-start: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-12) var(--container-padding);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Utility layout helpers
   -------------------------------------------------------------------------- */

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

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

.stack {
  display: grid;
  gap: var(--space-4);
}

.stack--lg {
  gap: var(--space-8);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}