/* ============================================================
   Shamrock Labs — responsive overrides
   Loaded by all four pages. Uses !important so it wins against
   the inline styles in the React components.
   ============================================================ */

html, body {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

/* Page wrapper — let it fluidly fill viewport up to 1280 max */
.sl-page {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Generic horizontal padding helper for tablet+phone */
@media (max-width: 880px) {
  .sl-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ─── NAV ───
   Desktop: 3-col grid (logo · links · meta)
   Tablet : 2-col (logo · links right-aligned, meta hidden)
   Phone  : flex column or hamburger
*/
@media (max-width: 880px) {
  .sl-nav {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    gap: 12px !important;
  }
  .sl-nav-meta { display: none !important; }
  .sl-nav-links {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 4px 0 8px !important;
    margin: 0 -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sl-nav-links::-webkit-scrollbar { display: none; }
  .sl-nav-links a {
    flex-shrink: 0 !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
  }
}

/* ─── HERO ───
   Use clamp() to scale headlines fluidly between phone and desktop.
*/
.sl-hero { padding: clamp(40px, 8vw, 80px) clamp(20px, 4vw, 32px) clamp(24px, 4vw, 40px) !important; }
.sl-hero-title {
  font-size: clamp(40px, 11vw, 140px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: clamp(20px, 3vw, 40px) !important;
}
.sl-hero-lede {
  font-size: clamp(15px, 2vw, 18px) !important;
  line-height: 1.55 !important;
}

/* Big homepage hero (the "We make / everyday / apps." block) */
.sl-bighero-title {
  font-size: clamp(56px, 17vw, 220px) !important;
  line-height: 0.88 !important;
}
.sl-bighero-row { padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px) !important; }

/* Numbers row above the big hero */
@media (max-width: 720px) {
  .sl-ticker-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* Hero stats row (SHIPPED / RATING) */
@media (max-width: 720px) {
  .sl-hero-stats {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .sl-hero-stats > p { max-width: none !important; }
}

/* ─── APP CARDS ───
   2-col (text | phones) on desktop → 1-col stacked on mobile.
   Phone images shrink and remain visible.
*/
@media (max-width: 880px) {
  .sl-appcard {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .sl-appcard-text {
    border-right: none !important;
    padding: 40px 20px !important;
  }
  .sl-appcard-text h3 {
    font-size: clamp(36px, 8vw, 64px) !important;
  }
  .sl-appcard-text > div:first-child > div:nth-child(2) > div:nth-child(2) {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .sl-appcard-visual {
    padding: 40px 20px !important;
    min-height: 380px !important;
  }
  .sl-appcard-visual > div {
    transform: rotate(-2deg) !important;
    gap: 16px !important;
  }
  .sl-appcard-feature-grid {
    grid-template-columns: 1fr !important;
  }
  .sl-appcard-feature-grid > div {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sl-appcard-cta-row {
    flex-wrap: wrap !important;
  }
  .sl-appcard-cta-row a {
    flex: 1 0 calc(50% - 6px) !important;
    text-align: center !important;
  }
}

/* ─── APPS GALLERY: 3-phone row on tablet/phone ─── */
@media (max-width: 880px) {
  .sl-appcard-3phone {
    transform: rotate(-2deg) !important;
    gap: 12px !important;
  }
  .sl-appcard-3phone > div { transform: none !important; }
}

/* ─── MANIFESTO (1fr / 2fr) ─── */
@media (max-width: 720px) {
  .sl-manifesto {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 60px 20px !important;
  }
  .sl-manifesto-title { font-size: clamp(24px, 5vw, 44px) !important; }
  .sl-manifesto-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ─── NEWSLETTER ─── */
@media (max-width: 720px) {
  .sl-newsletter {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 60px 20px !important;
  }
  .sl-newsletter h2 { font-size: clamp(48px, 13vw, 88px) !important; }
}

/* ─── FOOTER (4 cols → 2 → 1) ─── */
@media (max-width: 720px) {
  .sl-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    padding: 32px 20px !important;
  }
}
@media (max-width: 480px) {
  .sl-footer {
    grid-template-columns: 1fr !important;
  }
}

/* ─── SUPPORT FORM ─── */
@media (max-width: 880px) {
  .sl-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
    padding: 56px 20px !important;
  }
  .sl-contact-form {
    padding-right: 0 !important;
    border-right: none !important;
    padding-bottom: 56px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .sl-contact-aside {
    padding-left: 0 !important;
  }
  .sl-contact-name-email {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sl-contact-stats {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .sl-contact-stats > div {
    padding: 16px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .sl-contact-stats > div:last-child { border-bottom: none !important; padding-left: 0 !important; }
}

/* ─── PRIVACY ─── */
@media (max-width: 720px) {
  .sl-privacy-pillars {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 20px !important;
  }
  .sl-privacy-pillars > div {
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding-bottom: 24px !important;
  }
  .sl-privacy-pillars > div:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
  .sl-privacy-longform {
    padding: 60px 20px 20px !important;
  }
  .sl-privacy-longform > div {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 28px 0 !important;
  }
  .sl-privacy-cta {
    padding: 0 20px 40px !important;
  }
  .sl-privacy-cta > div {
    grid-template-columns: 1fr !important;
    padding: 40px 24px !important;
    gap: 28px !important;
  }
  .sl-privacy-cta h2 { font-size: clamp(28px, 7vw, 44px) !important; }
  .sl-privacy-cta a { justify-self: start !important; }
}

/* ─── APPS HERO COMING-SOON ─── */
@media (max-width: 720px) {
  .sl-apps-coming-soon {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 60px 20px !important;
  }
  .sl-apps-coming-soon h3 { font-size: clamp(36px, 9vw, 64px) !important; }
}

/* Tap targets — buttons / pill chips */
@media (max-width: 880px) {
  a, button { min-height: 44px; }
}

/* Prevent oversized images */
img { max-width: 100%; height: auto; }