/* ==============================================
   Foundry Labs Responsive Overhaul — WU-2b Home
   Homepage frontier, bento, and visual break
   ============================================== */

@media (max-width: 768px) {
  /* H-07: Hide manual line breaks in frontier headings on mobile.
     (The legacy ".empowered*" rule used to live here; harmless now since
     the new heading has no <br>. Kept the selector scoped to the new
     .frontier-* names so any future <br> additions still get hidden.) */
  .frontier-text h2 br,
  .frontier h2 br,
  .frontier-section h2 br {
    display: none;
  }

  /* H-08: Reduce featured bento card height on mobile */
  .bento-featured,
  .card-mini--featured {
    min-height: 240px;
  }

  /* H-09: Tighten bento card spacing on mobile */
  .bento-card,
  .card-mini-body,
  .card-mini-body--sm,
  .card-mini-body--md {
    padding: 24px;
  }

  .card-mini-link {
    padding-inline: 24px;
  }

  /* H-11: Shorten the visual break section on mobile */
  .section-visual-break {
    height: 280px;
    min-height: 280px;
  }
}

@media (max-width: 480px) {
  /* H-07: Scale frontier heading down for very small screens */
  .frontier-text h2,
  .frontier h2,
  .frontier-section h2 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.05;
  }

  /* H-08: Reduce featured bento card height further on small screens */
  .bento-featured,
  .card-mini--featured {
    min-height: 180px;
  }

  /* H-09: Tighten bento card spacing further on small screens */
  .bento-card,
  .card-mini-body,
  .card-mini-body--sm,
  .card-mini-body--md {
    padding: 16px;
  }

  .card-mini-link {
    padding-inline: 16px;
  }

  /* H-10: Reduce bento card typography on very small screens */
  .bento-card h4,
  .card-mini h4 {
    font-size: 18px;
  }

  .bento-card p,
  .card-mini p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* H-11: Shorten the visual break section further on small screens */
  .section-visual-break {
    height: 200px;
    min-height: 200px;
  }

  /* H-12: Scale visual break text down on small screens */
  .section-visual-break-inner p {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.15;
  }
}