/* ═══════════════════════════════════════════════════════════
   SUMMIT TRIATHLON COACHING — Image Treatment System
   styles/image-treatments.css
   
   All photography treatments consume tokens from tokens.css.
   Rule: natural, restrained, tonally coherent.
   No over-saturation. No faux-cinematic contrast. No fake HDR.
   
   Classes:
   1. Colour washes       .img-navy-wash, .img-orange-accent, .img-documentary, .img-alpine-tone
   2. Hero overlays        .hero__background (already in components.css)
   3. Video hero           .video-hero (already in scroll-effects.css)
   4. Text-on-image safety .img-text-safe, .img-caption-bar
   5. Crop utilities       .img-cover, .img-contain, .img-panoramic
   6. Social safe zones    .img-social-safe
   ═══════════════════════════════════════════════════════════ */


/* ── 1. COLOUR WASH TREATMENTS ────────────────────────── */

/* Navy wash — hero backgrounds and dark sections.
   Apply to a positioned container; overlay renders via ::after. */
.img-navy-wash {
  position: relative;
  overflow: hidden;
}

.img-navy-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 43, 69, 0.15) 0%,
    rgba(8, 43, 69, 0.55) 100%
  );
  /* Design Standard §3: cinematic restraint, not obscurity.
     Previous 0.3→0.7 gradient combined with 0.25 image opacity
     double-darkened the scene. Lightened to 0.15→0.55 to restore
     emotional richness while preserving text contrast. */
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Navy wash — heavy variant for contact/form pages */
.img-navy-wash--heavy::after {
  background: linear-gradient(
    180deg,
    rgba(8, 43, 69, 0.6) 0%,
    rgba(8, 43, 69, 0.85) 100%
  );
}

/* Navy wash — bottom-anchored for coaching hero */
.img-navy-wash--bottom::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(8, 43, 69, 0.85) 100%
  );
}


/* Orange accent strip — anchor bar for feature callouts */
.img-orange-accent {
  border-left: 4px solid var(--summit-peak-orange, #F47A20);
}

.img-orange-accent--right {
  border-left: none;
  border-right: 4px solid var(--summit-peak-orange, #F47A20);
}


/* Documentary — restrained, editorial feel.
   Default treatment for all race-day photography. */
.img-documentary {
  filter: saturate(0.75) contrast(1.05);
}


/* Alpine tone — warm, grounded science look.
   Use on VO2/lab imagery. */
.img-alpine-tone {
  filter: sepia(0.08) saturate(0.85) brightness(1.02);
}


/* Natural — no filter. For studio-quality founder portraits
   and heat chamber shots with controlled lighting. */
.img-natural {
  filter: none;
  object-fit: cover;
}


/* ── 2. TEXT-ON-IMAGE SAFETY ──────────────────────────── */

/* Guaranteed text-safe overlay — minimum 4.5:1 contrast
   for Alpine White (#F8F8F6) text on photography.
   Apply to the image container (not the image). */
.img-text-safe {
  position: relative;
}

.img-text-safe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 43, 69, 0.6);
  pointer-events: none;
  z-index: 1;
}

/* Eyebrow-safe — higher opacity for orange text legibility.
   Orange on photo requires ≥ 0.7 navy overlay at 3:1 ratio. */
.img-eyebrow-safe::after {
  background: rgba(8, 43, 69, 0.7);
}

/* Caption bar — small overlay for image credits */
.img-caption-bar {
  position: absolute;
  bottom: var(--space-3, 0.75rem);
  right: var(--space-3, 0.75rem);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: var(--text-xs, 0.694rem);
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 4px);
  z-index: 2;
}


/* ── 3. CROP UTILITIES ────────────────────────────────── */

/* Cover — fill container, crop overflow */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contain — fit within container, show entire image */
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Panoramic strip — landscape banner crop at 3:1 */
.img-panoramic {
  width: 100%;
  height: 0;
  padding-bottom: 33.33%;
  position: relative;
  overflow: hidden;
}

.img-panoramic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Portrait crop — for About page founder images at 2:3 */
.img-portrait {
  width: 100%;
  height: 0;
  padding-bottom: 150%;
  position: relative;
  overflow: hidden;
}

.img-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Square crop — for social/profile contexts at 1:1 */
.img-square {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}

.img-square img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── 4. WATERMARK ─────────────────────────────────────── */

/* Watermark overlay — ONLY for external/third-party exports.
   Never use on the Summit website itself. */
.img-watermark {
  position: relative;
}

.img-watermark::before {
  content: '';
  position: absolute;
  bottom: 48px;
  right: 48px;
  width: 120px;
  height: 120px;
  background-image: url('/summit-brand-assets/svg/logo/summit-mark-mono-light.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--opacity-subtle);
  pointer-events: none;
  z-index: 2;
}

/* Higher opacity for third-party exports */
.img-watermark--export::before {
  opacity: var(--opacity-muted);
}


/* ── 5. SECTION BACKGROUNDS WITH PATTERN ──────────────── */

/* Subtle brand pattern background for dark sections.
   Opacity kept very low to avoid visual noise. */
.bg-pattern-grid {
  background-image: url('/summit-brand-assets/svg/patterns/summit-pattern-grid.svg');
  background-size: 600px;
  background-repeat: repeat;
  background-position: center;
  opacity: var(--opacity-ghost);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-pattern-converging {
  background-image: url('/summit-brand-assets/svg/patterns/summit-pattern-converging.svg');
  background-size: 400px;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: var(--opacity-whisper);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-pattern-topo {
  background-image: url('/summit-brand-assets/svg/patterns/summit-pattern-topo.svg');
  background-size: 800px;
  background-repeat: repeat;
  background-position: center;
  opacity: var(--opacity-ghost);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-pattern-wave {
  background-image: url('/summit-brand-assets/svg/patterns/summit-pattern-wave.svg');
  background-size: 600px;
  background-repeat: repeat;
  background-position: center;
  opacity: var(--opacity-ghost);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-pattern-signal {
  background-image: url('/summit-brand-assets/svg/patterns/summit-pattern-signal.svg');
  background-size: 500px;
  background-repeat: repeat;
  background-position: center;
  opacity: var(--opacity-ghost);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION: Respect user preferences
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .img-documentary,
  .img-alpine-tone {
    /* Filters are purely visual, not motion — keep them */
  }
}


/* ═══════════════════════════════════════════════════════════
   PRINT: Strip overlays for clean print output
   ═══════════════════════════════════════════════════════════ */

@media print {
  .img-navy-wash::after,
  .img-text-safe::after,
  .img-eyebrow-safe::after,
  .img-watermark::before,
  .bg-pattern-grid,
  .bg-pattern-converging,
  .bg-pattern-topo,
  .bg-pattern-wave,
  .bg-pattern-signal {
    display: none !important;
  }
}