/* ==========================================================================
   CFX NETWORK — DELIBERATE RESPONSIVE BREAKPOINTS (responsive.css)
   Desktop: 1920x1080, 1440x900, 1366x768 | Tablet: 768x1024 | Mobile: 390x844, 360x800
   ========================================================================== */

/* ── 1. Laptop (1024px – 1439px, including 1366x768) ────────────────────── */
@media (max-width: 1439px) {
  .cfx-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cfx-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfx-qi-headline {
    font-size: clamp(2.4rem, 4.4vw, 3.85rem);
  }

  .cfx-qi-num-stroke {
    font-size: clamp(9.5rem, 20vw, 17rem);
  }

  .cfx-qi-positioning-tag {
    display: none;
  }
}

/* Short Desktop / Laptop Viewports (e.g. 1366x768) */
@media (min-width: 1024px) and (max-height: 800px) {
  .cfx-qi-hero {
    min-height: 640px;
    height: calc(100vh - var(--cfx-header-h));
  }

  .cfx-qi-stage {
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .cfx-qi-headline {
    font-size: clamp(2.25rem, 3.8vw, 3.4rem);
    margin-bottom: 14px;
  }

  .cfx-qi-description {
    margin-bottom: 24px;
    font-size: 1.05rem;
  }

  .cfx-qi-num-stroke {
    font-size: clamp(8.5rem, 17vw, 14rem);
  }
}

/* ── 2. Tablet (768px – 1023px, including 768x1024) ─────────────────────── */
@media (max-width: 1023px) {
  .cfx-nav-desktop,
  .cfx-header-actions {
    display: none;
  }

  .cfx-mobile-toggle {
    display: inline-flex;
  }

  .cfx-qi-hero {
    min-height: 680px;
    height: calc(100svh - var(--cfx-header-h));
    max-height: 920px;
  }

  .cfx-qi-outlined-num {
    right: 2%;
    top: 38%;
  }

  .cfx-qi-num-stroke {
    font-size: clamp(8.5rem, 24vw, 13.5rem);
    -webkit-text-stroke: 1.25px rgba(245, 243, 238, 0.18);
  }

  .cfx-qi-slide-content {
    max-width: 620px;
  }

  .cfx-review-marquee-card {
    width: 460px;
    grid-template-columns: 130px 1fr;
    padding: 24px;
  }

  .cfx-hero-main-grid,
  .cfx-positioning-grid,
  .cfx-about-intro-grid,
  .cfx-story-grid,
  .cfx-service-hero-grid,
  .cfx-production-approach-grid,
  .cfx-enquiry-split,
  .cfx-partnership-hero-grid,
  .cfx-quick-enquiry-grid,
  .cfx-case-study-block {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .cfx-enquiry-sidebar {
    position: static;
  }

  .cfx-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfx-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfx-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfx-service-selector-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cfx-service-tabs {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .cfx-case-study-meta-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 3. Mobile (320px – 767px — Tailored to 390x844 & 360x800 Viewports) ── */
@media (max-width: 767px) {
  .cfx-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  /* Qi149 Full-Screen Mobile Hero Adaptation */
  .cfx-qi-hero {
    min-height: 580px;
    height: calc(100svh - var(--cfx-header-h));
    max-height: 820px;
  }

  .cfx-qi-bg-base,
  .cfx-qi-panel-inner {
    background-position: 64% center;
  }

  .cfx-qi-overlay {
    background:
      linear-gradient(180deg, rgba(11, 11, 12, 0.58) 0%, rgba(11, 11, 12, 0.48) 45%, rgba(11, 11, 12, 0.92) 100%);
  }

  .cfx-qi-stage {
    padding-top: 28px;
    padding-bottom: 22px;
  }

  .cfx-qi-outlined-num {
    right: 0;
    top: 20%;
    transform: translate3d(0, -25%, 0);
  }

  .cfx-qi-slide.is-active .cfx-qi-outlined-num {
    transform: translate3d(0, -32%, 0);
  }

  .cfx-qi-num-stroke {
    font-size: clamp(6.5rem, 32vw, 9.25rem);
    -webkit-text-stroke: 1.2px rgba(245, 243, 238, 0.19);
  }

  .cfx-qi-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.13em;
    margin-bottom: 14px;
  }

  .cfx-qi-headline {
    font-size: clamp(2.05rem, 8.2vw, 2.65rem);
    line-height: 1.08;
    margin-bottom: 16px;
  }

  .cfx-qi-description {
    font-size: 0.96875rem;
    line-height: 1.55;
    margin-bottom: 26px;
  }

  .cfx-qi-cta-btn {
    padding: 14px 24px;
    font-size: 0.75rem;
    width: auto;
  }

  .cfx-qi-nav-bar {
    padding-top: 16px;
    gap: 14px;
  }

  .cfx-qi-pagination {
    gap: 10px;
  }

  .cfx-qi-page-num {
    font-size: 0.71875rem;
  }

  .cfx-qi-page-bar {
    width: 22px;
  }

  .cfx-qi-page-btn.is-active .cfx-qi-page-bar {
    width: 34px;
  }

  .cfx-qi-arrow-btn {
    width: 40px;
    height: 40px;
  }

  /* Reviews Section Mobile Adaptation */
  .cfx-reviews-metrics-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 280px;
    margin: 0 auto 36px;
  }

  .cfx-review-marquee-card {
    width: 320px;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
  }

  .cfx-review-card-author {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .cfx-review-avatar {
    width: 40px;
    height: 40px;
  }

  .cfx-grid-2,
  .cfx-grid-3,
  .cfx-grid-4,
  .cfx-home-films-grid,
  .cfx-discipline-cards,
  .cfx-metrics-grid,
  .cfx-career-filters,
  .cfx-form-row,
  .cfx-checkbox-grid,
  .cfx-credits-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cfx-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cfx-hero-home {
    min-height: auto;
  }

  .cfx-hero-home-inner {
    padding-top: 44px;
    padding-bottom: 36px;
  }

  .cfx-hero-main-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .cfx-hero-title,
  .cfx-hero-home h1 {
    font-size: clamp(2.15rem, 8.2vw, 2.85rem);
    color: #FFFFFF !important;
    line-height: 1.08;
    margin-bottom: 18px;
  }

  .cfx-hero-lead {
    font-size: 1.0625rem;
    color: rgba(245, 243, 238, 0.88) !important;
    margin-bottom: 28px;
  }

  .cfx-hero-actions,
  .cfx-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cfx-hero-actions .cfx-btn,
  .cfx-cta-actions .cfx-btn {
    width: 100%;
  }

  .cfx-hero-bottom-bar {
    margin-top: 36px;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cfx-trusted-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cfx-service-tabs {
    grid-template-columns: 1fr;
  }

  .cfx-service-tab {
    border-right: none;
    border-bottom: 1px solid var(--cfx-rule-strong);
  }

  .cfx-service-tab:last-child {
    border-bottom: none;
  }

  .cfx-showreel-frame {
    min-height: 360px;
    aspect-ratio: auto;
    padding: 20px;
  }

  .cfx-showreel-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cfx-career-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cfx-career-row .cfx-btn {
    width: 100%;
  }

  .cfx-form-card {
    padding: 24px 20px;
  }

  .cfx-footer-top,
  .cfx-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cfx-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cfx-case-study-meta-bar {
    grid-template-columns: 1fr;
  }
}