/* Zero-size marker at true document top (y:0), watched by an
   IntersectionObserver in nav-toggle.js with rootMargin: 200px to detect
   the 200px scroll threshold without a scroll listener. */
#nav-scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.gradient-bg {
  min-height: 100vh;
  background-image: url('/assets/gradient-background.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.hero-outer {
  padding-top: var(--space-hero);
  padding-bottom: var(--space-section);
}

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--space-small);
}

.hero-intro {
  grid-column: 1 / span 5;
  grid-row: 1;
}

/* Keeps "Thom Mourão" on one line continuously from the mobile breakpoint
   up through ~1420px, instead of wrapping between ~900-1380px like the
   fixed 60px (--h1-size) did -- the 5-column hero-intro split is too
   narrow for 60px until then. Anchored to hero-intro's own measured
   width formula ((5/12) * viewport - 188.58px, derived from the
   container's fixed side margins and the 12-column grid/gutter), with a
   6px safety buffer against sub-pixel font-metric variance. Same
   fluid-over-breakpoint principle as the min()-based image widths and
   flex-wrap journey stepper elsewhere in this build. Scoped to
   min-width:901px so mobile keeps the unmodified, intentionally-2-line
   60px size from the shared h1 rule.
   Anchors: 901px -> 27px, 1420px -> 60px (cap). */
@media (min-width: 901px) {
  .hero-intro h1 {
    font-size: clamp(27px, 6.36vw - 30.29px, 60px);
  }
}

.hero-row-2 {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--space-medium);
}

.hero-paragraph {
  max-width: 560px;
  flex-shrink: 1;
  min-width: 0;
}

.hero-meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-medium);
}

.meta-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
}

.meta-divider-col {
  align-self: stretch;
  display: flex;
  justify-content: center;
}

.meta-divider {
  width: 1px;
  background: var(--color-text-primary);
}

/* flex-wrap unconditional (not just at the mobile breakpoint): below
   ~1300px the row has no room for three logos plus their gaps at fixed
   size, and previously just compressed/cramped instead of adapting. Let
   it wrap naturally wherever it runs out of space rather than hardcoding
   that width as a new breakpoint. Scoped to the row itself, not
   .hero-meta or the "Experience" label above it. */
.logo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-medium);
}

/* Fluid between the mobile breakpoint (900px, 24px) and desktop (1920px, 32px);
   clamp()'s own floor/ceiling naturally hold the fixed sizes outside that range,
   so no separate breakpoint override is needed for the size itself. */
.logo-row img,
.claude-badge img {
  height: clamp(24px, 16.9px + 0.78vw, 32px);
  width: auto;
  max-width: none;
}

.recent-work-outer {
  padding-bottom: var(--space-section);
}

.recent-work > h3 {
  margin-bottom: var(--space-medium);
}

.project-card + .project-card {
  margin-top: var(--space-medium);
}

/* Media sits on the right (columns 8-12), respecting the card's own
   padding on every side like the rest of the card -- no bleed. Its
   height comes from the image's own aspect ratio at the column's width
   (a plain width:100%/height:auto image, same pattern used everywhere
   else in this codebase), which is what actually drives the row's
   height, since it's taller than the text column. */
.project-card-media {
  grid-column: 7 / -1;
  grid-row: 1;
}

.project-card-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Centered (not stretched/top-aligned) so the text column sits in the
   middle of the row's full height instead of leaving a growing gap
   below the button as the image -- which drives the row height -- gets
   taller (compare the Deel vs Glovo cards). */
.project-card-body {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-card-body h2 {
  margin-bottom: var(--space-xsmall);
}

.project-card-body p {
  color: var(--color-text-primary);
  margin-bottom: var(--space-xsmall);
}

.project-card-body .tag-row {
  margin-bottom: var(--space-medium);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xsmall);
}

@media (max-width: 900px) {
  .hero-outer {
    padding-top: var(--space-large);
    padding-bottom: var(--space-large);
  }

  .hero {
    grid-template-columns: 1fr;
    row-gap: var(--space-medium);
  }

  .hero-intro,
  .hero-row-2 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hero-row-2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-paragraph {
    max-width: none;
  }

  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-medium);
  }

  .meta-divider-col {
    display: none;
  }

  .logo-row {
    gap: var(--space-small);
  }

  /* Recent-work heading -> first card, and card-to-card, both drop to
     space-small (24px) at mobile -- deliberately different from
     desktop's space-medium (40px), not the same value scaled down. */
  .recent-work > h3 {
    margin-bottom: var(--space-small);
  }

  .project-card + .project-card {
    margin-top: var(--space-small);
  }

  /* Grid-template-columns/padding and the accent-strip rotation are
     shared shell behavior, defined once in components.css. */
  .project-card-media,
  .project-card-body {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* No vertical centering at mobile: media and body stack as separate
     rows in normal flow here, so there's no shared row height for
     center-alignment to apply against (see the desktop rule's comment). */
  .project-card-body {
    align-self: auto;
  }

  .project-card .btn-primary {
    width: 100%;
  }
}