/* ============================================================
   Edinburgh IFA — Responsive overrides
   Targets tablet (≤ 1023px) and mobile only.
   Desktop (≥ 1024px) is completely untouched.
   ============================================================ */

/* ── Ensure no gap between CTA and footer on any screen ──── */
.section--flush { margin-bottom: 0; padding-block-end: 0 !important; }
.footer { margin-top: 0; }

/* ─────────────────────────────────────────────────────────
   TABLET  768px – 1023px
───────────────────────────────────────────────────────── */
@media (max-width: 1025px) {
  /* Reduce section vertical rhythm slightly */
  .section { padding-block: 72px; }

  /* CTA */
  .cta__tile { padding-block: 80px; }

  /* Page hero inner padding */
  .page-hero__inner { padding: 56px 48px 64px; }
  .contact-hero__inner { padding: 56px 48px 64px; }

  /* ── Homepage hero: auto-height, hide mockups ────────────── */
  .hero { height: auto; padding-bottom: 72px; }
  .hero__block { height: auto; }
  .hero__inner { padding-bottom: 72px; }
  .hero__mockups { display: none; }
  .hero__swoop { display: none; }

}

/* ─────────────────────────────────────────────────────────
   MOBILE LANDSCAPE + PORTRAIT  < 768px
───────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Global ──────────────────────────────────────────── */
  .section { padding-block: 48px; }

  /* ── Nav ─────────────────────────────────────────────── */
  .hero-nav { padding: 8px 0 10px; }
  .hero-nav__row { width: calc(100% - 20px); height: 52px; padding-inline: 18px; }

  /* ── Homepage hero ───────────────────────────────────── */
  /* Nav at 767px = 8+52+10 = 70px → match negative margin */
  .hero { margin-top: -70px; padding: 8px 8px 40px; }
  .hero__block { border-radius: 24px; }
  /* Clear sticky nav (top:10px + 70px height) minus hero's own 8px padding-top */
  .hero__inner { padding: 80px 20px 48px; }
  .hero__sub { font-size: 16px; }
  .hero__mockups { display: none; }

  /* ── Page hero (inner pages) ─────────────────────────── */
  .page-hero { padding: 8px 8px 0; }
  .page-hero__inner { padding: 40px 24px 48px; border-radius: 24px; }
  .page-hero__title { line-height: 1; }
  .page-hero__sub { font-size: 16px; }
  .contact-hero { padding: 8px 8px 0; }
  .contact-hero__inner { padding: 40px 24px 48px; border-radius: 24px; }

  /* ── Section head ────────────────────────────────────── */
  .section__head { margin-bottom: 28px; }

  /* ── What we cover: 2-col card grid instead of plain list ── */
  .services__net {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .service-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 14px;
    gap: 8px;
    border-radius: 14px;
    min-height: 96px;
  }
  .service-card__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 6px;
    padding: 4px;
  }
  .service-card__meta {
    display: block;
    font-size: 10px;
    opacity: 0.6;
    margin-top: 2px;
    line-height: 1.3;
  }
  .service-card__title { font-size: 13px; line-height: 1.2; }
  .s7 { grid-column: 1 / -1 !important; flex-direction: row; align-items: center; }

  /* ── Values grid 2-col → stays 2-col on landscape ───── */

  /* ── Testimonials ────────────────────────────────────── */
  .t-card { padding: 24px 20px 20px; }

  /* ── CTA block ───────────────────────────────────────── */
  .cta__tile { padding-block: 80px; padding-inline: 20px; }
  .cta__sub { font-size: 16px; }
  .cta__btn { height: 52px; padding-inline: 28px; font-size: 15px; }

  /* ── Footer ──────────────────────────────────────────── */
  .footer { padding: 48px 0 28px; }
  .footer__top { padding-bottom: 36px; }
  .footer__credit { padding-top: 16px; }
}

/* ─────────────────────────────────────────────────────────
   MOBILE PORTRAIT  < 480px
───────────────────────────────────────────────────────── */
@media (max-width: 479px) {

  /* ── Global ──────────────────────────────────────────── */
  .section { padding-block: 36px; }

  /* ── Nav mobile menu ─────────────────────────────────── */
  .hero-nav__row { height: 48px; }
  .hero-nav .nav__mobile { padding: 6px 20px 18px; }

  /* ── Homepage hero ───────────────────────────────────── */
  /* Nav at 479px = 8+48+10 = 66px → recalculate negative margin */
  .hero { margin-top: -66px; padding: 8px 8px 32px; }
  /* Clear sticky nav (top:10px + 66px height) minus hero's own 8px padding-top */
  .hero__inner { padding: 72px 16px 40px; }

  /* ── Page hero ───────────────────────────────────────── */
  .page-hero__inner { padding: 32px 20px 40px; border-radius: 20px; }
  .contact-hero__inner { padding: 32px 20px 40px; border-radius: 20px; }

  /* ── Layout ──────────────────────────────────────────── */
  .container { padding-inline: 16px; }

  /* ── Values grid 2-col → 1-col on small phones ───────── */
  .values-grid--2col { grid-template-columns: 1fr; }

  /* ── Steps list ──────────────────────────────────────── */
  .step-row { grid-template-columns: 56px 1fr; gap: 16px; padding-block: 36px; }
  .step-row__num { font-size: clamp(36px, 10vw, 48px); }

  /* ── Services grid ───────────────────────────────────── */
  .services-grid { grid-template-columns: 1fr; }

  /* ── Stat blocks ─────────────────────────────────────── */
  .stats-row { grid-template-columns: 1fr 1fr; }

  /* ── Testimonials ────────────────────────────────────── */
  .t-card { padding: 20px 18px 18px; }

  /* ── CTA block ───────────────────────────────────────── */
  .cta__tile { padding-block: 64px; padding-inline: 16px; }
  .cta__btn { width: 100%; justify-content: center; }

  /* ── Contact form ────────────────────────────────────── */
  .contact-form-wrap { padding: 24px 16px; }
  .contact-body { padding-block: 36px 56px; padding-inline: 8px; }
  .contact-body__inner { padding-inline: 0; }

  /* ── Footer ──────────────────────────────────────────── */
  .footer { padding: 36px 0 20px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 28px; }
  .footer__logo { font-size: 22px; margin-bottom: 14px; }
}