/**
 * Quote Simple Styles
 *
 * Two-panel layout: portrait/illustration left, quote content right.
 * Mobile: stacked (image top, content bottom).
 * Tablet+: 220×220 square image (bottom-aligned) + content panel.
 *
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.quote-simple {
  --quote-simple-grid-column-span: 10;
  --quote-simple-max-width: calc(
    var(--quote-simple-grid-column-span) * var(--grid-column-width--desktop)
    + (var(--quote-simple-grid-column-span) - 1) * var(--grid-gutter--desktop)
  );

  display: block;
  grid-template-columns: 1fr;
  max-width: var(--quote-simple-max-width);
  margin-bottom:1rem;
  font-weight: 400;
  width:fit-content;
}

.quote-simple--l .quote-simple__quote{
  font-size:36px;
}

@media (min-width: 768px) {
  .quote-simple--l {
    gap: var(--spacing-400);
    grid-template-columns: 0.75fr 1fr;
    align-items: stretch;

  }
  .quote-simple--s {
    --quote-simple-grid-column-span: 7;

    grid-template-columns: 220px 1fr;
    gap: var(--spacing-400, 32px);
    align-items: end;

  }
}


/* ── Quote content panel ─────────────────────────────────────────────────── */

.quote-simple__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0; /* elements bring their own whitespace */
  padding: var(--spacing-600, 48px) var(--spacing-500, 40px);
  background-color: var(--academy);
  border: var(--border-width-bold, 4px) solid var(--academy);
  /* Mobile: square top, rounded bottom */
  border-radius: 0 0 var(--border-radius-l, 12px) var(--border-radius-l, 12px);
  overflow: hidden;

}

@media (min-width: 768px) {
  .quote-simple__content {
    padding: var(--spacing-500) var(--spacing-600) var(--spacing-300);
    /* Desktop: top-left, top-right, bottom-right rounded; bottom-left square */
    border-radius: var(--border-radius-l, 12px) var(--border-radius-l, 12px) var(--border-radius-l, 12px) 0;
  }
}

/* ── S (Small) size variant ──────────────────────────────────────────────── */
/*
 * Fixed 220×220 square image aligned to the bottom of the content panel.
 * Goes side-by-side from 500px (narrower than L's 768px breakpoint).
 * Content padding stays at 48px (no large-desktop increase).
 *
 * Compound selector (.quote-simple.quote-simple--s) outranks base .quote-simple
 * rules so the 768px L grid columns don't leak into S.
 */

.quote-simple--s .quote-simple__image {

}

.quote-simple--s .quote-simple__content {
  /* override the 64px desktop padding from the L simple */
  padding: var(--spacing-600, 48px) var(--spacing-500, 40px);
}

@media (min-width: 500px) {
  .quote-simple.quote-simple--s {
    grid-template-columns: 220px 1fr;
    gap: var(--spacing-400, 32px);
    align-items: end;
  }

  .quote-simple--s .quote-simple__image {
    /* Same asymmetric radius as L desktop: BR square where panels meet at bottom */
    border-radius: var(--border-radius-l, 12px) var(--border-radius-l, 12px) 0 var(--border-radius-l, 12px);
  }

  .quote-simple--s .quote-simple__content {
    /* BL square where panels meet at bottom */
    border-radius: var(--border-radius-l, 12px) var(--border-radius-l, 12px) var(--border-radius-l, 12px) 0;
    padding: var(--spacing-600, 48px);
  }
}

/* ── Person full view: no image, simple 700px block, auto height ─────────── */

.path-node.page-node-type-person .quote-simple__image {
  display: none;
}

.path-node.page-node-type-person .quote-simple {
  display: block;

  max-width: 700px;
  margin-inline-start: var(--grid-gutter);
}

.path-node.page-node-type-person .quote-simple__content {
  justify-content: flex-start;
  gap: 0;
  padding: var(--spacing-600, 48px);
}

/* */

.quote-simple--filled .quote-simple__content .quote-simple__quote {
  color:var(--ambience);
}

/* ── Outline variant ─────────────────────────────────────────────────────── */

.quote-simple--outline .quote-simple__content {
  background-color: transparent;
}

/* ── Image placeholder + media overlay ───────────────────────────────────── */

.quote-simple__image {
  position: relative;
}

.quote-simple__image-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}



/* ── Quote text ──────────────────────────────────────────────────────────── */

.quote-simple__quote {
  margin: 0;
  padding: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-size: var(--text-simple-xl, 20px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--trust, #550a2d);
  /* Hanging indent so opening quote mark sits outside the text column */
  /* text-indent: -0.45em;
  padding-left: 0.45em; */
  & > p {
    &:first-child {
      margin-top: 0;
    }
  }
}

/* ── Attribution block ───────────────────────────────────────────────────── */

.quote-simple__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200, 16px);
}

.quote-simple__author {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050, 4px);
}

.quote-simple__author-name {
  margin: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--trust, #550a2d);
}

.quote-simple__author-role {
  margin: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--trust, #550a2d);
}