/* =========================================================================
   Chauffeur Business Tracker — page-specific styles.
   Scoped under body.tracker-page so nothing here can leak onto any other
   page. Reuses the shared tokens and components from /styles.css — only
   what that stylesheet doesn't already cover lives here.
   ========================================================================= */

body.tracker-page .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Section rhythm: tighter than the shared site default ----------
   Adjoining sections each contribute half the gap (this section's
   padding-bottom + the next section's padding-top), so this value is HALF
   the intended visible gap: ~48-64px desktop, ~32-40px mobile overall. */
body.tracker-page { --tr-section-y: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
body.tracker-page .section { padding-block: var(--tr-section-y); }

/* ---------- Hero: two-column product layout, ~1240px, ~60/40 ---------- */
body.tracker-page .tr-hero {
  padding-top: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  padding-bottom: var(--tr-section-y);
}
body.tracker-page .tr-hero__wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body.tracker-page .tr-hero__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas: "gallery top" "gallery info";
  align-items: start;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}
body.tracker-page .tr-hero__top { grid-area: top; }
body.tracker-page .tr-hero__gallery { grid-area: gallery; }
body.tracker-page .tr-hero__info { grid-area: info; }
@media (max-width: 900px) {
  body.tracker-page .tr-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "gallery" "info";
    gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }
}

body.tracker-page .tr-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0;
}
body.tracker-page .tr-hero__lead {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text);   /* was color-text-soft — higher-contrast descriptive copy */
  max-width: 46ch;
}

/* Compact "£49 · One-time payment" line, directly under the title (both
   breakpoints — see grid-template-areas below for the mobile stacking order). */
body.tracker-page .tr-price {
  display: block;
  margin: 0.6rem 0 0;
  font-size: 1.1rem;
  line-height: 1.4;
}
body.tracker-page .tr-price__amount { font-weight: 700; color: var(--color-text); }
body.tracker-page .tr-price__sep { color: var(--color-text-faint); }
body.tracker-page .tr-price__terms { font-weight: 500; color: var(--color-text-soft); }

body.tracker-page .tr-hero__list { margin: var(--space-5) 0; max-width: none; }
body.tracker-page .tr-hero__kit-link { margin: var(--space-4) 0 0; }
body.tracker-page .tr-hero__delivery {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-soft);   /* was color-text-faint — higher-contrast delivery copy */
}

/* Disabled purchase control — no styling for this state exists yet in the
   shared stylesheet, so it's added here, scoped to this page. */
body.tracker-page .btn[disabled] {
  --btn-bg: var(--color-bg-inset);
  --btn-fg: var(--color-text-faint);
  --btn-border: var(--color-line);
  cursor: not-allowed;
}
body.tracker-page .btn[disabled]:hover,
body.tracker-page .btn[disabled]:active { transform: none; }

body.tracker-page .tr-included-note {
  margin: var(--space-4) 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-accent-line);
  background: var(--color-accent-wash);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
body.tracker-page .tr-included-note strong { color: var(--color-accent); }

/* Restrained section heading — deliberately smaller than the product title
   so it reads as a subsection, not a second headline competing with it. */
body.tracker-page #details-title {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

/* ---------- Slideshow ---------- */
body.tracker-page .tr-slideshow { max-width: 620px; }
@media (min-width: 901px) { body.tracker-page .tr-slideshow { max-width: none; } }

body.tracker-page .tr-slide-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
  overflow: hidden;
}
body.tracker-page .tr-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* complete artwork shown, never cropped or stretched */
}
body.tracker-page .tr-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: rgba(11, 11, 14, 0.72);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
body.tracker-page .tr-slide-arrow:hover { background: rgba(18, 18, 22, 0.9); border-color: var(--color-accent-line); }
body.tracker-page .tr-slide-arrow--prev { left: 12px; }
body.tracker-page .tr-slide-arrow--next { right: 12px; }

body.tracker-page .tr-slide-expand {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: rgba(11, 11, 14, 0.72);
  color: var(--color-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
body.tracker-page .tr-slide-expand:hover { border-color: var(--color-accent-line); }

body.tracker-page .tr-slide-counter {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 14, 0.72);
  color: var(--color-text-soft);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}

/* Compact thumbnail strip — small identifying chips, not full cards. */
body.tracker-page .tr-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-4);
}
body.tracker-page .tr-thumb {
  display: flex;
  flex: 0 0 auto;
  width: 88px;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  transition: border-color 0.16s var(--ease);
}
body.tracker-page .tr-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-bg); }
body.tracker-page .tr-thumb span {
  padding: 0.3rem 0.3rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.66rem;
  line-height: 1.25;
  color: var(--color-text-soft);   /* was color-text-faint — higher-contrast label */
}
body.tracker-page .tr-thumb:hover { border-color: var(--color-line-strong); }
body.tracker-page .tr-thumb.is-active { border-color: var(--color-accent-line); }
body.tracker-page .tr-thumb.is-active span { color: var(--color-text); font-weight: 600; }
/* Note: thumbnails only ever render at >900px (desktop) — see the single-column
   phone/tablet block below, which hides them for the whole ≤900px range — so
   no narrow-phone thumbnail-width override is needed here. */

body.tracker-page .tr-slideshow__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-eyebrow);
  color: var(--color-text-faint);
  text-align: center;
}

/* ---------- Enlarged image view ---------- */
body.tracker-page .tr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
body.tracker-page .tr-lightbox[hidden] { display: none; }
body.tracker-page .tr-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.86);
  backdrop-filter: blur(2px);
}
body.tracker-page .tr-lightbox__panel { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; }
body.tracker-page .tr-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;   /* complete artwork, never cropped */
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
}
body.tracker-page .tr-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
body.tracker-page.tr-lightbox-open { overflow: hidden; }

/* Compact-hero elements: not part of the two-column desktop layout at all, so
   hidden by default and only switched on inside the single-column block below. */
body.tracker-page .tr-slide-controls-compact,
body.tracker-page .tr-hero__short-includes,
body.tracker-page .tr-hero__delivery-short { display: none; }

/* =========================================================================
   Single-column layout (901px and below) — reorders and compacts the hero.
   This now matches the .tr-hero__grid stacking breakpoint above exactly
   (both max-width: 900px), so there is no longer a gap between "compact
   content" and "single column": every width that stacks to one column also
   gets the compact order and gallery controls. Only >900px (the true 60/40
   desktop layout) keeps the full-length content and on-artwork controls.

   Structural rules (what shows, what order, what's hidden) are grouped first;
   the handful of typography tweaks that only matter in this state follow —
   kept separate so a future width-specific type adjustment doesn't have to
   touch the structural rules above it.
   ========================================================================= */
@media (max-width: 900px) {
  /* ---- STRUCTURE: hide the thumbnail strip and the on-artwork overlay
     controls (both desktop-only); show the compact row below the image instead ---- */
  body.tracker-page .tr-thumbs { display: none; }
  body.tracker-page .tr-slide-stage .tr-slide-arrow,
  body.tracker-page .tr-slide-stage .tr-slide-expand,
  body.tracker-page .tr-slide-stage .tr-slide-counter { display: none; }

  body.tracker-page .tr-slide-controls-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  body.tracker-page .tr-slide-arrow--compact {
    position: static;
    transform: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }
  body.tracker-page .tr-slide-counter--compact {
    position: static;
    min-width: 52px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: none;
  }
  body.tracker-page .tr-slide-expand--compact {
    position: static;
    height: 44px;
    margin-left: 0.25rem;
  }

  /* ---- STRUCTURE: swap the long list/paragraph for the short inclusion and
     delivery lines, and reorder the info column so checkout comes right after
     the concise product information instead of after it. ---- */
  body.tracker-page .tr-hero__short-includes,
  body.tracker-page .tr-hero__delivery-short { display: block; }
  body.tracker-page .tr-hero__list,
  body.tracker-page .tr-hero__delivery { display: none; }

  body.tracker-page .tr-hero__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body.tracker-page .tr-hero__info > * { margin: 0 !important; }

  body.tracker-page .tr-hero__short-includes { order: 1; }
  body.tracker-page .tr-hero__buy { order: 2; }
  body.tracker-page .tr-included-note { order: 3; }
  body.tracker-page .tr-hero__kit-link { order: 4; }
  body.tracker-page .tr-hero__delivery-short { order: 5; }
  body.tracker-page .tr-hero__lead { order: 6; }   /* longer description, moved below the purchase area */

  body.tracker-page .tr-hero__grid { gap: 16px; }

  /* ---- TYPOGRAPHY: sized once here rather than mixed into the structural
     rules above, so it can be tuned per width later without touching them. ---- */
  body.tracker-page .tr-hero__short-includes { font-size: var(--fs-small); color: var(--color-text-soft); }
  body.tracker-page .tr-hero__delivery-short { font-size: var(--fs-eyebrow); color: var(--color-text-faint); line-height: 1.5; }
  body.tracker-page .tr-hero__title { margin-top: 0.4rem; }
  body.tracker-page .tr-price { margin-top: 0.4rem; }
  body.tracker-page .tr-slideshow__caption { margin-top: 0.6rem; }
}