/* ═══════════════════════════════════════════════════════════════════
   MANUFACTURING PAGE — MOBILE RESPONSIVE STYLES
   Breakpoints:
     xs  : < 480px   (small phones)
     sm  : < 640px   (phones)
     md  : < 768px   (large phones / small tablets)
     lg  : < 1024px  (tablets / landscape)
   All rules are max-width (mobile-first overrides).
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. HERO SECTION ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Shorter hero so the CTA is always above the fold */
  section:has(> div > video),
  section.relative.min-h-\[600px\] {
    min-height: 520px;
    padding-top: 80px;
    padding-bottom: 48px;
  }

  /* Badge pill */
  .inline-block.bg-secondary-container {
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    white-space: normal;
    line-height: 1.4;
  }

  /* Hero h1 */
  h1.font-display-lg {
    font-size: 2rem !important;   /* 32px */
    line-height: 1.2;
    margin-bottom: 1.25rem;
  }

  /* Hero subtext */
  p.font-body-lg {
    font-size: 0.9375rem;         /* 15px */
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  /* Accent bar */
  .h-1.w-32.bg-secondary-container {
    width: 64px;
  }
}

@media (max-width: 479px) {
  h1.font-display-lg {
    font-size: 1.625rem !important; /* 26px */
  }
}


/* ── 2. SECTION HEADINGS (shared) ────────────────────────────────── */
@media (max-width: 767px) {
  h2.font-headline-lg {
    font-size: 1.5rem !important;  /* 24px */
    line-height: 1.25;
  }

  /* Section vertical padding */
  .py-section-gap {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 479px) {
  h2.font-headline-lg {
    font-size: 1.25rem !important; /* 20px */
  }
}


/* ── 3. CORE PRODUCTION CENTERS ──────────────────────────────────── */
@media (max-width: 1023px) {
  /* Split-image layout (Acid Wash & Screen Printing) */
  .mfg-split-images {
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .mfg-split-images .mfg-split-media {
    height: 260px;
  }

  .mfg-split-images .mfg-split-text {
    padding: 1.5rem !important;
  }

  /* Image-right layout (Screen Printing) */
  .mfg-image-right {
    flex-direction: column !important;
  }

  .mfg-image-right .mfg-image-block {
    height: 240px;
    width: 100% !important;
  }

  .mfg-image-right .mfg-text-block {
    padding: 1.5rem !important;
  }

  /* Grid cards (Embroidery / Sublimation / DTF / Socks) */
  .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .center-grid-card .h-64 {
    height: 10rem;       /* 160px — less tall on tablet */
  }

  .center-grid-card .p-8 {
    padding: 1.25rem;
  }

  .center-grid-card .font-headline-sm {
    font-size: 0.75rem;
  }

  .center-grid-card .font-body-md {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}

@media (max-width: 639px) {
  /* Stack grid cards to single column on phones */
  .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .center-grid-card .h-64 {
    height: 12rem;       /* 192px — taller on single column */
  }
}

/* Section intro text */
@media (max-width: 767px) {
  #core-production-centers-container + div,
  .mb-12.md\:mb-16,
  .mb-16 {
    margin-bottom: 1.5rem;
  }

  .border-l-8 {
    border-left-width: 4px;
    padding-left: 1rem;
  }
}


/* ── 4. INTEGRATED MANUFACTURING LIFECYCLE TIMELINE ──────────────── */
@media (max-width: 1023px) {
  /* Hide the desktop centre-line */
  #lifecycle-timeline-container > div.absolute {
    display: none !important;
  }

  /* Each stage: stack vertically, left-align */
  .lifecycle-stage {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
    gap: 1rem !important;
  }

  /* Step badge */
  .lifecycle-stage > div.w-16 {
    width: 48px;
    height: 48px;
    font-size: 0.875rem;
  }

  /* Content card */
  .lifecycle-stage > div.flex-1 {
    width: 100%;
    padding: 1.25rem !important;
  }

  /* Inner row: media + text */
  .lifecycle-stage .flex.flex-col {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  /* Media thumbnail */
  .lifecycle-stage .w-full.md\:w-72 {
    width: 100% !important;
    height: 180px;
  }

  /* Force left-align on reversed rows too */
  .lifecycle-stage .md\:text-right,
  .lifecycle-stage .md\:flex-row-reverse {
    text-align: left !important;
    flex-direction: column !important;
  }

  .lifecycle-stage h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .lifecycle-stage p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Tighten vertical spacing */
  #lifecycle-timeline-container {
    gap: 1.5rem !important;
    space-y: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Timeline section padding */
  section.bg-primary.text-on-primary .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  section.bg-primary .mb-16 {
    margin-bottom: 2rem;
  }

  section.bg-primary h2.font-headline-lg {
    font-size: 1.375rem !important;
    padding-left: 0.75rem;
  }

  section.bg-primary p.font-body-lg {
    font-size: 0.9375rem;
  }
}


/* ── 5. TECHNICAL CAPABILITIES GRID ─────────────────────────────── */
@media (max-width: 1023px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div {
    padding: 1.5rem;
    gap: 1rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 .material-symbols-outlined.text-5xl {
    font-size: 2.25rem;
    padding: 0.75rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 h5 {
    font-size: 0.75rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 p {
    font-size: 0.8125rem;
  }
}

@media (max-width: 479px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr;
  }
}


/* ── 6. QUALITY ASSURANCE ────────────────────────────────────────── */
@media (max-width: 1023px) {
  .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }

  .grid.grid-cols-1.md\:grid-cols-4 > div {
    padding-top: 1.25rem;
  }

  .grid.grid-cols-1.md\:grid-cols-4 .font-headline-md {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .grid.grid-cols-1.md\:grid-cols-4 h4 {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }

  .grid.grid-cols-1.md\:grid-cols-4 p {
    font-size: 0.8125rem;
    line-height: 1.55;
  }
}

@media (max-width: 479px) {
  .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Quality section heading */
@media (max-width: 767px) {
  .text-center.mb-16 h2.font-headline-lg {
    font-size: 1.375rem !important;
  }
}


/* ── 7. PARTNER ADVANTAGE GRID ───────────────────────────────────── */
@media (max-width: 1023px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > div {
    padding: 1.5rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 h4 {
    font-size: 0.8rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 .material-symbols-outlined {
    font-size: 1.25rem;
    padding: 0.375rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 p {
    font-size: 0.8125rem;
    line-height: 1.55;
  }
}

@media (max-width: 479px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
}


/* ── 8. FINAL CTA SECTION ────────────────────────────────────────── */
@media (max-width: 767px) {
  section.relative.py-section-gap.overflow-hidden .font-display-lg {
    font-size: 1.5rem !important;
    line-height: 1.25;
    margin-bottom: 1rem;
  }

  section.relative.py-section-gap.overflow-hidden p.font-body-lg {
    font-size: 0.9375rem;
    margin-bottom: 2rem;
  }

  .flex.flex-col.md\:flex-row.justify-center.gap-6 {
    gap: 0.875rem;
  }

  .flex.flex-col.md\:flex-row.justify-center.gap-6 a {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-align: center;
  }
}


/* ── 9. VIDEO MODAL ──────────────────────────────────────────────── */

/* Desktop: scale + fade (CSS drives animation, JS toggles cm-open class) */
.cm-window {
  transform: scale(0.95) translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.cm-open .cm-window {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* ── Arrow buttons — hide left initially, always show right ── */
.cm-arrow {
  transition: opacity 0.2s, background 0.2s;
}
.cm-thumbs::-webkit-scrollbar { display: none; }

/* ── Mobile: full-screen slide up from bottom ── */
@media (max-width: 767px) {
  [id^="center-modal-"] .cm-window {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    /* Closed: off screen below */
    transform: translateY(100%) !important;
    opacity: 1 !important;             /* always visible, position controls show/hide */
    transition: transform 0.38s cubic-bezier(0.32, 1.2, 0.64, 1) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Open state: slide to view */
  [id^="center-modal-"].cm-open .cm-window {
    transform: translateY(0) !important;
  }

  /* ── Gap fix: video container shrinks to content size ── */
  .cm-video-wrap {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000;
    position: relative;
    width: 100%;
  }

  /* Video: natural aspect ratio, never push thumbs off screen */
  .cm-video {
    width: 100% !important;
    height: auto !important;
    max-height: 52vh !important;
    object-fit: contain !important;
    display: block;
  }

  /* Thumbnail strip: push to bottom */
  [id^="center-modal-"] .cm-window > div:last-child {
    flex-shrink: 0 !important;
    margin-top: auto;
    padding: 8px 0 !important;
  }

  /* Smaller thumbs on phone */
  .cm-thumb {
    width: 72px !important;
    height: 52px !important;
    flex-shrink: 0;
  }
  .cm-thumbs { gap: 6px !important; }

  /* Arrow buttons slightly smaller */
  .cm-arrow {
    width: 28px !important;
    height: 28px !important;
  }

  /* Modal header compact */
  [id^="center-modal-"] .cm-window > div:first-child {
    padding: 14px 16px !important;
    flex-shrink: 0;
  }
}

@media (max-width: 479px) {
  .cm-video { max-height: 44vh !important; }
  .cm-thumb {
    width: 60px !important;
    height: 44px !important;
  }
}




/* ── 10. CORE PRODUCTION — SPLIT-IMAGE & IMAGE-RIGHT CARDS ──────── */
/* These are injected by JS so we target by element structure */
@media (max-width: 1023px) {
  /* Split-images: the outer wrapper for acid-wash / screen-printing */
  #core-production-centers-container > .flex {
    flex-direction: column !important;
    gap: 0;
  }

  #core-production-centers-container .min-h-\[500px\] {
    min-height: 240px !important;
  }

  #core-production-centers-container .lg\:w-\[55\%\],
  #core-production-centers-container .lg\:w-\[45\%\] {
    width: 100% !important;
  }

  #core-production-centers-container .p-12 {
    padding: 1.5rem !important;
  }

  #core-production-centers-container .p-16 {
    padding: 1.5rem !important;
  }

  #core-production-centers-container .mb-12 {
    margin-bottom: 1.5rem;
  }

  #core-production-centers-container .text-5xl {
    font-size: 1.75rem !important;
  }

  #core-production-centers-container .text-4xl {
    font-size: 1.5rem !important;
  }

  /* Feature tag list */
  #core-production-centers-container .flex.flex-wrap.gap-3 {
    gap: 0.5rem;
  }

  #core-production-centers-container .flex.flex-wrap.gap-3 > span {
    font-size: 0.6875rem;
    padding: 4px 10px;
  }
}

@media (max-width: 767px) {
  /* Section intro */
  #core-production-centers-container {
    gap: 2rem;
  }

  /* Reduce h2 size in section header */
  section:has(#core-production-centers-container) h2 {
    font-size: 1.375rem !important;
  }

  section:has(#core-production-centers-container) p {
    font-size: 0.875rem;
  }
}


/* ── 11. GLOBAL HORIZONTAL SCROLL PREVENTION ─────────────────────── */
@media (max-width: 1023px) {
  .max-w-container-max {
    overflow-x: hidden;
  }

  /* Tighten horizontal padding sitewide on this page */
  .px-4.md\:px-margin-desktop {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}


/* ── 12. NAVBAR CLEARANCE (shared, just in case) ─────────────────── */
@media (max-width: 1023px) {
  body > section:first-of-type {
    padding-top: 72px;
  }
}