/*!
 * BetterYou Co — Layout
 * -----------------------------------------------------------------------
 * Responsive grid helpers and breakpoint-driven typography scaling.
 * Breakpoints match Bootstrap 5's own (576 / 768 / 992 / 1200) so these
 * rules stay in lockstep with any Bootstrap col-*/d-*-flex classes used
 * alongside them.
 * -----------------------------------------------------------------------
 */

/* Auto-fit responsive grids: N columns down to 1 on small screens */
.by-grid {
  display: grid;
  gap: var(--by-space-5);
}
.by-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.by-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.by-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
  .by-grid-3, .by-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .by-grid-2, .by-grid-3, .by-grid-4 { grid-template-columns: 1fr; }
}

/* Hero: two columns desktop -> stacked mobile */
.by-hero {
  display: flex;
  align-items: center;
  gap: var(--by-space-9);
}
.by-hero__copy { flex: 0 0 52%; }
.by-hero__media { flex: 1; display: flex; justify-content: center; }
@media (max-width: 991.98px) {
  .by-hero { flex-direction: column; text-align: center; }
  .by-hero__copy { flex: none; width: 100%; }
  .by-hero__media { width: 100%; }
}

/* Fluid type scale */
h1, .by-display { font-size: clamp(1.75rem, 1.2rem + 2.2vw, var(--by-fs-display)); }
h2, .by-h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, var(--by-fs-h1)); }

@media (max-width: 767.98px) {
  :root { --by-header-height: 72px; }
  .by-hero__copy p { font-size: var(--by-fs-body); }
}

/* Center a floating card stack (hero illustration mockups) responsibly
   on narrow screens — the absolutely-positioned "second card" accents
   are hidden below md since there's no room for the offset without
   overlapping content. */
@media (max-width: 767.98px) {
  .by-hero__media .by-float-accent { display: none; }
}

/* Sticky quiz shell padding accounts for the smaller mobile header */
@media (max-width: 575.98px) {
  .by-quiz-card { padding: var(--by-space-5) !important; }
}