/* =========================================================
   KORTTIAUTOMAATTI — page-specific styles.
   Shared tokens, header, footer, .btn/.btn-outline, .hero-*,
   .korttimyynti, .benefit-*, .ukk/.faq-* all come from /styles.css.
   ========================================================= */

.site-nav .active {
  color: var(--color-primary);
}

.hero-text h1 {
  color: var(--color-primary);
}

.hero-buttons .btn {
  background: var(--color-primary);
}

.hero-buttons .btn:hover {
  background: var(--color-primary-hover);
}

/* "Mikä ihmeen korttiautomaatti?" is much longer than the shared
   .korttimyynti-text h2 was sized for (its 10ch max-width + large
   clamp() assume a short headline). Pulling it out of the text column
   and spanning it across the full card width, on its own grid row
   above the text/image row, lets it run to the right edge on one line
   without shrinking the font — the image row simply starts lower. */

@media (min-width: 1001px) {
  .ka-intro-section .korttimyynti-header {
    grid-template-rows: auto auto;
    row-gap: 1.6rem;
  }

  .ka-intro-section .korttimyynti-heading {
    grid-column: 1 / -1;
  }

  .ka-intro-section .korttimyynti-text {
    grid-column: 1;
    grid-row: 2;
  }

  .ka-intro-section .korttimyynti-image {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

.korttimyynti-heading {
  max-width: 100%;
  margin-bottom: 1.4rem;
  color: var(--color-text);
  font-size: clamp(2.1rem, 3vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 900;
}

/* Force the headline onto exactly 2 lines at the break inserted in the
   markup — below the desktop breakpoint the shared clamp() is too large
   for "ylimääräistä työtä" to fit on one line, so it wraps a 3rd/4th
   line; shrink it just enough here to guarantee 2 lines at every width. */

@media (max-width: 1000px) {
  .hero-text h1 {
    max-width: 100%;
    font-size: clamp(1.9rem, 6vw, 3rem);
  }

  /* Unlike the homepage's card-fan hero image, this is a single product
     photo, so it reads fine cropped down for mobile/tablet — show it
     instead of inheriting the shared .hero-image{display:none} rule, and
     put it above the heading rather than below (its default DOM order). */
  .hero-image {
    display: block;
    order: -1;
    width: min(70%, 300px);
    margin: 0 auto;
  }

  /* The shared column layout's 2.5rem gap is sized for hero-text vs.
     hero-image both being substantial blocks; with the image now first
     and comparatively compact, that gap reads as an oversized blank
     space above the heading — tighten it here. */
  .hero-content {
    gap: 1.25rem;
  }
}

/* Mitat-kuva on läpinäkyvä ääriviivakaavio, ei tuotevalokuva,
   joten se ei tarvitse .korttimyynti-image:n hehkua eikä korttikehystä —
   kuva leijuu suoraan taustalla, ja varjo seuraa sen omaa muotoa. */

.ka-mitat-visual::before {
  display: none;
}

.ka-mitat-visual .ka-mitat-image {
  max-width: 560px;
  max-height: none;
  transform: none;
  filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.12));
}

.site-nav .active::after {
  width: 100%;
}

/* Generic image placeholder, reused across every section that
   will later receive a real photo. */

.ka-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 320px;
  background: var(--color-primary-light);
  border: 2px dashed var(--color-border);
  border-radius: 22px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 2rem;
}

.ka-image-placeholder i {
  width: 46px;
  height: 46px;
  color: var(--color-primary);
}

.ka-image-placeholder span {
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 26ch;
}

.hero-image .ka-image-placeholder {
  min-height: 420px;
  border-radius: 30px;
}

/* Automaatti product photo is portrait, unlike the homepage's wide
   card fan, so it needs a narrower hero-image box on desktop — which
   also frees up room to widen hero-text so the h1 actually breaks onto
   the 2 lines its <br> intends, instead of wrapping onto 3-4 at the
   shared component's default 560px column width. */

@media (min-width: 1001px) {
  .hero-section {
    padding-bottom: calc(5rem + 88px);
  }

  .hero-text {
    margin-top: 3.6rem;
    max-width: 700px;
    flex-basis: 640px;
  }

  .hero-text h1,
  .hero-text p {
    max-width: 700px;
  }

  .hero-image {
    flex: 0 0 420px;
    width: 420px;
    max-width: 420px;
  }
}

.korttimyynti-image .ka-image-placeholder {
  max-width: 540px;
  min-height: 320px;
}

/* automaattiliketilassa.png is a real photo (not a transparent product
   cutout), so it gets a framed card treatment instead of the
   .korttimyynti-image img product-shadow rule — and since the shot is
   portrait, it's capped narrower/taller than the shared img rule. */

.korttimyynti-image .ka-liiketila-photo {
  position: relative;
  z-index: 2;
  width: auto;
  height: 350px;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: none;
  filter: none;
}

/* "Miksi automaatti tuo lisäarvoa liiketilaasi?" — the page already has
   two white-card sections (Mikä ihmeen korttiautomaatti, Vastuunjako), so
   this one sits directly on the page background with no panel or card
   behind it, separated only by icon circles and generous spacing. */

.benefits-header {
  margin-bottom: 3.4rem;
}

.benefit-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
}

.benefit-grid .benefit-icon {
  background: var(--color-surface);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.14);
}

/* Hero mini USP row — stacked icon-over-text per column (like the
   .benefit-card pattern used later on the page) instead of icon+text
   side by side, which squeezed the text into ~⅓ of an already-narrow
   column and forced 3-line wraps even for short phrases. */

.ka-hero-usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.ka-hero-usp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.ka-hero-usp .benefit-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  margin: 0;
}

.ka-hero-usp .benefit-icon i {
  width: 24px;
  height: 24px;
}

.ka-hero-usp h3 {
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 0;
}

.ka-hero-usp p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* "Mihin automaatti sopii" tag row (sits inside a reused .korttimyynti card) */

.ka-tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2.6rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-border);
}

.ka-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.3rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
}

.ka-tag i {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* Responsibility split ("Vastuunjako") */

.ka-split-section {
  max-width: 1300px;
  width: calc(100% - 4rem);
  margin: 0 auto 6rem;
}

.ka-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.ka-split-col {
  padding: 5.5rem 3.5rem;
  min-height: 480px;
  border-radius: 26px;
  border: 1px solid var(--color-border);
}

.ka-split-col--you {
  background: var(--color-primary-light);
}

.ka-split-col--us {
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.ka-split-col h3 {
  color: var(--color-text);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
  text-transform: uppercase;
}

.ka-split-col ul {
  list-style: none;
  display: grid;
  gap: 1.3rem;
}

.ka-split-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--color-text);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.5;
}

.ka-split-col li i {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--color-primary);
}

.ka-split-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.ka-split-icon i {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

/* Space requirements section */

.ka-spec-list {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin-top: 1.6rem;
}

.ka-spec-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
}

.ka-spec-list li i {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.ka-spec-note {
  margin-top: 1.6rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-style: italic;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
  .ka-split {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  /* In the markup the icon comes after both columns, so on desktop it
     just sits centered over the (absolute) grid. Stacked on mobile it
     needs to actually be reordered between the two columns to appear
     between them, then pulled in on both sides so it overlaps as a
     centered badge straddling both card edges. */
  .ka-split-col--you {
    order: 1;
  }

  .ka-split-icon {
    order: 2;
    position: static;
    transform: none;
    z-index: 2;
    margin: -1.6rem auto;
  }

  .ka-split-col--us {
    order: 3;
  }
}

/* =========================================================
   CONTACT PAGE (korttiautomaatti/ota-yhteytta/)
   Deliberately mirrors /reklamaatio/reklamaatio.css: same gradient
   hero with rounded bottom corners, the same single centered white
   card overlapping the hero with a top-straddling icon badge, and
   the same shared .benefit-icon list pattern for the info below —
   just under new page-specific class names. Reuses .contact-form's
   field styling from /styles.css for the inputs themselves.
   ========================================================= */

.ka-contact-hero {
  background: var(--gradient-primary);
  padding: 10.5rem 2rem 7rem;
  text-align: center;
  color: #fff;
  border-radius: 0 0 40px 40px;
}

.ka-contact-hero h1 {
  max-width: 700px;
  margin: 0 auto 0.9rem;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ka-contact-hero p {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  line-height: 1.6;
}

.ka-contact-wrap {
  position: relative;
  max-width: 760px;
  width: calc(100% - 2rem);
  margin: -4.5rem auto 3rem;
}

.ka-contact-card {
  position: relative;
  background: var(--color-surface);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  padding: 4.5rem 2.6rem 3rem;
}

.ka-contact-icon {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}

.ka-contact-icon i {
  width: 34px;
  height: 34px;
  color: var(--color-primary);
}

.ka-contact-card h2 {
  text-align: center;
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.ka-contact-subtitle {
  text-align: center;
  max-width: 44ch;
  margin: 0 auto 2.2rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.ka-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ka-contact-submit {
  width: 100%;
  justify-content: center;
}

.ka-contact-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  margin-top: 2.2rem;
  padding: 2rem 1.6rem;
  background: var(--color-primary-light);
  border-radius: 22px;
}

.ka-contact-thanks .benefit-icon {
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.ka-contact-thanks p {
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.ka-contact-thanks-email {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  padding: 0.7rem 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ka-contact-thanks-email:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.ka-contact-thanks-email i {
  width: 17px;
  height: 17px;
}

.ka-contact-signature {
  margin-top: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .ka-contact-hero {
    padding: 8.5rem 1.2rem 6rem;
  }

  .ka-contact-card {
    padding: 4rem 1.4rem 2.2rem;
  }

  .ka-form-row {
    grid-template-columns: 1fr;
  }

  .ka-hero-usps {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .ka-split-section {
    width: calc(100% - 1rem);
  }

  .ka-split-col {
    padding: 2.2rem 1.4rem;
  }

  .ka-tag-row {
    gap: 0.6rem;
  }

  .ka-tag {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .hero-image .ka-image-placeholder {
    min-height: 220px;
  }

  .korttimyynti-image .ka-liiketila-photo {
    max-width: 340px;
    max-height: 255px;
  }
}