/**
 * BLOCKS RESPONSIVE STYLES
 * Makes all homepage content blocks responsive
 * Does NOT touch navigation or footer
 */

/* ============================================
   HERO SECTION - RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Hero wrapper - better mobile height */
.hero-wrapper,
section.hero-section {
  min-height: 500px !important;
  padding: 2rem 1rem !important;
}

@media (min-width: 640px) {
  .hero-wrapper,
  section.hero-section {
    min-height: 600px !important;
    padding: 3rem 1.5rem !important;
  }
}

@media (min-width: 768px) {
  .hero-wrapper,
  section.hero-section {
    min-height: 700px !important;
    padding: 4rem 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-wrapper,
  section.hero-section {
    min-height: 100vh !important;
    padding: 6rem 1.5rem !important;
  }
}

/* Hero content container */
.hero-wrapper > div:last-of-type,
section.hero-section > div:last-of-type {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

@media (min-width: 768px) {
  .hero-wrapper > div:last-of-type,
  section.hero-section > div:last-of-type {
    padding: 0 1.5rem !important;
  }
}

/* Hero flex container - stack on mobile */
.hero-wrapper > div:last-of-type > div,
section.hero-section > div:last-of-type > div {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 2rem !important;
  align-items: center !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  .hero-wrapper > div:last-of-type > div,
  section.hero-section > div:last-of-type > div {
    flex-direction: row !important;
    align-items: center !important;
    gap: 3rem !important;
    text-align: left !important;
  }
}

/* Hero text container */
.hero-wrapper > div:last-of-type > div > div:first-child,
section.hero-section > div:last-of-type > div > div:first-child {
  flex: 1 1 auto !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .hero-wrapper > div:last-of-type > div > div:first-child,
  section.hero-section > div:last-of-type > div > div:first-child {
    width: auto !important;
  }
}

/* Hero logo container */
.hero-wrapper > div:last-of-type > div > div:last-child,
section.hero-section > div:last-of-type > div > div:last-child {
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 250px !important;
  margin: 0 auto !important;
}

@media (min-width: 640px) {
  .hero-wrapper > div:last-of-type > div > div:last-child,
  section.hero-section > div:last-of-type > div > div:last-child {
    max-width: 300px !important;
  }
}

@media (min-width: 1024px) {
  .hero-wrapper > div:last-of-type > div > div:last-child,
  section.hero-section > div:last-of-type > div > div:last-child {
    max-width: 350px !important;
  }
}

/* Hero heading */
.hero-wrapper h1,
section.hero-section h1 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
}

@media (min-width: 640px) {
  .hero-wrapper h1,
  section.hero-section h1 {
    font-size: 2.25rem !important;
  }
}

@media (min-width: 768px) {
  .hero-wrapper h1,
  section.hero-section h1 {
    font-size: 2.75rem !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-wrapper h1,
  section.hero-section h1 {
    font-size: 3.5rem !important;
  }
}

/* Hero paragraph */
.hero-wrapper p,
section.hero-section p {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}

@media (min-width: 640px) {
  .hero-wrapper p,
  section.hero-section p {
    font-size: 1.0625rem !important;
  }
}

@media (min-width: 768px) {
  .hero-wrapper p,
  section.hero-section p {
    font-size: 1.125rem !important;
    line-height: 1.75 !important;
    margin-bottom: 2rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-wrapper p,
  section.hero-section p {
    font-size: 1.25rem !important;
  }
}

/* Hero button */
.hero-wrapper a[style*="background"],
section.hero-section a[style*="background"] {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.875rem !important;
  display: inline-block !important;
}

@media (min-width: 768px) {
  .hero-wrapper a[style*="background"],
  section.hero-section a[style*="background"] {
    padding: 1rem 2.5rem !important;
    font-size: 1rem !important;
  }
}

/* Hero logo image */
.hero-wrapper img,
section.hero-section img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Remove forced line breaks on mobile */
@media (max-width: 767px) {
  .hero-wrapper br,
  section.hero-section br {
    display: none !important;
  }
}

/* ============================================
   INTRO CTA SECTION - RESPONSIVE
   ============================================ */

/* White background section */
section[style*="background-color: white"],
.intro-cta-block,
.block--cif-theme-introcta {
  padding: 2.5rem 1rem !important;
}

@media (min-width: 640px) {
  section[style*="background-color: white"],
  .intro-cta-block,
  .block--cif-theme-introcta {
    padding: 3.5rem 1.5rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: white"],
  .intro-cta-block,
  .block--cif-theme-introcta {
    padding: 4rem 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: white"],
  .intro-cta-block,
  .block--cif-theme-introcta {
    padding: 5rem 1.5rem !important;
  }
}

/* Intro CTA container */
section[style*="background-color: white"] > div,
.intro-cta-block > div {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  text-align: center !important;
}

/* Intro CTA heading */
section[style*="background-color: white"] h2,
.intro-cta-block h1,
.intro-cta-block h2 {
  font-size: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.2 !important;
  padding: 0 0.5rem !important;
}

@media (min-width: 640px) {
  section[style*="background-color: white"] h2,
  .intro-cta-block h1,
  .intro-cta-block h2 {
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: white"] h2,
  .intro-cta-block h1,
  .intro-cta-block h2 {
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: white"] h2,
  .intro-cta-block h1,
  .intro-cta-block h2 {
    font-size: 3rem !important;
  }
}

/* Intro CTA body text */
section[style*="background-color: white"] div[style*="font-size: 1.25rem"],
section[style*="background-color: white"] .prose,
.intro-cta-block .prose,
.intro-cta-block p {
  font-size: 0.9375rem !important;
  max-width: 100% !important;
  margin: 0 auto 2rem !important;
  padding: 0 0.5rem !important;
  line-height: 1.7 !important;
}

@media (min-width: 640px) {
  section[style*="background-color: white"] div[style*="font-size: 1.25rem"],
  section[style*="background-color: white"] .prose,
  .intro-cta-block .prose,
  .intro-cta-block p {
    font-size: 1.0625rem !important;
    max-width: 800px !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: white"] div[style*="font-size: 1.25rem"],
  section[style*="background-color: white"] .prose,
  .intro-cta-block .prose,
  .intro-cta-block p {
    font-size: 1.125rem !important;
    max-width: 900px !important;
    margin-bottom: 2.5rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: white"] div[style*="font-size: 1.25rem"],
  section[style*="background-color: white"] .prose,
  .intro-cta-block .prose,
  .intro-cta-block p {
    font-size: 1.25rem !important;
    max-width: 1100px !important;
    margin-bottom: 3rem !important;
  }
}

/* Intro CTA button */
section[style*="background-color: white"] a[href],
.intro-cta-block a,
.intro-cta-button a {
  padding: 0.75rem 1.75rem !important;
  font-size: 0.875rem !important;
  display: inline-block !important;
}

@media (min-width: 640px) {
  section[style*="background-color: white"] a[href],
  .intro-cta-block a,
  .intro-cta-button a {
    padding: 0.875rem 2.25rem !important;
    font-size: 1rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: white"] a[href],
  .intro-cta-block a,
  .intro-cta-button a {
    padding: 1rem 3rem !important;
    font-size: 1.125rem !important;
  }
}

/* ============================================
   STATS ROW SECTION - RESPONSIVE
   ============================================ */

/* Blue background section */
section[style*="background-color: #1e3a8a"] {
  padding: 2.5rem 1rem !important;
  margin-bottom: 1.5rem !important;
}

@media (min-width: 640px) {
  section[style*="background-color: #1e3a8a"] {
    padding: 3rem 1.5rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: #1e3a8a"] {
    padding: 3.5rem 1.5rem !important;
    margin-bottom: 2rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: #1e3a8a"] {
    padding: 4rem 1.5rem !important;
  }
}

/* Stats container */
section[style*="background-color: #1e3a8a"] > div {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* Stats grid */
section[style*="background-color: #1e3a8a"] > div > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  text-align: center !important;
}

@media (min-width: 480px) {
  section[style*="background-color: #1e3a8a"] > div > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: #1e3a8a"] > div > div {
    gap: 3rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: #1e3a8a"] > div > div {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Stats numbers */
section[style*="background-color: #1e3a8a"] div[style*="font-size: 3rem"] {
  font-size: 2rem !important;
  line-height: 1.2 !important;
}

@media (min-width: 640px) {
  section[style*="background-color: #1e3a8a"] div[style*="font-size: 3rem"] {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: #1e3a8a"] div[style*="font-size: 3rem"] {
    font-size: 2.75rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: #1e3a8a"] div[style*="font-size: 3rem"] {
    font-size: 3rem !important;
  }
}

/* Stats labels */
section[style*="background-color: #1e3a8a"] div[style*="font-size: 1.125rem"] {
  font-size: 0.875rem !important;
  margin-top: 0.5rem !important;
  line-height: 1.4 !important;
}

@media (min-width: 640px) {
  section[style*="background-color: #1e3a8a"] div[style*="font-size: 1.125rem"] {
    font-size: 0.9375rem !important;
  }
}

@media (min-width: 768px) {
  section[style*="background-color: #1e3a8a"] div[style*="font-size: 1.125rem"] {
    font-size: 1rem !important;
  }
}

@media (min-width: 1024px) {
  section[style*="background-color: #1e3a8a"] div[style*="font-size: 1.125rem"] {
    font-size: 1.125rem !important;
  }
}

/* ============================================
   WORLD MAP - RESPONSIVE
   ============================================ */

#world-map {
  width: 100% !important;
  height: 250px !important;
  margin-bottom: 0rem !important;
}

@media (min-width: 480px) {
  #world-map {
    height: 300px !important;
    margin-bottom: 0rem !important;
  }
}

@media (min-width: 640px) {
  #world-map {
    height: 350px !important;
    margin-bottom: 0rem !important;
  }
}

@media (min-width: 768px) {
  #world-map {
    height: 400px !important;
    margin-bottom: 0rem !important;
  }
}

@media (min-width: 1024px) {
  #world-map {
    height: 500px !important;
    margin-bottom: 0rem !important;
  }
}

/* World map container */
.block--cif-theme-worldmap,
#block-cif-theme-worldmap {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================
   GENERAL UTILITIES
   ============================================ */

/* Remove forced line breaks on mobile for all blocks */
@media (max-width: 767px) {
  section br,
  .block br {
    display: none !important;
  }
}

/* Ensure all images are responsive */
section img,
.block img {
  max-width: 100% !important;
  height: auto !important;
}

/* Prevent horizontal overflow */
section,
.block {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}