/* EA Mikael: integrated colour and responsive shape system, 2026-08-25 */
:root {
  --em-navy: #082f4f;
  --em-navy-deep: #061f38;
  --em-blue: #006f9b;
  --em-blue-bright: #159fc0;
  --em-teal: #008b9d;
  --em-aqua: #55c8d1;
  --em-ice: #e7f6f9;
  --em-sky: #d9eef5;
}

.em-section-title,
.em-card-grid h3,
.em-band h2,
.em-contact-card h2 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.em-lead,
.em-card-grid p,
.em-band p,
.em-contact-card p {
  text-wrap: pretty;
}

.em-card-grid > .wp-block-column,
.em-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border-color: rgba(0, 111, 155, .18);
  background: linear-gradient(155deg, #fff 0%, #f5fbfc 100%);
}

.em-card-grid > .wp-block-column::before,
.em-card::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: .42rem;
  border-radius: var(--em-radius) var(--em-radius) 0 0;
  background: linear-gradient(90deg, var(--em-blue), var(--em-teal), var(--em-aqua));
  content: "";
}

.em-card-grid > .wp-block-column::after,
.em-card::after {
  position: absolute;
  z-index: -1;
  top: clamp(-5rem, -8vw, -2.6rem);
  right: clamp(-5rem, -7vw, -2.8rem);
  width: clamp(8rem, 16vw, 13rem);
  aspect-ratio: 1;
  border: 1px solid rgba(0, 139, 157, .12);
  border-radius: 44% 56% 63% 37% / 48% 40% 60% 52%;
  background: radial-gradient(circle at 36% 38%, rgba(85, 200, 209, .23), rgba(217, 238, 245, .08) 62%, transparent 63%);
  transform: rotate(18deg);
  content: "";
}

.em-card-grid > .wp-block-column > *,
.em-card > * {
  position: relative;
  z-index: 1;
}

.em-card-grid > .wp-block-column:nth-child(2)::before {
  background: linear-gradient(90deg, #0f5b86, #159fc0);
}

.em-card-grid > .wp-block-column:nth-child(3)::before {
  background: linear-gradient(90deg, #087f8e, #55c8d1);
}

.em-card-grid > .wp-block-column:hover,
.em-card:hover {
  border-color: rgba(0, 139, 157, .34);
  box-shadow: 0 22px 54px rgba(6, 47, 79, .14);
  transform: translateY(-3px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.em-number {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0, 139, 157, .16);
  background: linear-gradient(145deg, #f7fdfe, var(--em-sky));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .48);
}

.em-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(85, 200, 209, .26);
  background:
    radial-gradient(circle at 88% 14%, rgba(85, 200, 209, .24), transparent 30%),
    linear-gradient(125deg, var(--em-navy-deep), #075678 58%, var(--em-teal));
}

.em-band::after {
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -52%;
  width: min(48rem, 70%);
  aspect-ratio: 2 / 1;
  border: 2px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  content: "";
}

.em-band > * {
  position: relative;
  z-index: 1;
}

.em-green-band {
  background:
    radial-gradient(circle at 88% 12%, rgba(85, 200, 209, .15), transparent 30%),
    linear-gradient(120deg, #173a31, #28584e 58%, #087f8e);
}

.em-contact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(0, 111, 155, .18);
  background: linear-gradient(145deg, #fff 0%, var(--em-ice) 100%);
}

.em-contact-card::after {
  position: absolute;
  z-index: -1;
  right: -5rem;
  bottom: -7rem;
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 159, 192, .18), transparent 67%);
  content: "";
}

.em-hero-media,
.em-portrait,
.em-registry-logo,
.em-map-card {
  min-width: 0;
}

.em-hero-media figure,
.em-portrait figure,
.em-registry-logo figure,
.em-map-card figure {
  margin: 0;
}

.em-hero-media img,
.em-portrait img,
.em-registry-logo img {
  display: block;
}

.em-site-footer {
  background:
    radial-gradient(circle at 85% 5%, rgba(85, 200, 209, .14), transparent 30%),
    linear-gradient(120deg, var(--em-navy-deep), var(--em-navy));
}

@media (max-width: 781px) {
  .em-card-grid > .wp-block-column,
  .em-card {
    width: 100%;
    padding: 1.45rem !important;
  }

  .em-card-grid > .wp-block-column::after,
  .em-card::after {
    top: -3.8rem;
    right: -3.8rem;
    width: 9rem;
  }

  .em-band,
  .em-contact-card {
    padding: clamp(1.45rem, 6vw, 2rem) !important;
  }

  .em-band .wp-block-columns,
  .em-contact-card .wp-block-columns {
    gap: 1.4rem !important;
  }

  .em-band .wp-block-column,
  .em-contact-card .wp-block-column {
    width: 100%;
    flex-basis: 100% !important;
  }
}

@media (max-width: 480px) {
  .em-card-grid > .wp-block-column,
  .em-card,
  .em-band,
  .em-contact-card {
    border-radius: 20px;
  }

  .em-section-title {
    font-size: clamp(1.85rem, 9vw, 2.45rem) !important;
  }

  .em-number {
    width: 42px;
    height: 42px;
  }
}



/* Toimialasivun tekstikortit: anna sisallon maarittaa korkeus. */
body.page-id-45 p.em-card {
  display: block;
  width: 100%;
  height: max-content !important;
  min-height: 12.5rem;
  padding: clamp(1.55rem, 3vw, 2rem) !important;
  overflow: hidden;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body.page-id-45 p.em-card strong {
  display: block;
  margin-bottom: .6rem;
  color: var(--em-navy);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.25;
}

body.page-id-45 p.em-card a {
  display: inline-block;
  margin-top: .85rem;
  font-weight: 700;
}

@media (max-width: 781px) {
  body.page-id-45 p.em-card {
    height: max-content !important;
    min-height: 0;
    padding: 1.6rem !important;
  }
}