/* ==========================================================================
   Testimonials component

   A repeatable attributed quote with an optional circular portrait. Rows
   without a portrait get a quote-mark medallion in the same grid slot, so a
   mixed set still reads as one rhythm.

   Per-row crop framing arrives as inline custom properties on the <img>
   (--crop-w / --crop-h / --crop-x / --crop-y), emitted by
   w_cropped_image_style() in inc/cropped-image/init.php.
   ========================================================================== */

/*
   Centre the component in the content column. The page template
   (templates/editor-info-page/style.css) hands every component a max-width but
   NOT the centring — each component supplies its own auto inline margins, the
   same way .com-accordion, .com-heading, .com-paragraph and .com-rich-content
   do. Without this the block sits flush left while the rest of the page content
   is inset, which is only visible below the 900px grid breakpoint.
 */
.com-testimonials {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.com-testimonials-heading {
  /* Matches the spacing the heading had when it lived in a rich-content field. */
  margin-block: 0 1.2rem;
}

.com-testimonial {
  /* The cropper draws its preview circle at this exact diameter so editors see
     the crop life-size. If this changes, change the photo field's circle_size
     setting to match (acf-json/group_6893cfb83aab4.json, and see
     inc/cropped-image/init.php). The 78px mobile value below is not mirrored —
     the cropper can only show one size, and desktop is the honest default. */
  --com-testimonial-size: 104px;
  --com-testimonial-purple: var(--color-primary-purple, hsl(269deg 53% 27% / 1));
  --com-testimonial-yellow: var(--color-primary-yellow, hsl(41deg 97% 59% / 1));

  display: grid;
  grid-template-columns: var(--com-testimonial-size) minmax(0, 1fr);
  grid-template-areas:
    "photo quote"
    "photo who";
  column-gap: 1.6rem;
  row-gap: 0.9rem;
  align-items: start;

  /* figure carries a browser default margin of 1em 40px — clear it. */
  margin: 1.6rem 0;
  padding: 1.5rem 1.75rem;
  background: hsl(269deg 53% 27% / 0.045);
  border-radius: 16px;
}

/* --- portrait -------------------------------------------------------------
   The wrapper owns the circle and the clipping, which leaves the image itself
   free to be positioned inside it. */
.com-testimonial-photo {
  grid-area: photo;
  position: relative;
  inline-size: var(--com-testimonial-size);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: hsl(269deg 53% 27% / 0.08);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--com-testimonial-yellow),
    0 6px 16px hsl(269deg 53% 27% / 0.18);
}

/* The four --crop-* percentages come from w_cropped_image_style() and are
   relative to the circle, so they hold at any rendered diameter. The wrapper is
   square, which is why a percentage of its height equals the same percentage of
   its width. object-fit is a no-op while the box matches the image's aspect
   ratio — it is here so the fallbacks below cannot distort the photo. */
.com-testimonial-portrait {
  position: absolute;
  inset-inline-start: var(--crop-x, 0%);
  inset-block-start: var(--crop-y, 0%);
  inline-size: var(--crop-w, 100%);
  block-size: var(--crop-h, 100%);
  max-inline-size: none;
  display: block;
  object-fit: cover;
}

/* --- medallion, for rows with no portrait --------------------------------
   `content: "…" / ""` supplies EMPTY alternative text, so assistive tech does
   not announce a stray quotation mark. */
.com-testimonial:not(:has(.com-testimonial-photo))::before {
  content: "\201C" / "";
  grid-area: photo;
  inline-size: var(--com-testimonial-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: hsl(269deg 53% 27% / 0.07);
  box-shadow: inset 0 0 0 2px hsl(269deg 53% 27% / 0.13);
  color: var(--com-testimonial-purple);
  font-size: calc(var(--com-testimonial-size) * 0.72);
  line-height: 1;
  /* the glyph's own side bearing sits it high and left; nudge it optically */
  padding-block-start: 0.42em;
  opacity: 0.55;
}

/* --- the quote ----------------------------------------------------------- */
.com-testimonial-quote {
  grid-area: quote;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--color-text-color, #000);
}

.com-testimonial-quote p { margin: 0; }
.com-testimonial-quote p + p { margin-block-start: var(--p-margin, 1rem); }

/* --- attribution --------------------------------------------------------- */
.com-testimonial-who {
  grid-area: who;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: hsl(0 0% 26% / 1); /* 9:1 on the tinted card — comfortably past AA */
}

/* short brand rule above the name, in place of a full-width divider */
.com-testimonial-who::before {
  content: "";
  inline-size: 34px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--com-testimonial-yellow);
  margin-block-end: 0.55rem;
}

.com-testimonial-name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--com-testimonial-purple);
}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 640px) {
  .com-testimonial {
    --com-testimonial-size: 78px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "photo"
      "quote"
      "who";
    row-gap: 0.85rem;
    padding: 1.25rem 1.15rem;
  }
}

/* --- forced colours: the tint and shadows are dropped, so restore an edge - */
@media (forced-colors: active) {
  .com-testimonial { border: 1px solid CanvasText; }
}

/* --- print: no tint, no ink-heavy rings ---------------------------------- */
@media print {
  .com-testimonial {
    background: none;
    padding-inline: 0;
    break-inside: avoid;
  }
  .com-testimonial-photo { box-shadow: none; }
}