/* ========== EVERTI – clean, logo-aligned design ========== */
:root {
  /* Colors from logo */
  --ev-green: #2F9E44;         /* brand primary (from logo globe) */
  --ev-green-deep: #1F7D33;    /* deeper shade (from road arrow) */
  --ev-green-light: #E8F3EA;   /* soft wash */
  --ev-green-tint: #F3F8F2;    /* lightest */

  --ev-ink: #263238;           /* logo wordmark charcoal */
  --ev-ink-2: #3D4A50;
  --ev-ink-soft: #5C6770;
  --ev-mute: #8A9299;

  --ev-paper: #FFFFFF;
  --ev-paper-2: #F7F8F5;       /* warm off-white */
  --ev-line: #E5E7E3;
  --ev-line-strong: #CDD1CC;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ev-paper); color: var(--ev-ink); overflow-x: hidden; }
body { font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }

.ev-font-body { font-family: "Space Grotesk", sans-serif; }
.ev-font-display { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.02em; }

/* Placeholder (subtle, matches palette) */
.ev-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(47,158,68,0.06) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #EEF2EC, #E3EAE1);
  color: var(--ev-ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center;
}

a { color: inherit; }
button { font-family: inherit; }

/* shared layout */
.ev-container { max-width: 1320px; margin: 0 auto; padding: 0 56px; }

/* ============================================================
   RESPONSIVE – tablet (< 960px) and mobile (< 720px)
   Inline styles on React elements need !important to override.
   ============================================================ */

/* ---------- TABLET (< 960px) ---------- */
@media (max-width: 960px) {
  .ev-container { padding: 0 28px !important; }

  /* Hero: logo scale down, stack on small tablet */
  .ev-hero-grid { padding: 48px 20px 56px !important; gap: 40px !important; }

  /* Stats 4 → 2; fix borderLeft in 2-col */
  .ev-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .ev-stat-item { border-left: none !important; padding: 16px 8px !important; }
  .ev-stat-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.14) !important; }

  /* Services 3 → 2 */
  .ev-services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer 4 → 2 */
  .ev-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; }
}

/* ---------- MOBILE (< 720px) ---------- */
@media (max-width: 720px) {
  .ev-container { padding: 0 20px !important; }

  /* === NAV: hide desktop links + CTA, show hamburger === */
  .ev-nav-bar { padding: 12px 20px !important; }
  .ev-nav-logo-img { width: 100% !important; height: auto !important; max-width: none !important; }
  .ev-nav-links { display: none !important; }
  .ev-nav-cta { display: none !important; }
  .ev-nav-hamburger { display: block !important; }
  .ev-nav-drawer { top: 185px !important; height: calc(100vh - 185px) !important; }

  /* === TOPBAR: compact === */
  .ev-topbar { display: none !important; }

  /* === EYEBROW LARGE: za szeroki na mobile (18px monospace ~450px) → zmniejsz do 11px === */
  .ev-eyebrow--large {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* === HERO === */
  #home { padding: 0 !important; }
  .ev-hero-grid {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    padding: 32px 16px 40px !important;
    gap: 24px !important;
  }
  .ev-hero-grid > *:first-child { order: 2 !important; }
  .ev-hero-grid > *:last-child  { order: 1 !important; }
  .ev-hero-grid h1 { font-size: clamp(32px, 8vw, 44px) !important; }

  /* === TRUST STRIP === */
  .ev-trust-strip { padding: 20px 0 !important; }
  .ev-trust-strip .ev-container > div:first-child { min-width: 0 !important; }

  /* === ABOUT === */
  .ev-about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* === STATS 4 → 2 === */
  .ev-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* === SERVICES 3 → 1 === */
  .ev-services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* === COVERAGE === */
  .ev-coverage-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* === CERTS === */
  .ev-certs-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ev-certs-cards { grid-template-columns: 1fr !important; }

  /* === CONTACT === */
  .ev-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .ev-contact-grid form { padding: 24px !important; }
  .ev-contact-grid form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Prevent long text (email, phone) from overflowing flex rows */
  .ev-contact-grid a, .ev-contact-grid div { word-break: break-word; min-width: 0; }

  /* === CONTACT: mniej paddingu na dole przed stopką === */
  #contact { padding-bottom: 16px !important; }

  /* === FOOTER === */
  footer { padding-top: 8px !important; padding-bottom: 32px !important; }
  .ev-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ev-footer-grid > div:first-child { grid-column: 1 !important; }

  /* Hero image: portrait → landscape on stacked layout */
  .ev-hero-image-frame { aspect-ratio: 16/9 !important; }

  /* Hero badge: ukryty na mobile */
  .ev-hero-badge { display: none !important; }

  /* Coverage map: reduce height */
  .ev-coverage-map { min-height: 300px !important; padding: 8px !important; }

  /* Footer logo: reduce size */
  .ev-footer-logo { height: 80px !important; margin-bottom: 16px !important; }

  /* Nav drawer: match actual nav height (150px logo + 12px*2 padding + 1px border = 175px) */
  .ev-nav-drawer { top: 185px !important; height: calc(100vh - 185px) !important; }

  /* Nav drawer menu items: smaller font */
  .ev-nav-drawer a { font-size: 18px !important; padding: 12px 0 !important; }

  /* Section paddings shrink (hero ma własny padding, pomijamy go) */
  section:not(#home) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Heading sizes scale down further */
  h2 { font-size: clamp(24px, 6vw, 32px) !important; }
}

/* ---------- SMALL MOBILE (< 420px) ---------- */
@media (max-width: 420px) {
  .ev-stats-grid { grid-template-columns: 1fr !important; }
  /* Na 1-col: przywróć border dla wszystkich poza pierwszym */
  .ev-stat-item { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.14) !important; padding: 20px 0 !important; }
  .ev-stat-item:first-child { border-top: none !important; }

  .ev-nav-logo img { height: auto !important; }
  .ev-nav-drawer a { font-size: 16px !important; padding: 10px 0 !important; }
  .ev-footer-logo { height: 60px !important; }
}