/* =====================================================
   adshaper360 — Responsive Stylesheet
   Mobile-first overrides + the two documented bug fixes:
   1) Wordmark must NEVER disappear on mobile (no hidden/sm:inline trick)
   2) Hero section must not have excess top empty space on mobile
   ===================================================== */

/* =========================================================
   MOBILE BASE (default, applies to all sizes unless overridden)
   ========================================================= */

/* ---- Fix 1: wordmark always visible ----
   The nav logo text uses `display: inline` by default in main.css
   and is never hidden at any breakpoint. This rule exists to make
   that intent explicit and to override any cached/legacy utility
   class (e.g. a stray `hidden` class left on the element by mistake). */
.nav-logo-text,
.nav-logo-text.hidden {
  display: inline !important;
}

/* ---- Fix 2: remove excess top space above hero on mobile ----
   Root cause in the original SPA was generic min-height:100vh hero
   padding stacked on top of fixed-nav offset, leaving a large gap
   on short mobile viewports. We pin a tighter, explicit offset here
   using ID-level specificity so it always wins regardless of source
   order in the cascade. */
#hero-section,
.hero-section {
  min-height: auto;
  padding-top: 5.25rem; /* nav height (70px) + small breathing room */
  padding-bottom: 2.5rem;
}
.hero-grid { gap: 2rem; }
.hero-heading { font-size: 2rem; margin-bottom: 1.25rem; }

/* ===== Navbar mobile ===== */
.main-nav { padding: 0 1.25rem; }
.desktop-nav { display: none; }
.nav-cta.desktop-cta { display: none; }
.mobile-menu-btn { display: inline-flex; }

/* ===== Hero visual hidden on mobile (matches original lg:block behavior) ===== */
.hero-visual { display: none; }

/* ===== Stats bar mobile ===== */
.stats-bar-grid { grid-template-columns: 1fr 1fr; }

/* ===== Services grid mobile ===== */
.services-grid { grid-template-columns: 1fr; }

/* ===== Process: mobile shows accordion, hides desktop timeline ===== */
.timeline-wrap { display: none; }
.process-accordion-list { display: flex; }

/* ===== Case teaser / testimonials / pricing mobile ===== */
.case-teaser-grid,
.testimonials-grid,
.pricing-grid,
.values-grid,
.team-grid,
.service-detail-grid,
.contact-grid,
.articles-grid,
.footer-grid,
.cases-grid {
  grid-template-columns: 1fr;
}

.newsletter-row { flex-direction: column; }

/* ===== About hero mobile ===== */
.about-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
.about-visual-wrap { display: flex; justify-content: center; }

/* ===== Team grid mobile: 2 columns ===== */
.team-grid { grid-template-columns: 1fr 1fr; }

/* ===== Service detail rows: stack, ignore order swap on mobile ===== */
.service-detail-grid { grid-template-columns: 1fr; }
.service-detail-grid .order-md-2,
.service-detail-grid .order-md-1 {
  order: initial;
}

/* =========================================================
   TABLET (≥640px)
   ========================================================= */
@media (min-width: 640px) {
  .nav-logo-text { font-size: 1.125rem; }
  .case-teaser-grid,
  .values-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .services-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   DESKTOP (≥768px)
   ========================================================= */
@media (min-width: 768px) {
  .main-nav { padding: 0 2rem; }
  .desktop-nav { display: flex; }
  .nav-cta.desktop-cta { display: inline-flex; }
  .mobile-menu-btn { display: none; }

  #hero-section,
  .hero-section {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 4rem;
  }
  .hero-heading { font-size: 3.5rem; }

  .stats-bar-grid { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: repeat(3, 1fr); }

  .timeline-wrap { display: block; }
  .process-accordion-list { display: none; }

  .case-teaser-grid,
  .testimonials-grid,
  .values-grid,
  .pricing-grid,
  .cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .service-detail-grid .order-md-2 { order: 2; }
  .service-detail-grid .order-md-1 { order: 1; }

  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  .articles-grid { grid-template-columns: 1fr 1fr; }

  .newsletter-row { flex-direction: row; }
}

/* =========================================================
   LARGE DESKTOP (≥1024px)
   ========================================================= */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-visual { display: block; }
  .about-hero-grid { grid-template-columns: 1fr 1fr; }
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   ARTICLE SINGLE PAGE — responsive type sizing
   ========================================================= */
@media (min-width: 768px) {
  .article-single-header h1 { font-size: 2.75rem; }
}

/* =========================================================
   PERFORMANCE — MOBILE PAINT REDUCTION
   Targets the three PageSpeed issues not covered above:
   1) Blob size + GPU cost on small screens
   2) LCP element (hero headline) hidden by animate-on-scroll
   3) Compositing cost of btn shimmer + nav backdrop blur
   ========================================================= */

/* ---- Blobs: smaller + slower on mobile = less GPU fill rate ---- */
@media (max-width: 639px) {
  .hero-mesh .blob-1 {
    width: 260px;
    height: 260px;
    animation-duration: 12s;
  }
  .hero-mesh .blob-2 {
    width: 200px;
    height: 200px;
    animation-duration: 15s;
  }
  /* blob-3 removed entirely on small screens — lowest visual value,
     highest GPU cost (overlaps main content area). */
  .hero-mesh .blob-3 {
    display: none;
  }

  /* ---- LCP fix: hero headline must render at full opacity immediately.
     animate-on-scroll starts at opacity:0 / translateY(30px) — fine for
     below-fold content but the hero h1 IS the LCP element. Letting JS
     trigger its reveal adds 200–400 ms to LCP on slow connections.
     We force it visible in CSS so it's always painted on first frame. ---- */
  .hero-section .animate-on-scroll:first-child,
  #hero-section .animate-on-scroll:first-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ---- Reduce compositing cost ---- */
  /* Shimmer sweep on .btn-gradient uses a translateX animation that
     forces a new layer. Disable it on mobile — buttons are tapped
     not hovered anyway. */
  .btn-gradient::after { display: none; }

  /* Nav backdrop-filter: blur() triggers a compositor layer on every
     scroll event. Replace with a flat opaque background instead — same
     visual purpose, zero compositor cost. */
  .main-nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 14, 39, 0.97);
  }

  /* ---- Marquee: slow down on mobile to reduce rAF budget ---- */
  .marquee-track { animation-duration: 30s; }

  /* ---- Glow dot: drop the pulse on mobile ---- */
  .glow-dot { animation: none; }
}

/* ---- Respect OS reduce-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh .blob { animation: none !important; }
  .marquee-track    { animation: none !important; }
  .glow-dot         { animation: none !important; }
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn-gradient::after { display: none; }
}