/* ================================================================
   BLOCK 2 : TESTIMONIALS  (testimonials-v1.2)
   Daniel Rojas portfolio  -  hand-coded, no framework
   ================================================================ */

/* ---- self-hosted display face (block-scoped; rest of site = DM Sans) ---- */
@font-face {
  font-family: "IBM 3270";
  src: url("../assets/fonts/IBM3270.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   SHARED  -  reconcile / replace with the canonical SHARED block at
   master assembly (reset + base tokens live here in every block).
   Kept minimal + inert so it will not fight the real SHARED region.
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
.tst, .tst * { margin: 0; }
.tst img { max-width: 100%; display: block; }

/* ================================================================
   BLOCK TOKENS  (measured-approximate from mockups, UNVERIFIED)
   --tst-accent / --tst-ink are candidates to fold into the canonical
   shared accent + ink tokens at assembly.
   ================================================================ */
:root {
  --tst-ink:      #3C3C3C;   /* title + read-more bar               */
  --tst-accent:   #FF124B;   /* read-more hover  (~ site red)        */
  --tst-paper:    #FFFFFF;   /* receipt body                        */
  --tst-wall:     #F0F0EF;   /* texture fallback                    */

  --tst-mono: "IBM 3270", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --tst-card-w:   250px;     /* per-tier column cap; set in queries  */
  --tst-gap:      24px;      /* column gap; set in queries           */
  --tst-pad:      20px;      /* receipt inner padding                */
  --tst-body:     12px;      /* receipt body size (mobile-first)     */
  --tst-lh:       1.3;       /* receipt line-height (mock ~1.2)      */
  --tst-clamp:    7;         /* collapsed preview lines (mobile)     */
  --tst-bleed-top: 30px;     /* white paper above staple + below button */
}

/* ================================================================
   SECTION  -  textured plaster wall
   ================================================================ */
.tst {
  background:
    var(--tst-wall)
    url("../assets/images/wall-white-tirol.jpg") center top / cover no-repeat;
  padding: 40px 20px 56px;
  color: var(--tst-ink);
  font-family: var(--tst-mono);
}
.tst__inner {
  max-width: 1160px;   /* 4 x 250 + 3 x 52 = 1156 */
  margin: 0 auto;
}

/* ---- TESTIMONIALS wordmark ---- */
.tst__title {
  width: min(100%, 917px);
  height: auto;
  margin: 0 auto 34px;
}

/* ================================================================
   GRID  -  mobile 1-up, tablet 3-up, desktop 4-up
   ================================================================ */
.tst__grid {
  display: grid;
  grid-template-columns: minmax(0, 260px);   /* keep receipt measure ~30ch */
  justify-content: center;
  gap: 40px 24px;
}

/* collapsed grid: show first 2 on mobile */
.tst__grid:not(.is-all) .tst-card:nth-child(n+3) { display: none; }
.tst__grid.is-all .tst-card { display: block; }

/* ================================================================
   RECEIPT CARD
   .tst-card        = shadow wrapper (wraps paper + torn end)
   .tst-card__paper = white content column (uniform height collapsed)
   .tst-card__tear  = bottom dented svg (flow sibling under paper)
   The drop-shadow lives on the outer wrapper so it traces the whole
   receipt including the torn edge.
   ================================================================ */
.tst-card {
  display: flex;
  flex-direction: column;
  /* drop-shadow follows the tear's alpha; box-shadow would cut a flat line.
     Static wrapper: expand is a click (snap), so it repaints once, not per frame. */
  filter: drop-shadow(5px 9px 9px rgba(0, 0, 0, 0.17));
  align-self: start;   /* expanding one card must not stretch its row-mates */
}

.tst-card__paper {
  background: var(--tst-paper);
  padding: var(--tst-bleed-top) var(--tst-pad) var(--tst-bleed-top);   /* bleed above staple + below button */
}

.tst-card__staple {
  width: 36px;
  height: auto;
  margin: 0 auto;
  opacity: 0.7;
}

.tst-card__head {
  margin-top: 12px;
  text-align: center;
  font-size: var(--tst-body);
  line-height: var(--tst-lh);
}
.tst-card__name {
  font-weight: 400;
  font-size: calc(var(--tst-body) + 1px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tst-card__role {
  margin-top: 8px;
  white-space: nowrap; /* Forces one line constraint */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* dashed rule = monospace hyphen run */
.tst-card__rule {
  border: 0;
  height: 2px;
  margin: 14px 0 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--tst-ink) 0 6px,
    transparent 6px 10px
  );
}

/* ---- text wrapper + body : collapsed via line-clamp (free ellipsis) ---- */
.tst-card__text {
  flex: 0 1 auto;
  font-size: var(--tst-body);
  line-height: var(--tst-lh);
}
.tst-card__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tst-clamp);
          line-clamp: var(--tst-clamp);
  overflow: hidden;
}
.tst-card.is-open .tst-card__body {
  display: block;
  -webkit-line-clamp: unset;
          line-clamp: unset;
  overflow: visible;
}

/* ---- read more / read less ---- */
.tst-card__more {
  display: block;
  margin: 20px auto 0;   /* Centers horizontally and maintains top gap */
  width: 100%;
  max-width: 210px;      /* Constrains width to match design */
  padding: 4px 6px;
  border: 0;
  background: var(--tst-ink);
  color: var(--tst-paper);
  font: inherit;
  font-size: calc(var(--tst-body) - 1px);
  text-align: center;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tst-card__more:hover,
.tst-card__more:focus-visible {
  background: var(--tst-accent);
}
.tst-card__more:focus-visible {
  outline: 2px solid var(--tst-ink);
  outline-offset: 2px;
}
.tst-card__more-close { display: none; }
.tst-card.is-open .tst-card__more-open  { display: none; }
.tst-card.is-open .tst-card__more-close { display: inline; }

/* ---- torn bottom edge : flow sibling of paper ---- */
.tst-card__tear {
  display: block;
  width: 100%;
  margin-top: -1px; /* overlap paper: no subpixel hairline seam */
}

/* ================================================================
   FOOTER  -  View all / View less  (rule with centered label)
   ================================================================ */
.tst__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}
.tst__footer::before,
.tst__footer::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--tst-ink);
}
.tst__viewall {
  border: 0;
  background: transparent;
  color: var(--tst-ink);
  font: inherit;
  font-size: 15px;
  padding: 4px 10px;
  cursor: pointer;
}
.tst__viewall:hover        { color: var(--tst-accent); }
.tst__viewall:focus-visible {
  outline: 2px solid var(--tst-ink);
  outline-offset: 2px;
}
.tst__viewall-close { display: none; }

/* label swap driven by the JS-set aria-expanded on the button */
.tst__viewall[aria-expanded="true"] .tst__viewall-open  { display: none; }
.tst__viewall[aria-expanded="true"] .tst__viewall-close { display: inline; }

/* ================================================================
   BREAKPOINTS  (mobile-first, min-width)
   ================================================================ */

/* --- tablet : 3-up (needs ~748px content) --- */
@media (min-width: 760px) {
  :root {
    --tst-card-w: 220px;
    --tst-gap: 24px;
    --tst-clamp: 10;
    --tst-bleed-top: 34px;
  }
  .tst__grid {
    grid-template-columns: repeat(3, minmax(0, var(--tst-card-w)));
    gap: 40px var(--tst-gap);
  }
  .tst__grid:not(.is-all) .tst-card:nth-child(n+3) { display: block; }
  .tst__grid:not(.is-all) .tst-card:nth-child(n+4) { display: none; }
}

/* --- desktop : 4-up (needs ~1156px content) --- */
@media (min-width: 1200px) {
  :root {
    --tst-card-w: 250px;
    --tst-gap: 52px;
    --tst-body: 13px;
    --tst-clamp: 13;
    --tst-bleed-top: 40px;
  }
  .tst {
    padding: 48px 20px 64px;
  }
  .tst__grid {
    grid-template-columns: repeat(4, minmax(0, var(--tst-card-w)));
    gap: 44px var(--tst-gap);
  }
  .tst__grid:not(.is-all) .tst-card:nth-child(n+4) { display: block; }
  .tst__grid:not(.is-all) .tst-card:nth-child(n+5) { display: none; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .tst-card__more { transition: none; }
}