/* Atro Vuolle – Tilausbussit-sivu (konsepti A). Ladataan style.css:n jälkeen. */

/* Murupolku */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;font-size:.8125rem;color:#c9d2db}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:#fff}

/* Pääbanneri: kuva koko leveydeltä, teksti alavasemmalla */
.phero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(calc(100svh - var(--header-h)),42rem)}
.phero picture{display:contents}
.phero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(13 27 42/.9),rgb(13 27 42/.25) 55%,transparent),linear-gradient(90deg,rgb(13 27 42/.78) 0%,rgb(13 27 42/.55) 35%,transparent 65%)}
.phero__text{padding-block:3rem clamp(2.5rem,6svh,3.75rem);text-shadow:0 1px 12px rgb(13 27 42/.4)}
.phero h1{margin-top:1rem;max-width:16ch;font-size:clamp(2.4rem,1.5rem + 3.2vw,4.4rem)}
.phero h1 .kw{display:block;font:600 clamp(.9rem,.8rem + .4vw,1.1rem)/1.3 var(--sans);letter-spacing:0;color:var(--gold-2);margin-bottom:.6rem}
.phero__lead{max-width:36rem;margin-top:1rem;font-size:clamp(1rem,.95rem + .25vw,1.125rem);color:#d9e0e7}
.phero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.nw{white-space:nowrap}

/* Autotyyppipaneelit */
.panel{display:grid;background:var(--surface)}
.panel picture{display:block;min-height:16rem}
.panel__img{width:100%;height:100%;object-fit:cover}
.panel__body{padding:clamp(2rem,5vw,4.5rem) var(--gutter);display:flex;flex-direction:column;justify-content:center}
.panel--dark .panel__body{background:var(--navy);color:#fff}
.cap{font:500 clamp(3.25rem,2.4rem + 3vw,5.5rem)/1 var(--serif);color:#8a6420}
.cap small{font:500 1rem/1 var(--sans);margin-left:.5rem;letter-spacing:.06em;color:inherit}
.panel--dark .cap{color:var(--gold-2)}
.panel h2{margin-top:.75rem;font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem)}
.panel h2 a{text-decoration:none}
.panel p{margin-top:.75rem;max-width:30rem;color:var(--muted)}
.panel--dark p{color:#d9e0e7}
.panel .btn{align-self:flex-start;margin-top:1.75rem}
@media (min-width:52em){
  .panel{grid-template-columns:3fr 2fr;min-height:30rem}
  .panel--flip{grid-template-columns:2fr 3fr}
  .panel--flip picture{order:2}
  .panel__body{padding-inline:clamp(2rem,5vw,4.5rem)}
}

.ticks{list-style:none;padding:0;margin-top:1rem;display:grid;gap:.45rem}
.ticks li{display:flex;gap:.6rem;align-items:center;font-weight:500;font-size:.9375rem;color:var(--navy)}
.ticks .i{color:#8a6420}
.panel--dark .ticks li{color:#d9e0e7}
.panel--dark .ticks .i{color:var(--gold-2)}

/* Varustelu */
.sec{padding-block:clamp(3.5rem,7vw,5.5rem)}
.sec h2{margin-top:1rem;font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem)}
.eyebrow--dark{color:#8a6420}
.equip{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.5rem}
.equip li{text-align:center;padding:1.75rem 1rem;border:1px solid var(--line);border-radius:var(--r)}
.equip li:last-child:nth-child(odd){grid-column:1/-1}
.equip .i{width:2rem;height:2rem;margin-inline:auto;color:#8a6420}
.equip strong{display:block;margin-top:.75rem;color:var(--navy)}
.equip span{font-size:.8125rem;color:var(--muted)}
@media (min-width:52em){.equip{grid-template-columns:repeat(5,1fr)}.equip li:last-child:nth-child(odd){grid-column:auto}}

/* Yhteydenottonauha */
.ctaband{background:var(--navy);color:#fff;padding-block:3.5rem}
.ctaband .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem 2rem}
.ctaband h2{font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem)}
.ctaband p{margin-top:.4rem;color:#b9c4cf}
.ctaband__cta{display:flex;flex-wrap:wrap;gap:.75rem}

@media (max-width:30em){
  .phero__cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .phero__cta .btn{padding-inline:.75rem}
}