/* Camping on Wheels — per-van pages (site/vans/<slug>/ and site/pt/vans/<slug>/).
   Generated markup lives in build_vans.py; these rules are the only styling those pages need.
   Base header/footer/buttons/hero colours come from styles.css. Phone tweaks use
   (orientation:portrait) so they never fight the phone-hero block at the end of styles.css. */
.van-page main{display:block}
.van-hero{padding:0}
.van-hero .page-hero-in{padding:118px 0 44px}
.van-back{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:#5eead4;
  border:1px solid rgba(94,234,212,.42);border-radius:999px;padding:6px 14px;margin-bottom:16px}
.van-back:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.van-hero-tag{color:#a7f3d0!important;font-weight:600}
.van-top{padding:54px 0 66px}
.van-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.van-hero-fig{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--sand)}
.van-hero-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.van-facts h2{font-size:1.15rem;font-weight:800;margin:22px 0 6px;letter-spacing:-.01em}
.van-facts p{color:var(--slate);margin:0;font-size:.95rem}
.van-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 4px;padding:0}
.van-spec>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.van-spec dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 4px}
.van-spec dd{margin:0;font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.35}
.van-spec dd strong{color:var(--teal-d);font-size:1.05rem}
.van-photos-count{display:inline-block;margin-top:12px;font-size:.78rem;font-weight:700;color:var(--teal-d);
  background:rgba(13,148,136,.09);border:1px solid rgba(13,148,136,.22);border-radius:999px;padding:4px 12px}
.van-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.van-cta .btn{flex:1 1 auto;min-width:190px;padding:14px 18px;font-size:.95rem}
.van-cta-sub{font-size:.82rem;color:var(--muted);margin-top:10px!important}
.van-alt-lang{display:inline-block;margin-top:6px;font-size:.84rem;font-weight:700;color:var(--teal-d);
  border-bottom:1px solid rgba(13,148,136,.35)}
.van-alt-lang:hover{color:var(--ink);border-color:var(--ink)}
#equipment{padding:60px 0}
#gallery{padding:66px 0}
.van-count{font-size:.86rem;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:8px}
.van-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.van-fig{margin:0;border-radius:14px;overflow:hidden;background:var(--sand);border:1px solid var(--line)}
.van-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.van-photo-grid .van-fig:first-child,.van-photo-grid .van-fig:nth-child(2){grid-column:span 2}
.van-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.van-other{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px;transition:transform .18s ease,box-shadow .18s ease}
.van-other:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.van-other img{width:104px;height:78px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.van-other span{display:flex;flex-direction:column;gap:3px;min-width:0}
.van-other strong{font-size:.95rem}
.van-other small{color:var(--muted);font-size:.8rem}
.van-foot .footer-inner{padding:44px 0 26px}
.van-foot .footer-inner a{display:block}
.van-foot .copyright{border-top:1px solid rgba(255,255,255,.14);padding:16px 0 30px}
@media (max-width:1000px){
  .van-grid{grid-template-columns:1fr;gap:26px}
  .van-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .van-others{grid-template-columns:1fr}
  /* 3 columns: the first photo goes full width, otherwise the second one
     (which also spans 2) would wrap and leave an empty cell beside it */
  .van-photo-grid .van-fig:first-child{grid-column:span 3}
  .van-photo-grid .van-fig:nth-child(2){grid-column:span 1}
}
@media (max-width:900px) and (orientation:portrait){
  .van-hero .page-hero-in{padding:104px 0 34px}
  .van-top{padding:34px 0 48px}
  .van-spec{grid-template-columns:1fr 1fr}
  .van-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .van-photo-grid .van-fig:first-child,.van-photo-grid .van-fig:nth-child(2){grid-column:span 2}
  .van-other img{width:86px;height:64px}
  #equipment,#gallery{padding:44px 0}
  .van-cta .btn{min-width:0;flex:1 1 100%}
}