/* ==========================================================================
   Secure Borders – responsive layer
   Breakpoints: 1280 / 1080 / 900 / 720 / 520
   Loaded after main.css, so plain overrides are enough (no !important).
   ========================================================================== */

/* ---------- <= 1280px ---------- */
@media (max-width: 1280px) {
  .hero__inner { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .hero__stats { grid-template-columns: repeat(2, auto); gap: var(--sp-4) var(--sp-6); }
  .panel { width: 280px; }
  .about { grid-template-columns: 1fr; gap: var(--sp-4); }
  .band { grid-template-columns: 1fr; gap: var(--sp-7); }
  .funding__facts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 1080px : stack the hero, collapse the nav ---------- */
@media (max-width: 1080px) {
  :root { --header-h: 56px; }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
    background: rgba(10, 22, 40, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-line);
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    transform: translateY(-120%);
    transition: transform var(--dur) var(--ease);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .has-menu .nav { transform: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-line); font-size: var(--fs-lead); }

  .burger { display: grid; place-items: center; }

  /*
   * The hero splits into two stacked rows: text, then the map at a fixed height.
   * The map keeps bleeding to the left/right viewport edges.
   */
  .hero { height: auto; max-height: none; min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__text { padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-6); max-width: none; }
  .hero__sub { max-width: 52ch; }
  .hero__map { height: 62vh; min-height: 420px; }
  /* The hero is stacked here, so there is no photo to straddle: keep the card inside. */
  .mapvideo { left: var(--sp-3); top: var(--sp-3); }
  .mapbar { top: var(--sp-3); }
  .mlist { inset: var(--sp-3) var(--sp-3) var(--sp-6); }
  .panel { top: var(--sp-3); right: var(--sp-3); bottom: var(--sp-6); }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .results { grid-template-columns: 1fr; gap: var(--sp-5); }
  .partners { grid-template-columns: 1fr; }
  .partner { flex-direction: row; }
  .partner__logo { width: 150px; height: auto; flex: none; }
  .newsgrid { grid-template-columns: repeat(2, 1fr); }
  .funding { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 900px : panel becomes a bottom sheet ---------- */
@media (max-width: 900px) {
  /*
   * On small screens a right-hand drawer would cover the map entirely, so the panel
   * turns into a bottom sheet. The scrim becomes active here; on desktop it stays inert
   * because the panel floats inside the map and the rest of the page remains usable.
   * app.js also stops auto-opening the panel below 901px for the same reason.
   */
  .panel {
    position: fixed; inset: auto 0 0 0;
    /* Must beat .scrim (z-index 110). On desktop the panel only has to clear the map pins,
       so its base z-index is low — but here the scrim exists and would bury the sheet,
       leaving it dimmed, untappable and with the page scroll locked behind it. */
    z-index: 120;
    width: 100%; max-height: 86vh;
    border: 0; border-top: 1px solid var(--c-line-2);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }
  .panel.is-open { transform: none; }
  /* Grab handle affordance */
  .panel::before {
    content: ""; position: sticky; top: 0; display: block;
    width: 40px; height: 4px; margin: -4px auto var(--sp-3);
    border-radius: var(--r-pill); background: var(--c-line-2);
  }
  .has-panel .scrim { opacity: 1; visibility: visible; }
  .has-panel { overflow: hidden; }

  /* The map is too small here for a large floating video card, so the video moves back
     into the sheet. app.js mirrors this switch at the same 901px boundary. */
  .mapvideo { display: none; }
  .panel__block--video { display: block; }

  .results__list { grid-template-columns: 1fr; }
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__actions { flex-direction: column; }
}

/* ---------- <= 720px ---------- */
@media (max-width: 720px) {
  :root { --sp-8: 2.5rem; --sp-7: 2rem; }

  .header__inner { gap: var(--sp-2); }
  .header__interreg { height: 30px; }
  .brand__text span { display: none; }

  .hero__cta .btn { flex: 1; }
  .hero__map { height: 56vh; min-height: 360px; }

  /* Labels crowd the frame at this size: show only the active one. */
  .pin__label { opacity: 0; }
  .pin.is-active .pin__label, .pin:focus-visible .pin__label { opacity: 1; }
  .schematic__country { font-size: var(--fs-xxs); padding: .2rem .45rem; }

  .secthead { flex-direction: column; align-items: flex-start; }
  .about__cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .newsgrid { grid-template-columns: 1fr; }
  .partner { flex-direction: column; }
  /* Full-width band above the text. 100px leaves ~68px of clear space inside the padding —
     enough for the taller, squarer logos (IARDI is 233x159) to read at this size. */
  .partner__logo { width: 100%; height: 100px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__barin { flex-direction: column; text-align: center; }
  .panel__waits { grid-template-columns: 1fr; }
}

/* ---------- <= 520px ---------- */
@media (max-width: 520px) {
  .wrap { width: min(100% - 1.75rem, var(--wrap)); }
  .hero__stats { grid-template-columns: repeat(2, auto); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .about__cards { grid-template-columns: 1fr; }
  .ccards { grid-auto-columns: 78%; }
  .panel__actions { grid-template-columns: 1fr; }
  .langs__btn { padding: .2rem .4rem; }
}

/* ---------- Print ---------- */
@media print {
  .header, .nav, .consent, .panel, .scrim, .mapbar, .secthead__nav, .footer__top { display: none; }
  body { background: #fff; color: #000; }
  .hero { height: auto; max-height: none; }
  .section, .section--alt { background: #fff; padding: 1rem 0; }
  .card, .step, .partner, .news, .result, .funding { border-color: #ccc; background: #fff; }
}