/*
Theme Name: CRM-Service Child
Theme URI: https://www.crmservice.com
Author: Sonja Nurmi
Author URI: https://www.crmservice.com
Description: Lapsiteema CRM-Service teeman mukauttamiseen
Version: 1.0.0
Template: crmservice
Text Domain: crmservice-child
*/

/* ------------------------------------------------------------ */
/* Yleiset spacing-säädöt                                        */
/* ------------------------------------------------------------ */
.crmb-logo-grid { margin-top: 0.5rem; }
.crmb-text-image { margin-top: 4rem; }
.crmb-two-large-lifts { margin-top: 3.5rem; }
.crmb-large-lift-with-image { margin-top: 3.5rem; }
.crmb-faq { padding-top: 3rem; }
.crmb-large-text-lift { margin-top: 1.5rem; }
.crmb-features-grid { margin-top: 5rem; }

.crmb-features-grid__item-text a { color: #0B6100; }


/* ------------------------------------------------------------ */
/* Video grid + cookie placeholder                               */
/* ------------------------------------------------------------ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding-top: 2rem;
}

.video { padding: 0.5rem; box-sizing: border-box; }

.video-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 12px;
}

.video-inner iframe {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cookie consent: näytä placeholder kerran, piilota kaikki videot ilman suostumusta */
.video-grid.is-locked .video { display: none; }

.video-grid .cookie-placeholder {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

.cookie-placeholder p {
  font-family: sans-serif !important;
  font-size: 120% !important;
  margin-bottom: 1rem;
}


/* ------------------------------------------------------------ */
/* HERO FIX (kaikille heroille)                                  */
/* - Desktop: teksti+kuva samassa rivissä (kun mahdollista)      */
/* - Ei romahda vaikka img width/height on 1000x1000             */
/* - Mobiili: EI space-between -> EI tyhjää väliä                */
/* ------------------------------------------------------------ */

/* 1) Desktop layout: RAJAA vain heron pää-row'hun (ettei kaikki .row:t muutu flexiksi) */
[class^="crmb-"][class*="hero"] .container > .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                 /* tärkeä: sallii wrapin jos tila loppuu */
  gap: 2rem;
  justify-content: space-between;
}

/* 2) Content wrapper: järkevä rivinpituus ja jousto */
[class^="crmb-"][class*="hero"] .crmb-large-hero__content-wrapper,
[class^="crmb-"][class*="hero"] .crmb-subpage-hero__content-wrapper,
[class^="crmb-"][class*="hero"] .crmb-hero__content-wrapper {
  flex: 1 1 520px;
  min-width: 280px;
  max-width: 56ch;
}

/* 3) Large hero main image:
   - ÄLÄ jätä width:auto, koska silloin intrinsic 1000px voittaa flexissä
*/
.crmb-large-hero__main-image {
  flex: 0 1 520px;                 /* saa pienentyä */
  width: 100%;
  max-width: 520px;                /* säädä: 420–600px tarpeen mukaan */
  height: auto;
  object-fit: contain;
  object-position: center center;
  align-self: center;
}

/* 4) Subpage-hero main image:
   - Kohdista kuvaluokkiin (inspectissä: .crmb-subpage-hero__in-image)
   - Ei enää "row > img" -kohdistusta, joka voi osua vääriin kuviin
*/
.crmb-subpage-hero__main-image,
.crmb-subpage-hero__in-image {
  flex: 0 1 520px;                 /* saa pienentyä */
  width: 100%;
  max-width: 720px;                /* voit nostaa esim 900px */
  height: auto;
  object-fit: contain;             /* cover leikkaa helposti */
  object-position: center center;
  margin-left: 0;
  align-self: center;
}

/* 5) Jos subpage-heron content-wrapper on myös .row, neutraloi guttersit */
.crmb-subpage-hero .crmb-subpage-hero__content-wrapper.row {
  margin-left: 0;
  margin-right: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* 6) Hero-otsikko: järkevä wrap */
.crmb-large-hero__heading,
.crmb-subpage-hero__heading,
.crmb-hero__heading {
  max-width: 22ch;
}

/* 7) Mobiili: EI space-between -> EI tyhjää väliä + kuville oikeasti 100% leveys */
@media (max-width: 768px) {
  [class^="crmb-"][class*="hero"] .container > .row {
    justify-content: flex-start !important;
    flex-direction: column !important;
    align-content: flex-start;
    flex-wrap: nowrap;
  }

  [class^="crmb-"][class*="hero"] .crmb-large-hero__content-wrapper,
  [class^="crmb-"][class*="hero"] .crmb-subpage-hero__content-wrapper,
  [class^="crmb-"][class*="hero"] .crmb-hero__content-wrapper {
    max-width: 100% !important;
  }

  /* Large hero image */
  .crmb-large-hero__main-image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Subpage hero images (molemmat luokat varmuuden vuoksi) */
  .crmb-subpage-hero__main-image,
  .crmb-subpage-hero__in-image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

* ============================================================ */
/* CRM-Service: TURVAVERKKO media/layout -säännöt (kaikki blockit) */
/* - Estää "img width=1000" romahduttamasta flex-layoutia
/* - Tekee kuvista responsiiviset crmb-blokeissa
/* - EI venytä ikoneita (Feature grid 64x64 jne.)
/* ============================================================ */

/* 0) Opt-out jos joskus tarvitset poikkeuksen:
   lisää elementille/osiolle class="crmb-no-safeguard" */
.crmb-no-safeguard,
.crmb-no-safeguard * {
  all: revert;
}

/* 1) Perussuoja: media ei ylitä containeria crmb-blokeissa */
:where([class^="crmb-"], [class*=" crmb-"]) :where(img, video, iframe, svg) {
  max-width: 100%;
  height: auto;
}

/* 2) Flex/grid-kontekstissa: salli sisältöjen kutistuminen */
:where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) {
  min-width: 0;
}

:where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > * {
  min-width: 0;
}

/* 3) KRIITTINEN FIX vain niille tapauksille, missä kuva on SUORAAN .row:n lapsi
   (tyypillisesti hero-tyyliset rakenteet, joissa img:llä on width=1000) */
:where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > img,
:where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > picture > img,
:where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > figure img,
:where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > .wp-block-image img {
  flex: 0 1 auto;   /* saa kutistua */
  width: 100%;      /* ohittaa HTML width="1000" -intrinsicin */
  height: auto;
}

/* 4) Feature grid: ikonit EI SAA venyä – pidä 64x64 (tai natural size) */
.crmb-features-grid__item-image {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain;
}

/* 5) Mobiili: ÄLÄ pakota kaikkia kuvia 100% leveiksi.
   - Jos haluat mobiilissa leveät "sisältökuvat", kohdistetaan vain niihin, jotka ovat suoraan .row:n lapsia. */
@media (max-width: 768px) {
  :where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > img,
  :where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > picture > img,
  :where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > figure img,
  :where([class^="crmb-"], [class*=" crmb-"]) :where(.row, .container > .row) > .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* varmistus: feature-ikonit pysyy 64x64 mobiilissakin */
  .crmb-features-grid__item-image {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
}