/* Photo backgrounds. Only loaded when the site is built with PHOTOS=1. */
:root { --ph-hero: url(../img/bg/ski-hero.jpg); --ph-band: url(../img/bg/ski-band.jpg); --ph-cta: url(../img/bg/ski-cta.jpg); }
html[data-sport="bike"] { --ph-hero: url(../img/bg/bike-hero.jpg); --ph-band: url(../img/bg/bike-band.jpg); --ph-cta: url(../img/bg/bike-cta.jpg); }
html[data-sport="surf"] { --ph-hero: url(../img/bg/surf-hero.jpg); --ph-band: url(../img/bg/surf-band.jpg); --ph-cta: url(../img/bg/surf-cta.jpg); }

.bleed { position: relative; isolation: isolate; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.bleed::before, .band.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: opacity .3s; }
.bleed::after, .band.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; }

/* hero: photo behind the headline, darker on the left where the words are, fading into the page at the bottom */
.photo-hero::before { background-image: var(--ph-hero); filter: saturate(1.15) brightness(1.18) contrast(1.05); }
.photo-hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 84%, transparent) 0%, color-mix(in srgb, var(--bg) 52%, transparent) 40%, color-mix(in srgb, var(--bg) 6%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, transparent 22%, transparent 78%, var(--bg) 100%); }
.photo-hero .hero { padding-bottom: clamp(70px, 9vw, 130px); }
.photo-hero .hero-grid { align-items: center; }
.photo-hero .phone { margin-bottom: 0; }
.photo-hero + .scene { display: none; }
.photo-hero ~ .wrap .band:first-child { padding-top: clamp(40px, 5vw, 70px); }

/* "Where we ride" band */
.band.alt.photo-band { background: transparent; border-block: 0; position: relative; isolation: isolate; }
.band.photo-band::before { background-image: var(--ph-band); filter: saturate(1.1) brightness(1.15); }
.band.photo-band::after { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 44%, transparent) 20%, color-mix(in srgb, var(--bg) 40%, transparent) 80%, var(--bg) 100%); }
.photo-band .sign { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(8px); }

/* call to action */
.photo-cta { margin-top: clamp(30px, 5vw, 70px); }
.photo-cta::before { background-image: var(--ph-cta); filter: saturate(1.1) brightness(1.15); }
.photo-cta::after { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 38%, transparent) 24%, color-mix(in srgb, var(--bg) 52%, transparent) 100%); }
.photo-cta .band.download { padding-block: clamp(80px, 11vw, 150px); }

/* sub-page headers (Shops, Clubs, Race Breck) */
.photo-page::before { background-image: var(--ph-band); filter: saturate(1.1) brightness(1.15); }
.photo-page::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 50%, transparent) 60%, color-mix(in srgb, var(--bg) 12%, transparent) 100%), linear-gradient(180deg, transparent 60%, var(--bg) 100%); }
.photo-page .page-hero { border-bottom: 0; padding-top: clamp(60px, 9vw, 120px); padding-bottom: clamp(70px, 9vw, 120px); }

/* photo strip under "What it is" */
.pstrip { display: none; gap: 14px; margin-top: 46px; }
html[data-sport="ski"] .pstrip.s-ski, html[data-sport="bike"] .pstrip.s-bike, html[data-sport="surf"] .pstrip.s-surf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-sport="surf"] .pstrip.s-surf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pstrip figure { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 16 / 11; }
.pstrip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.pstrip figure:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .photo-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 58%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 45%, color-mix(in srgb, var(--bg) 34%, transparent) 70%, var(--bg) 100%); }
  .photo-hero::before { background-position: 60% center; }
  .pstrip figure { aspect-ratio: 4 / 5; }
  .pstrip { display: none; }
  html[data-sport="ski"] .pstrip.s-ski, html[data-sport="bike"] .pstrip.s-bike, html[data-sport="surf"] .pstrip.s-surf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-bottom: 8px; }
  .pstrip figure { flex: 0 0 68%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .pstrip img { transition: none; } }

/* keep running text readable over photos */
.photo-band .muted, .photo-cta .muted, .photo-page .muted, .photo-page .lead, .photo-hero .lead { color: color-mix(in srgb, var(--ink) 92%, transparent); }
.photo-band h2, .photo-band .muted, .photo-cta h2, .photo-cta .muted, .photo-page h1, .photo-page .lead, .photo-hero h1, .photo-hero .lead { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.photo-band .label, .photo-cta .label, .photo-page .label { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.photo-band .sign .muted { text-shadow: none; }