/*
 * DJC_Testimonials -- Cards Skin
 *
 * Boxed variant: each quote sits in its own gradient tile, the shared bordered
 * frame is dropped, the avatar bubble is retired, and the dot row is redrawn as
 * a segmented progress track that fills left to right. The gradient is the only
 * decoration -- no corner ornament, deliberately.
 *
 * Every colour, size and radius reads a token declared on the root below, so a
 * host page rethemes by redeclaring those -- it should never need to re-target a
 * .djc-testimonials__* part. The defaults carry a soft violet, matching the
 * purple already in the component's own palette; retint with --card-bkg-from /
 * --card-bkg-to and the ink tokens.
 *
 * Apply via the `skin` prop (the component pushes its value as a bare root class):
 *   <djc-testimonials skin="cards" per-view="3" paginate="true" arrows="true">
 *   DJC_Testimonials.mount('#el', { items: [...], skin: 'cards', perView: 3, paginate: true });
 *
 * Pair it with paginate="true". The wrapping default gives each quote perView
 * turns per loop whenever the item count and perView are coprime, which in a
 * boxed layout reads as visible duplication.
 *
 * Load AFTER DJC_Testimonials.css (structure).
 */

/* ========================================
   TOKENS
   ======================================== */
.cards.djc-testimonials {
  --cards-per-row: 3;
  --card-gap: 24px;
  --card-radius: 18px;
  --card-pad: 28px;

  /* opaque on purpose, and the shading is the whole treatment -- no corner
     ornament. a translucent tile lets whatever sits behind it read through
     unevenly, which turns a row of cards into a row of blotches. two colour
     stops so a host can retint without restating the gradient; the first is
     held to 18% so the tile reads as light paper easing into colour rather
     than as a diagonal wash. */
  --card-bkg-from: #ffffff;
  --card-bkg-to: #ece3f9;
  --card-bkg: linear-gradient(140deg, var(--card-bkg-from) 0%, var(--card-bkg-from) 18%, var(--card-bkg-to) 100%);
  --card-border-color: #e6ddf6;
  --card-shadow: 0 10px 28px rgba(60, 38, 102, 0.08);

  /* pages differ in height by their longest quote -- a floor keeps the
     cross-fade from jolting the rest of the page up and down */
  --pair-min-height: 320px;

  --quote-size: 18px;
  --quote-line: 1.5;
  --quote-color: #3a2d52;
  --quote-weight: 400;
  --quote-strong-color: #4c1d95;
  --quote-strong-weight: 700;

  --name-size: 12px;
  --name-color: #6d4d9e;
  --name-tracking: 1px;

  --track-height: 3px;
  --track-color: #ded4f2;
  --track-fill: #7c3aed;
  --arrow-border: #ded4f2;
  --arrow-ink: #6d28d9;
  --arrow-ink-hover: #4c1d95;

  /* the structure sheet drives the arrow hover ring and both focus outlines off
     this one -- point it at the track so a host only has to set --track-fill */
  --dot-color-active: var(--track-fill);
}

/* ========================================
   FRAME -- dropped in favour of per-quote tiles
   ======================================== */
.cards .djc-testimonials__list {
  min-height: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* the legend sat on the frame's top border; with no frame it returns to flow */
.cards .djc-testimonials__title {
  position: static;
  transform: none;
  padding: 0 0 24px;
  white-space: normal;
  background: none;
}

.cards .djc-testimonials__overline {
  top: 0;
}

/* ========================================
   CARDS
   ======================================== */
.cards .djc-testimonials__pair {
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--card-gap);
  min-height: var(--pair-min-height);
}

/* fixed basis, not flex: 1 -- the last page of a paginated run hides its unused
   slots, and a growable basis would let the survivors stretch to fill the row.
   border-box is declared here rather than assumed: the basis is a share of the
   row, so under content-box the padding is added back on and the last tile in
   the row overflows. hosts that set it globally are unaffected. */
.cards .djc-testimonials__card {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--card-gap) * (var(--cards-per-row) - 1))) / var(--cards-per-row));
  padding: var(--card-pad);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  background: var(--card-bkg);
  box-shadow: var(--card-shadow);
}

/* the structure sheet leaves the <p> default margin alone -- inside a tile it
   stacks on the padding and the flex gap, so the quote floats off the top edge */
.cards .djc-testimonials__quote {
  margin: 0;
  font-size: var(--quote-size);
  line-height: var(--quote-line);
  font-style: normal;
  font-weight: var(--quote-weight);
  color: var(--quote-color);
}

/* quotes are injected as html, so a <strong> in the data lands here */
.cards .djc-testimonials__quote strong,
.cards .djc-testimonials__quote b {
  font-weight: var(--quote-strong-weight);
  color: var(--quote-strong-color);
}

/* ========================================
   ATTRIBUTION -- name only, no avatar
   ======================================== */
.cards .djc-testimonials__avatar {
  display: none;
}

/* pinned to the bottom so names line up across tiles of unequal quote length */
.cards .djc-testimonials__attr {
  margin-top: auto;
}

.cards .djc-testimonials__name,
.cards .djc-testimonials__location {
  font-size: var(--name-size);
  font-weight: 600;
  letter-spacing: var(--name-tracking);
  text-transform: uppercase;
  color: var(--name-color);
}

/* ========================================
   NAV -- dots redrawn as a progress track
   ======================================== */
.cards .djc-testimonials__dots {
  flex: 1 1 auto;
  gap: 0;
}

.cards .djc-testimonials__dot {
  flex: 1 1 0;
  width: auto;
  height: 24px;
}

.cards .djc-testimonials__dot::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--track-height);
  margin: calc(var(--track-height) / -2) 0 0;
  border-radius: 0;
  background: var(--track-fill);
}

/* fill is cumulative: every segment past the active one drops back to empty */
.cards .djc-testimonials__dot.is-active ~ .djc-testimonials__dot::after {
  background: var(--track-color);
}

.cards .djc-testimonials__dot.is-active::after {
  transform: none;
}

/* the trailing-segment rule above is 0-3-0, so hovering a segment further along
   the track needs the extra weight to preview its fill */
.cards .djc-testimonials__dot.is-active ~ .djc-testimonials__dot:hover::after,
.cards .djc-testimonials__dot:hover::after {
  background: var(--track-fill);
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* stack before the tiles get too narrow to read. the structure sheet already
   flips to a column at 768px -- this moves that up and drops the fixed basis,
   which would otherwise be read as a height once the axis turns vertical. */
@media only screen and (max-width: 900px) {
  .cards .djc-testimonials__pair {
    flex-direction: column;
    gap: 20px;
    min-height: 0;
  }

  .cards .djc-testimonials__card {
    flex: 1 1 auto;
  }
}