/**
 * Text-Image V7 — Figma 2142:1546
 * Light section: full-width title, image left, body + owl callout right.
 */

.text-image-v7 {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-section);
  padding: var(--space-lg);
}

.text-image-v7__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-lg);
  max-width: 80rem;
  margin-inline: auto;
}

.text-image-v7__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  color: var(--color-text);
}

.text-image-v7__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-lg);
  inline-size: 100%;
}

/* ── Photo column (2289:202 — 589px, 28px radius) ─────────── */
.text-image-v7__media {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 589 / 563;
  flex-shrink: 0;
  border-radius: 1.75rem; /* 28px — Figma photo frame */
  overflow: hidden;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.text-image-v7__photo {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

/* ── Text column (2289:204) ─────────────────────────────────── */
.text-image-v7__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 32px — Figma desktop */
  inline-size: 100%;
  min-inline-size: 0;
}

.text-image-v7__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.text-image-v7__body p {
  margin: 0 0 var(--space-sm); /* 8px — Figma paragraph gap */
}

.text-image-v7__body p:last-child {
  margin-block-end: 0;
}

.text-image-v7__body ul {
  margin: 0 0 var(--space-sm);
  padding-inline-start: 1.5rem; /* 24px — Figma list indent */
  list-style-type: disc;
}

.text-image-v7__body li {
  margin-block-end: 0;
}

/* Callout card (2153:2469) */
.text-image-v7__callout {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-lg);
  background-color: #e1f8ff; /* Figma callout fill — between section and dropdown bg */
  border: 1px solid #b0e4f4; /* Figma callout border */
  border-radius: var(--space-sm); /* 8px */
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.text-image-v7__callout-icon {
  flex-shrink: 0;
  inline-size: 3.25rem; /* 52px */
  block-size: 3.25rem;
  object-fit: cover;
}

.text-image-v7__callout-text {
  margin: 0;
  flex: 1 1 0;
  min-inline-size: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: normal;
  color: var(--color-text);
}

/* ── Desktop (1024px+) ────────────────────────────────────── */
@media (min-width: 1024px) {
  .text-image-v7 {
    padding-block: 5.25rem; /* 84px — Figma desktop */
    padding-inline: 5rem;   /* 80px */
  }

  .text-image-v7__inner {
    gap: 4.25rem; /* 68px — Figma title-to-row gap */
  }

  .text-image-v7__title {
    font-size: var(--fs-h2); /* 40px */
    line-height: var(--lh-h2);
  }

  .text-image-v7__row {
    flex-direction: row;
    align-items: stretch;
    gap: 2.75rem; /* 44px — Figma desktop column gap */
  }

  .text-image-v7__media {
    flex: 0 0 36.8125rem; /* 589px */
    inline-size: 36.8125rem;
    block-size: auto;
    align-self: stretch;
    aspect-ratio: auto;
  }

  .text-image-v7__content {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .text-image-v7__body {
    line-height: normal;
  }
}