/* ==========================================================================
   Palvelulohko (service_block) – all rules scoped to .service-block
   ========================================================================== */

.service-block {
  --sb-icon: 4.5rem;
  --sb-col-gap: 3.5rem;
  --sb-pad-x: 3.5rem;
  --sb-content-max: 44rem;
  --sb-radius: 6.25rem;
}

/* Outer spacing (space between cards / around the block) */
.service-block.service-block-gap-top-none    { padding-top: var(--p-0); }
.service-block.service-block-gap-top-narrow  { padding-top: var(--p-1); }
.service-block.service-block-gap-top-normal  { padding-top: var(--p-2); }
.service-block.service-block-gap-top-wide    { padding-top: var(--p-3); }
.service-block.service-block-gap-bottom-none   { padding-bottom: var(--p-0); }
.service-block.service-block-gap-bottom-narrow { padding-bottom: var(--p-1); }
.service-block.service-block-gap-bottom-normal { padding-bottom: var(--p-2); }
.service-block.service-block-gap-bottom-wide   { padding-bottom: var(--p-3); }

/* Rounded outer background */
.service-block .block-overlay.service-block-rounded-top {
  border-top-left-radius: var(--sb-radius);
  border-top-right-radius: var(--sb-radius);
}
.service-block .block-overlay.service-block-rounded-bottom {
  border-bottom-left-radius: var(--sb-radius);
  border-bottom-right-radius: var(--sb-radius);
}

/* Card */
.service-block-card {
  column-gap: var(--sb-col-gap);
  display: grid;
  grid-template-columns: var(--sb-icon) minmax(0, 1fr);
  padding-left: var(--sb-pad-x);
  padding-right: var(--sb-pad-x);
}
.service-block-card.no-icon {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}
.service-block-card.is-card {
  border-radius: .5rem;
}
.service-block-card.no-card {
  padding-left: 0;
  padding-right: 0;
}

.service-block-card.service-block-pad-top-none    { padding-top: var(--p-0); }
.service-block-card.service-block-pad-top-narrow  { padding-top: var(--p-1); }
.service-block-card.service-block-pad-top-normal  { padding-top: var(--p-2); }
.service-block-card.service-block-pad-top-wide    { padding-top: var(--p-3); }
.service-block-card.service-block-pad-bottom-none   { padding-bottom: var(--p-0); }
.service-block-card.service-block-pad-bottom-narrow { padding-bottom: var(--p-1); }
.service-block-card.service-block-pad-bottom-normal { padding-bottom: var(--p-2); }
.service-block-card.service-block-pad-bottom-wide   { padding-bottom: var(--p-3); }

/* Icon column */
.service-block-icon {
  grid-column: 1;
  grid-row: 1;
  height: var(--sb-icon);
  width: var(--sb-icon);

  img,
  svg {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
  }
}

/* Content column items */
.service-block-item {
  grid-column: 2;
  max-width: var(--sb-content-max);
  min-width: 0;
}
.service-block-item + .service-block-item {
  margin-top: 1.5rem;
}
.service-block-item.is-wide {
  grid-column: 1 / -1;
  max-width: none;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}
.service-block-card.no-icon .service-block-item.is-wide,
.service-block-card.no-card .service-block-item.is-wide {
  margin-left: 0;
  margin-right: 0;
}

/* Head: ref + title */
.service-block-head {
  align-self: center;
}
.service-block-ref {
  color: var(--color-dark);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: .25rem;
}
.service-block .service-block-title {
  color: var(--color-primary);
  margin: 0;
}

/* Long Finnish words in titles: PHP (rs_fi_hyphenate) adds soft hyphens at
   syllable boundaries, so words break with a proper hyphen, never off-screen */
.service-block .service-block-title,
.service-block .service-block-subtitle,
.service-block a.accordion-title {
  hyphens: manual;
  overflow-wrap: break-word; /* last resort, never clipped */
}

/* Text */
.service-block-text p:last-child {
  margin-bottom: 0;
}
.service-block-text a {
  text-decoration: underline;
}

/* Subtitle */
.service-block .service-block-subtitle {
  color: var(--color-primary);
  margin: 0;
}
.service-block-item + .service-block-item-item_title {
  margin-top: 3rem;
}

/* Button */
.service-block-item + .service-block-item-item_button {
  margin-top: 2.25rem;
}

/* Accordion (markup shared with Haitarilohko; styles scoped here) */
.service-block a.accordion-title {
  align-items: center;
  border: 0;
  border-radius: .5rem;
  color: var(--color-dark);
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 1.25rem 5rem 1.25rem 1.75rem;
  position: relative;
  text-decoration: none;
  transition: all .25s ease-out;
}
.service-block .accordion .accordion-item:not(:last-of-type) {
  margin-bottom: 1.25rem;
}
.service-block .accordion-inner-content,
.service-block .accordion-inner-content p {
  font-size: 1rem;
}
.service-block-card.bg-white .accordion-item .accordion-title,
.service-block-card.bg-white .accordion-item .accordion-content,
.service-block-card.no-card .accordion-item .accordion-title,
.service-block-card.no-card .accordion-item .accordion-content {
  background-color: var(--bg-light);
}
.service-block-card.bg-light .accordion-item .accordion-title,
.service-block-card.bg-light .accordion-item .accordion-content,
.service-block-card.bg-secondary-light .accordion-item .accordion-title,
.service-block-card.bg-secondary-light .accordion-item .accordion-content {
  background-color: #fff;
}
.service-block-item + .service-block-item-item_accordion {
  margin-top: 1.75rem;
}

/* Video (markup/JS shared with Videolohko; styles scoped here) */
.service-block .video-frame {
  position: relative;
  width: 100%;
}
.service-block video {
  aspect-ratio: 16 / 9;
  border-radius: .5rem;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
/* Native controls are added by JS only while playing (see service-block.js),
   so the browser's own big play button never shows on top of ours */
.service-block video::-webkit-media-controls-start-playback-button,
.service-block video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}
.service-block .video-play-btn svg {
  aspect-ratio: 1;
  width: clamp(64px, 9vw, 120px);
}
.service-block-item + .service-block-item-item_video {
  margin-top: 2rem;
}

/* Image */
.service-block-image img {
  border-radius: .5rem;
  display: block;
  height: auto;
  width: 100%;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .service-block {
    --sb-icon: 4rem;
    --sb-col-gap: 2rem;
    --sb-pad-x: 2.5rem;
    --sb-radius: 4rem;
  }
  .service-block-item.is-wide {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Mobile layout from the same width where the PRO intro columns stack (< 1024px) */
@media (max-width: 1023px) {
  .service-block {
    --sb-icon: 3.5rem;
    --sb-pad-x: 1.5rem;
    --sb-radius: 2.75rem;
  }

  /* Icon + ref/title on one row, everything else full width below */
  .service-block-card {
    column-gap: 1rem;
    grid-template-columns: var(--sb-icon) minmax(0, 1fr);
  }
  .service-block-card.no-icon {
    column-gap: 0;
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .service-block-icon {
    align-self: center;
  }

  /* Lighter icons on mobile: no green sphere, the symbol itself in green */
  .service-block-icon svg > circle:first-of-type {
    fill: none;
  }
  .service-block-icon svg [fill="#fff"],
  .service-block-icon svg [fill="#ffffff"],
  .service-block-icon svg [fill="white"] {
    fill: var(--color-primary);
  }
  .service-block-icon svg [stroke="#fff"],
  .service-block-icon svg [stroke="#ffffff"],
  .service-block-icon svg [stroke="white"] {
    stroke: var(--color-primary);
  }
  /* Without the sphere the symbol is small in its box: scale it up to fill it */
  .service-block-icon svg {
    overflow: visible;
    transform: scale(1.4);
  }
  .service-block-item,
  .service-block-item.is-wide {
    grid-column: 1 / -1;
    max-width: none;
  }
  .service-block-item.service-block-head {
    grid-column: 2;
  }
  .service-block-card.no-icon .service-block-item.service-block-head {
    grid-column: 1 / -1;
  }
  .service-block-item + .service-block-item-item_title {
    margin-top: 2.25rem;
  }

  /* Accordion as one panel (as in the mobile wireframe):
     subtitle + accordion fuse into one box, rows split by dividers, +/− icons */
  .service-block-card.bg-white,
  .service-block-card.no-card {
    --sb-panel: var(--bg-light);
  }
  .service-block-card.bg-light,
  .service-block-card.bg-secondary-light {
    --sb-panel: #fff;
  }
  .service-block-item-item_accordion {
    background: var(--sb-panel);
    border-radius: .75rem;
    padding: .5rem 1.25rem 1rem;
  }
  .service-block-item-item_title:has(+ .service-block-item-item_accordion) {
    background: var(--sb-panel);
    border-radius: .75rem .75rem 0 0;
    padding: 1.25rem 1.25rem .5rem;
  }
  .service-block-item-item_title + .service-block-item-item_accordion {
    border-radius: 0 0 .75rem .75rem;
    margin-top: 0;
  }
  .service-block .service-block-accordion .accordion-item,
  .service-block .service-block-accordion .accordion-item:not(:last-of-type) {
    border-top: 1px solid #2a363f26;
    margin: 0;
  }
  .service-block .service-block-accordion .accordion-item:last-child {
    border-bottom: 1px solid #2a363f26;
  }
  .service-block-card .service-block-accordion .accordion-item .accordion-title,
  .service-block-card .service-block-accordion .accordion-item .accordion-content {
    background: transparent;
    border-radius: 0;
  }
  .service-block-card .service-block-accordion a.accordion-title {
    font-size: 1rem;
    padding: 1rem 2.25rem 1rem 0;
  }
  .service-block-card .service-block-accordion .accordion-content {
    padding: 0 0 1.125rem;
  }
  .service-block-card .service-block-accordion .accordion-title svg {
    right: .25rem;
    width: 1rem;
  }
  .service-block-item-item_button .service-block-button {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 639px) {
  .service-block {
    --sb-icon: 3rem;
    --sb-pad-x: 1.25rem;
  }
  .service-block-card .service-block-accordion a.accordion-title {
    font-size: 1rem;
    padding: 1rem 2.25rem 1rem 0;
  }
}