/* Replikan omat täydennykset Squarespace-CSS:n päälle (JS-riippuvuuksien korvaus). */

/* Kuvat: varmuusfallback jos inline-tyyli puuttuu (komponentti-CSS asemoi absoluuttisesti) */
.sqs-block[data-definition-name="website.components.imageFluid"] img[data-sqsp-image-block-image] {
  object-fit: var(--image-component-object-fit, cover);
  object-position: var(--image-component-focal-point, 50% 50%);
}

/* Sisääntulohäivytys — samat parametrit kuin alkuperäisessä (mitattu 12.7.2026:
   inline style "transition-timing-function: ease; transition-duration: 1.5s; transition-delay: 0s",
   opacity-only, per elementti). Vain kun JS on käytössä — ilman JS:ää kaikki näkyy heti. */
html.js [data-anim] { opacity: 0; transition: opacity 1.5s ease 0s; }
html.js [data-anim].anim-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-anim] { opacity: 1; transition: none; }
}

/* Haitari: EI omia sääntöjä — replika.js asettaa data-is-open + --open-luokan,
   ja Squarespacen oma CSS hoitaa sekä sisällön näkyvyyden että nuolen kääntämisen. */

/* Uutiskirjeen kiitosviesti */
.newsletter-success { font-size: 1.1rem; padding: 1rem 0; }

/* Napit keskelle mobiilissa (Heikin valinta 13.7.): alkuperäinen jättää painike-blokin
   kapeaan grid-soluun vasemmalle. Venytetään blokki koko leveyteen, keskitetään KAPEA nappi
   (ei täysleveä), säilytetään reunamarginaali (site-gutter). */
@media (max-width: 767px) {
  .fluid-engine .fe-block:has(.sqs-block-button-container) { grid-column: 1 / -1; }
  .sqs-block-button-container { display: flex; justify-content: center; padding-left: 6vw; padding-right: 6vw; box-sizing: border-box; }
  .sqs-block-button-container .sqs-block-button-element { width: auto; max-width: 100%; }
}

/* Lomakkeen nimikentät vierekkäin (alkuperäisessä tämän tekee Squarespacen ajonaikainen CSS).
   box-sizing:border-box + max-width:100% estävät kenttien vuotamisen näytön reunan yli
   (alkuperäisen input on border-box → 167px/kenttä 390px:llä; content-box vuoti 199px→431px). */
.react-form-contents fieldset.form-item.fields { display: flex; flex-wrap: nowrap; gap: 0 10px; border: 0; padding: 0; margin-left: 0; margin-right: 0; width: 100%; min-width: 0; box-sizing: border-box; }
.react-form-contents fieldset.form-item.fields .field { flex: 1 1 0; min-width: 0; }
.react-form-contents fieldset.form-item.fields legend { flex-basis: 100%; }
.react-form-contents input, .react-form-contents textarea { box-sizing: border-box; max-width: 100%; }
@supports not (gap: 10px) {
  .react-form-contents fieldset.form-item.fields .field + .field { margin-left: 10px; }
}
/* Viesti-tekstikenttä: alkuperäisessä kiinteä 100 px korkeus kaikilla leveyksillä */
.react-form-contents textarea { height: 100px; box-sizing: border-box; }

/* Kenttäotsikot: "(pakollinen)"-kuvaus himmennettynä kuten alkuperäisessä */
.react-form-contents .caption-text { display: flex; column-gap: .35em; }
.react-form-contents .description.required { opacity: .7; line-height: 1; white-space: pre-wrap; }

/* Ympyrämaskatut kuvat (asiakaskokemukset): keskitys — muoto SVG-clipPathista, koko JS:stä.
   (aspect-ratio:1 kokeiltu → muutti desktop-kokoja, hylätty; robustius tulee fonts.ready-uudelleenlaskennasta.) */
.fluid-image-container[data-shape-mask="circle"] { overflow: hidden; margin: auto; }

/* Mobiilissa lomittain-asettelu tuo kuvan yläreunan lähelle edeltävää tekstiriviä. Oikeilla
   Adobe-fonteilla otsikon alasakarat (esim. "eteenpäin" p) osuivat kuvaan → lisätään yläväli.
   0.5em jäi liian tiukaksi (Heikki: pari pikseliä p-sakarasta) → 1.1em. */
@media (max-width: 767px) {
  .fluid-image-container[data-shape-mask="circle"] { margin-top: 1.1em; }
}