/* Mobile-only styles. Loaded only at phone width (see media attribute on the
   stylesheet link in each page), so desktop/web rendering is never affected.
   Add mobile overrides here; do not edit styles.css for mobile changes. */

/* Top bar: thin strip with the Bangladesh number on the left and the UK number on the right */
@media (max-width: 600px) {
  .top-bar { flex-direction: row; justify-content: space-between; gap: 4px; padding: 3px 10px; font-size: 0.55rem; }
  .top-bar a { margin-right: 0; font-size: 0.55rem; }
  .country-flag { font-size: 0.6rem; }
}

/* Logo sits inside the banner image, above the menu. The nameplate is placed
   hanging from the navy menu bar like the desktop version, at every phone width. */
@media (max-width: 600px) {
  .logo-overlap-wrap { top: 0; left: 0; width: 100%; height: 100%; transform: none; padding-top: 3px; }
  .nav-toggle { padding: 6px 16px; font-size: 1.3rem; line-height: 1.2; }
  .logo-overlap-wrap .header-logo { width: 80px; }
  .logo-overlap-wrap .logo-nameplate { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 0; padding: 3px 5px 4px; line-height: 1.15; border-radius: 0 0 5px 5px; }
  .logo-overlap-wrap .np-line1 { font-size: 0.55rem; line-height: 1.15; }
  .logo-overlap-wrap .np-line2 { font-size: 0.68rem; line-height: 1.15; }
}

/* Hero slider: a slim card near the bottom of the photo, so most of the
   background image shows. Sizes are set here because the desktop rules are
   sized for large screens. */
@media (max-width: 600px) {
  .hero-single { min-height: 270px !important; }
  .hero-single .hero-card { background: rgba(251, 248, 240, 0.85) !important; left: 12px !important; right: auto !important; width: 40% !important; max-width: none !important; top: auto !important; bottom: 44px !important; height: 186px !important; transform: none !important; padding: 8px 8px 46px !important; }
  .hero-single .hero-card h1 { font-size: 13px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
  .hero-single .hero-card p { font-size: 9.5px !important; margin-bottom: 6px !important; }
  .hero-single .hero-eyebrow { display: block !important; font-size: 0.5rem !important; margin-bottom: 6px !important; }
  .hero-single .hero-cta-btn { position: absolute !important; left: 8px !important; bottom: 8px !important; width: auto !important; max-width: none !important; height: auto !important; padding: 4px 6px !important; font-size: 0.45rem !important; white-space: nowrap; }
  .hero-single .hero-arrow { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
  .hero-single .hero-dots { bottom: 14px !important; }
  .hero-single-slide:nth-child(3) { background-position: 95% center; }
  .hero-single-slide:nth-child(4) { background-position: 0% center; }
}

/* Courses subtitle wraps instead of running off the screen */
@media (max-width: 600px) {
  .courses-subtitle { font-size: 0.9rem; padding: 0 5%; }
}

/* Course cards: the artwork is portrait (1100x1430). Give each card that shape
   and stretch the image to fill it, so the whole design shows on phones. */
@media (max-width: 600px) {
  .card { height: auto; aspect-ratio: 1100 / 1430; background-size: 100% 100%; }
}

/* Course card text: titles sit below the arch line, body text takes its natural
   height, and each call-to-action is pinned to the bottom of its card so the
   three parts line up across all four cards. */
@media (max-width: 600px) {
  .card { padding-bottom: 20px; }
  .card h3 { margin: 56px 0 10px; padding: 0 24px; }
  .card p { flex: none; margin: 0 0 16px; padding: 0 24px; }
  .card-link { margin-top: auto; margin-left: 24px; padding: 12px 0; }
}

/* Banner: phone version of the image with the white middle removed, so the
   two mosque pictures sit closer to the logo. Desktop keeps the original image. */
@media (max-width: 600px) {
  .header-banner { height: auto; aspect-ratio: 1672 / 373; background: url('images/headerbg-mobile.png') center top / 100% 100% no-repeat; }
  .header-banner .header-bg-img { display: none; }
}

/* Menu button sits just to the right of the nameplate, on the navy bar (top and
   sticky). Phones only. */
@media (max-width: 600px) {
  .main-nav { position: relative; z-index: auto; height: 37px; }
  .main-nav .nav-toggle { position: absolute; left: calc(50% + 74px); top: 50%; transform: translateY(-50%); padding: 4px 8px; }
}

/* Phone: the moved nameplate keeps its phone size inside the sticky bar */
@media (max-width: 600px) {
  #stickyCloneHeader .logo-nameplate { padding: 3px 5px 4px; border-radius: 0 0 5px 5px; }
  #stickyCloneHeader .np-line1 { font-size: 0.55rem; line-height: 1.15; }
  #stickyCloneHeader .np-line2 { font-size: 0.68rem; line-height: 1.15; }
}