/* ==========================================================================
   EngageMinds — responsive.css
   Breakpoint-specific adjustments layered on top of style.css and Bootstrap's
   own grid/utility breakpoints. Mobile-first; Bootstrap handles most of the
   grid work, this file fixes brand-specific components at small sizes.
   ========================================================================== */

/* Top contact bar (Task 1) --------------------------------------------------*/
@media (max-width: 991.98px) {
  .topbar__contact .topbar__website { display: none; }
}

@media (max-width: 767.98px) {
  .topbar .container { min-height: 38px; padding-top: 0.35rem; padding-bottom: 0.35rem; gap: 0.75rem; }
  .topbar__contact { gap: 0.9rem; }
  .topbar__contact i { font-size: 0.92rem; }
  .topbar__label { display: none; }
  .topbar__social { gap: 0.4rem; }
  .topbar__social a { width: 24px; height: 24px; font-size: 0.7rem; }
}

@media (max-width: 374.98px) {
  .topbar .container { gap: 0.5rem; }
  .topbar__contact { gap: 0.6rem; }
  .section-padding { padding: 3.25rem 0; }
  .cta-band { padding: 2.25rem 1.25rem; }
  .btn { padding: 0.7rem 1.25rem; font-size: 0.88rem; }
  .floating-actions { right: 0.85rem; bottom: 0.85rem; }
  .fab { width: 48px; height: 48px; font-size: 1.2rem; }
}

/* Phones (< 576px) ----------------------------------------------------------*/
@media (max-width: 575.98px) {
  .section-padding { padding: 3.5rem 0; }
  .section-padding-sm { padding: 2.5rem 0; }
  .page-hero { padding: 2.25rem 0 3rem; text-align: center; }
  .breadcrumb-bar { font-size: 0.78rem; }
  .about-hero { min-height: 460px; }
  .about-hero__content { padding: 2.5rem 0; }
  .cta-band { padding: 2.5rem 1.5rem; text-align: center; }
  .testimonial-card { padding: 1.5rem; }
  .contact-form-card { padding: 1.5rem; }
  .em-carousel__row { gap: 0.6rem; }
  .em-carousel__arrow { width: 38px; height: 38px; font-size: 0.95rem; }
  .em-carousel__dots { margin-top: 1.5rem; }
  .footer-logo-plate img { height: 28px; }
  .site-footer { text-align: center; }
  .footer-contact-item { justify-content: center; }
  .social-icons { justify-content: center; }
  .journey-step { padding: 0.5rem 0.5rem 1.75rem; }
}

/* Tablets (768px – 991.98px) ------------------------------------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cta-band { padding: 3rem 2rem; }
}

/* Mobile navigation offcanvas-style collapse -------------------------------- */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--em-white);
    border-radius: var(--radius-md);
    margin-top: 0.85rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    max-height: calc(100vh - var(--header-height) - 1.5rem);
    overflow-y: auto;
  }

  .navbar-nav { width: 100%; }

  .navbar-nav .nav-link {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--em-border);
    border-radius: 0;
  }

  .navbar-nav .nav-item:last-of-type .nav-link { border-bottom: none; }

  .dropdown-menu {
    box-shadow: none;
    border: 1px solid var(--em-border);
    background: var(--em-mist);
    position: static !important;
    transform: none !important;
    width: 100%;
  }

  .nav-cta { width: 100%; margin-left: 0; }

  .brand-logo { height: 34px; }
}

/* Desktop navbar: keep CTA visible, hide the duplicated mobile CTA --------- */
@media (min-width: 992px) {
  .navbar-nav .nav-link.active::after {
    content: "";
    display: block;
    width: 18px;
    height: 3px;
    border-radius: 3px;
    background: var(--grad-primary);
    margin: 0.3rem auto 0;
  }
}

/* Large desktops / wide monitors -------------------------------------------- */
@media (min-width: 1400px) {
  .hero-carousel { grid-template-rows: minmax(720px, auto); }
  .section-padding { padding: 6.5rem 0; }
}

@media (min-width: 1920px) {
  .container, .container-lg, .container-xl { max-width: 1400px; }
}

/* Gallery grid density tweaks ------------------------------------------------ */
@media (max-width: 575.98px) {
  .gallery-placeholder i { font-size: 1.5rem; }
  .gallery-placeholder .ph-label { font-size: 0.7rem; }
}

/* Prevent any horizontal scroll from decorative shapes at small widths ------ */
@media (max-width: 767.98px) {
  .blob-shape, .dot-grid, .hex-float { display: none; }
}

/* Ensure touch targets stay comfortable on small screens -------------------- */
@media (max-width: 575.98px) {
  .gallery-filter-btn { padding: 0.5rem 1rem; font-size: 0.8rem; }
}