/* ═══════════════════════════════════════════════════════
   BETTERCAUSE — MOBILE RESPONSIVE FIXES
   Covers: phones, large phones, tablets, iPads
═══════════════════════════════════════════════════════ */

/* ── GLOBAL OVERFLOW FIX ── */
html, body { overflow-x: hidden; max-width: 100%; }

section,
.light-bg-wrap,
.dark-bg-wrap,
.blisting-hero,
.blisting-main,
.bpost-body,
.bpost-hero__inner,
.blog-section,
.partners-section,
.features-section,
.how-section,
.about-section,
.appcta-section,
.brand-section,
.contact-bridge,
.faq2-section,
footer {
  max-width: 100%;
  overflow-x: hidden;
}

.blog-grid {
  width: 100%;
  box-sizing: border-box;
}

/* ════════════════════════════════════════════
   MOBILE (≤ 768px)
════════════════════════════════════════════ */
@media (max-width: 767px) {

  body { overflow-x: hidden; }

  /* ── NAVBAR ── */
  .navbar { padding: 0 20px; height: 60px; }
  .navbar__links { display: none; }
  .navbar__ctas .btn--ghost { display: none; }
  .navbar__ctas { gap: 8px; }
  .btn--solid { padding: 9px 16px; font-size: .82rem; }
  .navbar__logo-img { height: 20px; }

  /* ════════════════════════════════════════
   HERO — MOBILE FIX
════════════════════════════════════════ */
.hero {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding: calc(var(--navbar-h) + 28px) 16px 0;
  min-height: 100svh;
  align-items: start;
  justify-items: center;
  position: relative;
  overflow: hidden;
}

.hero__center {
  grid-column: 1;
  width: 100%;
  max-width: 100%;
  text-align: center;
  align-items: center;
  margin-top: 0;
  padding-bottom: clamp(250px, 72vw, 360px);
  position: relative;
  z-index: 5;
}

.hero__headline {
  font-size: clamp(1.8rem, 7vw, 2.2rem);
  text-align: center;
}

.hero__sub {
  font-size: clamp(.85rem, 3.5vw, .95rem);
  text-align: center;
  margin-top: 10px;
  max-width: 100%;
}

.hero__search {
  margin-top: clamp(24px, 5vw, 40px);
  max-width: 100%;
}

/* LEFT PHONE — stick to left, no padding */

.hero__phone-img {
  width: 100%;
  height: auto;
  display: block;
}

/* HERO MOBILE RESPONSIVE SCALE SYSTEM */
.hero {
  --hero-phone-w: min(43vw, 230px);
  --hero-card-w: min(40vw, 195px);
  --hero-card-ratio: 1.55;
  --hero-badge-scale: clamp(.58, 1.9vw, .78);
}

/* LEFT PHONE — dynamically follows screen width */
.hero__phone-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: var(--hero-phone-w);
  z-index: 2;
  pointer-events: none;
  margin: 0;
  animation: none;
}

/* If the PNG itself has transparent padding, keep this */
.hero__phone-img {
  width: 100%;
  height: auto;
  display: block;
}

/* RIGHT PRODUCT CARDS — dynamic width + proportional height */
.hero__cards {
  display: block;
  position: absolute;
  right: 0;
  bottom: max(12px, 4vw);
  top: auto;
  left: auto;
  width: var(--hero-card-w);
  height: calc(var(--hero-card-w) * var(--hero-card-ratio));
  transform: none;
  animation: none;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.product-card--1 {
  width: 80%;
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  transform: none;
}

.product-card--2 {
  width: 68%;
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  transform: rotate(8deg);
}

.badge {
  display: inline-flex;
  transform: scale(var(--hero-badge-scale));
  transform-origin: center;
  min-height: 32px;
  padding: 6px 11px;
  font-size: .7rem;
  gap: 4px;
  z-index: 5;
  box-shadow: 0 6px 14px rgba(22, 20, 52, 0.14);
}

/* Mobile badge positions */
.badge--organic {
  top: 4%;
  left: -20%;
}

.badge--vegan2 {
  top: 85%;
  right: 15%;
}

.badge--halal {
  right: -20%;
  bottom: 72%;
}

.badge--animal {
  left: -28%;
  bottom: 90%;
}

.hero__circle-bottom {
  width: clamp(420px, 120vw, 700px);
}


  /* ── LIGHT BG WRAP ── */
  .light-bg-wrap { overflow: hidden; }

  /* ── ABOUT ── */
  .about-section { padding: 60px 20px; min-height: auto; }
  .about-header { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
  .about-title { font-size: 1.4rem; }

  /* ════════════════════════════════════════
     HOW IT WORKS
  ════════════════════════════════════════ */
  .how-section {
    padding: 60px 20px 80px;
    min-height: auto;
  }

  /* ↓ Increased from 96px — pushes first step further from the subtitle */
  .how-header { margin-bottom: 96px; }
  .how-title { font-size: 1.8rem; }

  .how-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
/* HOW PHONES — mobile centered overlap */
.how-phones {
  --how-phone-w: clamp(118px, 36vw, 170px);
  --how-phone-h: calc(var(--how-phone-w) * 2.16);
  --how-overlap-x: calc(var(--how-phone-w) * 0.34);

  order: -1;
  width: 100%;
  height: calc(var(--how-phone-h) + 24px);
  position: relative;
  overflow: visible;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide purple circle on non-tablet mobile */
.how-phones__blob {
  display: none;
}

.how-phone-img {
  position: absolute;
  width: var(--how-phone-w);
  height: var(--how-phone-h);
  object-fit: contain;
  object-position: center;
  top: 50%;
}

/* Back phone — slightly left */
.how-phone-img--back {
  left: 40%;
  transform: translateX(calc(-50% - var(--how-overlap-x))) translateY(-50%);
  z-index: 1;
}

/* Front phone — slightly right and above */
.how-phone-img--front {
  left: 60%;
  right: auto;
  transform: translateX(calc(-50% + var(--how-overlap-x))) translateY(-50%);
  z-index: 3;
}

  /* ↓ Added margin-top so the steps sit further below the phones */
  .how-steps {
    width: 100%;
    margin-top: 24px;
  }

  .how-step { padding: 18px 12px; }
  .how-step--active .how-step__title { font-size: 1.1rem; }
  .how-step:not(.how-step--active) .how-step__title { font-size: 1.1rem; }
  .how-step__desc { font-size: .88rem; }

  /* ════════════════════════════════════════
     FEATURES
  ════════════════════════════════════════ */
  .features-section { padding: 60px 20px 80px; }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }

  .feat-card--tall { margin-top: 0; margin-bottom: 0; }
  .feat-card__visual { height: 200px; }

  /* ── PARTNERS ── */
  .partners-section { padding: 60px 20px 80px; min-height: auto; }
  .partners-logos-wrap { padding: 28px 20px; }
  .partners-logos { flex-direction: column; gap: 28px; align-items: center; }
  .partners-story { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .partners-story__left { padding-left: 32px; }
  .partners-story__img { height: 200px; }

  /* ── BLOG ── */
  .blog-section { padding: 60px 20px 60px; min-height: auto; }
.blog-grid { flex-direction: column; height: auto !important; gap: 14px; }
  .blog-card { flex: 0 0 auto !important; width: 100%; }
  .blog-card.is-open { flex: 0 0 auto !important; }
  .blog-card__img { width: 100px; height: 100px; }

  /* ── DARK BG WRAP ── */
  .dark-bg-wrap { overflow: hidden; }

  /* ── FAQ ── */
  .faq2-section { grid-template-columns: 1fr; gap: 40px; padding: 60px 20px 80px; min-height: auto; }
  .faq2-title { font-size: 2rem; }

  /* ── APP CTA ── */
.appcta-section { padding: 40px 20px 60px !important; min-height: auto; }
  .appcta-card { padding: 48px 24px 40px; text-align: center; align-items: center; }
  .appcta-phone { display: none; }
  .appcta-body { gap: 32px; max-width: 100%; }
  .appcta-title { font-size: 1.6rem; }
  .appcta-stores { flex-direction: column; align-items: center; gap: 12px; }
  .appcta-store-btn { width: 100%; max-width: 260px; justify-content: center; }
  .appcta-note {
  margin-top: 12px;
}

  /* ── CONTACT BRIDGE ── */
  .contact-bridge {
    position: relative;
    z-index: 20;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    padding: 40px 24px;
  }

  .contact-cards { flex-direction: column; gap: 14px; }
  .contact-title { font-size: 1.3rem; text-align: center; color: #1C1C28;}

  .brand-section {
    padding: 40px 20px 60px;
    min-height: auto;
  }

  .brand-body { grid-template-columns: 1fr; gap: 32px; }
  .brand-form-wrap { padding: 28px 20px; }
  .brand-form__row { grid-template-columns: 1fr; gap: 12px; }

  /* ── FOOTER ── */
  .footer { padding: 32px 20px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__legal-btns { flex-direction: column; gap: 10px; }
  .footer__legal-btn { text-align: center; }
  .footer__copy { text-align: left; }

  /* ── BLOG LISTING ── */
  .blisting-hero { padding: calc(var(--navbar-h) + 80px) 20px 80px;     overflow: hidden !important;
    isolation: isolate; }
  .blisting-hero {
    overflow: hidden !important;
    isolation: isolate;
  }

  .blisting-hero__bg {
    inset: 0 !important;
    overflow: hidden !important;
    opacity: 1;
  }

  .blisting-hero__orb {
    filter: blur(36px) !important;
    animation: none !important;
  }

  .blisting-hero__orb--1 {
    width: 350px !important;
    height: 260px !important;
    top: -70px !important;
    left: -90px !important;
    background: rgba(185, 94, 255, 0.18) !important;
  }

  .blisting-hero__orb--2 {
    width: 230px !important;
    height: 350px !important;
    top: 40px !important;
    right: -100px !important;
    background: rgba(84, 103, 249, 0.15) !important;
  }

  .blisting-hero__orb--3 {
    display: none !important;
  }
  .blisting-hero__title { font-size: 1.5rem; }
  .blisting-main { padding: 40px 20px 60px; }
.blisting-main-bg .blog-grid {
  height: auto !important;
  gap: 16px;
}


  .blisting-story { margin-top: 40px; }
/* ── BLOG LISTING MOBILE: 1 column, max 2 cards visible ── */
.blisting-blog-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 360px !important;

  max-height: calc((360px * 2) + 16px + 28px) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  gap: 16px !important;
  padding: 14px !important;
  box-sizing: border-box;

  background: rgba(255,255,255,0.72) !important;
  -webkit-overflow-scrolling: touch;
}

.blisting-blog-grid .blog-card {
  width: 100% !important;
  height: 360px !important;
  min-height: 360px !important;
  overflow: hidden !important;
}

.blisting-blog-grid .blog-card__inner {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}

.blisting-blog-grid .blog-card__content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.blisting-blog-grid .blog-card__img {
  width: 100% !important;
  height: 140px !important;
  flex-shrink: 0 !important;
  object-fit: cover;
}

.blisting-blog-grid .blog-card__snippet {
  -webkit-line-clamp: 2 !important;
}

.blisting-blog-grid .blog-card__footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}
/* ── BLOG POST ── */
.bpost-hero__inner {
  padding: 0 20px 40px;
  grid-template-columns: 1fr;
  gap: 28px;
}

.bpost-hero__title {
  font-size: 1.8rem;
}

.bpost-hero__img {
  height: 220px;
}

.bpost-body {
  padding: 32px 20px 60px;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* IMPORTANT: article first, other blogs below */
.bpost-article {
  order: 1;
  padding: 32px 24px;
}

.bpost-sidebar {
  order: 2;
  position: static;
  width: 100%;
}

.bpost-sidebar__label {
  margin-bottom: 14px;
}

#otherPosts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
}


/* ════════════════════════════════════════════
   SMALL PHONES (≤ 480px)
════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --navbar-h: 60px; }
.hero {
  padding:
    calc(var(--navbar-h) + clamp(28px, 6vw, 48px))
    clamp(20px, 5vw, 40px)
    0;
}
.hero__center {
  padding-bottom: clamp(230px, 76vw, 320px);
}

.hero {
  --hero-phone-w: min(44vw, 175px);
  --hero-card-w: min(39vw, 158px);
  --hero-card-ratio: 1.58;
  --hero-badge-scale: clamp(.5, 1.7vw, .65);
}

.hero__phone-wrap {
  left: 0;
  width: var(--hero-phone-w);
}

.hero__cards {
  right: 0;
  width: var(--hero-card-w);
  height: calc(var(--hero-card-w) * var(--hero-card-ratio));
}

.hero__headline {
  font-size: clamp(1.5rem, 6.5vw, 1.8rem);
}

.how-phones {
  --how-phone-w: clamp(108px, 35vw, 145px);
  --how-overlap-x: calc(var(--how-phone-w) * 0.32);
}
  /* ↓ Extra breathing room on small phones too */
  .how-steps { margin-top: 28px; }

  .features-grid { gap: 28px; }
  .feat-card__visual { height: 170px; }

  /* Contact / brand sync */
  .appcta-section { padding: 32px 16px 48px; }
  .contact-bridge { margin: 0; width: 100%; box-sizing: border-box; border-radius: 0; padding: 32px 18px; }
  .brand-section { padding: 40px 16px 48px; }

  .faq2-section { padding: 48px 16px 64px; }
  .faq2-title { font-size: 1.65rem; }
  .contact-title { font-size: 1.15rem; }
  .blog-title { font-size: 1.5rem; }
  .partners-title { font-size: 1.6rem; }
  .footer { padding: 28px 16px; }
}


/* ════════════════════════════════════════════
   VERY SMALL PHONES (≤ 360px)
════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* Hero — smaller phone size */
.hero__center {
  padding-bottom: 230px;
}

.hero {
  --hero-phone-w: 38vw;
  --hero-card-w: 31vw;
  --hero-card-ratio: 1.65;
  --hero-badge-scale: .48;
}

.hero__phone-wrap {
  left: 0;
  width: var(--hero-phone-w);
}

.hero__cards {
  right: 0;
  width: var(--hero-card-w);
  height: calc(var(--hero-card-w) * var(--hero-card-ratio));
}

.hero__headline {
  font-size: clamp(1.35rem, 6vw, 1.5rem);
}

.how-phones {
  --how-phone-w: 32vw;
  --how-overlap-x: calc(var(--how-phone-w) * 0.3);
}
  .appcta-section { padding: 28px 12px 40px; }
  .contact-bridge { margin: 0; width: 100%; box-sizing: border-box; border-radius: 0; padding: 28px 14px; }
  .brand-section { padding: 40px 12px 40px; }

  .faq2-title { font-size: 1.45rem; }
  .blisting-hero__title { font-size: 1.15rem; }
  .bpost-hero__title { font-size: 1.3rem; }
}


/* ════════════════════════════════════════════
   LANDSCAPE PHONES
════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--navbar-h) + 16px) 24px 0;
  }
  .hero__center { margin-top: 8px; }
  .hero__headline { font-size: 1.4rem; }
  .hero__sub { font-size: .8rem; }
  .hero__search { margin-top: 12px; }
  .hero__phone-wrap { width: clamp(100px, 25vw, 150px); }
  .hero__cards {
    width: clamp(90px, 22vw, 130px);
    height: clamp(160px, 32vw, 200px);
    bottom: 10px;
  }
  .hero__circle-bottom { display: none; }
  .faq2-section { min-height: auto; padding: 48px 20px; }
  .appcta-section { padding: 32px 20px 160px; }
  .brand-section { min-height: auto; }
  .contact-bridge { margin: 0; width: 100%; box-sizing: border-box; border-radius: 0; }
}

@media (min-width: 768px) and (max-width: 1180px) {
  :root {
    --navbar-h: 68px;
  }

  .navbar {
    padding: 0 28px;
  }

  .navbar__links {
    display: none;
  }

  .hero {
    padding: var(--navbar-h) 32px 0;
    grid-template-columns: minmax(160px, .75fr) minmax(340px, 1.25fr) minmax(180px, .8fr);
  }

.hero {
  --hero-phone-w: min(28vw, 340px);
  --hero-card-w: min(24vw, 265px);
  --hero-card-ratio: 1.52;
}

.hero__phone-wrap {
  left: 0;
  width: var(--hero-phone-w);
}

.hero__cards {
  right: clamp(16px, 2vw, 28px);
  width: var(--hero-card-w);
  height: calc(var(--hero-card-w) * var(--hero-card-ratio));
}
  .hero__headline {
    font-size: clamp(2rem, 3.8vw, 3rem);
  }

  .hero__search {
    margin-top: clamp(40px, 7vh, 90px);
  }

  .appcta-section {
    padding: 72px 40px 140px !important;
  }

  .appcta-card {
    padding-left: 320px;
  }

  .appcta-phone {
    left: 24px;
    width: 240px;
  }

  .appcta-phone__img {
    width: 240px;
  }
}