/* ============================================================
   responsive.css -- Enhanced responsive & visual improvements
   Covers: PC (1024px+), Tablet (768-1023px), Mobile (<=767px)
   ============================================================ */

img, video, svg { max-width: 100%; height: auto; }
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* PAGE HERO responsive */
@media (max-width: 720px) {
  .ph { padding: 56px 0 72px; }
  .ph h1 { font-size: clamp(36px, 12vw, 80px); letter-spacing: -2px; line-height: 0.95; }
  .ph-sub { font-size: 16px; margin-top: 20px; }
  .ph-meta { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; padding-top: 24px; }
  section.sec { padding: 64px 0; }
  .shell { padding: 0 18px; }
  .sec-head { margin-bottom: 36px; }
  .sec-head h2 { font-size: clamp(32px, 8vw, 64px); letter-spacing: -1.5px; }
  .sec-head p { font-size: 15px; }
  .big-num { font-size: clamp(40px, 14vw, 100px); letter-spacing: -2px; }
  .mq-track > span { font-size: 20px; padding: 0 24px; gap: 24px; }
  .quote-mega blockquote { font-size: clamp(28px, 8vw, 56px); letter-spacing: -1.5px; }
  .quote-mega { padding: 48px 0; }
  .chip-row { gap: 6px; margin-top: 20px; }
  .chip { padding: 7px 12px; font-size: 12px; }
  .pillar { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .pillar-n { font-size: 14px; }
  .pillar-name { font-size: clamp(22px, 6vw, 36px); letter-spacing: -0.8px; }
  .pillar-meta { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
  .pillar-tags { margin-top: 8px; }
  .gv-footer { padding: 64px 0 32px; margin-top: 72px; border-radius: 28px 28px 0 0; }
  .gv-foot-brand h2 { font-size: clamp(32px, 9vw, 56px); letter-spacing: -1.5px; }
  .gv-foot-mega { font-size: clamp(40px, 15vw, 160px) !important; letter-spacing: -4px; margin-top: 40px; }
  .gv-foot-legal { flex-direction: column; gap: 8px; font-size: 11px; }
  .donate-mega-card { grid-template-columns: 1fr !important; padding: 32px 20px !important; gap: 28px !important; border-radius: 24px !important; }
  .donate-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .donate-input input { font-size: 28px; }
  .donate-info { border-radius: 20px; padding: 24px; }
  .donate-action { padding: 18px; font-size: 15px; }
  .contact-form { grid-template-columns: 1fr !important; }
  .contact-form .full { grid-column: 1 !important; }
  .cf-field input, .cf-field textarea, .cf-field select { padding: 14px 16px; font-size: 14px; }
  .cf-submit { width: 100%; justify-content: center; padding: 16px 24px; font-size: 15px; }
  .logos-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { padding: 24px 16px; min-height: auto; }
  .logo-cell .nm { font-size: 18px; letter-spacing: -0.5px; }
  .impact-map-wrap { grid-template-columns: 1fr !important; padding: 28px 20px !important; gap: 24px !important; border-radius: 28px !important; }
  .impact-map-key h3 { font-size: clamp(24px, 6vw, 36px); letter-spacing: -0.8px; }
  .impact-county-list > div { padding: 12px 0; }
  .impact-county-list .nm { font-size: 14px; }
  .impact-county-list .ct { font-size: 16px; }
  .scrolly { display: block; }
  .scrolly-sticky { position: static; height: auto; margin-bottom: 32px; }
  .scrolly-steps > div { min-height: auto; opacity: 1; padding: 24px 0; }
  .scrolly-steps > div > h2 { font-size: clamp(28px, 8vw, 52px); letter-spacing: -1px; }
}

/* SMALL MOBILE (<=480px) */
@media (max-width: 480px) {
  .ph h1 { font-size: clamp(30px, 11vw, 56px); letter-spacing: -1.5px; }
  .ph-meta { grid-template-columns: 1fr 1fr; }
  section.sec { padding: 48px 0; }
  .shell { padding: 0 14px; }
  .big-num { font-size: clamp(36px, 12vw, 72px); }
  .quote-mega blockquote { font-size: clamp(24px, 7vw, 40px); letter-spacing: -1px; }
  .gv-footer { padding: 48px 0 24px; border-radius: 20px 20px 0 0; }
  .logos-grid { grid-template-columns: 1fr !important; border-radius: 16px; }
  .donate-mega-card { padding: 24px 16px !important; border-radius: 20px !important; }
  .donate-grid button { padding: 14px 4px; font-size: 20px; }
  .donate-input input { font-size: 24px; }
  .rg-stats-4 { grid-template-columns: 1fr; }
  .gv-foot-mega { font-size: clamp(32px, 14vw, 120px) !important; }
}

/* TABLET (769px - 980px) */
@media (min-width: 769px) and (max-width: 980px) {
  .ph h1 { font-size: clamp(44px, 8vw, 96px); letter-spacing: -2.5px; }
  .sec-head h2 { font-size: clamp(36px, 6vw, 68px); letter-spacing: -2px; }
  .logos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* TABLET general (<=980px) */
@media (max-width: 980px) {
  .logos-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-form { grid-template-columns: 1fr 1fr; }
}

/* TOUCH TARGETS */
@media (pointer: coarse) {
  .gv-link { min-height: 44px; }
  .chip { min-height: 40px; }
  .gv-drop-item { min-height: 44px; }
  .donate-bar button { min-height: 48px; }
  .donate-grid button { min-height: 56px; }
  .donate-action { min-height: 56px; }
  .cf-submit { min-height: 52px; }
  .gv-lang button { min-height: 36px; min-width: 44px; }
}

/* NAV mobile extras */
@media (max-width: 480px) {
  .gv-brand img { height: 36px !important; }
  .gv-cta { padding: 8px 12px; font-size: 12px; gap: 4px; }
  .gv-cta svg { width: 12px; height: 12px; }
}

/* CARD BORDER */
.surface { border: 1px solid rgba(22,51,0,0.06); min-width: 0; word-break: break-word; overflow-wrap: break-word; }
.surface:hover { border-color: rgba(22,51,0,0.12); }

/* FOCUS */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-wise-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* PRINT */
@media print {
  .gv-nav, .gv-footer, .cursor, .cursor-ring, .scroll-progress, .gv-burger { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
  a { color: #000 !important; text-decoration: underline; }
  .page-wrap { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   ADDITIONAL RESPONSIVE FIXES — page-specific classes
   ============================================================ */

/* INDEX PAGE — sections missing mobile CSS */
@media (max-width: 720px) {
  /* INS stats section — 2 columns to 1 */
  .idx-ins-grid { grid-template-columns: 1fr !important; }
  .idx-ins-card { padding: 28px 20px !important; }
  .idx-ins-card:first-child { border-radius: 16px 16px 0 0; }
  .idx-ins-card:last-child { border-radius: 0 0 16px 16px; }

  /* Social grid — 5 cols to 2 */
  .idx-social-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .idx-soc-card { padding: 20px 16px; }

  /* Cisco strip — 3 cols to 1 */
  .idx-cisco-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .idx-cisco-tags { display: none; }

  /* Year 2026 card */
  .idx-year { padding: 28px 20px !important; border-radius: 20px !important; }

  /* Vision bottom row */
  .idx-vision-bottom { flex-direction: column; gap: 20px; }
  .idx-vision-funds { justify-content: flex-start; }

  /* Bar rows in INS section */
  .idx-bar-row { grid-template-columns: 60px 1fr 44px !important; gap: 8px !important; }
  .idx-bar-lbl { font-size: 11px; }

  /* INS head */
  .idx-ins { padding: 64px 0 !important; }

  /* Hero sub text fix */
  .idx-hero-sub { font-size: 15px !important; }
}

@media (max-width: 480px) {
  /* Social grid — 1 column on very small */
  .idx-social-grid { grid-template-columns: 1fr !important; }
  /* INS bar */
  .idx-bar-row { grid-template-columns: 52px 1fr 40px !important; }
}

/* DONEAZA PAGE — inline style overrides */
@media (max-width: 720px) {
  /* Section with inline grid-template-columns: 1fr 1.4fr */
  .donate-mega-card,
  .reveal[style*="grid-template-columns"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
    gap: 28px !important;
  }
  /* Fix padding 64px inline containers */
  [style*="padding: 64px"],
  [style*="padding:64px"] {
    padding: 32px 20px !important;
  }
}

/* PROGRAM-GEN, PROGRAM-MEDIU, etc — feature cards */
@media (max-width: 720px) {
  .rg-4 > .surface { padding: 24px 18px !important; }
  .rg-3 > .surface { padding: 24px 18px !important; }
}

/* PARTENERI — partner grid extra */
@media (max-width: 720px) {
  .ptr-partners-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ptr-fin-grid { grid-template-columns: 1fr !important; }
  .ptr-cta { padding: 32px 20px !important; border-radius: 20px !important; }
}

/* CENTRUL 2035 — bento grid */
@media (max-width: 720px) {
  .c35-bento { grid-template-columns: 1fr !important; }
  .bc-span-5, .bc-span-7, .bc-span-4, .bc-span-8 { grid-column: span 1 !important; }
}

/* ALL PAGES — inline style grid overrides on mobile */
@media (max-width: 720px) {
  /* 2-column asymmetric grids with inline styles */
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-column inline grids */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* Large padding inline */
  [style*="padding: 64px"] { padding: 28px 20px !important; }
  [style*="padding: 72px"] { padding: 32px 20px !important; }
  [style*="padding: 80px"] { padding: 36px 20px !important; }
  [style*="padding: 56px"] { padding: 28px 20px !important; }
}


/* ============================================================
ENHANCED RESPONSIVE — INDEX PAGE SPECIFIC
Covers hero, metrics band, cisco strip, ins section, vision
============================================================ */

/* INDEX HERO — responsive */
@media (max-width: 980px) {
  .idx-hero { padding: 80px 0 100px; }
  .idx-hero-content { gap: 40px; }
  .idx-hero-h1 { font-size: clamp(40px, 7vw, 80px); }
  .idx-bento { grid-template-columns: 1fr 1fr !important; }
  .idx-bc-span-4, .idx-bc-span-5, .idx-bc-span-7, .idx-bc-span-8 { grid-column: span 1 !important; }
}

@media (max-width: 720px) {
  .idx-hero { padding: 60px 0 80px; }
  .idx-hero-content { flex-direction: column; gap: 32px; }
  .idx-hero-right { display: none; }
  .idx-hero-h1 { font-size: clamp(32px, 10vw, 64px); letter-spacing: -2px; line-height: 0.95; }
  .idx-hero-chips { flex-wrap: wrap; gap: 6px; }
  .idx-hero-chip { font-size: 12px; padding: 6px 10px; }
  .idx-hero-foot { flex-direction: column; gap: 12px; align-items: flex-start; }
  .idx-ticker { overflow: hidden; }
  .idx-hero-cta { flex-wrap: wrap; gap: 10px; }
  .idx-bento { grid-template-columns: 1fr !important; }
  .idx-bc-span-4, .idx-bc-span-5, .idx-bc-span-7, .idx-bc-span-8 { grid-column: span 1 !important; }
}

/* METRICS BAND — responsive */
@media (max-width: 980px) {
  .mb-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}

@media (max-width: 720px) {
  .mb-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .mb-num { font-size: clamp(32px, 10vw, 56px) !important; }
}

@media (max-width: 480px) {
  .mb-grid { grid-template-columns: 1fr 1fr !important; }
}

/* CISCO STRIP — responsive */
@media (max-width: 980px) {
  .idx-cisco-inner { flex-direction: column; gap: 24px; }
  .idx-cisco-strip .shell { padding: 0 20px; }
}

@media (max-width: 720px) {
  .idx-cisco-strip { padding: 40px 0 !important; }
  .idx-cisco-h { font-size: clamp(24px, 7vw, 40px) !important; }
  .idx-cisco-btn { width: 100%; justify-content: center; padding: 14px 20px; }
  .idx-cisco-tags { flex-wrap: wrap; gap: 6px; margin-top: 12px; }
}

/* INS SECTION (statistics) — responsive */
@media (max-width: 980px) {
  .idx-ins-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 720px) {
  .idx-ins-grid { grid-template-columns: 1fr !important; }
  .idx-ins-card { padding: 24px 18px !important; }
  .idx-ins-head { flex-direction: column; gap: 16px; align-items: flex-start; }
  .idx-phases { display: flex; flex-direction: column; gap: 12px; }
  .idx-phase { padding: 16px !important; }
}

/* VISION SECTION — responsive */
@media (max-width: 980px) {
  .idx-vision { padding: 80px 0 !important; }
  .idx-vision-head { flex-direction: column; gap: 24px; }
}

@media (max-width: 720px) {
  .idx-vision { padding: 60px 0 !important; }
  .idx-vision-head h2 { font-size: clamp(32px, 9vw, 60px); letter-spacing: -1.5px; }
  .idx-vision-bottom { flex-direction: column; gap: 20px; }
  .idx-vision-funds { justify-content: flex-start; flex-wrap: wrap; }
  .idx-vision-cta { width: 100%; justify-content: center; }
}

/* CHAPTERS / STORY sections — responsive */
@media (max-width: 720px) {
  .chapter { flex-direction: column !important; gap: 24px !important; }
  .ch-head { width: 100% !important; }
  .ch-num { font-size: clamp(60px, 18vw, 120px); }
  .ch-title { font-size: clamp(26px, 7vw, 48px); letter-spacing: -1px; }
  .story-section { padding: 48px 0; }
  .evidence { flex-direction: column; gap: 12px; }
  .fact-mq { overflow: hidden; }
}

/* SCROLLY — disable on mobile */
@media (max-width: 720px) {
  .scrolly { display: block !important; }
  .scrolly-sticky { position: static !important; height: auto !important; }
  .scrolly-steps > div { min-height: auto !important; opacity: 1 !important; padding: 24px 0; }
}

/* NAVIGATION — responsive */
@media (max-width: 980px) {
  .gv-nav-links { display: none; }
  .gv-burger { display: flex; }
  .gv-cta { display: none; }
}

@media (max-width: 720px) {
  .gv-nav { padding: 0 18px; height: 56px; }
  .gv-brand img { height: 32px; }
}

/* FOOTER — responsive */
@media (max-width: 980px) {
  .gv-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 32px; }
}

@media (max-width: 720px) {
  .gv-foot-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .gv-foot-nav { flex-direction: column; gap: 24px; }
  .gv-foot-col { min-width: 0; }
}

/* PROGRAM PAGES — tables and grids */
@media (max-width: 980px) {
  .rg-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .rg-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 720px) {
  .rg-4 { grid-template-columns: 1fr !important; }
  .rg-3 { grid-template-columns: 1fr !important; }
  .rg-2 { grid-template-columns: 1fr !important; }
  .rg-stats-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .surface { border-radius: 16px !important; }
}

/* TABLES — responsive */
@media (max-width: 720px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  table thead, table tbody, table tr, table th, table td { display: block; }
  table thead tr { position: absolute; top: -9999px; left: -9999px; }
  table tr { border: 1px solid rgba(22,51,0,0.12); margin-bottom: 12px; border-radius: 12px; padding: 8px; }
  table td { padding: 8px 12px !important; border: none !important; position: relative; padding-left: 40% !important; text-align: left !important; }
  table td:before { position: absolute; top: 8px; left: 12px; width: 38%; padding-right: 10px; white-space: nowrap; font-weight: 600; font-size: 12px; color: rgba(22,51,0,0.5); }
}

/* IMPACT PAGE — specific */
@media (max-width: 720px) {
  .impact-map-wrap { grid-template-columns: 1fr !important; padding: 24px 16px !important; }
  .impact-county-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .impact-chart-wrap { overflow-x: auto; }
}

/* CONTACT PAGE — responsive */
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-info { order: 2; }
  .contact-form-wrap { order: 1; }
  .cf-row { flex-direction: column; gap: 12px; }
  .map-wrap { min-height: 280px !important; }
}

/* DONEAZA PAGE — responsive */
@media (max-width: 720px) {
  .donate-hero { padding: 60px 0 !important; }
  .donate-methods { flex-direction: column; gap: 12px; }
  .donate-method { padding: 20px 16px; }
  .donate-amounts { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
}

/* CENRUL PAGE — bento responsive */
@media (max-width: 980px) {
  .c35-bento { grid-template-columns: repeat(2, 1fr) !important; }
  .bc-span-5, .bc-span-7 { grid-column: span 2 !important; }
  .bc-span-4, .bc-span-8 { grid-column: span 1 !important; }
}

@media (max-width: 720px) {
  .c35-bento { grid-template-columns: 1fr !important; }
  .bc-span-5, .bc-span-7, .bc-span-4, .bc-span-8 { grid-column: span 1 !important; }
}

/* GENERAL LAYOUT fixes for all pages */
@media (max-width: 980px) {
  .shell { padding: 0 24px; max-width: 100%; }
  section.sec { padding: 72px 0; }
  .sec-head { margin-bottom: 40px; }
  .ph h1 { font-size: clamp(36px, 7vw, 80px); }
}

@media (max-width: 720px) {
  .shell { padding: 0 16px; }
  section.sec { padding: 56px 0; }
  .ph { padding: 64px 0 80px; }
  .ph h1 { font-size: clamp(30px, 10vw, 60px); letter-spacing: -1.5px; }
  .ph-sub { font-size: 15px; max-width: 100%; }
  .big-num { font-size: clamp(40px, 14vw, 80px); }
  .sec-head h2 { font-size: clamp(28px, 8vw, 52px); }
  .sec-head p { font-size: 15px; }
  .mq-track > span { font-size: 16px; padding: 0 16px; }
}

/* TABLET LANDSCAPE (981-1200px) */
@media (min-width: 981px) and (max-width: 1200px) {
  .shell { max-width: 960px; padding: 0 24px; }
  .idx-hero-h1 { font-size: clamp(48px, 6vw, 96px); }
  .mb-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .rg-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* SMALL MOBILE fixes */
@media (max-width: 380px) {
  .idx-hero-h1 { font-size: clamp(26px, 9vw, 44px); }
  .ph h1 { font-size: clamp(24px, 9vw, 40px); }
  .big-num { font-size: clamp(32px, 12vw, 56px); }
  .btn-primary, .btn-ghost { padding: 12px 16px; font-size: 13px; }
  .gv-foot-mega { font-size: clamp(28px, 12vw, 72px) !important; }
}