/* ===================================================
   Vinto v2 — Global Responsive Fixes
   Loaded after each page's embedded <style> block.
   Uses specificity / !important only where needed.
   =================================================== */

/* ===== TYPOGRAPHY NORMALISATION ===== */

/* Interior page heroes — h1 locked to 30px max */
.hero h1,
.page-hero h1 {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  letter-spacing: -0.04em;
  font-weight: 900;
}

/* Main landing hero h1 on dark overlay keeps larger size */
.hero-overlay h1 {
  font-size: clamp(22px, 3vw, 40px) !important;
}

/* Section head h2 — locked */
.section-head h2 {
  font-size: clamp(18px, 1.9vw, 26px) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* CTA panel h2 — bring down to reasonable size */
.cta-panel h2,
.cta-box h2 {
  font-size: clamp(22px, 2.8vw, 34px) !important;
}

/* Body copy consistent */
p {
  line-height: 1.65;
}

/* ===== SECTION PADDING — max 48px, 32px on mobile ===== */
/* Any section using 80px+ padding gets capped */
@media (max-width: 860px) {
  .section,
  [class$="-section"],
  [class*="-section "] {
    padding-top:  min(48px, var(--sec-pad, 48px));
    padding-bottom: min(48px, var(--sec-pad, 48px));
  }
}

@media (max-width: 600px) {
  .section  { padding: 32px 0 !important; }

  /* Named sections with hardcoded large padding */
  .pipeline-section,
  .workflow-section,
  .specs-section,
  .values-section,
  .founders-section,
  .tabs-section,
  .transform-section,
  .stats-section,
  .cta-panel-section,
  .info-section,
  .testimonials-section,
  .blog-section,
  .more-section {
    padding-top:    32px !important;
    padding-bottom: 32px !important;
  }

  /* Hero top padding reduction */
  .hero,
  .page-hero {
    padding-top: 28px !important;
  }
}

/* ===== FOOTER — phone numbers & responsive ===== */

/* Keep phone / intl lines on one line */
.footer-col p:has(a[href^="tel:"]) {
  white-space: nowrap;
}
/* Fallback for browsers without :has() */
.footer-col a[href^="tel:"] {
  white-space: nowrap;
  display: inline;
}

/* Tablet — 2-col footer */
@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 36px !important;
  }
  .footer-col:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px;
  }
}

/* Mobile — 2-column compact footer */
@media (max-width: 540px) {
  .footer {
    padding: 28px 16px 20px !important;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 14px !important;
  }
  /* Logo row spans both columns */
  .footer-col:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  /* Compact logo */
  .footer-logo {
    height: 28px !important;
    margin-bottom: 0 !important;
  }
  /* Smaller column heading */
  .footer-col h4 {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 8px !important;
  }
  /* Smaller link + body text */
  .footer-col p,
  .footer-col a {
    font-size: 11.5px !important;
    margin-bottom: 3px !important;
    line-height: 1.5 !important;
  }
  /* Tagline next to logo */
  .footer-col:first-child p {
    font-size: 11px !important;
    color: var(--color-ink-4);
    margin: 0;
  }
  /* Phone numbers — allow wrapping in narrow column */
  .footer-col p:has(a[href^="tel:"]),
  .footer-col a[href^="tel:"] {
    white-space: normal !important;
  }
  /* Socials strip */
  .footer-socials-row {
    margin: 20px 0 14px !important;
    padding-top: 18px !important;
    gap: 8px !important;
  }
  .footer-socials-row a {
    width: 32px !important;
    height: 32px !important;
  }
  .footer-socials-row svg {
    width: 15px !important;
    height: 15px !important;
  }
  .footer-bottom {
    font-size: 10.5px !important;
    margin-top: 12px !important;
  }
}

/* ===== NAV — mobile tighten ===== */
@media (max-width: 480px) {
  .site-header {
    padding: 0 8px !important;
  }
  .nav-container {
    padding: 11px 16px !important;
  }
}

/* ===== FEATURE / STEP GRIDS — tablet ===== */
@media (max-width: 780px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 500px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Stats row — single col on small mobile */
@media (max-width: 500px) {
  .stats-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .stats-card {
    padding: 20px 16px !important;
  }
}

/* ===== FORM GRIDS — collapse at 700px (tablet) ===== */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-field.full {
    grid-column: 1 !important;
  }
}

/* ===== CHIPS — ensure wrapping, no overflow ===== */
.chips {
  flex-wrap: wrap;
}
.chip {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .chip {
    font-size: 13.5px !important;
    padding: 10px 16px !important;
  }
}

/* ===== CTA ROW BUTTONS — full width on mobile ===== */
@media (max-width: 520px) {
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-cta {
    width: 100% !important;
    min-width: unset !important;
    justify-content: center;
  }
}

/* ===== EXPAND PANELS (index) — tighter on mobile ===== */
@media (max-width: 600px) {
  .cta-panel-body {
    padding-bottom: 28px !important;
  }
  .panel-top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .price-summary {
    padding: 20px 16px !important;
  }
  .price-row.total span:last-child {
    font-size: 24px !important;
  }
}

/* ===== HERO OVERLAY — mobile padding ===== */
@media (max-width: 480px) {
  .hero-overlay {
    padding: 20px 18px 18px !important;
  }
  .hero-overlay h1 {
    font-size: clamp(18px, 5vw, 26px) !important;
    margin-bottom: 10px;
  }
  .hero-overlay p {
    font-size: 13px !important;
    margin-bottom: 12px;
  }
}

/* ===== TEAM / MORE GRIDS ===== */
@media (max-width: 700px) {
  .team-members {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== MORE / RELATED CARDS GRID ===== */
@media (max-width: 760px) {
  .more-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== BLOG GRID ===== */
@media (max-width: 700px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== PRICING / CARD GRIDS ===== */
@media (max-width: 600px) {
  .plans-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== TRANSFORM SECTION ARROW ===== */
@media (max-width: 760px) {
  .transform-grid {
    grid-template-columns: 1fr !important;
  }
  .transform-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }
}

/* ===== INFO ROW (free panel) ===== */
@media (max-width: 640px) {
  .info-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== TEAM WRAP ===== */
@media (max-width: 600px) {
  .team-wrap {
    padding: 24px 20px !important;
  }
}

/* ===== STEP CARD (embedded forms) ===== */
@media (max-width: 600px) {
  .step-card {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 22px 18px !important;
  }
  .free-card {
    padding: 24px 18px !important;
  }
  .socials-toggle-row {
    flex-wrap: wrap;
    gap: 12px !important;
  }
  .coupon-row {
    flex-direction: column;
  }
  .coupon-row .form-field { flex: none; }
  .coupon-row button { width: 100%; }
}

/* ===== TABS NAV ===== */
@media (max-width: 600px) {
  .tabs-nav {
    flex-direction: column;
    gap: 4px !important;
    border-radius: 20px !important;
    padding: 8px !important;
  }
  .tab-btn {
    text-align: center;
    padding: 10px 16px !important;
  }
}

/* ===== GENERAL CONTAINER PADDING ===== */
@media (max-width: 480px) {
  .container,
  .container-wide {
    padding: 0 16px !important;
  }
  .steps {
    padding: 0 16px !important;
  }
}

/* ===== FAQ ===== */
@media (max-width: 600px) {
  .faq-header {
    font-size: 14.5px !important;
    padding: 18px 20px !important;
  }
  .faq-content {
    padding: 4px 20px 20px !important;
    font-size: 14px !important;
  }
}

/* ===== PHOTO GRID in forms ===== */
@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 8px !important;
  }
  .dropzone {
    padding: 36px 18px !important;
  }
}