/*
  Toimintokaruselli — Esimerkkisivustot-osion loppuun.

  Demokortit yläpuolella vastaavat kysymykseen "miltä sivusto näyttää".
  Tämä vastaa kysymykseen "mitä se tekee": ajanvaraus, varausvahvistus,
  yhteydenottolomake, mobiilivalikko. Kortit vievät samoihin demoihin,
  joten kuva ei ole koriste vaan sisäänkäynti.

  Vaakavieritys natiivilla scroll-snapilla. Nuolet ovat JS:n lisä, eivät
  ehto: ilman JS:ää rata vierii sormella, rullalla ja näppäimistöllä.

  Oma tiedosto, koska style.css on jo 2510 riviä.
*/

.toiminnot {
  margin-top: clamp(48px, 6vw, 72px);
}

.toiminnot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.toiminnot-head h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.toiminnot-nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.toiminnot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.toiminnot-btn svg {
  width: 18px;
  height: 18px;
}

.toiminnot-btn:hover:not(:disabled) {
  border-color: var(--text);
}

/* Radan päässä nappi himmenee mutta ei katoa — hyppivä layout on
   ärsyttävämpi kuin harmaa nappi. */
.toiminnot-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Flex eikä grid: grid-auto-columns antaa sarakkeiden kutistua mahtuakseen
   rataan, jolloin neljä korttia latistuu näkyviin eikä mitään vieritettävää
   jää. Flex-basis + flex-shrink: 0 pitää kortin leveyden ja pakottaa radan
   yli reunan — vasta silloin karuselli on karuselli. */
.toiminnot-track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 4px 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.toiminnot-track::-webkit-scrollbar {
  display: none;
}

/* Näppäimistövieritys tarvitsee tabindexin, ja tabindex tarvitsee
   näkyvän fokuksen. */
.toiminnot-track:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: var(--radius);
}

/* Kapealla ruudulla seuraava kortti kurkistaa reunasta — se kertoo että
   rataa voi vierittää, ilman erillistä ohjetekstiä. */
.toiminto-card {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

/* Kaksi kerrallaan, ei kolmea: kuvassa on valokuva puhelimesta, eli itse
   ruutu on vain osa kehystä. Kolmen sarakkeen leveydellä (333px) puhelimen
   näytöstä ei enää erota mitä siinä lukee, jolloin kortti ei näytä
   toimintoa vaan pelkkää fiilistä. */
@media (min-width: 760px) {
  .toiminto-card {
    flex-basis: calc(50% - 10px);
  }
}

.toiminto-card > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.toiminto-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.toiminto-card > a:hover img,
.toiminto-card > a:focus-visible img {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.toiminto-nimi {
  margin: 14px 0 2px;
  font-size: 1rem;
  font-weight: 600;
}

.toiminto-demo {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  .toiminnot-track {
    scroll-behavior: auto;
  }

  .toiminto-card img,
  .toiminnot-btn {
    transition: none;
  }

  .toiminto-card > a:hover img,
  .toiminto-card > a:focus-visible img {
    transform: none;
  }
}