/**
 * CUTIS Theme — Service Introduction section
 * BEM: service-intro, service-intro__media, service-intro__callout,
 * service-intro__content, service-intro__causes-grid,
 * service-intro__highlight-banner
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). No new values
 * are hardcoded here.
 */

.service-intro {
  /* Vertical spacing comes from the .section-padding utility (assets/css/layout.css)
       applied in the markup — only horizontal gutters are set here so the two
       don't fight over the `padding` shorthand. */
  padding-left: var(--cutis-space-md);
  padding-right: var(--cutis-space-md);
}

.service-intro__inner {
  max-width: var(--cutis-container-max);
  margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Two-column layout: image + callout on the left, copy on the right   */
/* ------------------------------------------------------------------ */
.service-intro__columns {
  display: grid;
  grid-template-columns: 45fr 55fr;
  align-items: center;
  gap: var(--cutis-space-lg);
}

.service-intro__media {
  position: relative;
}

/* Decorative blob behind the image — same technique and centered hug as the
   hero's background circle (assets/css/single-service-hero.css
   .service-hero__media::before). Centered rather than corner-offset: an
   outward bleed here reached past .service-intro__inner's own left edge,
   which is exactly aligned with the Hero container above it, making the
   whole section read as "un-contained" even though the container itself
   was correct. */
.service-intro__media::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 92%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cutis-color-primary);
  opacity: 0.1;
}

/* Dot-grid texture sitting in the empty space near the image's top-right
   corner, peeking out from behind it. */
.service-intro__media::after {
  content: "";
  position: absolute;
  top: 16px;
  right: -16px;
  z-index: 0;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(
    var(--cutis-color-primary) 1.5px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  opacity: 0.25;
}

.service-intro__image-wrap {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
}

.service-intro__image {
  width: 100%;
  height: auto;
  display: block;
}

.service-intro__callout {
  /* Confirmed root cause of the site-wide horizontal overflow at <=990px:
     at that breakpoint this becomes width:100% while keeping its own
     padding, and under content-box that padding is added on top of 100%,
     overflowing the parent by 2x var(--cutis-space-md). box-sizing here
     is now also covered by the global reset in layout.css, but kept
     explicit since this is the confirmed, load-bearing fix for that bug. */
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  left: -20px;
  bottom: -24px;
  display: flex;
  align-items: center;
  gap: 28px;
  width: 280px;
  max-width: calc(100% - var(--cutis-space-md));
  padding: var(--cutis-space-md);
  background: var(--cutis-color-surface);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 43, 61, 0.14);
}

/* Circular badge — a border-right here would follow the circle's own
   curve instead of reading as a straight line, so the divider is a
   separate absolutely-positioned bar sitting in the gap to its right
   (centered in the parent's 28px gap: 14px clearance on each side). */
.service-intro__callout-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cutis-color-primary) 12%, white);
}

.service-intro__callout-icon-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: var(--cutis-color-border);
}

.service-intro__callout-icon {
  width: 64px;
  height: 64px;
  display: block;
}

.service-intro__callout-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-intro__callout-title {
  font-family: var(--cutis-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--cutis-color-heading);
}

.service-intro__callout-subtext {
  font-family: var(--cutis-font-body);
  font-size: 13px;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* Copy column: eyebrow, title, paragraphs, causes grid                */
/* ------------------------------------------------------------------ */
.service-intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cutis-space-sm);
}

.service-intro__eyebrow {
  font-family: var(--cutis-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cutis-color-primary);
}

.service-intro__title {
  /* Matches .service-hero__title (single-service-hero.css) exactly so both
       sections' main headings share the same visual weight/hierarchy. */
  display: flex;
  flex-direction: column;
  margin: var(--cutis-space-xs) 0 0;
  font-family: var(--cutis-font-heading);
  font-weight: 700;
  line-height: 1.15;
}

.service-intro__title-line {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--cutis-color-heading);
}

.service-intro__title-line--accent {
  color: var(--cutis-color-primary);
}

.service-intro__paragraph {
  margin: 0;
  font-family: var(--cutis-font-body);
  font-size: var(--cutis-font-size-base);
  line-height: 1.7;
  color: var(--cutis-color-text);
}

.service-intro__causes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cutis-space-sm);
  width: 100%;
  margin-top: var(--cutis-space-xs);
}

.service-intro__cause-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cutis-space-xs);
  padding: var(--cutis-space-sm);
  text-align: center;
  background: color-mix(in srgb, var(--cutis-color-primary) 6%, white);
  border-radius: 12px;
}

/* Fixed-size wrapper so every icon renders at the same visual size in the
   grid regardless of the uploaded image's own native dimensions — the
   img inside is scaled to fit via object-fit instead of being sized
   directly, since two of the eight uploaded icons have very different
   native aspect ratios/dimensions from the rest. */
.service-intro__cause-icon-wrap {
  width: 48px;
  height: 48px;
  display: block;
}

.service-intro__cause-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.service-intro__cause-label {
  font-family: var(--cutis-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cutis-color-heading);
}

/* ------------------------------------------------------------------ */
/* Highlight banner — full width, below both columns                   */
/* ------------------------------------------------------------------ */
.service-intro__highlight-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: var(--cutis-space-lg);
  padding: var(--cutis-space-lg);
  background: var(--cutis-color-cream);
  border-radius: 16px;
}

.service-intro__highlight-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(
    var(--cutis-color-primary) 1.5px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  opacity: 0.2;
}

.service-intro__highlight-icon-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #4caf50;
}

/* Same reasoning as .service-intro__callout-icon-wrap::after: the divider
   sits beside the circle rather than as a border on it (centered in the
   parent's 32px gap: 16px clearance on each side). */
.service-intro__highlight-icon-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: var(--cutis-color-border);
}

/* The uploaded icon is a solid-color PNG on a transparent background (like
   the rest of this icon set) — brightness(0) flattens its opaque pixels to
   black regardless of their original hue, then invert(1) flips that to
   white, so it reads clearly against the solid green badge above without
   needing a separate white-icon asset. */
.service-intro__highlight-icon {
  width: 64px;
  height: 64px;
  display: block;
  filter: brightness(0) invert(1);
}

.service-intro__highlight-text-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-intro__highlight-text {
  font-family: var(--cutis-font-body);
  font-size: 17px;
  font-weight: 700;
  /* Same exact value as .service-intro__highlight-icon-wrap's background —
     keep these two in sync if this green ever changes. */
  color: #4caf50;
}

.service-intro__highlight-description {
  font-family: var(--cutis-font-body);
  font-size: 14px;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* Responsive: single column, static callout, 2-col causes grid         */
/* ------------------------------------------------------------------ */
@media (max-width: 990px) {
  .service-intro__columns {
    grid-template-columns: 1fr;
    gap: var(--cutis-space-md);
  }

  .service-intro__callout {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: var(--cutis-space-sm);
  }

  .service-intro__content {
    align-items: center;
    text-align: center;
  }

  .service-intro__title {
    align-items: center;
  }

  .service-intro__causes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .service-intro__highlight-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}