/* Sivuston valokuvat (src/photos.mjs, luokat ph-). Kuvat skaalautuvat palstan levyisiksi; kuvasuhde
   asetetaan kehykselle, ja kuva rajataan object-fitillä. Värit ja varjot klik-tokens.css:n tokeneista.
   Kuvien päällä ei ole tekstiä, joten tekstin kontrasti ei muutu. */
.ph-pic { display: block; }
.ph-pic img { display: block; max-width: 100%; height: auto; }

/* Pyöristetty kuvakehys, kevyt varjo. --ph-ratio = kuvasuhde, --ph-pos = rajauksen kohdistus. */
.ph-frame { position: relative; display: block; overflow: hidden; margin: 0; border-radius: var(--klik-radius-lg, 16px); background: var(--klik-tint-1, #eef3fd); box-shadow: var(--klik-shadow, 0 6px 20px rgb(0 41 163 / .07)); aspect-ratio: var(--ph-ratio, 3 / 2); }
.ph-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos, 50% 50%); }

/* ---------- Etusivu (front-page.mjs) ---------- */
/* Olemassa olevat kuvaluokat (fp-bhero-img, fp-path-img, fp-shero-img) toimivat <picture>-kääreen sisällä. */
.fp-path-media > .ph-pic { height: 100%; }
.fp-aud .ph-frame { --ph-ratio: 16 / 7; margin-bottom: 2px; border-radius: 14px; box-shadow: none; }
.fp-aud-landlord .ph-frame { --ph-pos: 50% 40%; }
.fp-offices .ph-frame { --ph-ratio: 16 / 9; --ph-pos: 50% 72%; }

/* ---------- Kaupunkisivut (city-pages.mjs) ---------- */
.cp-why-side { display: grid; gap: var(--klik-gap, 20px); align-content: start; }
.cp-why-side .ph-frame { --ph-ratio: 3 / 2; }

/* ---------- Yhteystiedot (staff-contacts.mjs) ---------- */
.yt-office-photo { --ph-ratio: 3 / 1; --ph-pos: 50% 55%; margin-bottom: var(--klik-gap, 20px); }

/* ---------- content/pages (paikkamerkki <klik-photo>, mirror.mjs) ---------- */
/* Leveä kuvanauha osion otsikon tai ingressin alla. */
.ph-band { --ph-ratio: 3 / 1; margin: 0 0 var(--klik-stack, 24px); }
/* Kuva tekstipalstan oikealla puolella (ingressit ovat enintään ~700 px leveitä); mobiilissa täysleveä. */
.ph-aside { --ph-ratio: 4 / 3; float: right; width: min(38%, 400px); margin: 4px 0 20px 32px; }
/* Olemassa olevan kuvan korvaava <picture>: sivun oma .ku-photo-tyyli koskee kuvaa. */
:is(.ku-intro-media, .ku-split-media) > .ph-pic { height: 100%; }
/* Webflow'n "Ammattitaitoiset asiantuntijat" -osion taustakuva (.designer-image, vanhat aukioloajat ikkunassa)
   korvataan kuvalla; laatikon koko ja ilmestymisanimaatio säilyvät. */
.designer-image:has(> .ph-pic) { position: relative; overflow: hidden; background-image: none !important; }
.designer-image > .ph-pic { position: absolute; inset: 0; }
.designer-image > .ph-pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos, 50% 50%); }
.designer-image > .ph-logo { --ph-pos: 62% 50%; }
/* VA- ja VL-etusivun herokuva optimoituna (sivun oma sääntö lataisi 300 kt:n alkuperäisen). Peittokerros
   --klik-hero-overlay säilyy, joten tekstin kontrasti ei muutu. */
.klik-uusi.header-main.ku-hero-own:not(.vl) {
  background-image: var(--klik-hero-overlay), url("/img/klik-auto-1440.jpg");
  background-image: var(--klik-hero-overlay), image-set(url("/img/klik-auto-1440.webp") type("image/webp"), url("/img/klik-auto-1440.jpg") type("image/jpeg"));
}
.klik-uusi.header-main.ku-hero-own.vl {
  background-image: var(--klik-hero-overlay), url("/img/toimisto-pori-1440.jpg");
  background-image: var(--klik-hero-overlay), image-set(url("/img/toimisto-pori-1440.webp") type("image/webp"), url("/img/toimisto-pori-1440.jpg") type("image/jpeg"));
}

@media (max-width: 767px) {
  .ph-aside { float: none; width: 100%; margin: 0 0 var(--klik-stack, 24px); --ph-ratio: 3 / 2; }
  .klik-uusi.header-main.ku-hero-own:not(.vl) {
    background-image: var(--klik-hero-overlay), url("/img/klik-auto-960.jpg");
    background-image: var(--klik-hero-overlay), image-set(url("/img/klik-auto-960.webp") type("image/webp"), url("/img/klik-auto-960.jpg") type("image/jpeg"));
  }
  .klik-uusi.header-main.ku-hero-own.vl {
    background-image: var(--klik-hero-overlay), url("/img/toimisto-pori-960.jpg");
    background-image: var(--klik-hero-overlay), image-set(url("/img/toimisto-pori-960.webp") type("image/webp"), url("/img/toimisto-pori-960.jpg") type("image/jpeg"));
  }
}

@media (max-width: 640px) {
  .ph-band { --ph-ratio: 3 / 2; }
  .fp-aud .ph-frame { --ph-ratio: 16 / 8; }
  .yt-office-photo { --ph-ratio: 3 / 2; }
}