/* Windelo 55 Sport landing page (page-windelo-55-sport.php). Loads after windelo-54/windelo-54.css. Scoped to .w55s. 2026-11-07 */

/* hero: a real <img> (fast to show), boxed right and fading into navy */
.w54.w55s .hero{background:#141a3c}
.w54.w55s .hero::before{display:none}
.w55s .w55-hero-img{position:absolute;top:0;right:0;bottom:0;width:70%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
@media (max-width:760px){
  .w55s .w55-hero-img{width:100%;object-position:58% 40%;-webkit-mask-image:none;mask-image:none}
  .w54.w55s .hero::after{background:linear-gradient(0deg,rgba(18,20,56,.92) 0%,rgba(18,20,56,.65) 50%,rgba(18,20,56,.2) 80%)}
  .w54.w55s .hero h1{font-size:clamp(46px,14vw,80px)}
}
.w55s .w55-arrive{background:rgba(254,224,74,.16);border-color:rgba(254,224,74,.55)}

/* "on order" band: navy, no photo behind (until a 55 Sport photo is set) */
.w54.w55s .w55-order::before{background:none}
.w54.w55s .w55-order{background:#1b1f4a}
.w55s .w55-order-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.w55s .w55-order-grid{grid-template-columns:1fr}}
.w55s .w55-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.w55s .w55-steps li{counter-increment:s;position:relative;padding:20px 22px 20px 72px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#fff}
.w55s .w55-steps li::before{content:counter(s);position:absolute;left:20px;top:18px;width:36px;height:36px;border-radius:50%;background:var(--accent,#fee04a);color:#1b1f4a;font-weight:800;display:flex;align-items:center;justify-content:center}
.w55s .w55-steps b{display:block;font-size:17px;margin-bottom:4px}
.w55s .w55-steps span{color:rgba(255,255,255,.82);font-size:15px;line-height:1.5}

/* text-only sections while photos are pending */
.w55s .w55-solo{max-width:820px}

/* films: click-to-play cover */
.w55s .w55-yt{all:unset;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#141a3c;cursor:pointer;width:100%}
.w55s .w55-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.w55s .w55-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--accent,#fee04a);color:#1b1f4a;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .2s}
.w55s .w55-yt:hover .w55-play,.w55s .w55-yt:focus-visible .w55-play{transform:scale(1.08)}
.w55s .w55-yt:focus-visible{outline:3px solid var(--accent,#fee04a);outline-offset:3px}

.w55s .w55-src{margin-top:28px}
.w55s .jc-form-msg{margin-top:16px;padding:12px 16px;border-radius:4px;font-size:15px}

/* spec note readable on the navy plate; feature list with check marks */
.w55s .plate .note{color:rgba(255,255,255,.66)}
.w55s .checks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.w55s .checks li{position:relative;padding-left:30px;line-height:1.5}
.w55s .checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--accent,#fee04a) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%231b1f4a%27 d=%27M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z%27/%3E%3C/svg%3E") center/12px no-repeat}

/* Windelo logo on a white plate above the hero chips (same look as the Windelo Catamarans page) */
.w55s .w55-logo{display:inline-flex;background:#fff;border-radius:6px;padding:12px 18px;margin-bottom:26px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.w55s .w55-logo img{height:52px;width:165px;display:block}
@media (max-width:760px){.w55s .w55-logo{padding:10px 14px;margin-bottom:20px}.w55s .w55-logo img{height:40px;width:127px}}

/* official photos (2026-11-08): sunset photo behind the "on order" band */
.w54.w55s .w55-order{background:#141a3c}
.w54.w55s .w55-order::before{background:var(--w55-band,none) 50% 60%/cover no-repeat}
.w54.w55s .w55-order::after{background:linear-gradient(90deg,rgba(18,20,56,.92) 0%,rgba(18,20,56,.78) 50%,rgba(18,20,56,.55) 100%)}
.w55s .w55-hero-img{object-position:60% 45%}

/* gallery: 4 columns, 2 on phones */
.w55s .w55-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:36px}
@media (max-width:760px){.w55s .w55-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.w55s .w55-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;background:#e6e9f2}
.w55s .w55-gallery a{display:block;height:100%;cursor:zoom-in}
.w55s .w55-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.w55s .w55-gallery figure:hover img{transform:scale(1.04)}
.w55s .w55-gallery figcaption{position:absolute;left:10px;bottom:10px;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,18,24,.6);padding:5px 8px;border-radius:3px;pointer-events:none}

/* photo viewer */
.w55-lb{border:0;padding:0;background:transparent;max-width:min(94vw,1600px);max-height:92vh;overflow:visible}
.w55-lb::backdrop{background:rgba(10,12,32,.9)}
.w55-lb img{display:block;max-width:min(94vw,1600px);max-height:92vh;width:auto;height:auto;border-radius:4px}
.w55-lb-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--accent,#fee04a);color:#1b1f4a;font-size:26px;line-height:1;cursor:pointer}
@media (max-width:760px){.w55-lb-x{top:8px;right:8px}}
@media (max-width:760px){.w55s .w55-hero-img{object-position:74% 55%}}