/* Cascade Leisure — CARAVANS OVERVIEW styles (archive-caravan.php).
   Transferred verbatim from the approved caravans.html. */

/* PAGE HERO — photo bg */
.page-hero{min-height:55vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding:120px 0 80px;background:var(--dark)}
.page-hero-image{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;animation:heroZoom 14s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.page-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(9,21,37,.82) 0%,rgba(13,31,53,.55) 50%,rgba(9,21,37,.75) 100%);z-index:1}
.page-hero::after{content:none}
.page-hero .container{position:relative;z-index:2}
.tag{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.tag::before{content:'';width:20px;height:1.5px;background:var(--accent)}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.8rem,5vw,4.5rem);color:var(--white);line-height:1.08;margin-bottom:16px;font-weight:700;text-transform:uppercase;text-shadow:0 2px 20px rgba(9,21,37,.4),0 1px 3px rgba(9,21,37,.3)}
.page-hero h1 span{color:var(--accent)}
.page-hero p{font-size:1.05rem;color:rgba(255,255,255,.85);max-width:560px;line-height:1.7;font-weight:400;text-shadow:0 1px 8px rgba(9,21,37,.4)}

/* ZERO-WOOD BANNER (marquee) */
.zero-wood{background:var(--dark);padding:16px 0;overflow:hidden;white-space:nowrap}
.zero-wood-track{display:flex;gap:0;animation:marqueeScroll 35s linear infinite}
.zero-wood-item{flex-shrink:0;padding:0 40px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:16px}
.zero-wood-item::after{content:'·';font-size:.8rem;opacity:.3}

/* USP STRIP */
.usp-strip{padding:60px 0;background:var(--white);border-bottom:1px solid var(--gray100)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray100);border-radius:var(--radius-sm);overflow:hidden}
.usp-item{background:var(--white);padding:32px 24px;text-align:center}
.usp-item .v{font-family:var(--serif);font-size:2.4rem;color:var(--dark);line-height:1}
.usp-item .v span{color:var(--accent)}
.usp-item .l{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray300);margin-top:4px}

/* MODELS */
.models-section{padding:80px 0 120px;background:var(--off)}
.models-section .section-head{text-align:center;margin-bottom:56px}
.stitle{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);line-height:1.12;margin-bottom:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.stitle span{color:var(--accent)}
.ssub{font-size:.95rem;color:var(--gray500);max-width:520px;line-height:1.75;font-weight:300;margin:0 auto}

/* Caravan cards — tall editorial style */
.caravan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cv-card{border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--gray100);transition:all .5s var(--ease);display:block}
.cv-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.cv-card-visual{aspect-ratio:3/4;position:relative;overflow:hidden}
.cv-card-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(9,21,37,.85) 0%,rgba(9,21,37,.1) 50%)}
.cv-card-info{position:absolute;bottom:0;left:0;right:0;padding:28px;z-index:2;color:var(--white)}
.cv-card-info h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:4px;font-weight:700;text-transform:uppercase}
.cv-card-info .cv-tagline{font-size:.76rem;color:rgba(255,255,255,.5);margin-bottom:14px;font-weight:300}
.cv-card-specs{display:flex;gap:16px;flex-wrap:wrap}
.cv-card-specs .spec{display:flex;flex-direction:column;gap:1px}
.cv-card-specs .spec .sv{font-size:.88rem;font-weight:600;color:var(--white)}
.cv-card-specs .spec .sl{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.cv-card-bottom{padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.cv-card-bottom span{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.cv-card-bottom svg{width:14px;height:14px;color:var(--accent);transition:transform .3s}
.cv-card:hover .cv-card-bottom svg{transform:translateX(4px)}

/* Featured card spans 2 columns */
.cv-card.featured{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}
.cv-card.featured .cv-card-visual{aspect-ratio:auto;min-height:480px}
.cv-card.featured .cv-card-content{display:flex;flex-direction:column;justify-content:center;padding:48px}
.cv-card.featured .cv-card-content h3{font-family:var(--serif);font-size:2rem;color:var(--dark);margin-bottom:8px;font-weight:700;text-transform:uppercase}
.cv-card.featured .cv-card-content .cv-tagline{font-size:.88rem;color:var(--gray500);margin-bottom:20px;line-height:1.7;font-weight:300}
.cv-card.featured .cv-card-content .feat-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.cv-card.featured .feat-spec{padding:16px;background:var(--off);border-radius:10px;text-align:center}
.cv-card.featured .feat-spec .sv{font-family:var(--serif);font-size:1.3rem;color:var(--dark)}
.cv-card.featured .feat-spec .sl{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray300);margin-top:2px}
.cv-card.featured .cv-card-link{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;transition:gap .3s}
.cv-card.featured:hover .cv-card-link{gap:14px}
.cv-card.featured .cv-card-link svg{width:14px;height:14px}

/* CTA */
.cta-banner{padding:100px 0;background:var(--dark);position:relative;overflow:hidden;text-align:center}
.cta-banner::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(78,197,232,.06),transparent 70%)}
.cta-banner h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);color:var(--white);margin-bottom:12px;position:relative;font-weight:700;text-transform:uppercase}
.cta-banner h2 span{color:var(--accent)}
.cta-banner p{font-size:1rem;color:rgba(255,255,255,.4);margin-bottom:32px;font-weight:300;position:relative}
.cta-banner .btn-ghost{border:1.5px solid rgba(255,255,255,.2);color:var(--white);background:0;margin-left:12px}
.cta-banner .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04)}

@media(max-width:1024px){
  .cv-card.featured{grid-column:span 2;grid-template-columns:1fr}
  .cv-card.featured .cv-card-visual{min-height:320px}
  .usp-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .caravan-grid{grid-template-columns:1fr}
  .cv-card.featured{grid-column:span 1;grid-template-columns:1fr}
  .usp-grid{grid-template-columns:1fr 1fr}
  /* Tighten the CTA so it sits closer to the footer, and stack the buttons neatly */
  .cta-banner{padding:56px 0}
  .cta-banner .container>div{display:flex;flex-direction:column;align-items:center;gap:12px}
  .cta-banner .btn{width:100%;max-width:320px;justify-content:center}
  .cta-banner .btn-ghost{margin-left:0}
}