/* Responsive fixes layered on top of the compiled stylesheet.
   Loaded last; only corrects small-screen overflow and layout issues,
   desktop appearance is unchanged. */

/* Experience timeline: a long unbreakable token such as
   "(Domain/Application/Infrastructure/API)," forced the 1fr track to its
   min-content width and pushed the page wider than the viewport on phones. */
.timeline__item {
  grid-template-columns: var(--node) minmax(0, 1fr);
}

.timeline__head,
.timeline__content {
  overflow-wrap: break-word;
}

/* Language toggle: it sizes itself with --disc-size to match the theme disc
   on desktop, but below 768px the theme button is a 40px btn--md, so the
   64px AR disc overflowed the compact header pill. (.nav__right raises
   specificity above the <style> lang-toggle.js injects after this file.) */
@media (max-width: 767px) {
  .nav__right .nav__lang {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Contact for work: the unbreakable email address set the 1fr track's
   minimum width (~365px), overflowing phones. Scoped to phones only: from
   640px up the original layout already fits and must stay untouched
   (overflow-wrap: anywhere there would wrap the email in the 360px card). */
@media (max-width: 639px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--space-6), 6vw, var(--space-7));
  }

  .contact-card {
    padding: clamp(var(--space-5), 6vw, var(--space-7));
  }

  .contact-card__value,
  .contact-form__alt {
    overflow-wrap: anywhere;
  }
}