/* Responsive layer for tablet & mobile.
   Everything here only fires inside a max-width media query, so screens
   above 1024px (desktop) render exactly as before — nothing here touches
   the default (non-media) styles.

   Uses !important on purpose: the page's layout is written as inline
   style="..." attributes (generated by the design tool), and an author
   stylesheet rule needs !important to win over an inline style of equal
   origin. This file only ever overrides layout/spacing, never behavior.

   .ax-grid / .ax-cards are small marker classes added next to existing
   style="..." attributes in the HTML (the inline styles themselves were
   left untouched) so this stylesheet has something stable to hook into
   instead of fragile nth-child selectors. */

/* ---------- Tablet: <= 1024px ---------- */
@media (max-width: 1024px) {
  section[data-screen-label] { padding: 84px 28px !important; }
  section[data-screen-label] h2 { font-size: 34px !important; }

  /* two-column (or asymmetric) content pairs stack into one column */
  .ax-grid { grid-template-columns: 1fr !important; }
  /* Grid items default to min-width: auto, so a child with long unbreakable
     content (e.g. a currency value that grows with the Ukraine Fund price
     slider) can force its track — and everything else in the row — wider
     than the viewport instead of just wrapping. Letting items shrink below
     their content's natural width fixes that. */
  .ax-grid > * { min-width: 0; }
  /* uniform card grids drop from 3-5 columns to 2 */
  .ax-cards { grid-template-columns: repeat(2, 1fr) !important; }

  header { padding: 14px 20px !important; }

  /* the halo/canvas inside are sized in % of this box, so just shrinking
     the box is enough — no separate transform needed */
  .ax-triad { width: 340px !important; height: 340px !important; }
}

/* ---------- Mobile: <= 640px ---------- */
@media (max-width: 640px) {
  section[data-screen-label] { padding: 56px 18px !important; }
  section[data-screen-label] h2 { font-size: 27px !important; }

  /* card grids go fully single-column on phones */
  .ax-cards { grid-template-columns: 1fr !important; }

  header { padding: 12px 16px !important; position: relative; }

  /* hamburger replaces the inline nav + CTA on phones */
  header .ax-burger { display: flex !important; }
  header .ax-nav-panel { display: none !important; }
  header .ax-nav-panel.ax-nav-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -1px;
    padding: 18px 16px 22px;
    background: rgba(10,10,10,.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  header .ax-nav-panel.ax-nav-open nav {
    flex-direction: column !important;
    align-items: stretch !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    gap: 2px !important;
  }
  header .ax-nav-panel.ax-nav-open nav a { text-align: left !important; }
  header .ax-nav-panel.ax-nav-open > a[href="#contact"] { text-align: center !important; }

  #hero { min-height: auto !important; padding: 72px 18px 56px !important; }
  #hero h1 { font-size: 30px !important; width: 100% !important; }
  #hero p { font-size: 15px !important; }
  #hero a[href="#contact"] { padding: 15px 32px !important; }

  .ax-triad { width: 260px !important; height: 260px !important; }

  #contact .ax-grid { gap: 40px !important; }
}