/* =========================================================
   FaceUpper — "Testimonianze" page
   Page-level layout on top of starter.css (header, hero, .sec,
   .wrap, .head, reveal system, kit-mapped tokens). Content is
   rendered by js/testimonials.js from js/testimonials-data.js.

   The wall itself is one editorial mosaic, ported from the
   Claude Design "Wall of results (testimonianze)" template:
   a CSS multi-column masonry of mixed tiles (before/after sliders,
   quote cards, story graphics, photos, video). Card chrome
   (.quote, .quote--ba, .ba-cmp) is shared with the homepage
   carousel and lives in css/tcar.css; this file adds only the
   mosaic positioning and the page-specific tile variants.
   Colors stay within the Aga Nowak kit via css/branding-kit.css.
   ========================================================= */

/* ---------- Hero (single centered column) ---------- */
.hero--tst .hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hero__center { max-width: 780px; text-align: center; }
.hero--tst h1 { margin-left: auto; margin-right: auto; }
.hero--tst .hero__body { margin-left: auto; margin-right: auto; }

/* ---------- Mosaic scaffold ----------
   CSS columns pack tiles into leftover holes (Pinterest-style).
   3 columns on desktop, 2 around 900px, 1 below 640px. Column
   width is shared, so a 3:5 crop cannot balloon into a tower.
   sm/md/lg are unused width hints left on the markup. */
.mosaic {
  margin-top: clamp(30px, 3.6vw, 52px);
  column-count: 3;
  column-gap: clamp(16px, 2vw, 26px);
}
.mtile {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  min-width: 0;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.mtile > * { flex: 0 0 auto; width: 100%; }
/* A tile that stacks two cards vertically (design rows 1 & 3).
   Stacks are quotes only — height follows copy. */
.mtile--stack { gap: clamp(14px, 1.6vw, 22px); }
.mtile--stack > * { flex: 0 0 auto; }

/* ---------- Uneven placement (quotes only; sliders stay straight) ----------
   Tiny tilts, insets and a little overlap so the wall reads as a
   gathered collage rather than a uniform grid. Kept inside the
   column so CSS columns do not clip the cards. */
.mtile--tilt-a { transform: rotate(-2deg); }
.mtile--tilt-b { transform: rotate(1.7deg); }
.mtile--tilt-c { transform: rotate(-1.1deg) translateX(6%); }
.mtile--inset { width: 84%; margin-left: 16%; }
.mtile--nudge { width: 88%; }
.mtile--overlap { margin-top: -28px; z-index: 2; }
.mtile--air { margin-bottom: clamp(28px, 3vw, 44px); }
.mtile--tilt-a > .quote { border-radius: 32px 16px 36px 14px; }
.mtile--tilt-b > .quote { border-radius: 14px 38px 18px 30px; }
.mtile--tilt-c > .quote { border-radius: 28px 28px 12px 40px; }

/* ---------- Quote tiles ----------
   Base .quote chrome comes from tcar.css; the mosaic only sizes
   it. Featured (authority) quotes get the larger serif size the
   design gives its hero quotes. */
.mosaic .quote blockquote { font-size: clamp(17px, 1.5vw, 21px); }
.mosaic .quote--feat blockquote { font-size: clamp(19px, 1.9vw, 26px); }

/* Inverted "ink" quote card — the design's single editorial
   accent tile. Burgundy shade from the kit, bone text. */
.quote--ink { background: var(--fu-bloom-700); border-color: var(--fu-bloom-700); }
.quote--ink blockquote { color: var(--fu-bone-50); }
.quote--ink blockquote::before { color: var(--fu-bloom-300); opacity: .7; }
.quote--ink figcaption {
  color: rgba(255, 255, 255, .68);
  border-top-color: rgba(255, 255, 255, .18);
}

/* Coloured papers — kit hues only. Peach and gold washes on quotes;
   a few full-peach blush cards; burgundy ink stays the dark accent. */
.mosaic .quote--peach {
  background: var(--fu-bloom-100);
  border-color: var(--fu-bloom-300);
}
.mosaic .quote--peach blockquote { color: var(--fu-bloom-500); }
.mosaic .quote--peach blockquote::before { color: var(--fu-gold-500); opacity: .55; }
.mosaic .quote--peach figcaption {
  color: var(--fu-bloom-600);
  border-top-color: rgba(225, 170, 154, .45);
}
.mosaic .quote--gold {
  background: color-mix(in srgb, var(--fu-gold-500) 22%, var(--fu-bone-50));
  border-color: color-mix(in srgb, var(--fu-gold-500) 40%, var(--fu-bone-50));
}
.mosaic .quote--gold blockquote { color: var(--fu-bloom-700); }
.mosaic .quote--gold blockquote::before { color: var(--fu-gold-500); opacity: .7; }
.mosaic .quote--gold figcaption {
  color: var(--fu-bloom-500);
  border-top-color: rgba(164, 139, 102, .35);
}
.mosaic .quote--cream {
  background: var(--fu-cream-100);
  border-color: var(--fu-mist-300);
}
.mosaic .quote--blush {
  background: var(--fu-bloom-300);
  border-color: var(--fu-bloom-300);
}
.mosaic .quote--blush blockquote { color: var(--fu-bloom-700); }
.mosaic .quote--blush blockquote::before { color: var(--fu-bloom-500); opacity: .55; }
.mosaic .quote--blush figcaption {
  color: var(--fu-bloom-700);
  border-top-color: rgba(71, 39, 43, .18);
}
.mosaic .quote--blush .quote__badge,
.mosaic .quote--peach .quote__badge {
  background: var(--fu-bone-50);
  color: var(--fu-bloom-500);
}
.mosaic .quote--gold .quote__badge {
  background: var(--fu-bloom-500);
  color: var(--fu-bone-50);
}

/* Slider card chrome (the photo itself stays a crop). */
.mosaic .mtile--frame-peach > .quote--ba {
  background: var(--fu-bloom-50);
  border-color: var(--fu-bloom-300);
}
.mosaic .mtile--frame-gold > .quote--ba {
  background: color-mix(in srgb, var(--fu-gold-500) 12%, var(--fu-bone-50));
  border-color: color-mix(in srgb, var(--fu-gold-500) 32%, var(--fu-bone-50));
}

/* Diamond glint — a brief gold/peach sparkle, not a constant blink. */
.mtile--bling::before,
.mtile--bling::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 9px; height: 9px;
  pointer-events: none;
  background: var(--fu-gold-500);
  clip-path: polygon(50% 0%, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(0 0 5px rgba(164, 139, 102, .55));
  animation: fu-bling 5.2s ease-in-out infinite;
  opacity: 0;
}
.mtile--bling::before { top: 12px; right: 16px; }
.mtile--bling::after {
  bottom: 28px; left: 14px;
  width: 7px; height: 7px;
  background: var(--fu-bloom-300);
  animation-delay: 2.1s;
  animation-duration: 5.8s;
}
@keyframes fu-bling {
  0%, 72%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  78% { opacity: .9; transform: scale(1.2) rotate(16deg); }
  84% { opacity: .15; transform: scale(.65) rotate(6deg); }
  90% { opacity: .75; transform: scale(1) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mtile--bling::before,
  .mtile--bling::after { animation: none; opacity: .45; }
}

/* ---------- Story graphics (Podia, 2160×3840 → 9:16) ----------
   Frame is locked; the file is shown whole inside it. */
.ba {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--fu-bone-50);
  border: 1px solid var(--fu-border);
  border-radius: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
}
.ba img {
  width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

/* ---------- Photo tiles (WordPress 1090×1090 → 1:1) ----------
   Square frame, name strip beneath when known. */
.ph {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--fu-bone-50);
  border: 1px solid var(--fu-border);
  border-radius: clamp(16px, 1.8vw, 24px);
  overflow: hidden;
}
.ph img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.ph figcaption {
  padding: 14px 20px;
  border-top: 1px solid var(--fu-border);
  font-size: 13px; letter-spacing: .04em;
  color: var(--fu-text-muted);
}

/* ---------- Sliders in the mosaic ----------
   Crops are 3:5 (558×930 / 744×1240 / 435×725). Pin the
   photo box so a wide tile cannot flatten the face.
   Caption and quote sit under the frame. */
.mosaic .ba-cmp { aspect-ratio: 3 / 5; }
.mosaic .ba-cmp img {
  aspect-ratio: 3 / 5;
  width: 100%; height: auto;
  max-height: none;
}

/* ---------- Closing CTA ---------- */
.cta--mid { justify-content: center; margin-top: clamp(24px, 2.6vw, 34px); }
.facts--mid { text-align: center; margin-top: 18px; }

@media (max-width: 900px) {
  .mosaic { column-count: 2; }
}
@media (max-width: 640px) {
  .mosaic { column-count: 1; }
  .mtile--stack { gap: 16px; }
  .mtile { margin-bottom: 16px; }
  .mtile--tilt-a,
  .mtile--tilt-b,
  .mtile--tilt-c { transform: none; }
  .mtile--inset,
  .mtile--nudge { width: 100%; margin-left: 0; }
  .mtile--overlap { margin-top: 0; }
}