/* Responsive overrides for blogs.html — mobile only.
   Base + hero + filter strip rules live in blogs.css (single source of truth). */

/* ===== 768px — Tablet / Large Phone ===== */
@media (max-width: 768px) {
  .grid {
    padding: 28px 0;
  }
}

/* ===== 640px — Small Phone ===== */
@media (max-width: 640px) {
  /* -- Gutter reduction -- */
  :root {
    --gutter: 20px;
  }

  /* -- Card images: taller on full-width single column -- */
  .card .thumb img {
    height: 200px;
  }

  /* -- Grid spacing -- */
  .grid {
    padding: 20px 0;
    gap: 16px;
  }

  /* -- Select iOS zoom fix -- */
  .select-wrap select {
    font-size: 16px;
  }

  /* -- Hero scroll: smaller on phones -- */
  .hero-scroll {
    bottom: 8px;
    left: 14px;
    gap: 6px;
  }

  .hero-scroll .scroll-text {
    font-size: 7px;
    letter-spacing: 0.12em;
  }

  .hero-scroll .scroll-line {
    height: 28px;
  }

  /* -- Watermark + lines: scale down for small phones -- */
  .hero-watermark {
    font-size: clamp(160px, 46vw, 280px);
    color: rgba(255, 250, 245, 0.05);
    -webkit-text-stroke: 1px rgba(255, 250, 245, 0.08);
  }

  .hero-lines {
    opacity: 0.35;
  }

  .h-line {
    left: 5%;
    width: 90%;
  }
}

/* ===== 480px — Very Small Phone ===== */
@media (max-width: 480px) {
  /* -- Tighter gutter -- */
  :root {
    --gutter: 16px;
  }

  /* -- Card images -- */
  .card .thumb img {
    height: 180px;
  }

  .card .info {
    padding: 14px;
  }

  /* -- Hide heavy hero decorations -- */
  .hero-arc {
    display: none;
  }

  .hero-brand {
    display: none;
  }

  /* -- Watermark: sole decoration now, more visible -- */
  .hero-watermark {
    font-size: clamp(140px, 40vw, 240px);
    color: rgba(255, 250, 245, 0.05);
    -webkit-text-stroke: 1px rgba(255, 250, 245, 0.09);
  }

  .hero-lines {
    opacity: 0.3;
  }

  .h-line {
    left: 0;
    width: 100%;
  }

  /* -- Particles: reduce to subtle -- */
  .hero-particles {
    opacity: 0.5;
  }

  /* -- Loadbar -- */
  .loadbar {
    padding: 16px 0 28px;
  }

  .btn {
    padding: 12px 22px;
    font-size: 13px;
  }

  /* -- Submit CTA -- */
  .submit {
    padding: clamp(28px, 5vh, 44px) 0;
  }

  /* -- Mobile menu inner padding -- */
  .blog-mobile-inner {
    padding: 64px 24px 24px;
  }
}

/* ===== 400px — Smallest Phones ===== */
@media (max-width: 400px) {
  /* -- Touch targets: keep chips tappable -- */
  .chip {
    height: 28px;
    padding: 0 11px;
    font-size: 11px;
  }

  /* -- Gutter at minimum -- */
  :root {
    --gutter: 14px;
  }

}