/*
 * ProSocial Agency - Explain sections
 * 21-explain.css
 * Deferred tier. Front page and any template using the explain part.
 *
 * Ported from the LGC location template. Two column split with a
 * sticky image, stacked as a pair so the second reverses the first.
 *
 * The stickiness is on the image column, not the section. The image
 * pins while its text column scrolls past, then releases when the
 * section ends. That is the LGC behavior and it is why the grid uses
 * align-items:start rather than stretch, since a stretched column has
 * no room to move within.
 *
 * Sticky is disabled below the breakpoint. On a stacked layout there
 * is nothing for the image to pin against and it just gets in the way.
 */

.explain {
  padding-block: var(--section-pad-y);
}

.explain__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: start;
}

/* Reversed variant. The image column is written second in the markup
   either way, so the order swap keeps the source order sensible for
   screen readers and for the stacked layout. */
.explain--reverse .explain__media { order: -1; }

/* Grid children default to min-width auto, which lets a long word or a
   wide element push the column past its track and break the split. */
.explain__text { min-width: 0; }

.explain__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-action);
  margin-bottom: var(--space-4);
}

.explain__heading {
  font-family: var(--font-heading);
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  max-width: 18ch;
  margin-bottom: var(--space-5);
}

.explain__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  max-width: 56ch;
}

/* 02-typography.css caps p at 50ch directly, which overrides the
   measure set on this container. A direct rule on the element beats
   anything set on an ancestor, so reset it on the paragraphs. */
.explain__body p {
  max-width: none;
}

.explain__body p + p { margin-top: var(--space-5); }

/* Sub point under the body, divided by a hairline. */
.explain__point {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.explain__point-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.explain__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* -------- Sticky media -------- */

.explain__media {
  position: sticky;
  top: calc(var(--nav-height-shrunk) + var(--space-6));
}

.explain__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.explain__placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background:
    radial-gradient(ellipse at 24% 20%, rgba(196, 92, 38, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 76%, rgba(201, 150, 62, 0.16) 0%, transparent 50%),
    linear-gradient(135deg, var(--color-band-deep) 0%, var(--color-band) 50%, #2E4670 100%);
}

.explain__caption {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

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

@media (max-width: 1024px) {
  .explain__grid { gap: var(--space-10); }
  .explain__heading { max-width: 100%; }
}

@media (max-width: 880px) {
  .explain__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Nothing to pin against once the columns stack. */
  .explain__media {
    position: static;
    top: auto;
  }

  /* Image first on both variants when stacked, so the pair reads
     consistently rather than alternating on a single column. */
  .explain__media,
  .explain--reverse .explain__media { order: -1; }

  .explain__body { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .explain__media { position: static; }
}