/* ================================================================
   mobile.css — Professional Responsive & Navigation Overhaul
   grupulverde.ro — v2.0
   Covers: Logo update, sticky nav, mobile menu, all breakpoints
   ================================================================ */

/* ── NEW LOGO ────────────────────────────────────────────────── */
.gv-logo-img {
  height: 52px !important;
  width: auto !important;
  max-width: 240px;
  object-fit: contain;
  display: block;
}
.gv-nav.scrolled .gv-logo-img {
  height: 40px !important;
}

/* ── STICKY NAV (already sticky but reinforce) ───────────────── */
.gv-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  background: rgba(243,245,241,0.95) !important;
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease !important;
}
.gv-nav.scrolled {
  border-bottom-color: rgba(22,51,0,0.08) !important;
  box-shadow: 0 2px 24px rgba(14,15,12,0.08) !important;
}
.gv-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gv-nav.scrolled .gv-nav-inner {
  padding: 7px 24px !important;
}

/* ── NAV LINKS — professional desktop buttons ────────────────── */
.gv-link {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background 200ms ease, color 200ms ease !important;
}
.gv-link:hover {
  background: rgba(22,51,0,0.06) !important;
}

/* ── DONATE BUTTON ───────────────────────────────────────────── */
.gv-cta {
  border-radius: 24px !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

/* ── LANGUAGE SWITCHER ───────────────────────────────────────── */
.gv-lang {
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── BURGER BUTTON — elegant on mobile ──────────────────────── */
.gv-burger {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(22,51,0,0.12) !important;
  background: transparent !important;
  transition: background 200ms ease, border-color 200ms ease, transform 150ms ease !important;
  flex-shrink: 0;
}
.gv-burger:hover {
  background: rgba(22,51,0,0.06) !important;
  border-color: rgba(22,51,0,0.2) !important;
}
.gv-burger:active {
  transform: scale(0.93) !important;
}
.gv-burger-bar {
  height: 2px !important;
  border-radius: 9999px !important;
  background: var(--fg-1, #163300) !important;
  transition: transform 300ms cubic-bezier(0.23,1,0.32,1), width 200ms ease, opacity 200ms ease !important;
}
.gv-burger-bars {
  gap: 6px !important;
  padding: 0 6px !important;
}
.gv-burger-bar:nth-child(1) { width: 20px !important; }
.gv-burger-bar:nth-child(2) { width: 14px !important; }
.gv-burger-bar:nth-child(3) { width: 20px !important; }

[data-burger][aria-expanded="true"] .gv-burger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg) !important;
  width: 20px !important;
}
[data-burger][aria-expanded="true"] .gv-burger-bar:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
[data-burger][aria-expanded="true"] .gv-burger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg) !important;
  width: 20px !important;
}

/* ── MOBILE MENU DROPDOWN ────────────────────────────────────── */
@media (max-width: 980px) {
  .gv-nav-links {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(243,245,241,0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(22,51,0,0.08) !important;
    box-shadow: 0 24px 56px rgba(14,15,12,0.12), 0 4px 16px rgba(14,15,12,0.05) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 0 16px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition:
      max-height 420ms cubic-bezier(0.23,1,0.32,1),
      opacity 280ms ease,
      transform 320ms cubic-bezier(0.23,1,0.32,1),
      visibility 0ms 420ms,
      padding 0ms 420ms !important;
  }
  .gv-nav-links.open {
    max-height: 90vh !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
    visibility: visible !important;
    padding: 12px 16px 20px !important;
    overflow-y: auto !important;
    transition:
      max-height 420ms cubic-bezier(0.23,1,0.32,1),
      opacity 280ms ease,
      transform 320ms cubic-bezier(0.23,1,0.32,1) !important;
  }
  /* Each nav link on mobile */
  .gv-link {
    padding: 13px 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border: 1px solid transparent !important;
    transition: background 200ms ease, border-color 200ms ease !important;
  }
  .gv-link:hover, .gv-link:active {
    background: rgba(22,51,0,0.06) !important;
    border-color: rgba(22,51,0,0.08) !important;
  }
  /* Dropdown (Programe submenu) on mobile */
  .gv-drop {
    width: 100% !important;
  }
  .gv-drop > .gv-link {
    width: 100% !important;
  }
  .gv-drop-panel {
    position: static !important;
    box-shadow: none !important;
    background: rgba(22,51,0,0.03) !important;
    border-radius: 12px !important;
    margin: 4px 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(22,51,0,0.07) !important;
  }
  .gv-drop-item {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }
  /* Spacer invisible */
  .gv-nav-spacer {
    display: none !important;
  }
  /* Mobile lang inside menu */
  .gv-mobile-lang {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 4px 4px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(22,51,0,0.07) !important;
  }
  .gv-mobile-lang button {
    flex: 1 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 1.5px solid rgba(22,51,0,0.12) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background 200ms ease !important;
  }
  .gv-mobile-lang button.active {
    background: var(--color-wise-green, #163300) !important;
    color: white !important;
    border-color: var(--color-wise-green, #163300) !important;
  }
  /* Desktop lang hide on mobile */
  .gv-lang {
    display: none !important;
  }
  /* CTA on mobile — full width donate button inside menu */
  .gv-nav > .gv-cta {
    display: none !important;
  }
  /* Show CTA inside nav links when open */
  .gv-nav-links .gv-cta-mobile {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    margin-top: 8px !important;
  }
}

/* ── TABLET ADJUSTMENTS (768-980px) ─────────────────────────── */
@media (min-width: 769px) and (max-width: 980px) {
  .gv-logo-img {
    height: 44px !important;
  }
  .gv-nav.scrolled .gv-logo-img {
    height: 36px !important;
  }
}

/* ── MOBILE NAV LAYOUT ───────────────────────────────────────── */
@media (max-width: 768px) {
  .gv-nav-inner {
    padding: 8px 16px !important;
    gap: 8px !important;
  }
  .gv-brand {
    margin-right: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .gv-logo-img {
    height: 40px !important;
    max-width: 180px !important;
  }
  .gv-nav.scrolled .gv-logo-img {
    height: 34px !important;
  }
  .gv-cta {
    display: flex !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
  }
  .gv-cta svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 480px) {
  .gv-nav-inner {
    padding: 6px 14px !important;
  }
  .gv-logo-img {
    height: 34px !important;
    max-width: 160px !important;
  }
  .gv-cta {
    padding: 8px 12px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
}

/* ── FOOTER LOGO ─────────────────────────────────────────────── */
footer .gv-logo-img,
.gv-footer img[alt*="Grupul Verde"],
.gv-footer img[alt*="grupul verde"],
.gv-foot-brand img {
  height: 44px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

/* ── RESPONSIVE CONTENT IMPROVEMENTS ────────────────────────── */

/* Hero section */
@media (max-width: 768px) {
  .ph h1 {
    font-size: clamp(34px, 10vw, 72px) !important;
    line-height: 0.95 !important;
    letter-spacing: -2px !important;
  }
  .ph-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .ph-cta-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .ph-cta-row a, .ph-cta-row button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Cards grid */
@media (max-width: 768px) {
  .rg-4, .rg-3 {
    grid-template-columns: 1fr !important;
  }
  .rg-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Section padding */
@media (max-width: 768px) {
  section.sec, .sec {
    padding: 56px 0 !important;
  }
  .shell {
    padding: 0 16px !important;
  }
  .sec-head {
    margin-bottom: 32px !important;
  }
  .sec-head h2 {
    font-size: clamp(28px, 8vw, 56px) !important;
    letter-spacing: -1.5px !important;
  }
}

/* Stats ticker */
@media (max-width: 768px) {
  .mq-track > span {
    font-size: 18px !important;
    padding: 0 20px !important;
  }
}

/* Project cards */
@media (max-width: 768px) {
  article.surface {
    padding: 24px 20px !important;
  }
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Pillar cards */
@media (max-width: 768px) {
  .pillar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 20px 0 !important;
  }
  .pillar-link {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }
  .pillar-name {
    font-size: clamp(20px, 6vw, 32px) !important;
  }
}

/* Vision / roadmap phases */
@media (max-width: 768px) {
  .idx-vision-phases {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .idx-phase-card {
    padding: 24px 20px !important;
  }
}

/* Social cards */
@media (max-width: 768px) {
  .idx-social-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

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

/* Stat blocks */
@media (max-width: 768px) {
  .rg-stats-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .stat-block {
    padding: 20px 16px !important;
  }
}

/* CTA / action section */
@media (max-width: 768px) {
  .cta-grid, .action-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cta-card {
    padding: 28px 20px !important;
  }
}

/* Footer */
@media (max-width: 768px) {
  .gv-footer {
    padding: 48px 0 24px !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .gv-foot-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .gv-foot-mega {
    font-size: clamp(36px, 14vw, 120px) !important;
    letter-spacing: -3px !important;
  }
  .gv-foot-legal {
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 11px !important;
    text-align: center !important;
  }
  .gv-foot-brand h2 {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
}

/* Contact form */
@media (max-width: 768px) {
  .contact-form {
    grid-template-columns: 1fr !important;
  }
  .contact-form .full {
    grid-column: 1 !important;
  }
  .cf-submit {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Partner/logo grid */
@media (max-width: 768px) {
  .logos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .logo-cell {
    padding: 20px 14px !important;
  }
}

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

/* Donate page */
@media (max-width: 768px) {
  .donate-mega-card {
    grid-template-columns: 1fr !important;
    padding: 28px 18px !important;
    gap: 24px !important;
    border-radius: 20px !important;
  }
  .donate-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .donate-action {
    width: 100% !important;
    padding: 16px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
}

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

/* Mission / misiune */
@media (max-width: 768px) {
  .ms-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ms-values {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Parteneri */
@media (max-width: 768px) {
  .ptr-cta {
    padding: 28px 18px !important;
    border-radius: 18px !important;
  }
}

/* Inline grid overrides for ALL pages */
@media (max-width: 768px) {
  [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"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="padding: 64px"] { padding: 28px 18px !important; }
  [style*="padding: 72px"] { padding: 32px 18px !important; }
  [style*="padding: 80px"] { padding: 36px 18px !important; }
  [style*="padding: 56px"] { padding: 28px 18px !important; }
  [style*="padding: 48px"] { padding: 24px 18px !important; }
}

/* Touch targets */
@media (pointer: coarse) {
  .gv-link { min-height: 48px !important; }
  .gv-burger { min-height: 48px !important; min-width: 48px !important; }
  .gv-cta { min-height: 46px !important; }
  .gv-drop-item { min-height: 48px !important; }
  .cf-submit { min-height: 54px !important; }
  .donate-action { min-height: 56px !important; }
}

/* Prevent horizontal overflow everywhere */
* { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
table { overflow-x: auto; display: block; }