/* =========================================================
   RESPONSIVE.CSS
   Breakpoint overrides. CSS custom properties cannot be
   used as @media conditions, so the pixel values below are
   literal and must match the reference documented in
   variables.css:

   Large desktop : > 1440px
   Desktop       : 1024px – 1439px
   Tablet        : 768px – 1023px
   Mobile        : < 768px
   Small mobile  : < 480px

   Only tokens are reassigned here — no duplicated markup,
   no separate mobile/desktop component rules.
   ========================================================= */

/* ---------------------------------------------------------
   TABLET AND BELOW (< 1024px)
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --page-padding-inline: 28px;
    --space-section: var(--space-8);
  }

  .site-header__logo {
    width: 140px;
  }

  .site-navigation__list {
    gap: 36px;
  }
}

/* ---------------------------------------------------------
   HEADER NAVIGATION — TEMPORARY HIDE (< 900px)
   The full desktop nav no longer fits comfortably below this
   width. Per direction, it is not wrapped into two rows and
   no hamburger menu is added without approval — it is simply
   hidden for now. Logo and language switcher stay visible.
   The real mobile navigation is a separate, later step.
   --------------------------------------------------------- */
@media (max-width: 899px) {
  .site-navigation {
    display: none;
  }
}

/* ---------------------------------------------------------
   MOBILE (< 768px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --page-padding-inline: 20px;
    --space-section: var(--space-7);
  }

  .site-navigation__list {
    gap: var(--space-4);
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE (< 480px)
   --------------------------------------------------------- */
@media (max-width: 479px) {
  :root {
    --space-section: var(--space-6);
  }
}

/* ---------------------------------------------------------
   HERO — MINIMAL SAFEGUARDS ONLY (no mobile design yet)
   No tablet/mobile Hero screenshot has been provided, so the
   final responsive Hero (image/panel stacking, revised type
   scale, etc.) is intentionally NOT designed here. These
   rules only stop the desktop layout from visibly breaking
   (text touching the viewport edge, illegible overlap) until
   that reference arrives.
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero__content {
    padding-inline-start: var(--page-padding-inline);
  }
}

@media (max-width: 479px) {
  .hero__content {
    max-width: 100%;
  }
}

/* TODO: replace the two rules above with the real tablet/
   mobile Hero layout once a mobile reference is provided. */