/* --- BOOKING/CTA (Single-sivu) --- */
.asunto-cta {
  margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

/* Yhtenäinen “pill”-pohja CTA-napeille – sama henki kuin kortissa */
.asunto-cta .wp-element-button.wp-block-button__link,
.asunto-cta a.button.button-primary,
.asunto-cta a.button.button-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .70rem 1.1rem;
  border-radius: 9999px;                /* pill */
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  outline: none;
  /* SININEN oletus — estä teeman mustaa tulemasta päälle */
  background: #3F51FF;
  color: #fff;
  border: 1px solid transparent;
  transition: transform .05s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.asunto-cta .wp-element-button.wp-block-button__link:hover,
.asunto-cta a.button.button-primary:hover,
.asunto-cta a.button.button-secondary:hover {
  background: #3046f7;
  transform: translateY(-1px);
}
.asunto-cta .wp-element-button.wp-block-button__link:focus-visible,
.asunto-cta a.button.button-primary:focus-visible,
.asunto-cta a.button.button-secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(63,81,255,.25);
}

/* Airbnb-nappi – halutessasi eri korostus kuin perussininen */
.asunto-cta .btn-airbnb {
  background: #FF5A5F;  /* coral */
  color: #fff;
  border-color: transparent;
}
.asunto-cta .btn-airbnb:hover { background: #e24f54; }

/* Ikoni Airbnb-napissa */
.asunto-cta .icon-airbnb { display: inline-flex; color: currentColor; }

/* Fallback-osio: otsikko + nappien layout ja spacing kuntoon */
.booking-fallback .booking-title {
  font-weight: 700;
  margin: 0 0 .8rem 0;  /* väli otsikon ja nappien väliin */
}

/* Nappien asettelu: vierekkäin, sopiva väli; mobiilissa allekkain */
.booking-fallback .booking-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: .75rem;
  align-items: center;
  width: 100%;
}
@media (max-width: 480px) {
  .booking-fallback .booking-actions {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* --- KORTTIEN CTA-NAPPI (arkistossa) — siniseksi ja pill --- */
.wp-block-button .wp-block-button__link.asunto-btn{
  background: #3F51FF;
  color:#fff;
  border-radius:9999px;
  padding:.55rem .9rem;
  text-decoration: none !important;
  transition: transform .05s ease, background-color .2s ease, color .2s ease;
}
.wp-block-button .wp-block-button__link.asunto-btn:hover{
  background:#3046f7;
  opacity:1;
  transform: translateY(-1px);
}

/* Pieni väli meta-rivin ja korttinapin väliin */
.asunto-meta-rivi + .wp-block-button{ margin-top:.35rem; }

/* --- 4:3-kuvasuhde (voit aktivoida arkistokorteille) ---
.card-image, .asunto-thumb { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; }
.card-image img, .asunto-thumb img { width: 100%; height: 100%; object-fit: cover; }
*/

/* --- OLEMASSA OLEVAT YLEIS- JA GALLERIA-TYYLIT (säilytetty) --- */
.asunto-booking { margin-block: 1rem 1.5rem; }
.asunto-book-btn {
  background: #3F51FF;  /* yhtenäistetty siniseksi */
  color: #fff; text-decoration: none;
  padding: .65rem 1rem; border-radius: 9999px;
  display: inline-block;
}
.asunto-book-btn:hover { background:#3046f7; }
.asunto-contact-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.asunto-contact-list li { margin: .25rem 0; }

/* Faktojen laatikko */
.asunto-facts { background: #f7f7f7; padding: 12px 14px; border-radius: 8px; }
.asunto-facts__desc { margin: 0 0 .5rem 0; }
.asunto-facts__list { list-style: none; margin: 0; padding: 0; }
.asunto-facts__list li { margin: .25rem 0; }

/* Kevyt galleria */
.gallery-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
.gallery-grid figure { margin:0; }
.gallery-grid img { width:100%; height:auto; display:block; border-radius:6px; }

/* asunto-kortin metarivi */
.asunto-meta {
  display: inline-flex;
  gap: .4rem;
  align-items: baseline;
  font-size: 0.95rem;
  color: #4a4a4a;
}

/* Meta-rivi kortissa */
.asunto-meta-rivi{
  margin-top:.25rem;
  color:var(--wp--preset--color--contrast-2,#444);
  font-size:.95rem;
  line-height:1.4;
}

/* === KAUPUNKI-ARKISTON napit SINISEKSI — korkea spesifisyys ja varmistus === */

/* a) Jos napissa on lisäluokka asunto-btn (suositus) */
body.taxonomy-kaupunki :where(.wp-block-button) :where(.wp-block-button__link).asunto-btn,
body.post-type-archive-asunto :where(.wp-block-button) :where(.wp-block-button__link).asunto-btn {
  background: #3F51FF !important;
  color: #fff !important;
  border-radius: 9999px;
  padding: .55rem .9rem;
  text-decoration: none !important;
  transition: transform .05s ease, background-color .2s ease, color .2s ease;
}
body.taxonomy-kaupunki :where(.wp-block-button) :where(.wp-block-button__link).asunto-btn:hover,
body.post-type-archive-asunto :where(.wp-block-button) :where(.wp-block-button__link).asunto-btn:hover {
  background: #3046f7 !important;
  transform: translateY(-1px);
}

/* b) Varmuusyliajo: jos napissa EI ole asunto-btn -luokkaa (voit poistaa, jos et tarvitse) */
body.taxonomy-kaupunki :where(.wp-block-button) :where(.wp-block-button__link),
body.post-type-archive-asunto :where(.wp-block-button) :where(.wp-block-button__link) {
  background: #3F51FF !important;
  color: #fff !important;
  border-radius: 9999px;
}

/* c) Nollaa TT5:n has-background -luokkien pakotus */
body.taxonomy-kaupunki .wp-block-button .wp-block-button__link.has-background,
body.post-type-archive-asunto .wp-block-button .wp-block-button__link.has-background {
  background-color: #3F51FF !important;
  color: #fff !important;
}

/* d) Väli metarivin ja napin väliin arkistossa */
body.taxonomy-kaupunki .asunto-meta-rivi + .wp-block-button,
body.post-type-archive-asunto .asunto-meta-rivi + .wp-block-button { margin-top: .35rem; }


/* 4:3 – arkistokortin kansikuvat ja mahdollinen thumb-wrapper */
.card-image, .asunto-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;           /* sama radius kuin kortissa */
}
.card-image img, .asunto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* leikkaa reunoista, ei venytä */
}


/***** === KUVIEN SKAALAUS & VUODON ESTO (MOBIILI) — HOTFIX === *****/

/* 1) Kaikki kortti- ja thumb-wrapperit täyteen leveyteen, ei vuotoa */
.card-image,
.asunto-thumb {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;     /* pidetään 4:3 kuten sovittiin */
  overflow: hidden;        /* estää kuvan “vuodon” ulos */
  border-radius: 8px;
}

/* 2) Varsinainen <img>: täysi leveys, skaalaus, ei venymistä */
.card-image img,
.asunto-thumb img,
.asunto-gallery img,               /* gallerian kuvat */
.wp-block-post-featured-image img, /* varmuus TT5:lle */
.wp-block-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;            /* jos ei ole 4:3 wrapperissa */
  object-fit: cover;       /* 4:3 wrapperissa tämä leikkaa reunoja siististi */
}

/* 3) Jos käytät <figure> kuvan ympärillä kortissa */
.card-image figure,
.asunto-thumb figure,
.wp-block-post-featured-image {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* 4) Flex/grid-kontekstit: estä sisällön “min-content” ylivuoto */
.wp-block-columns > .wp-block-column,
.wp-block-group,
.wp-block-query .wp-block-post-template,
.wp-block-post-template li,
.archive .wp-block-post,
.taxonomy-kaupunki .wp-block-post {
  min-width: 0;            /* kriittinen vuodon esto flex/gridissä */
}

/* 5) Arkistokorttien kuvaelementit (jos TT5 asettaa erillisiä leveysarvoja) */
.archive .wp-block-post-featured-image,
.taxonomy-kaupunki .wp-block-post-featured-image {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 6) Varmuus pienille näytöille (ei vaakarullaa) */
@media (max-width: 480px) {
  .archive, .taxonomy-kaupunki, .single-asunto, body {
    overflow-x: hidden;
  }
}



/* Paluupilli (← kaupunki) single-sivun alkuun */
.city-pill-link {
  display: inline-flex;
  align-items: center;
  background: #f2f2f2;
  color: #333;
  padding: .45rem .9rem;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: background .2s ease, transform .05s ease;
}
.city-pill-link:hover {
  background: #e6e6e6;
  transform: translateY(-1px);
}