/* =========================================================
   VEN Foundation — Mobile-first responsive overrides
   Comprehensive fixes for ≤ 768px, ≤ 600px, ≤ 400px
   ========================================================= */

/* ---------- Prevent horizontal overflow globally ---------- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
* { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* ---------- iOS 16px minimum to prevent zoom on focus ---------- */
input, select, textarea {
  font-size: 16px !important;
}

/* =========================================================
   BREAKPOINT: ≤ 768px (tablet + mobile shared)
   ========================================================= */
@media (max-width: 768px) {

  /* Shell tighter padding */
  .shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Reduce all outer paddings */
  section { padding-left: 0; padding-right: 0; }

  /* Common headline sizes */
  .display-l {
    font-size: clamp(30px, 8.5vw, 48px) !important;
    line-height: 1.05 !important;
  }
  .display-m {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .lede { font-size: 15px !important; line-height: 1.5 !important; }

  /* Grids collapse */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* =========================================================
   BREAKPOINT: ≤ 600px (mobile)
   ========================================================= */
@media (max-width: 600px) {

  /* ---------- NAV ---------- */
  .nav-inner {
    padding: 14px 0 !important;
  }
  .brand-logo { height: 28px !important; }
  .brand-mark { font-size: 20px !important; }
  .brand-sub { font-size: 12px !important; }

  /* ---------- HERO ---------- */
  .hero {
    padding: 32px 0 48px !important;
  }
  .hero-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
  }
  .hero-meta .micro {
    font-size: 10px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.14em !important;
  }
  .hero-headline {
    margin-bottom: 28px !important;
    max-width: none !important;
  }
  .hero-headline.display-l {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.08 !important;
  }
  .hero-foot {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 28px !important;
  }
  .hero-stat { flex-direction: row !important; gap: 32px !important; }
  .hero-stat .stat-num { font-size: 32px !important; }
  .hero-stat .stat-lbl { font-size: 10px !important; }

  /* ---------- MISSION ---------- */
  .mission { padding: 56px 0 !important; }
  .mission-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .mission-quote {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }
  .mission-label .micro { font-size: 10px !important; }

  /* ---------- PILLARS ---------- */
  .pillars { padding: 56px 0 !important; }
  .pillars-list {
    grid-template-columns: 1fr !important;
  }
  .pillar {
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 28px 0 !important;
  }
  .pillar:last-child { border-bottom: 0 !important; }
  .pillar-num { font-size: 11px !important; }
  .pillar h3 { font-size: 20px !important; }
  .pillar p { font-size: 14px !important; }

  /* ---------- FOUNDERS ---------- */
  .founders { padding: 56px 0 !important; }
  .founders-head {
    padding-bottom: 40px !important;
    margin-bottom: 40px !important;
  }
  .founders-head .display-l {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
  .founders-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .founder-portrait {
    max-width: 400px;
    margin: 0 auto !important;
  }
  .founder-name { font-size: 24px !important; line-height: 1.2 !important; }
  .founder-role { font-size: 10px !important; letter-spacing: 0.2em !important; }
  .founder-bio p, .founder-bio-final { font-size: 14px !important; line-height: 1.6 !important; }

  /* Founder Principles — inline editorial */
  .founder-principles {
    margin-top: 28px !important;
    gap: 18px !important;
  }
  .principle-line {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .principle-tag { font-size: 17px !important; }
  .principle-body { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* ---------- CTA ---------- */
  .cta { padding: 60px 0 !important; }
  .cta .display-l {
    font-size: clamp(28px, 8vw, 40px) !important;
    max-width: none !important;
  }
  .cta-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cta-actions .btn { width: 100% !important; text-align: center !important; }

  /* ---------- FOOTER ---------- */
  .footer { padding: 40px 0 24px !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-brand p {
    font-size: 13px !important;
    max-width: none !important;
  }
  .footer-col h4 {
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
  }
  .footer-col ul li a {
    font-size: 14px !important;
    padding: 4px 0 !important;
    display: inline-block !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* ---------- BUTTONS: full-width & tap targets ---------- */
  .btn {
    padding: 16px 24px !important;
    min-height: 48px !important;
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
  }

  /* ---------- FORMS (contact, partnership, donate) ---------- */
  .form-card,
  .form-card-2col,
  .contact-form-shell {
    padding: 28px 20px !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .form-field {
    margin-bottom: 20px !important;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 12px 0 !important;
    font-size: 16px !important;
  }
  .form-field label,
  .field label {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }

  /* ---------- RESOURCES page ---------- */
  .res-hero { padding: 40px 0 32px !important; }
  .res-hero .display-l { margin-bottom: 20px !important; }
  .res-filter {
    padding: 16px 0 24px !important;
    margin-bottom: 32px !important;
    gap: 12px !important;
  }
  .res-filter-label {
    padding-right: 12px !important;
    border-right-color: var(--hairline) !important;
    font-size: 10px !important;
  }
  .res-tab {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    padding: 4px 0 !important;
  }
  .res-tab-count { font-size: 10px !important; margin-left: 4px !important; }

  .res-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 60px !important;
  }
  .res-card-body { padding: 20px 20px 24px !important; }
  .res-card-title { font-size: 20px !important; }
  .res-card-desc { font-size: 13px !important; line-height: 1.55 !important; }
  .res-card-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* ---------- CALCULATOR (inline) ---------- */
  .calc-panel {
    padding: 24px 20px 24px !important;
  }
  .calc-panel-head {
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
  }
  .calc-back {
    font-size: 11px !important;
    margin-bottom: 16px !important;
  }
  .calc-head-row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .calc-title { font-size: 24px !important; }
  .calc-desc { font-size: 13px !important; }
  .calc-currency {
    align-items: stretch !important;
    width: 100% !important;
  }
  .calc-currency-group {
    width: 100% !important;
  }
  .currency-btn {
    flex: 1 !important;
    padding: 10px 6px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
  }
  .calc-body {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .calc-fields { gap: 18px !important; }
  .calc-input-wrap input {
    font-size: 16px !important;
    padding: 12px 4px !important;
  }
  .calc-result {
    padding: 24px 20px !important;
  }
  .result-value {
    font-size: 30px !important;
  }
  .result-label { font-size: 10px !important; }
  .result-grid > div span { font-size: 12px !important; }
  .result-grid > div strong { font-size: 14px !important; }

  /* ---------- DEBT-FREE PLAN ---------- */
  .dfp-panel {
    padding: 24px 20px !important;
  }
  .dfp-back {
    font-size: 11px !important;
    margin-bottom: 16px !important;
  }
  .dfp-title { font-size: 24px !important; }
  .dfp-desc { font-size: 13px !important; }

  .dfp-section {
    margin-bottom: 24px !important;
    padding: 20px 16px !important;
  }
  .dfp-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .dfp-section-title {
    font-size: 15px !important;
  }
  .dfp-section-hint {
    font-size: 11px !important;
  }
  .dfp-section-total {
    font-size: 15px !important;
    align-self: flex-end !important;
  }

  /* Debt/Income/Category rows */
  .dfp-debt-row,
  .dfp-item-row,
  .dfp-income-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid var(--hairline) !important;
    margin-bottom: 12px !important;
    background: rgba(0,0,0,0.15) !important;
  }
  .dfp-debt-row input,
  .dfp-item-row input,
  .dfp-income-row input {
    padding: 12px 8px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--hairline-strong) !important;
    border-radius: 0 !important;
  }
  .dfp-debt-row .dfp-remove,
  .dfp-item-row .dfp-remove,
  .dfp-income-row .dfp-remove {
    align-self: flex-end !important;
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Category accordion */
  .dfp-cat-body {
    padding: 16px 12px !important;
  }
  .dfp-cat-header {
    padding: 14px 12px !important;
  }
  .dfp-cat-name {
    font-size: 13px !important;
  }

  /* Add buttons */
  .dfp-add-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 11px !important;
  }

  /* Submit button */
  .dfp-submit {
    width: 100% !important;
    padding: 16px !important;
    font-size: 12px !important;
  }

  /* Results screen */
  .dfp-result-card {
    padding: 24px 20px !important;
  }
  .dfp-result-value {
    font-size: 32px !important;
  }
  .dfp-result-label {
    font-size: 10px !important;
  }
  .dfp-timeline-item {
    padding: 12px !important;
    font-size: 12px !important;
  }

  /* ---------- PARTNERSHIP page ---------- */
  .partnership-hero { padding: 40px 0 32px !important; }
  .partnership-hero .display-l { margin-bottom: 20px !important; }
  .partnership-hero .lede { max-width: none !important; }
  .partnership-form {
    padding: 28px 20px !important;
  }
  .partnership-section {
    padding: 24px 0 !important;
  }
  .partnership-section:not(:last-of-type) {
    border-bottom: 1px solid var(--hairline) !important;
  }
  .partnership-section-num {
    font-size: 12px !important;
  }
  .partnership-section-title {
    font-size: 18px !important;
  }
  .partnership-section-sub {
    font-size: 13px !important;
  }
  .partnership-docs {
    padding: 20px 16px !important;
    margin: 20px 0 !important;
  }
  .partnership-docs-title { font-size: 12px !important; }
  .partnership-docs-body { font-size: 13px !important; }
  .partnership-submit-note {
    font-size: 11px !important;
    padding: 16px !important;
  }

  /* ---------- CONTACT page ---------- */
  .contact-hero { padding: 40px 0 32px !important; }
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact-info-card {
    position: static !important;
    padding: 24px 20px !important;
  }
  .contact-info-item {
    padding: 12px 0 !important;
  }
  .contact-info-item strong {
    font-size: 10px !important;
  }
  .contact-info-item .value {
    font-size: 13px !important;
    word-break: break-word !important;
  }

  /* ---------- DONATE page ---------- */
  .donate-hero { padding: 40px 0 32px !important; }
  .donate-tiers {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  .donate-tier {
    padding: 24px 20px !important;
  }
  .donate-tier-amount { font-size: 32px !important; }
  .donate-tier-desc { font-size: 13px !important; }
  .donate-give-card {
    padding: 32px 20px !important;
  }
  .donate-give-amount-btns {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .donate-amount-btn {
    padding: 12px 6px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  .donate-give-toggle {
    flex-wrap: wrap !important;
  }

  /* ---------- MODAL (inside resources for code entry) ---------- */
  .modal-card {
    padding: 32px 24px 24px !important;
    max-width: none !important;
  }
  .step-title { font-size: 22px !important; }
  .step-subtitle { font-size: 13px !important; }
  .code-input {
    font-size: 24px !important;
    letter-spacing: 0.4em !important;
    padding: 18px 12px !important;
  }
  .code-actions {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .code-actions button {
    text-align: center !important;
    padding: 10px !important;
    border: 1px solid var(--hairline) !important;
  }

  /* ---------- LANGUAGE SWITCHER ---------- */
  .lang-switch {
    padding: 8px 12px !important;
  }
  .mobile-menu .lang-switch {
    margin-top: 20px !important;
  }
}

/* =========================================================
   BREAKPOINT: ≤ 400px (small phones)
   ========================================================= */
@media (max-width: 400px) {
  .shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-headline.display-l {
    font-size: 30px !important;
  }
  .display-l {
    font-size: 28px !important;
  }
  .display-m {
    font-size: 22px !important;
  }

  .founder-name {
    font-size: 22px !important;
  }
  .principle-tag {
    font-size: 16px !important;
  }
  .principle-body {
    font-size: 13px !important;
  }

  /* Nav */
  .brand-mark { font-size: 18px !important; }
  .brand-sub { font-size: 11px !important; }
  .brand-logo { height: 26px !important; }

  /* Calculator */
  .calc-title { font-size: 20px !important; }
  .result-value { font-size: 26px !important; }
  .currency-btn {
    padding: 8px 4px !important;
    font-size: 10px !important;
  }

  /* Debt-Free Plan */
  .dfp-title { font-size: 20px !important; }
  .dfp-section {
    padding: 16px 12px !important;
  }

  /* Partnership */
  .partnership-section-title { font-size: 16px !important; }

  /* Footer */
  .footer-bottom {
    font-size: 11px !important;
  }
}

/* =========================================================
   TOUCH TARGETS — ensure ≥ 44×44px for accessibility
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  button, a.btn, .res-card-cta, .res-tab, .lang-btn,
  .currency-btn, .dfp-add-btn, .dfp-remove, .modal-close,
  .nav-toggle, .mobile-menu a, .footer-col ul li a {
    min-height: 44px !important;
  }

  /* Hover states don't apply on touch */
  a:hover, button:hover {
    /* Rely on active/focus states */
  }
}

/* =========================================================
   Ensure inputs are readable and don't zoom on focus (iOS)
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
  font-size: 16px !important;
  -webkit-appearance: none;
  border-radius: 0;
}

/* =========================================================
   Fix long words breaking layout (URLs, emails, etc.)
   ========================================================= */
@media (max-width: 600px) {
  .contact-info-item .value,
  .footer-email-wrap,
  .dfp-result-item,
  a[href^="mailto"],
  a[href^="tel"] {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}