/* ============================================================
   responsive.css — Fluid responsive design system
   Breakpoints: Mobile 390px | Tablet 768px | Laptop 1280px | Desktop 1440px+
   ============================================================ */


/* ── MOBILE FIRST: 390px–767px ────────────────────────────────── */

@media (max-width: 767px) {

  /* ── Container padding ──────────────────────────────────── */
  .container {
    padding-inline: var(--container-pad-mobile);
  }

  /* ── Header ────────────────────────────────────────────── */
  .site-header__name {
    font-size: var(--text-sm);
  }

  .site-header__nav {
    gap: var(--space-2);
  }

  .site-header__link {
    font-size: 0.6875rem;
  }

  /* ── Hero section ──────────────────────────────────────── */
  .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
  }

  /* Two CTAs side by side (e.g. TEVEO's "See live website" +
     "See case study") don't both fit a mobile row — stack them
     instead, each sized to its own text rather than stretched. */
  .hero__cta-buttons {
    flex-direction: column;
    align-items: flex-start;
    overflow-x: visible;
  }

  /* Drop the fixed desktop height so the image sizes to its own
     aspect ratio at full container width — no top/bottom letterbox
     gaps from a box taller than the image needs on a narrow screen. */
  .full-bleed--tall img.full-bleed__photo {
    height: auto;
    max-height: none;
    object-fit: cover;
  }

  .hero__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .hero__image-wrapper {
    width: 140px;
    height: 140px;
  }

  .hero__heading-group {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .hero__tagline {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .hero__subtitle {
    font-size: var(--text-md);
    line-height: 1.5;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }

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

  .hero__info-about {
    max-width: 100%;
  }

  .hero__info-middle {
    gap: 1.5rem;
  }

  .hero__bio,
  .hero__info-link,
  .hero__info-value {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* ── Projects section ──────────────────────────────────── */
  .project {
    padding-block: var(--space-8);
  }

  .full-bleed--spaced {
    margin-bottom: var(--space-4);
  }

  .project__num {
    font-size: 2rem;
    line-height: 1.2;
  }

  .project__title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .project__row,
  .project__row--wide {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .project__info,
  .project__row .col-span-2 {
    grid-column: auto;
  }

  .project__desc,
  .project__meta,
  .project__link {
    font-size: 0.95rem;
    line-height: 1.5rem;
  }

  .stat__value {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .stat__label {
    font-size: 0.95rem;
    line-height: 1.4rem;
  }

  /* ── Device showcase ───────────────────────────────────── */
  .device-showcase {
    padding: var(--space-4) 0;
  }

  .device-showcase__laptop {
    width: 92vw;
  }

  .device-showcase__screen {
    border-width: 8px;
    border-radius: 10px;
  }

  .device-showcase__base {
    height: 10px;
  }

  /* ── Image grids ───────────────────────────────────────── */
  .phones {
    justify-content: flex-start;
  }

  .phones img {
    width: calc(50% - var(--space-2));
  }

  .phones--three img {
    width: calc(50% - var(--space-2));
  }

  .tablets {
    flex-direction: column;
    align-items: stretch;
  }

  .image-grid--five {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

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

  .setup-media-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .security-media-grid {
    grid-template-columns: 1fr;
    margin-bottom: var(--space-6);
  }

  .security-media-grid__left {
    align-self: auto;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* ── Testimonial ────────────────────────────────────────── */
  .testimonial {
    padding-block: var(--space-4);
  }

  .testimonial__quote {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  /* ── Footer ────────────────────────────────────────────── */
  .site-footer__inner {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .site-footer__copy,
  .site-footer__link {
    font-size: 0.75rem;
  }
}


/* ── TABLET: 768px–1279px ──────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1279px) {

  /* ── Container ─────────────────────────────────────────── */
  .container {
    max-width: 90vw;
    padding-inline: 1.5rem;
  }

  /* ── Hero section ──────────────────────────────────────── */
  .hero__tagline {
    font-size: 3rem;
    line-height: 1.2;
  }

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

  .hero__bio,
  .hero__info-link,
  .hero__info-value {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .hero__info-about {
    max-width: 100%;
  }

  /* ── Projects ──────────────────────────────────────────── */
  /* Only 3 tracks fit at this width, but most rows hold 4 items
     (num, info, + two content pieces) — so the number and info
     share row 1, and the two trailing items reflow onto row 2,
     side by side, instead of the 4th item wrapping into the
     narrow "num" column. */
  .project__row,
  .project__row--wide {
    grid-template-columns: auto 1fr 1fr;
    gap: 1.5rem;
    row-gap: var(--space-6);
  }

  .project__row > .project__num {
    grid-column: 1;
    grid-row: 1;
  }

  .project__row > .project__info {
    grid-column: 2 / span 2;
    grid-row: 1;
  }

  .project__row > *:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .project__row > *:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  .project__num {
    font-size: 2.5rem;
  }

  .project__title {
    font-size: 2rem;
  }

  /* ── Image grids ───────────────────────────────────────── */
  .image-grid--five {
    grid-template-columns: repeat(3, 1fr);
  }

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


/* ── LAPTOP: 1280px–1439px ────────────────────────────────────── */

@media (min-width: 1280px) and (max-width: 1439px) {

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

  .project__row,
  .project__row--wide {
    grid-template-columns: 300px 1fr 1fr 1fr;
    gap: 1.5rem;
  }

  #verstegen .col-span-2 > .section-label:first-child {
    margin-top: 19.75rem;
  }

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


/* ── DESKTOP: 1440px+ ──────────────────────────────────────────────── */

@media (min-width: 1440px) {

  .container {
    max-width: var(--container-desktop);
    padding-inline: var(--container-pad);
  }

  .project__row,
  .project__row--wide {
    grid-template-columns: 403px 403px 403px 403px;
    gap: 32px;
  }

  #verstegen .col-span-2 > .section-label:first-child {
    margin-top: 17rem;
  }

  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ── Tablet: 768px – 1023px ─────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {

  .hero__info {
    grid-template-columns: 2fr 1fr;
  }

  .hero__info-right {
    display: none; /* collapse on tablet — shown on desktop */
  }

  .project__three-col {
    grid-template-columns: 2fr 1fr;
  }

  .project__three-col .stat:last-child {
    grid-column: 2;
  }
}


/* ── Desktop: ≥ 1024px ──────────────────────────────────────── */

@media (min-width: 1024px) {

  .full-bleed--tall img {
    max-height: 80vh;
  }
}