/* Cascade Leisure — BOAT DETAIL styles (single-boat.php).
   Canonical layout transferred from the approved boats/cascade-260.html.
   The CTA button rules are scoped to .cta-section so they don't override
   the global .btn used elsewhere. */

.boat-detail{line-height:1.6}

/* Hero */
.boat-detail .hero{position:relative;height:100vh;min-height:600px;overflow:hidden}
.boat-detail .hero-image{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;animation:kenBurns 12s var(--ease) forwards}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.05)}}
.boat-detail .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(9,21,37,.6) 0%,rgba(13,31,53,.3) 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--white)}
.boat-detail .hero-badge{display:inline-block;background:rgba(78,197,232,.15);border:1px solid var(--accent);color:var(--accent);padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:1.5rem;opacity:0;animation:fadeInUp .8s var(--ease) .2s forwards}
.boat-detail .hero-title{font-family:var(--serif);font-size:clamp(3rem,8vw,6rem);font-weight:700;text-transform:uppercase;line-height:1.1;margin-bottom:1rem;opacity:0;animation:fadeInUp .8s var(--ease) .4s forwards;text-shadow:0 2px 20px rgba(9,21,37,.4),0 1px 3px rgba(9,21,37,.3)}
.boat-detail .hero-tagline{font-size:clamp(1rem,2vw,1.25rem);max-width:500px;font-weight:400;letter-spacing:.5px;opacity:0;animation:fadeInUp .8s var(--ease) .6s forwards;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(9,21,37,.4)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Specs Bar */
.boat-detail .specs-bar{background:var(--off);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:3rem 2rem;gap:2rem}
.boat-detail .spec-item{text-align:center}
.boat-detail .spec-label{display:block;font-size:.75rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray500);margin-bottom:.5rem}
.boat-detail .spec-value{display:block;font-size:1.75rem;font-weight:700;color:var(--accent)}

/* Description */
.boat-detail .description-section{padding:5rem 2rem;max-width:1400px;margin:0 auto;background:var(--white)}
.boat-detail .description-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.boat-detail .description-content h2{font-family:var(--serif);font-size:2.5rem;font-weight:700;text-transform:uppercase;margin-bottom:1.5rem;color:var(--dark);line-height:1.2}
.boat-detail .description-content p{font-size:1.1rem;color:var(--gray500);margin-bottom:1.5rem;line-height:1.8}
.boat-detail .description-image{width:100%;border-radius:var(--radius);overflow:hidden;aspect-ratio:605 / 807;box-shadow:var(--shadow-lg)}
.boat-detail .description-image img{width:100%;height:100%;object-fit:cover}

/* Features */
.boat-detail .features-section{background:var(--white);padding:5rem 2rem}
.boat-detail .features-container{max-width:1000px;margin:0 auto}
.boat-detail .section-title{font-family:var(--serif);font-size:2.2rem;font-weight:700;text-transform:uppercase;margin-bottom:3rem;text-align:center;color:var(--dark)}
.boat-detail .features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.boat-detail .feature-item{display:flex;gap:1.5rem;align-items:flex-start;padding:1.5rem;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--gray100);transition:all .3s var(--ease)}
.boat-detail .feature-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.boat-detail .feature-icon{flex-shrink:0;width:24px;height:24px;margin-top:2px}
.boat-detail .feature-icon svg{width:100%;height:100%}
.boat-detail .feature-text{flex:1}
.boat-detail .feature-text h3{font-size:1.1rem;font-weight:700;text-transform:uppercase;margin-bottom:.5rem;color:var(--dark)}
.boat-detail .feature-text p{font-size:.95rem;color:var(--gray500);line-height:1.6}

/* Gallery — uniform tiles at every breakpoint (3 cols desktop) */
.boat-detail .gallery-section{padding:5rem 2rem;background:var(--white)}
.boat-detail .gallery-container{max-width:1400px;margin:0 auto}
.boat-detail .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.boat-detail .gallery-item{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4 / 3;cursor:pointer}
.boat-detail .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.boat-detail .gallery-item:hover img{transform:scale(1.08)}

/* Other Models */
.boat-detail .models-section{padding:5rem 2rem;background:var(--off)}
.boat-detail .models-container{max-width:1400px;margin:0 auto}
.boat-detail .models-title{font-family:var(--serif);font-size:2.2rem;font-weight:700;text-transform:uppercase;margin-bottom:3rem;text-align:center;color:var(--dark)}
.boat-detail .models-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.boat-detail .model-card{background:var(--white);border-radius:var(--radius);overflow:hidden;transition:all .3s var(--ease);cursor:pointer;border:1px solid var(--gray100);text-decoration:none;color:inherit;display:block}
.boat-detail .model-card:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.boat-detail .model-card-image{width:100%;height:200px;overflow:hidden;background:var(--off)}
.boat-detail .model-card-image img{width:100%;height:100%;object-fit:cover}
.boat-detail .model-card-content{padding:1.5rem}
.boat-detail .model-card-title{font-size:1.3rem;font-weight:700;text-transform:uppercase;margin-bottom:.5rem;color:var(--dark)}
.boat-detail .model-card-specs{font-size:.875rem;color:var(--gray500);line-height:1.6}
.boat-detail .model-card-link{display:inline-block;margin-top:1rem;color:var(--accent);text-decoration:none;font-weight:600;transition:all .3s var(--ease);font-size:.875rem}

/* CTA Section (button rules scoped here to avoid clobbering global .btn) */
.boat-detail .cta-section{padding:5rem 2rem;background:linear-gradient(135deg,var(--dark) 0%,var(--dark3) 100%);color:var(--white);text-align:center}
.boat-detail .cta-container{max-width:800px;margin:0 auto}
.boat-detail .cta-title{font-family:var(--serif);font-size:2.5rem;font-weight:700;text-transform:uppercase;margin-bottom:1rem}
.boat-detail .cta-subtitle{font-size:1.1rem;color:var(--gray300);margin-bottom:2.5rem}
.boat-detail .cta-buttons{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.boat-detail .cta-section .btn{padding:1rem 2rem;border-radius:var(--radius-sm);font-weight:600;font-size:1rem;border:none;cursor:pointer;transition:all .3s var(--ease);text-decoration:none;display:inline-block}
.boat-detail .cta-section .btn-primary{background:var(--accent);color:var(--dark)}
.boat-detail .cta-section .btn-primary:hover{background:var(--accent2);transform:translateY(-3px);box-shadow:0 10px 30px rgba(78,197,232,.3)}
.boat-detail .cta-section .btn-secondary{background:transparent;color:var(--white);border:2px solid var(--accent)}
.boat-detail .cta-section .btn-secondary:hover{background:var(--accent);color:var(--dark);transform:translateY(-3px)}

@media(max-width:1024px){
  .boat-detail .description-grid{grid-template-columns:1fr;gap:2rem}
  .boat-detail .description-content h2{font-size:2rem}
  .boat-detail .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .boat-detail .features-grid{grid-template-columns:1fr}
  .boat-detail .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .boat-detail .cta-buttons{flex-direction:column}
  .boat-detail .cta-section .btn{width:100%}
}