/**
 * DWN callout box styles
 * TODO: Fix foreground colors for light background palettes
 */

.callout {
  --section-block-padding: 2rem;
  --icon-width: clamp(80px, 18vw, 150px);
  --icon-gap: clamp(1.25rem, 4vw, 2rem);

  min-height: 80px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: start;

  /* No icon default */
  grid-template-columns: 1fr;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);

  background-color: var(--color-background, var(--color-alt-background));
  color: var(--color-text);
  margin-trim: block-end;
  margin-block-end: var(--section-block-padding, 2rem);
  padding-block: 0;
  text-align: center;
  text-wrap: balance;
}

/* With icon: Icon and gap inline sizing shrinks at mobile */
.callout:has(.callout-icon) {
  text-align: initial;
  grid-template-columns: max(var(--container-padding-inline) - var(--icon-gap), var(--icon-width)) auto;
  align-items: center;
  gap: 1.5rem var(--icon-gap);
  padding-inline-start: 0;
  text-wrap: unset; /* Remove balance first for browsers that do not support pretty */
  text-wrap: pretty;
}

.full-width.callout:not(.box) {
  padding-inline-start: 0;
}

/* Within full-page callout block (not inline Layout Builder) */
.block-block-content.callout {
  margin-block-end: 0;
}

/* Within columns (not full width) */
.layout-columns:not(.layout--onecol) .callout {
  padding-inline: 2rem;
  gap: 2rem;
}


/* Section spacing */
section:has(> div > div:first-child > .callout),
section:has(> div > div.callout:first-child) {
  padding-block-start: 0;
}

section:has(> div > div:last-child > .callout),
section:has(> div > div.callout:last-child) {
  padding-block-end: 0;
}


/* Icon area */
.callout-icon {
  position: relative;
  opacity: 0.9;
  inline-size: var(--icon-width);
  block-size: auto;
}

.callout-icon img {
  object-fit: contain;
  padding-block: 1rem;
}

/* SVG icons */
.callout-icon:has(svg) {
  max-block-size: 170px;
  padding-block: 1rem;
  opacity: 0.5;
}
.callout-icon svg {
  display: block;
  padding-inline-start: 1rem;
  max-inline-size: calc(100% - 1rem);
}


/* Content area */
.callout .content {
  align-self: center; /* Vertically center short content */
  font: var(--font-heading);
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  padding-block: var(--section-block-padding, 3.5rem);
}


.callout :is(h2, h3) {
  margin-block-end: 1rem;
  font-weight: var(--font-weight-bold);
  font-size: 1.75rem;
  line-height: var(--font-lineheight-shorter);
  font-family: var(--font-family-text);
  color: inherit;
}
.callout h3 {
  font-size: 1.5rem;
}

.callout .button {
  background-color: var(--highlight, var(--brand-green));
  transition: filter 200ms;
}
.callout .button:is(:hover, :active) {
  /* Alternate hover state to allow for variable colors */
  filter: brightness(0.9) contrast(1.2);
}


/* Trim bottom margin */
.callout .content .field--name-field-body {
  margin-trim: block-end;
}
.callout .content > .field > *:last-child {
  margin-block-end: 0;
}


/* Headings */
.callout > * > *:last-child {
  margin-block-end: 0; /* Trim bottom margin */
}


/* Separator line if title exists (stretched flex column/row) */
.callout:has(> .title)::before {
  content: "";
  align-self: stretch;
  border: 2px solid var(--white);
}

.callout .content p {
  line-height: var(--font-lineheight-heading);
}
.callout .content :is(b, strong) {
  font-weight: var(--font-weight-heading-bold);
}

.callout p.big {
  font-size: clamp(2rem, 4vw, 3.75rem);
}


/* Custom icon positions */
.callout.icon-fist .callout-icon {
  max-block-size: 170px;
  padding-block: 1rem;
}
.callout.icon-fist .callout-icon > img {
  padding-inline-start: 1rem;
  max-inline-size: calc(100% - 1rem);
}