/* ==========================================================================
   TRAKLINE APPAREL — media.css
   Scope: ALL responsive overrides for the whole site (header, footer, home).
   Load order: main.css → [page].css → media.css  (must load last)
   Breakpoints follow Bootstrap 5: 1399.98 / 1199.98 / 991.98 / 767.98 / 575.98
   ========================================================================== */

/* ==========================================================================
   XXL DOWN  —  max-width: 1399.98px
   ========================================================================== */
@media (max-width: 1399.98px) {

  :root { --tl-section-y: clamp(3.5rem, 6vw, 6rem); }

  /* Home — hero */
  .tl-hero-controls { right: 24px; }
  .tl-hero-scroll { left: 24px; }

  /* Home — process connector sits closer */
  .tl-process-row > [class*="col-"]:not(:last-child) .tl-step::after { right: -20px; font-size: 1.25rem; }
}

/* ==========================================================================
   XL DOWN  —  max-width: 1199.98px
   ========================================================================== */
@media (max-width: 1199.98px) {

  /* Header — tighten nav so it fits before the burger breakpoint */
  .tl-nav.navbar-nav { gap: 1.35rem !important; }
  .tl-nav .nav-link { font-size: 0.9375rem; }
  .tl-topbar { font-size: 0.8125rem; }

  /* Home — hero */
  .tl-hero-slide { min-height: 620px; }
  .tl-hero-text { font-size: 1rem; }

  /* Home — feature strip: 2x2 grid, restore inner borders */
  .tl-featstrip { margin-top: -50px; }
  .tl-feat { padding: 1.75rem 1.35rem; }
  .tl-featstrip .row > [class*="col-"]:nth-child(2) .tl-feat { border-right: 0; }
  .tl-featstrip .row > [class*="col-"]:nth-child(-n+2) .tl-feat { border-bottom: 1px solid var(--tl-border); }

  /* Home — about */
  .tl-about-media { padding-right: 0; }
  .tl-about-watermark { font-size: 2.6rem; }

  /* Home — process: 5 across is too tight, wrap to 3 + 2 */
  .tl-process-row > [class*="col-"] { flex: 0 0 33.333%; max-width: 33.333%; }
  .tl-process-row > [class*="col-"]:nth-child(3) .tl-step::after { display: none; }

  /* Home — portfolio */
  .tl-port-tall { min-height: 330px; }

  /* Home — testimonials */
  .tl-testi-card { padding: 2rem 1.75rem 1.75rem; }
  .tl-testi-card p { font-size: 1rem; }
}

/* ==========================================================================
   LG DOWN  —  max-width: 991.98px   (tablet — mobile nav takes over)
   ========================================================================== */
@media (max-width: 991.98px) {

  :root { --tl-header-h: 74px; }

  body { font-size: 0.9375rem; }

  /* Header — burger visible, desktop cluster hidden via Bootstrap d-none */
  .tl-header.tl-stuck { position: fixed; }

  /* Home — hero */
  .tl-hero-slide { min-height: 560px; }
  .tl-hero-slide::before {
    background: linear-gradient(180deg, rgba(9, 21, 37, 0.9) 0%, rgba(9, 21, 37, 0.82) 60%, rgba(9, 21, 37, 0.9) 100%);
  }
  .tl-hero-copy { padding: 2.5rem 0; text-align: center; }
  .tl-hero-copy .d-flex { justify-content: center; }
  .tl-hero-text { margin-left: auto; margin-right: auto; }
  .tl-hero-dots { margin-bottom: 1.5rem; }

  /* Home — feature strip: no negative overlap on tablet */
  .tl-featstrip { margin-top: 0; padding-top: var(--tl-section-y); }

  /* Home — about: collage stacks above copy */
  .tl-about-media { padding-bottom: 3.5rem; max-width: 620px; }
  .tl-about-img-sub { width: 46%; }
  .tl-about-badge { padding: 0.9rem 1.1rem; }
  .tl-about-badge strong { font-size: 2.1rem; }
  .ps-lg-4 { padding-left: 0 !important; }

  /* Home — why us: remove card offsets when stacked */
  .tl-adv-card-offset { margin-top: 0; }

  /* Home — process: 2 across, hide all connectors */
  .tl-process-row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .tl-process-row > [class*="col-"] .tl-step::after { display: none !important; }

  /* Home — portfolio: uniform heights once stacked */
  .tl-port-card, .tl-port-tall { min-height: 300px; }
  /* Always show the excerpt on touch — there is no hover */
  .tl-port-body p { max-height: 5rem; opacity: 1; margin-top: 0.35rem; }
  .tl-port-plus { opacity: 1; transform: none; }

  /* Home — testimonials */
  .tl-testi-rating strong { font-size: 2.6rem; }

  /* Home — counters: fixed attachment is unreliable on mobile browsers */
  .tl-counters { background-attachment: scroll; }
  .tl-counter { text-align: center; padding-right: 0; }

  /* Home — CTA */
  .tl-cta-inner { text-align: center; }
  .tl-cta-inner .align-items-lg-end { align-items: center !important; }

  /* Footer */
  .tl-footer-title { font-size: 1.1rem; margin-bottom: 1.15rem; }
  .tl-footer .row.g-5 { --bs-gutter-y: 2.5rem; }
}

/* ==========================================================================
   MD DOWN  —  max-width: 767.98px   (large phone)
   ========================================================================== */
@media (max-width: 767.98px) {

  :root {
    --tl-section-y: 3.25rem;
    --tl-fs-display: 2.25rem;
    --tl-fs-h2: 1.75rem;
  }

  h1, h2, h3 { letter-spacing: 0; }

  /* Home — hero */
  .tl-hero-slide { min-height: 500px; }
  .tl-hero-eyebrow { font-size: 0.6875rem; padding: 0.34rem 0.85rem; margin-bottom: 1.15rem; }
  .tl-hero-title { margin-bottom: 1.1rem; }
  .tl-hero-text { font-size: 0.9375rem; margin-bottom: 1.75rem; }
  .tl-hero-copy .d-flex { flex-direction: column; align-items: stretch; gap: 0.75rem !important; }
  .tl-hero-copy .tl-btn { width: 100%; justify-content: center; }
  .tl-hero-slide::after { width: 100%; }

  /* Buttons scale down */
  .tl-btn { font-size: 0.875rem; padding: 0.8rem 1.5rem; }

  /* Home — feature strip: single column, borders become dividers */
  .tl-feat { border-right: 0 !important; border-bottom: 1px solid var(--tl-border) !important; }
  .tl-featstrip .row > [class*="col-"]:last-child .tl-feat { border-bottom: 0 !important; }

  /* Home — about */
  .tl-about-media { padding-bottom: 3rem; }
  .tl-about-watermark { font-size: 2rem; top: -10px; }
  .tl-about-img-sub { border-width: 5px; }
  .tl-about-badge { bottom: 0.75rem; }
  .tl-about-badge strong { font-size: 1.85rem; }
  .tl-about-badge span { font-size: 0.6875rem; }
  .tl-about-sign { gap: 1.25rem !important; }
  .tl-about-sign .tl-btn { width: 100%; justify-content: center; }

  /* Home — process: single column */
  .tl-process-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .tl-step { text-align: left; display: flex; flex-direction: column; }

  /* Home — counters */
  .tl-counter strong { font-size: 2.1rem; }
  .tl-counter-label { font-size: 0.75rem; letter-spacing: 0.1em; }

  /* Home — why us */
  .tl-adv-num { font-size: 2.6rem; }

  /* Home — testimonials */
  .tl-testi-card { padding: 1.6rem 1.35rem 1.4rem; }
  .tl-testi-card p { font-size: 0.9375rem; line-height: 1.75; margin-bottom: 1.35rem; }
  .tl-testi-quote { font-size: 3rem; top: 0.5rem; right: 1rem; }
  .tl-testi-card footer img { width: 46px; height: 46px; }

  /* Home — FAQ + quote */
  .tl-accordion .accordion-button { font-size: 0.9375rem; padding: 1rem 1.1rem; }
  .tl-accordion .accordion-body { padding: 0 1.1rem 1.1rem; font-size: 0.875rem; }
  .tl-quote-title { font-size: 1.4rem; }

  /* Home — CTA */
  .tl-cta-inner .tl-btn { width: 100%; justify-content: center; }

  /* Footer */
  .tl-footer-bottom { justify-content: center !important; text-align: center; }
  .tl-footer-bottom ul { justify-content: center; gap: 1.25rem !important; }

  /* Back to top */
  .tl-totop { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ==========================================================================
   SM DOWN  —  max-width: 575.98px   (small phone)
   ========================================================================== */
@media (max-width: 575.98px) {

  :root { --tl-fs-display: 1.95rem; --tl-fs-h2: 1.55rem; }

  /* Home — hero */
  .tl-hero-slide { min-height: 460px; }

  /* Home — products / blog: full-bleed feel with tighter padding */
  .tl-prod-body { padding: 1.35rem 1.15rem 1.5rem; }
  .tl-blog-body { padding: 1.25rem 1.1rem 1.35rem; }

  /* Home — counters: 1 per row reads better than a cramped 2x2 */
  .tl-counters .col-6 { flex: 0 0 100%; max-width: 100%; }
  .tl-counter { padding: 0.35rem 0; }

  /* Home — why us */
  .tl-adv-card { padding: 1.6rem 1.25rem 1.4rem; }
  .tl-adv-icon { width: 46px; height: 46px; font-size: 1.2rem; }

  /* Home — quote form: stack the subscribe/submit rows */
  .tl-quote-card { padding: 1.5rem 1.25rem; }

  /* Footer — newsletter input stacks above button */
  .tl-subscribe .d-flex { flex-direction: column; }
  .tl-subscribe .tl-btn { width: 100%; }

  /* Offcanvas takes most of the viewport */
  .tl-offcanvas { width: 86vw; }
}

/* ==========================================================================
   LANDSCAPE PHONE  —  short viewport, avoid clipped hero
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .tl-hero-slide { min-height: 480px; }
  .tl-hero-copy { padding: 2rem 0; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .tl-topbar, .tl-hero-controls, .tl-hero-dots, .tl-hero-scroll,
  .tl-totop, .tl-offcanvas, .tl-burger, .tl-subscribe { display: none !important; }

  .tl-header { position: static !important; box-shadow: none; }
  .tl-hero-slide::before { background: none; }
  .tl-hero-title, .tl-hero-text { color: var(--tl-ink) !important; }

  [data-tl-reveal] { opacity: 1 !important; transform: none !important; }

  .tl-testi, .tl-counters, .tl-footer, .tl-cta-inner {
    background: var(--tl-white) !important;
    color: var(--tl-ink) !important;
  }
  .tl-testi .tl-title, .tl-cta-inner .tl-title { color: var(--tl-ink) !important; }

  a { text-decoration: underline; }
}