/**
 * CCBI — Global responsive overrides
 * Loaded after style.css and enhance.css
 */

/* ── Display utilities (lg breakpoint = 992px) ── */
@media (min-width: 992px) {
  .d-lg-flex { display: flex !important; }
  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-block { display: block !important; }
}

/* ── Fluid media & embeds ── */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* ── CMS / rich HTML from admin ── */
.cms-managed-page,
.cms-managed-page .rich-content,
.about-page-visitation__intro,
.about-page-visitation__footnote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.cms-managed-page img,
.cms-managed-page video,
.cms-managed-page iframe,
.cms-managed-page table {
  max-width: 100%;
}

.cms-managed-page table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cms-managed-page pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ── Scrollable data tables (public site) ── */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.5rem;
}

.table-scroll .ht {
  min-width: min(100%, 520px);
  width: 100%;
}

@media (max-width: 424px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── Hero split ── */
@media (max-width: 991.98px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
}

@media (max-width: 767.98px) {
  .hero-split .hs-img {
    min-height: 240px !important;
  }

  .hero-split .hs-img img {
    min-height: 240px !important;
  }

  .hero-split .hs-text {
    padding: 32px 20px !important;
  }
}

/* ── About stat badge ── */
@media (max-width: 575.98px) {
  .sb {
    position: static;
    display: inline-block;
    margin: 1rem auto 0;
    right: auto;
    bottom: auto;
  }

  .col-lg-6 .fade-in > div[style*="position:relative"] {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;
  }
}

/* ── Parallax backgrounds (iOS / mobile) ── */
@media (max-width: 991.98px) {
  .quran-section {
    background-attachment: scroll !important;
    padding: 72px 0 !important;
  }

  .q-ar {
    font-size: 1.45rem !important;
    line-height: 1.75 !important;
    padding: 0 1rem;
  }
}

/* ── News card date float ── */
@media (max-width: 424px) {
  .nc .nc-date {
    float: none;
    display: block;
    margin-top: 0.25rem;
  }
}

/* ── Fixed UI: safe areas ── */
#btt {
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

.nav-cart-toast-host {
  right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Header/nav mobile: see header-navbar.css */

/* ── User dashboard ── */
@media (max-width: 575.98px) {
  .user-account-bar__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .user-account-bar__nav {
    justify-content: center;
  }

  .user-dash-order__side {
    align-items: flex-start;
    text-align: start;
    width: 100%;
  }

  .user-dash-order {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Auth card padding on very small screens ── */
@media (max-width: 374px) {
  .auth-card {
    padding: 1.75rem 1.15rem;
  }
}

/* ── Footer columns ── */
@media (max-width: 767.98px) {
  #main-footer .row {
    text-align: center;
  }

  #main-footer .footer-brand-desc {
    margin-left: auto;
    margin-right: auto;
  }

  #main-footer .soc {
    justify-content: center;
  }

  #main-footer .fc p {
    justify-content: center;
  }
}

/* ── Page hero & breadcrumbs ── */
@media (max-width: 424px) {
  .page-hero h1 {
    font-size: 1.25rem !important;
    letter-spacing: 1px !important;
  }

  .ph-bc {
    flex-wrap: wrap;
  }
}