/* ============================================================
   RESPONSIVE
   Breakpoints (Bootstrap 5 aligned):
     Mobile   < 576px      (base, mobile-first)
     Tablet   ≥ 576/768px  (sm / md)
     Laptop   ≥ 992px      (lg)
     Desktop  ≥ 1200px     (xl)
     Large    ≥ 1400px     (xxl)
   Only component-level adjustments live here; generic layout
   should use Bootstrap's responsive grid + utility classes.
   ============================================================ */

/* ---- Fluid gutters below the design's 73px ---------------- */
@media (max-width: 1199.98px) {
  :root { --container-gutter: 40px; }
}
@media (max-width: 767.98px) {
  :root { --container-gutter: 20px; }
}
/* Chairman's Letter — wider side gutters across the tablet range so the
   pinned-portrait letter layout keeps breathing room from the screen edges
   in both portrait and landscape. Scoped to the page via body.cl-page and
   placed after the :root rules so it wins the equal-specificity cascade. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  body.cl-page { --container-gutter: 64px; }
}

/* ============================================================
   HEADER
   ============================================================ */
/* The blue hamburger is a permanent element (opens the contents
   menu on all breakpoints). Secondary nav items stay inline. */
@media (max-width: 767.98px) {
  .bf-header__divider { display: none; }
  /* Dividers are gone here, so the 25px gap reads as a lot of dead
     space between what are already self-padded 40px icon targets. */
  .bf-header__nav { gap: var(--space-5); }
}

@media (max-width: 575.98px) {
  .bf-header__nav { gap: var(--space-4); }
}

/* Phone: tighten header and collapse the report link to its icon.
   The label is the annual-report PDF download, so it stays tappable
   rather than being hidden — it just drops the long wording and sits
   as a 40px icon target alongside search and the theme toggle. */
@media (max-width: 575.98px) {
  /* Shorter bar here (60px + 1px border) — keep the fixed-header offset in step. */
  :root { --header-h: 61px; }
  .bf-header__inner { min-height: 60px; }
  .bf-header__logo { height: 36px; }
  .bf-header__label {
    position: relative;
    justify-content: center;
    width: 40px;
    height: 40px;
    gap: 0;
    flex-shrink: 0;
  }
  /* Clipped, not display:none, so the link keeps its accessible name. */
  .bf-header__label-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============================================================
   FOOTER  (Download Centre grid)
   ============================================================ */
/* Design layout: two 2×2 card columns flanking a central promo.
   Desktop = 3 tracks; laptop = promo drops below; tablet/phone
   collapse the card grids to fewer columns. */
@media (min-width: 992px) {
  .bf-footer__grid {
    grid-template-columns: 1fr auto 1fr;
  }
  .bf-footer__promo { width: 284px; }
}
@media (max-width: 991.98px) {
  .bf-footer__promo { order: -1; min-height: 220px; }
}
/* Tablet portrait (iPad): the single-column grid stretches the promo to
   full width, so it reads as oversized. Force one column, cap the promo to
   the desktop width and centre it above the card columns. Placed after the
   992px rule so it also overrides the 3-track grid at 1024px portrait. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
  .bf-footer__grid { grid-template-columns: 1fr; }
  .bf-footer__promo {
    order: -1;
    width: 284px;
    max-width: 100%;
    min-height: 220px;
    justify-self: center;
  }
}
@media (max-width: 575.98px) {
  .bf-footer__col { grid-template-columns: 1fr; }
  .bf-footer__title { font-size: var(--fs-2xl); }
}

/* Footer bar — copyright left, agency credit right, held on one row even
   on the narrowest phones. flex-direction/justify-content/align-items all
   come from .footer__inner; nowrap keeps the credit from dropping to its
   own line, so the copyright wraps internally instead. */
@media (max-width: 575.98px) {
  .footer__inner {
    flex-wrap: nowrap;
    text-align: left;
    gap: var(--space-5);
  }
  .footer-credit { flex-shrink: 0; }
  /* Break the notice after "Bajaj Finserv." rather than wherever the
     column happens to run out. Inline above this width. */
  .footer__rights { display: block; }
}

/* ============================================================
   TYPE — scale down oversized display sizes on small screens
   ============================================================ */
@media (max-width: 991.98px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-2xl); }
}
@media (max-width: 575.98px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
}

/* ============================================================
   PAGINATION — allow wrap on very small screens
   ============================================================ */
@media (max-width: 575.98px) {
  .bf-pagination { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   BACK TO TOP — lift the floating button on phones so it clears
   bottom-anchored UI (overrides the clamp default in components.css)
   ============================================================ */
@media (max-width: 767.98px) {
  .bf-to-top { bottom: 72px; }
}