/* =========================================================
   COUNTRY PAGES STYLES
   This file overrides parts of main_page.css
   Load AFTER main_page.css
========================================================= */


/* -----------------------------
   1) Remove 2-column hero layout
------------------------------ */

.heroSection .wrap {
  grid-template-columns: 1fr !important;
}

/* Hide phone preview completely */
.phoneWrap {
  display: none !important;
}

/* Ensure hero panel spans full content width */
.heroSection .panel {
  max-width: 1120px;
  width: 100%;
  position: relative; /* needed for positioning country card */
  padding-right: 320px; /* reserve space for floating card */
}


/* -----------------------------
   2) Floating country flag/system card
   Positioned bottom-right inside hero panel
------------------------------ */

.panelCountryCard {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 260px;
  pointer-events: none; /* prevents blocking clicks on CTA */
}

/* Re-enable interaction on the card itself */
.panelCountryCard .countryCard {
  pointer-events: auto;
  width: 260px;
  height: 150px;
  border-radius: 18px;
}

/* Ensure images clip properly */
.panelCountryCard .layer {
  border-radius: 18px;
}


/* -----------------------------
   3) Improve spacing inside hero
------------------------------ */

.heroSection .bullets {
  margin-bottom: 24px;
}

.heroSection .ctaRow {
  margin-top: 18px;
}


/* -----------------------------
   4) Tile spacing tweaks for country pages
------------------------------ */

.howSection .tile {
  min-height: 160px;
}


/* -----------------------------
   5) Responsive adjustments
------------------------------ */

@media (max-width: 1024px) {

  .heroSection .panel {
    padding-right: 22px; /* remove reserved space */
  }

  .panelCountryCard {
    position: static;
    width: 100%;
    margin-top: 20px;
    pointer-events: auto;
  }

  .panelCountryCard .countryCard {
    width: min(360px, 100%);
    height: 150px;
  }

}


/* -----------------------------
   6) Slight visual refinement
------------------------------ */

/* Make kicker a bit more country-like */
.heroSection .kicker {
  letter-spacing: 1.5px;
}

/* Slightly improve readability for longer country text */
.heroSection .slogan {
  max-width: 720px;
}