/*
 * WebSpin Mobile Responsive Override CSS
 * This file overrides all inline styles for mobile screens.
 * Loaded separately to ensure it always wins over inline styles.
 */

/* ─── TABLET: 768px and below ─── */
@media screen and (max-width: 768px) {

  /* ── Navigation ── */
  .ws-nav { display: none !important; }
  .hamburger { display: flex !important; }

  /* ── Body offset for fixed header ── */
  body { padding-top: 68px !important; }

  /* ── ALL GRIDS: force single column ── */
  /* This catches every inline grid on service pages, homepage sections etc */
  section div[style*="display:grid"],
  div[style*="display:grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* ── Service page: content + sidebar stack ── */
  div[style*="grid-template-columns:1fr 300px"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Homepage 2-col problem/solution ── */
  div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Contact form 2-col ── */
  div[style*="grid-template-columns:1fr 1.5fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Proof bar ── */
  div[style*="justify-content:center;flex-wrap:wrap"] {
    gap: 0 !important;
  }
  div[style*="border-right:1px solid rgba(255,255,255,.08)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 1rem 2rem !important;
    width: 50% !important;
    display: inline-block !important;
  }

  /* ── Hero section ── */
  section[style*="padding:8rem 0 5rem"],
  section[style*="padding:7rem 0 5rem"] {
    padding: 4.5rem 0 3rem !important;
  }
  section[style*="padding:3.5rem 0 4rem"] {
    padding: 2.5rem 0 2.5rem !important;
  }

  /* ── Hero H1 font size ── */
  h1[style*="clamp(2.2rem"] {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }
  h1[style*="clamp(2rem"] {
    font-size: 1.75rem !important;
  }

  /* ── Hero buttons: stack vertically with gap ── */
  div[style*="display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  div[style*="display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom"] a {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
  }

  /* ── CTA section buttons: stack with gap ── */
  div[style*="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  div[style*="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap"] a {
    min-width: 260px !important;
    text-align: center !important;
  }

  /* ── Trust badges row in hero ── */
  div[style*="padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)"] {
    flex-wrap: wrap !important;
    gap: .6rem !important;
  }

  /* ── Service cards: 2 columns ── */
  div[style*="grid-template-columns:repeat(3,1fr);gap:1.4rem"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
  }

  /* ── Client cards: 2 columns ── */
  div[style*="grid-template-columns:repeat(3,1fr);gap:1.1rem"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
  }

  /* ── Testimonials: 1 column ── */
  div[style*="grid-template-columns:repeat(3,1fr);gap:1.4rem"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── Stats/benefit 4-col → 2 col ── */
  div[style*="grid-template-columns:repeat(4,1fr);gap:1.2rem"],
  div[style*="grid-template-columns:repeat(4,1fr);gap:1.5rem"],
  div[style*="grid-template-columns:repeat(4,1fr);gap:1rem"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
  }

  /* ── Process steps: 2 columns ── */
  div[style*="grid-template-columns:repeat(4,1fr);position:relative"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
  }
  /* Hide the horizontal connector line */
  div[style*="position:absolute;top:34px;left:12.5%"] {
    display: none !important;
  }

  /* ── Values/about 2x2 grid ── */
  div[style*="grid-template-columns:1fr 1fr;gap:1.5rem"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Why us dark section 4-col ── */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
  }

  /* ── Compare table ── */
  .ws-compare-hdr,
  .ws-compare-row {
    grid-template-columns: 1fr 65px 65px !important;
  }
  .ws-compare-cell { font-size: .78rem !important; padding: .65rem .6rem !important; }
  .ws-compare-hdr-cell { font-size: .66rem !important; padding: .75rem .6rem !important; }

  /* ── Inner content padding ── */
  div[style*="max-width:1160px;margin:0 auto;padding:0 2rem"] {
    padding: 0 1rem !important;
  }
  div[style*="padding:2.5rem 2.5rem"] { padding: 1.5rem !important; }
  div[style*="padding:2.3rem"] { padding: 1.4rem !important; }
  div[style*="padding:2.5rem"] { padding: 1.5rem !important; }

  /* ── Section padding ── */
  section[style*="padding:5rem 0"] { padding: 3rem 0 !important; }
  section[style*="padding:4rem 0"] { padding: 2.5rem 0 !important; }
  section[style*="padding:5.5rem 0"] { padding: 3.5rem 0 !important; }

  /* ── Sidebar: unstick on mobile ── */
  .ws-sidebar-sticky { position: static !important; top: auto !important; }

  /* ── Client card layout fix ── */
  .ws-client-card { flex-wrap: wrap !important; }

  /* ── Proof bar items max-width ── */
  div[style*="max-width:900px;margin:0 auto"],
  div[style*="max-width:920px;margin:0 auto"],
  div[style*="max-width:760px;margin:0 auto"] {
    max-width: 100% !important;
  }

  /* ── Footer ── */
  .ws-ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
  .ws-ftr-btm { flex-direction: column !important; gap: .8rem !important; text-align: center !important; }
}

/* ─── MOBILE: 480px and below ─── */
@media screen and (max-width: 480px) {

  /* Everything 1 column */
  section div[style*="display:grid"],
  div[style*="display:grid"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:repeat(2,1fr)"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Keep 2-col for small stat cards where there are exactly 4 */
  div[style*="grid-template-columns:repeat(4,1fr);gap:1.2rem"],
  div[style*="grid-template-columns:repeat(4,1fr);gap:1rem"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* Service cards single col */
  div[style*="grid-template-columns:repeat(3,1fr);gap:1.4rem"],
  div[style*="grid-template-columns:repeat(3,1fr);gap:1.1rem"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* Contact info items */
  div[style*="grid-template-columns:1fr 1.5fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Footer single column */
  .ws-ftr-grid { grid-template-columns: 1fr !important; }

  /* H1 sizes */
  h1[style*="clamp"] { font-size: 1.65rem !important; line-height: 1.2 !important; }
  h2[style*="clamp"] { font-size: 1.45rem !important; }

  /* Reduce padding everywhere */
  section[style*="padding:5rem 0"] { padding: 2.5rem 0 !important; }
  section[style*="padding:4rem 0"] { padding: 2rem 0 !important; }
  section[style*="padding:3rem 0"] { padding: 1.8rem 0 !important; }
  div[style*="padding:1.8rem"] { padding: 1.2rem !important; }
  div[style*="padding:1.6rem"] { padding: 1.1rem !important; }

  /* Inner box padding */
  div[style*="padding:2.5rem"] { padding: 1.2rem !important; }
  div[style*="padding:2.3rem"] { padding: 1.2rem !important; }

  /* Compare table minimal */
  .ws-compare-hdr,
  .ws-compare-row { grid-template-columns: 1fr 50px 50px !important; }
  .ws-compare-cell { font-size: .72rem !important; padding: .55rem .4rem !important; }

  /* FAQ */
  .ws-faq-q { font-size: .86rem !important; padding: .85rem .9rem !important; }
  .ws-faq-a { padding: 0 .9rem .85rem !important; font-size: .83rem !important; }

  /* Proof bar: 2 per row */
  div[style*="border-right:1px solid rgba(255,255,255,.08)"],
  div[style*="text-align:center;padding:0 2.5rem"] {
    width: 50% !important;
    padding: .8rem 1rem !important;
  }

  /* Buttons full width */
  a[style*="padding:.9rem 2rem"],
  a[style*="padding:.88rem 2rem"],
  a[style*="padding:1rem 2.2rem"] {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Logo text size */
  .ws-logo-name { font-size: .85rem !important; }
  .ws-logo-sub { font-size: .5rem !important; }
}

/* ─── HEADER LOGO: scale SVG on mobile ─── */
@media screen and (max-width: 768px) {
  .ws-logo-img { height: 38px !important; width: auto !important; }
}
@media screen and (max-width: 480px) {
  .ws-logo-img { height: 32px !important; width: auto !important; }
}


@media screen and (max-width: 768px) {

  /* Footer logo: circle + text nicely spaced */
  .ws-ftr-logo-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 1rem !important;
  }

  /* Shrink the spinning circle slightly on mobile */
  .ws-ftr-logo {
    width: 62px !important;
    height: 62px !important;
    flex-shrink: 0 !important;
  }
  .ws-web-spin {
    width: 62px !important;
    height: 62px !important;
  }

  /* Text block next to circle */
  .ws-ftr-logo-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .ws-ftr-logo-text .ws-logo-name {
    font-size: 1.05rem !important;
    color: #ffffff !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: block !important;
  }
  .ws-ftr-logo-text .ws-logo-sub {
    font-size: .48rem !important;
    color: #C9A84C !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    font-family: 'Inter', sans-serif !important;
    display: block !important;
  }
}

@media screen and (max-width: 480px) {
  .ws-ftr-logo {
    width: 54px !important;
    height: 54px !important;
  }
  .ws-web-spin {
    width: 54px !important;
    height: 54px !important;
  }
  .ws-ftr-logo-wrap {
    gap: 14px !important;
  }
  .ws-ftr-logo-text .ws-logo-name {
    font-size: .98rem !important;
  }
}