/* ==========================================================================
   layout.css — section wrappers, grid helpers, spacing utilities, hero
   References tokens from style.css :root.
   ========================================================================== */

/* Push page content below the fixed header. */
.site-main {
  display: block;
  padding-top: var(--header-h);
}

/* The front page hero sits flush under the header, so it opts out. */
.tmor-front .site-main {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Section wrapper + inner container
   -------------------------------------------------------------------------- */
.section {
  padding: var(--space-2xl) 0;
}

.section--tight {
  padding: var(--space-xl) 0;
}

.section--flush-top {
  padding-top: 0;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

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

.section__head {
  margin-bottom: var(--space-xl);
}

.section__head h2 {
  margin: 0;
}

.section__intro {
  color: var(--color-text-secondary);
  max-width: var(--max-w-text);
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Generic responsive card grid (Latest Writing, etc.)
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + var(--space-xl)) var(--space-lg) var(--space-2xl);
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 20%, rgba(0, 229, 192, 0.06), transparent 55%), var(--color-bg);
}

/* Subtle grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  pointer-events: none;
}

/* Vignette so text stays legible over the grid. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(9, 9, 15, 0.7) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.hero__status {
  margin-bottom: var(--space-lg);
}

.hero__title {
  margin: 0 0 var(--space-lg);
}

.hero__title .hero__name {
  display: block;
  color: var(--color-text-primary);
}

.hero__title .hero__role {
  display: block;
  color: var(--color-accent);
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 500;
  margin-top: var(--space-sm);
}

.hero__subtitle {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--color-text-secondary);
  max-width: var(--max-w-text);
  margin-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Spacing utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Alternating section background for rhythm. */
.section--surface {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Responsive header behavior

   Breakpoint is 900px (not 768px) so portrait tablets get the hamburger too —
   the five-item inline menu is too wide for tablet widths.

   NOTE: these selectors are intentionally scoped under .site-header__inner to
   raise their specificity above the base `.nav-toggle { display: none }` in
   components.css. components.css loads AFTER layout.css, so without the extra
   specificity its base rule would override these and hide the hamburger at all
   widths. Do not flatten these selectors back to `.nav-toggle` / `.site-nav`.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .site-header__inner .site-nav {
    display: none; /* replaced by the overlay on mobile + tablet */
  }
  .site-header__inner .nav-toggle {
    display: block;
  }
}

@media (min-width: 900px) {
  .mobile-overlay {
    display: none;
  }
}