/* ==========================================================================
   "Read more on the Veris blog": three article cards at the end of a product
   or solutions page. Colours come from the page's own tokens (brand pages:
   --ink/--line/--mint; older pages: --t1/--b1), so it works on both designs.
   ========================================================================== */

.reads {
  --rd-ink: var(--ink, var(--t1, #F2F0EB));
  --rd-ink2: var(--ink-2, var(--t2, #B8B8B2));
  --rd-ink3: var(--ink-3, var(--t3, #8E8E88));
  --rd-line: var(--line, var(--b1, rgba(255,255,255,.09)));
  --rd-mint: var(--mint, #2EFFD5);
  --rd-display: var(--f-display, 'Outfit', sans-serif);
  --rd-mono: var(--f-mono, 'JetBrains Mono', monospace);
  padding: clamp(64px, 8vw, 112px) 0;
  border-top: 1px solid var(--rd-line);
}
.reads__hd { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(24px, 3vw, 40px); }
.reads__t { margin: 0; font: 700 clamp(30px, 3.6vw, 46px)/1.05 var(--rd-display); letter-spacing: -.035em; color: var(--rd-ink); }
.reads__t span { color: var(--rd-ink3); }
.reads__all { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--rd-ink); text-decoration: none; }
.reads__all svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.reads__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.read { display: grid; align-content: start; gap: 12px; color: inherit; text-decoration: none; }
.read__img { display: block; aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--rd-line); }
.read__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.23, 1, .32, 1); }
.read__k { margin-top: 4px; font: 500 12px/1 var(--rd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rd-ink3); }
.read__t { font: 700 19px/1.3 var(--rd-display); letter-spacing: -.02em; color: var(--rd-ink); text-wrap: balance; transition: color 160ms; }
.read:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .read:hover .read__t { color: var(--rd-mint); }
  .read:hover .read__img img { transform: scale(1.03); }
  .reads__all:hover svg { transform: translateX(3px); }
}
@media (max-width: 820px) {
  .reads__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .read { grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--rd-line); }
  .read:first-child { padding-top: 0; }
  .read__img { grid-row: 1 / 3; border-radius: 10px; }
  .read__k { margin-top: 2px; }
  .read__t { font-size: 16.5px; }
}