/* ==================================================================
   V8 — Responsive & alignment fixes from a full device audit
   (320 / 360 / 375 / 390 / 414 / 768 / 820 / 1024 / 1280 / 1366 / 1440 / 1920)
   Loaded last.
   ================================================================== */

/* Skip link: fully off-screen until focused (never peeks on small screens) */
.skip-link { top: 0; transform: translateY(-130%); transition: transform .2s ease; }
.skip-link:focus { transform: none; }

/* ---------- Initiatives: balanced rows, leftover cards centred ---------- */
@media (max-width: 1199.98px) {
  .initiative-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
  .initiative-grid > .initiative-card { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); }
}
@media (max-width: 767.98px) {
  .initiative-grid { gap: 14px; }
  .initiative-grid > .initiative-card { flex-basis: calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); }
}
@media (max-width: 519.98px) {
  .initiative-grid > .initiative-card { flex-basis: 100%; max-width: 100%; }
}

/* ---------- Section headers: stack on tablet so headings aren't squeezed ---------- */
@media (max-width: 991.98px) {
  .offerings-head { display: block; }
  .offerings-head h2 { max-width: 640px; }
  .offerings-head p { margin-top: 12px; max-width: 640px; }

  .gallery-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gallery-head p { max-width: 640px; }

  .projects-layout { display: block; }
  .projects-intro { margin-bottom: 22px; max-width: 640px; }
  .projects-intro h2 br { display: none; }
  .projects-intro h2 { font-size: clamp(26px, 4vw, 34px); }
  .projects-intro p { max-width: 560px; }
}

/* Gallery filter chips: one tidy scrolling row on tablet too */
@media (max-width: 991.98px) {
  .gallery-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 6px; scrollbar-width: none; }
  .gallery-filters::-webkit-scrollbar { display: none; }
}

/* ---------- Footer bottom: no stray divider when the line wraps ---------- */
@media (max-width: 767.98px) {
  /* divider becomes a clean line break: "Powered by Channel Softech" starts on its own line */
  .footer-bottom p .credit-divider { display: block; height: 0; overflow: hidden; visibility: hidden; margin: 0; }
}