/* ==========================================================================
   Gulf Legacy Publications — responsive.css
   Bootstrap's grid + utilities carry the responsive layout; this file only
   holds the handful of breakpoint tweaks Bootstrap can't do on its own.
   Loaded after style.css so these rules win.
   ========================================================================== */

/* ------------------------------------------------------------------
   Below lg — the navbar collapses. Give the open panel some breathing
   room and let the CTA sit inline-left rather than stretch full width.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .glp-navbar .navbar-collapse {
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
  }
  .glp-navbar .navbar-nav .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .glp-navbar .glp-btn-primary {
    display: inline-block;
  }

  /* stacked hero / protocol columns — widen the prose measure */
  .glp-measure {
    max-width: none;
  }
  .glp-placeholder--hero {
    aspect-ratio: 16 / 10;
  }
  .glp-placeholder--mono {
    aspect-ratio: 3 / 2;
  }
}

/* ------------------------------------------------------------------
   Small phones — stack the hero CTAs full width, ease the headings.
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .glp-hero .d-flex.flex-wrap .btn {
    width: 100%;
  }
  .glp-card-title {
    font-size: 1.15rem;
  }
  .glp-placeholder--mono {
    aspect-ratio: 4 / 3;
  }
}