/* Atro Vuolle – megavalikot (Tilausajot, Tilausbussit). Ladataan style.css:n jälkeen.
   Työpöytä: avautuu hiirellä, näppäimistöllä ja napilla. Mobiili: kuvalliset haitarit. */

.sub-toggle{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;margin-left:.15rem;padding:0;border:0;border-radius:.25rem;background:none;color:inherit;cursor:pointer}
.sub-toggle .i{width:.95rem;height:.95rem;transition:rotate .2s var(--ease)}
.has-sub.is-open .sub-toggle .i{rotate:180deg}
.mega ul{list-style:none;padding:0}
.mega a{text-decoration:none;color:inherit}
.mega img{display:block;width:100%;object-fit:cover}

@media (min-width:64em){
  .nav ul.nav__list{align-items:center}
  .nav .has-sub{display:flex;align-items:center;align-self:stretch;min-height:var(--header-h)}
  .nav .has-sub>a{color:#d9e0e7}
  .nav .has-sub.is-open>a,.nav .has-sub:hover>a{color:#fff;border-bottom-color:var(--gold)}
  .nav .has-sub>a[aria-current]{color:#fff;border-bottom-color:var(--gold)}
  .sub-toggle{color:#d9e0e7}

  .mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-top:3px solid var(--gold);
        box-shadow:0 2rem 3rem -1.5rem rgb(0 0 0 / .5);visibility:hidden;opacity:0;translate:0 -.5rem;
        transition:opacity .18s var(--ease),translate .18s var(--ease),visibility 0s .18s}
  .has-sub:hover>.mega,.has-sub:focus-within>.mega,.has-sub.is-open>.mega{visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
  .has-sub.is-closed>.mega{visibility:hidden;opacity:0}
  .mega__in{display:grid;grid-template-columns:15rem 1fr;gap:2.5rem;padding-block:2rem 2.25rem}

  .mega__intro .kick{font:600 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8a6420}
  .mega__intro .mega__title{font:500 1.7rem/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance;margin-top:.8rem;color:var(--navy);margin-top:.8rem;font-size:1.7rem;color:var(--navy)}
  .mega__intro p:not(.kick,.mega__title){margin-top:.6rem;font-size:.9rem;color:var(--muted)}
  .mega__all{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-weight:600;color:var(--navy)}
  .mega__all:hover{gap:.65rem}

  .nav .mega__cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1.25rem}
  .nav .mega a{padding:0;border:0;font-size:inherit;font-weight:inherit;color:inherit}
  .mega__cards a{position:relative;display:block}
  .mega__cards img{aspect-ratio:4/3;border-radius:.6rem;transition:filter .2s}
  .mega__cards a:hover img{filter:brightness(1.06)}
  .mega__cards strong{display:block;margin-top:.7rem;font:500 1.1rem/1.2 var(--serif);color:var(--navy);hyphens:manual}
  .mega__cards a:hover strong{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
  .mega__cards em{display:block;margin-top:.2rem;font-size:.8rem;font-style:normal;line-height:1.4;color:var(--muted)}
  .mega__badge{position:absolute;top:.6rem;left:.6rem;padding:.3rem .65rem;border-radius:999px;background:var(--navy);color:var(--gold-2);font-size:.75rem;font-weight:600}
}

@media (max-width:63.99em){
  .nav{max-height:calc(100svh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
  .nav .has-sub{display:grid;grid-template-columns:1fr auto;align-items:center}
  .sub-toggle{width:2.75rem;height:2.75rem;margin:0;color:#fff}
  .sub-toggle .i{width:1.15rem;height:1.15rem}
  .mega{grid-column:1/-1;display:none;margin:.15rem 0 .75rem;padding:.35rem;border-radius:.75rem;background:rgb(255 255 255 / .06)}
  .has-sub.is-open>.mega{display:block}
  .mega__intro{display:none}
  .mega__in{width:auto;margin:0}
  .nav .mega__cards{display:grid;gap:.1rem}
  .nav .mega__cards a{display:grid;grid-template-columns:4.25rem 1fr auto;gap:.85rem;align-items:center;padding:.45rem;border:0;border-radius:.5rem;font-size:1rem}
  .nav .mega__cards a:hover{background:rgb(255 255 255 / .05)}
  .mega__cards img{aspect-ratio:4/3;border-radius:.45rem}
  .mega__cards strong{display:block;font-weight:600;color:#fff}
  .mega__cards em{display:block;font-size:.8rem;font-style:normal;line-height:1.35;color:#b9c4cf}
  .mega__badge{font-size:.8rem;font-weight:600;color:var(--gold-2);white-space:nowrap}
  .nav .mega__all{display:block;padding:.7rem .5rem .4rem;font-size:.9rem;font-weight:600;color:var(--gold-2)}
}

/* Kielivalinta */
.nav .lang{display:flex;align-items:center;gap:.35rem;margin-left:.5rem;padding-left:1rem;border-left:1px solid rgb(255 255 255/.2);font-size:.85rem;font-weight:600}
.nav .lang a{padding:0!important;border:0!important;color:#b9c4cf}
.nav .lang a:hover{color:#fff}
.nav .lang span{padding:.15rem .45rem;border-radius:.3rem;background:var(--gold);color:var(--navy)}
@media(max-width:63.99em){.nav .lang{margin:1rem 0 0;padding:1rem 0 0;border-left:0;border-top:1px solid rgb(255 255 255/.12)}}