/* MYCDIC v1.9.16.3
   Homepage-only mobile correction layer. Every rule is mobile-scoped so the
   approved desktop structure and proportions remain unchanged. */
@media (max-width: 768px) {
  .mycdic-homepage .container,
  .mycdic-homepage section,
  .mycdic-homepage main,
  .mycdic-homepage header,
  .mycdic-homepage footer { min-width: 0; }

  .mycdic-homepage img,
  .mycdic-homepage svg,
  .mycdic-homepage video,
  .mycdic-homepage canvas { max-width: 100%; }
  .mycdic-homepage h1,
  .mycdic-homepage h2,
  .mycdic-homepage h3,
  .mycdic-homepage p,
  .mycdic-homepage a,
  .mycdic-homepage button,
  .mycdic-homepage strong,
  .mycdic-homepage span { overflow-wrap: break-word; }

  /* Header and top bar intentionally inherit the same mobile proportions as the
     approved About page. Homepage-only overrides are kept out of this area. */

  /* Hero becomes a deliberate mobile composition rather than a compressed desktop block. */
  .mycdic-homepage .hero { padding: 46px 0 42px; }
  .mycdic-homepage .hero .container { min-width: 0; }
  .mycdic-homepage .hero h1,
  .mycdic-homepage .hero h2 {
    max-width: 100%;
    margin-bottom: 14px;
    font-size: clamp(1.72rem, 7.1vw, 2.15rem);
    line-height: 1.16;
    letter-spacing: -.02em;
  }
  .mycdic-homepage .hero p {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: .94rem;
    line-height: 1.7;
  }
  .mycdic-homepage .hero-btn { padding: 11px 23px; }
  .mycdic-homepage .president-message { margin-top: 34px; }
  .mycdic-homepage .president-message h3 { margin-bottom: 16px; font-size: 1.48rem; }
  .mycdic-homepage .president-content {
    min-width: 0;
    gap: 18px;
    padding: 18px;
    border-radius: 15px;
  }
  .mycdic-homepage .president-img { max-width: 178px; height: 218px; }
  .mycdic-homepage .president-text h4 { font-size: 1.3rem; }
  .mycdic-homepage .president-text p { font-size: .9rem; line-height: 1.7; }

  /* Mobile rhythm: preserve all institutional content while reducing excess height. */
  .mycdic-homepage section,
  .mycdic-homepage .institutional-status,
  .mycdic-homepage .vision-mission,
  .mycdic-homepage .operations-section,
  .mycdic-homepage .strategic-partnerships-section,
  .mycdic-homepage .why-mycdic-section,
  .mycdic-homepage .impact-achievements-section,
  .mycdic-homepage .media-visibility-section,
  .mycdic-homepage .final-cta-section,
  .mycdic-homepage .mycdic-global-section { padding-top: 54px; padding-bottom: 54px; }
  .mycdic-homepage .section-title { margin-bottom: 24px; font-size: 1.65rem; line-height: 1.2; }
  .mycdic-homepage .section-intro-center { margin-bottom: 24px; font-size: .94rem; line-height: 1.7; }

  .mycdic-homepage .status-grid,
  .mycdic-homepage .impact-grid,
  .mycdic-homepage .values-grid,
  .mycdic-homepage .why-mycdic-grid,
  .mycdic-homepage .operations-grid,
  .mycdic-homepage .impact-achievements-grid,
  .mycdic-homepage .stats-grid,
  .mycdic-homepage .partners-grid,
  .mycdic-homepage .ambassadors-grid { grid-template-columns: minmax(0,1fr); }
  .mycdic-homepage .status-grid,
  .mycdic-homepage .impact-grid,
  .mycdic-homepage .values-grid { margin-top: 24px; gap: 14px; }
  .mycdic-homepage .status-card,
  .mycdic-homepage .impact-card,
  .mycdic-homepage .value-card,
  .mycdic-homepage .vision-box,
  .mycdic-homepage .operations-text,
  .mycdic-homepage .framework-item,
  .mycdic-homepage .impact-achievements-main,
  .mycdic-homepage .media-hub-card { min-width: 0; padding: 21px 18px; }
  .mycdic-homepage .vision-mission-grid { margin-top: 26px; margin-bottom: 28px; gap: 15px; }

  /* The 3D network area is kept, but its phone footprint is controlled. */
  .mycdic-homepage .mycdic-global-shell,
  .mycdic-homepage .mycdic-global-stats,
  .mycdic-homepage .mycdic-org-leadership,
  .mycdic-homepage .mycdic-location-grid { min-width: 0; }
  .mycdic-homepage .mycdic-global-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .mycdic-homepage .mycdic-globe-card { height: 370px; border-radius: 18px; }
  .mycdic-homepage #mycdic-globe,
  .mycdic-homepage #mycdic-globe > div,
  .mycdic-homepage #mycdic-globe canvas { max-width: 100% !important; }
  .mycdic-homepage .mycdic-panel-top,
  .mycdic-homepage .mycdic-location-heading,
  .mycdic-homepage .mycdic-structure-header { align-items: flex-start; gap: 10px; }
  .mycdic-homepage .mycdic-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .mycdic-homepage .mycdic-panel-actions button { min-width: 0; flex: 1 1 130px; white-space: normal; }
  .mycdic-homepage .mycdic-chip-grid { min-width: 0; }
  .mycdic-homepage .mycdic-country-chip { max-width: 100%; white-space: normal; }

  .mycdic-homepage .summit-banner,
  .mycdic-homepage .donate-banner,
  .mycdic-homepage .final-cta-box { padding: 30px 18px; border-radius: 18px; }
  .mycdic-homepage .summit-actions,
  .mycdic-homepage .final-cta-actions { width: 100%; gap: 10px; }
  .mycdic-homepage .summit-actions a,
  .mycdic-homepage .final-cta-actions a { max-width: 100%; white-space: normal; text-align: center; }

  .mycdic-homepage .footer-newsletter,
  .mycdic-homepage .footer-newsletter-form,
  .mycdic-homepage .footer-content-expanded { min-width: 0; }
}

@media (max-width: 430px) {
  .mycdic-homepage .hero { padding: 38px 0 36px; }
  .mycdic-homepage .hero h1,
  .mycdic-homepage .hero h2 { font-size: clamp(1.58rem, 8vw, 1.9rem); }
  .mycdic-homepage .hero p { font-size: .9rem; }
  .mycdic-homepage .president-content { padding: 15px; }
  .mycdic-homepage .president-img { max-width: 160px; height: 198px; }
  .mycdic-homepage section,
  .mycdic-homepage .institutional-status,
  .mycdic-homepage .vision-mission,
  .mycdic-homepage .operations-section,
  .mycdic-homepage .strategic-partnerships-section,
  .mycdic-homepage .why-mycdic-section,
  .mycdic-homepage .impact-achievements-section,
  .mycdic-homepage .media-visibility-section,
  .mycdic-homepage .final-cta-section,
  .mycdic-homepage .mycdic-global-section { padding-top: 46px; padding-bottom: 46px; }
  .mycdic-homepage .mycdic-global-stats { grid-template-columns: minmax(0,1fr); }
  .mycdic-homepage .mycdic-globe-card { height: 320px; }
}