/**
 * Responsive recomposition.
 *
 * Layouts are rebuilt at each breakpoint rather than scaled down. Desktop is the
 * design origin (1440), but 1024 and below get different column logic, different
 * reading order in places, and a different drone frame behaviour.
 */

/* ---- Pointer capability -------------------------------------------------
   The custom cursor and the pointer-following service preview only exist on
   devices with a real hover-capable fine pointer. cursor.js checks the same
   condition, so the two can never disagree. */
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  .service__preview { display: block; }
}

/* ============================================================ 1280 and below */
@media (max-width: 1280px) {
  :root { --max-w: 1200px; }

  .featured__media { grid-column: 1 / 7; }
  .featured__panels { grid-column: 7 / 13; }

  .service__desc { grid-column: 7 / 12; }
}

/* ============================================================ 1024 and below */
@media (max-width: 1024px) {
  .nav-primary { display: none; }
  .nav-toggle { display: flex; }

  /* The header CTA duplicates the hero's secondary action; on a narrow bar it
     competes with the menu control, so the menu wins. */
  .u-header-cta { display: none; }

  /* Services collapse to a two-part row; the pointer preview is gone at this
     width, so each service carries its own inline thumbnail instead. */
  .service { padding-block: var(--s-5); }
  .service__index { grid-column: 1 / 2; }
  .service__title,
  .service:nth-child(even) .service__title { grid-column: 2 / 9; }
  .service__desc { grid-column: 2 / 12; padding-top: var(--s-4); }
  .service__arrow { grid-column: 12 / 13; }

  /* The featured project stops pinning below this width — a stacked, scrollable
     sequence is more legible on a short viewport than a pinned column. */
  .featured__layout { grid-template-columns: 1fr; }
  .featured__media {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
    position: relative !important;
    top: auto !important;
  }
  .featured__panels { grid-column: 1 / -1; }
  .featured__panel { min-height: 0; padding-block: var(--s-6); }

  .drone__track { height: 340svh; }
  .drone__frame { width: 62vw; }

  .capabilities { grid-template-columns: 1fr; }
  .capability:nth-child(even) { padding-left: 0; border-left: 0; }
  .capability:nth-child(odd) { padding-right: 0; }

  .about__title { grid-column: 1 / 13; }
  .about__copy { grid-column: 1 / 13; }

  .enquiry__intro { grid-column: 1 / 13; margin-bottom: var(--s-8); }
  .enquiry__form { grid-column: 1 / 13; }

  .projects__grid { gap: clamp(2rem, 1rem + 3vw, 4rem) var(--grid-gap); }
  .projects__item:nth-child(1) { grid-column: 1 / 8; }
  .projects__item:nth-child(2) { grid-column: 8 / 13; }
  .projects__item:nth-child(3) { grid-column: 1 / 6; }
  .projects__item:nth-child(4) { grid-column: 6 / 13; }
  .projects__item:nth-child(5) { grid-column: 1 / 8; }
  .projects__item:nth-child(6) { grid-column: 8 / 13; }
}

/* ============================================================= 768 and below */
@media (max-width: 768px) {
  :root {
    --section-y: clamp(3.5rem, 2rem + 7vw, 6rem);
    --t-display-xl: clamp(2.75rem, 1.4rem + 9vw, 5rem);
  }

  .site-header { padding-block: var(--s-3); }

  .hero { min-height: 92svh; padding-bottom: var(--s-7); }
  .hero__title { max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: space-between; }
  .hero__scroll { display: none; }

  /* Four figures in one row become a 2x2 block with its own internal rules. */
  .figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure {
    padding: var(--s-5) var(--s-4);
    border-left: var(--border-hair) solid var(--rule);
    border-top: var(--border-hair) solid var(--rule);
  }
  .figure:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figure:nth-child(-n + 2) { border-top: 0; }

  /* Services become stacked blocks with the title on its own line. */
  .service { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .service__index { grid-column: 1 / 7; padding-top: 0; margin-bottom: var(--s-3); }
  .service__title,
  .service:nth-child(even) .service__title { grid-column: 1 / 6; }
  .service__desc { grid-column: 1 / 7; }
  .service__arrow { grid-column: 6 / 7; grid-row: 2; align-self: start; }

  /* Process alternation is dropped — a single reading order is clearer. */
  .process__stage {
    grid-template-columns: 1fr;
    padding-block: var(--s-6);
    gap: var(--s-5);
  }
  .process__stage:nth-child(even) { direction: ltr; }
  .process__text { grid-column: 1 / -1; }
  .process__media { grid-column: 1 / -1; aspect-ratio: 3 / 2; }

  /* The drone frame starts much closer to full width so the snap still reads
     as an event on a small screen without the video becoming a stamp. */
  .drone__track { height: 300svh; }
  .drone__frame { width: 86vw; }
  .drone__hud { padding: var(--s-4); }
  .drone__cards { max-width: 100%; }
  .drone__tick { width: 28px; }

  /* Portfolio stacks; sizes still alternate so it does not read as a list. */
  .projects__item:nth-child(n) { grid-column: 1 / 13; }
  .projects__item:nth-child(2) .media,
  .projects__item:nth-child(3) .media,
  .projects__item:nth-child(6) .media { aspect-ratio: 4 / 3; }

  .featured__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

  .about__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--grid-gap); }

  .form-grid { grid-template-columns: 1fr; gap: var(--s-5); }

  .material { height: 62svh; }

  .site-footer__top { gap: var(--s-7) var(--grid-gap); }
}

/* ============================================================= 480 and below */
@media (max-width: 480px) {
  :root {
    --gutter: 1.25rem;
    --t-display-xl: clamp(2.5rem, 1.2rem + 8.5vw, 3.5rem);
  }

  .figures__grid { grid-template-columns: 1fr; }
  .figure {
    border-left: 0;
    padding-left: 0;
    padding-block: var(--s-5);
  }
  .figure:first-child { border-top: 0; }
  .figure:not(:first-child) { border-top: var(--border-hair) solid var(--rule); }

  .drone__frame { width: 94vw; }
  .drone__card-copy { display: none; } /* figure + title carry the message at this size */

  .about__figures { grid-template-columns: 1fr; gap: var(--s-5); }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================= 375 and below */
@media (max-width: 375px) {
  :root { --gutter: 1rem; }
  .btn { padding: var(--s-3) var(--s-4); }
  .material__word { font-size: clamp(2.25rem, 12vw, 3rem); }
}

/* ---- Footer column layout ----------------------------------------------- */
.footer-col:nth-child(1) { grid-column: span 4; }
.footer-col:nth-child(2) { grid-column: span 2; }
.footer-col:nth-child(3) { grid-column: span 3; }
.footer-col:nth-child(4) { grid-column: span 3; }

@media (max-width: 1024px) {
  .footer-col:nth-child(1) { grid-column: span 12; }
  .footer-col:nth-child(n + 2) { grid-column: span 4; }
}

@media (max-width: 600px) {
  .footer-col:nth-child(n) { grid-column: span 12; }
}

/* ---- Print --------------------------------------------------------------
   Not a requirement, but a premium site should not print as a black rectangle. */
@media print {
  .site-header,
  .cursor,
  .drone,
  .engineering__canvas,
  .hero__scroll { display: none !important; }

  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}