/* Sitewide spacing scale — use ONLY these values for margin, padding, and gap */

:root {
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Layout */
  --content-pad: var(--space-64);
  --page-section-gap: 72px;
  --section-gap-large: var(--space-96);

  /* Nav */
  --nav-pad-y: var(--space-32);
  --nav-pad-x: var(--space-48);
  --nav-header-gap: var(--space-24) var(--space-48);
  --nav-row-gap: var(--space-16) var(--space-32);
  --nav-below-gap: var(--space-32);
  --nav-content-offset: calc(var(--space-96) + var(--nav-below-gap));
  --nav-links-gap: var(--space-16);
  --nav-right-gap: var(--space-32);
  --nav-contact-gap: var(--space-16);
  --nav-meta-stack-gap: var(--space-16);

  /* Cards */
  --card-grid-gap: var(--space-24);
  --card-grid-gap-tight: var(--space-16);
  --card-image-gutter: var(--space-16);
  --card-footer-padding: var(--space-16) var(--space-24) var(--space-24);
  --card-footer-padding-compact: var(--space-16) var(--space-24) var(--space-24);
  --card-footer-gap: 4px;
  --card-min-row: calc(var(--space-96) + var(--space-96) + var(--space-64));
  /* Second row (Air Canada + About) — compact but balanced with row 1 */
  --card-min-row-secondary: calc(var(--space-96) + var(--space-96));
  --card-air-canada-media: calc(var(--space-96) + var(--space-96));
  --card-about-min: calc(var(--space-96) + var(--space-96)); /* same as --card-min-row-secondary */
  --card-secondary-pad: var(--space-32);
  --card-secondary-title-gap: var(--space-16);
  --card-min-nav: calc(var(--space-96) + var(--space-64));
  --card-min-nav-tablet: calc(var(--space-96) + var(--space-32));
  --card-max-mobile: calc(var(--space-96) * 3);

  /* Footer */
  --footer-margin-top: 56px;
  --footer-pad-top: 40px;
  --footer-pad-bottom: 80px;
  --footer-gap: var(--space-48);
  --footer-divider-margin: 40px;
  --footer-social-gap: var(--space-16);
  --footer-email-gap: var(--space-16);

  /* Homepage hero */
  --home-hero-title-gap: var(--space-64);
  --home-cards-overlap: var(--space-32);
  --home-cards-overlap-md: var(--space-32);

  /* Popovers / tooltips */
  --popover-offset: var(--space-16);
  --popover-pad-y: var(--space-16);
  --popover-pad-x: var(--space-16);
}

@media (max-width: 1024px) {
  :root {
    --content-pad: var(--space-48);
    --card-grid-gap: var(--space-24);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-below-gap: var(--space-32);
    --card-image-gap-below: var(--space-16);
    --card-footer-padding-mobile: var(--space-16) var(--space-16) var(--space-24);
    --page-section-gap: 56px;
    --footer-margin-top: 40px;
    --footer-pad-top: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --content-pad: var(--space-24);
    --nav-pad-top-extra: var(--space-16);
    --nav-title-extra: calc(var(--space-16) + var(--nav-pad-top-extra));
    --nav-below-gap: var(--space-32);
    /* Stacked nav: name + subtitle + link row + padding + clearance below links */
    --nav-mobile-clearance: var(--space-48);
    --nav-content-offset: calc(
      var(--space-96) + var(--nav-title-extra) + var(--space-96) + var(--nav-below-gap) + var(--nav-mobile-clearance)
    );
    --footer-gap: var(--space-48);
    --footer-pad-bottom: var(--space-48);
    --home-hero-title-gap: 0;
    --nav-card-top-gap: 120px;
    --card-grid-gap-tight: var(--space-16);
  }
}

@media (max-width: 500px) {
  :root {
    --nav-content-offset: calc(
      var(--space-96) + var(--nav-title-extra) + var(--space-96) + var(--nav-below-gap) + var(--nav-mobile-clearance)
    );
  }
}