/* ==========================================================================
   Eura Digital — responsive.css
   Mobile-first enhancements. Breakpoints: 480 · 768 · 1024 · 1280 · 1600
   ========================================================================== */

/* ---------- ≥ 480px (large phones) ---------- */
@media (min-width: 30em) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .brand img { height: 32px; }
}

/* ---------- ≥ 768px (tablet) ---------- */
@media (min-width: 48em) {
  :root { --header-h: 5rem; }

  .header-actions .btn { display: inline-flex; }

  .service { grid-template-columns: 2.5rem 1fr auto; }
  .service__arrow { display: grid; }

  .capabilities__inner { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); }

  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
  .project--feature { grid-column: 1 / -1; }

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

  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

  /* Process: two-column timeline */
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
  .process__rail { display: none; }
  .step { padding: var(--s-6) 0 0; border-top: 1.5px solid var(--line-strong); }
  .step__marker { top: -0.53rem; }
  .step.is-reached { border-top-color: var(--blue); }

  .to-top { right: 1.5rem; bottom: 1.5rem; }
}

/* ---------- ≥ 1024px (laptop) ---------- */
@media (min-width: 64em) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .brand img { height: 36px; }

  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5.4fr); gap: var(--s-7); }
  .hero__base::after { display: block; }
  .stack { max-width: none; }

  .services__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); }
  .bar-index { display: grid; }
  .sectors__grid .section-head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .services__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }

  .work__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-9) var(--s-6); }
  .project--feature { grid-column: 1 / -1; grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); gap: var(--s-7); align-items: center; }
  .project--feature .project__media { aspect-ratio: 16 / 10.5; }
  .project--a { grid-column: 1 / span 6; }
  .project--b { grid-column: 7 / span 6; margin-top: var(--s-9); }

  .approach__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); }
  .approach__statement { position: sticky; top: calc(var(--header-h) + 2.5rem); }

  /* Process: single horizontal track of six */
  .process__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); }
  .step__title { font-size: 1.375rem; }

  .sectors__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); }
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }

  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: start; }

  .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); }
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Between 1024 and 1180 the desktop nav is tight: tighten link padding */
@media (min-width: 64em) and (max-width: 73.75em) {
  .nav__link { padding-inline: 0.6rem; font-size: 0.9375rem; }
  .nav__item--optional { display: none; }
  .header-actions .btn__dot { display: none; }
  .brand img { height: 32px; }
}

/* ---------- ≥ 1280px ---------- */
@media (min-width: 80em) {
  .process__steps { gap: var(--s-6); }
}

/* ---------- ≥ 1600px (large desktop) ---------- */
@media (min-width: 100em) {
  :root { --fs-body: 1.1875rem; }
}

/* ---------- Small phones ≤ 359px ---------- */
@media (max-width: 22.4375em) {
  .hero__actions .btn { width: 100%; }
  .lang a { padding: 0 0.5rem; }
  .lang a[aria-current="true"]::before { display: none; }
  .brand img { height: 22px; }
  .header-actions { gap: var(--s-2); }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-menu, .to-top, .hero__visual, .form { display: none !important; }
  .is-dark { background: #fff; color: #000; }
}