/* The public Products page (blocks/products.php).
   From the approved mockup, docs/design/formulary-teaser/ (direction C): the shared pieces and
   direction C only. Loaded after the site's own kaltera.css and palette.css, so the header,
   footer, buttons and fonts are the site's.

   Rules from docs/design/DESIGN-PRINCIPLES.md:
   - one spacing scale: 8, 16, 24, 32, 48, 64, 96, 128;
   - eyebrow, then title, then one lead line, then content;
   - teal only for actions and the one key number; ink for text, muted for secondary;
   - two background tones that alternate; dark only for high-contrast moments;
   - one card radius (16), one border; white cards on tinted fields.

   The custom properties belong to the page, not to :root: the header and the footer are
   outside it and keep the site's. Every colour here equals the site's palette.css value. */

.tz {
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  --ink: #16262B;
  --muted: rgb(22 38 43 / 0.68);
  --faint: rgb(22 38 43 / 0.45);
  --teal: #12707E;
  --teal-deep: #0E5D69;
  --field: #EAF0EE;
  --field-2: #E1EBE8;
  --card: #FAFCFB;
  --line: rgb(22 38 43 / 0.14);
  --line-strong: rgb(22 38 43 / 0.28);
  --radius: 16px;
  --control: 2px;
}

/* ---------- Page frame ---------- */

.tz { color: var(--ink); }
.tz-section { padding-block: var(--s7); }
.tz-section--first { padding-top: calc(var(--utility-h) + var(--header-h) + var(--s6)); }
.tz-section--alt { background: var(--field-2); }
.tz-section--tight { padding-block: var(--s6); }
.tz-section--first.tz-section--tight { padding-top: calc(var(--utility-h) + var(--header-h) + var(--s6)); }

/* ---------- Type roles: one meaning each ---------- */

.tz-label {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.tz-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 2vw + 18px, 48px);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
}
.tz-h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(26px, 0.8vw + 18px, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.tz-h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.tz-title .mute, .tz-h2 .mute { color: var(--faint); display: block; }
.tz-lead {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 36em;
  text-wrap: pretty;
}
.tz-body { font-size: 16px; line-height: 1.6; }
.tz-small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.tz-mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0.01em; }
.tz-key { color: var(--teal); }

/* Eyebrow, title, lead: the same gaps every time */
.tz-head { display: grid; gap: var(--s2); align-content: start; }
.tz-head .tz-lead { margin-top: var(--s1); }
.tz-head + .tz-block { margin-top: var(--s5); }

.tz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.tz-actions--tight { margin-top: 0; }
.tz-textlink { font-size: 15px; color: var(--ink); }
.tz-textlink a { color: var(--teal); }

/* ---------- Shared pieces ---------- */

.tz-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* A run of facts: label and value rows */
.tz-facts { display: grid; }
.tz-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding-block: var(--s2);
  border-top: 1px solid var(--line);
}
.tz-facts dt { font-size: 15px; color: var(--muted); }
.tz-facts dd { font-family: var(--f-mono); font-size: 15px; text-align: right; white-space: nowrap; }
.tz-facts dd.txt { font-family: var(--f-body); }

/* A size, as the catalog writes it */
.tz-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--control);
  background: var(--field);
  font-family: var(--f-mono);
  font-size: 13px;
  white-space: nowrap;
}
.tz-size i { font-style: normal; color: var(--muted); }
.tz-sizes { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* The locked price: a state, not a control */
.tz-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 32px;
  padding: 0 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--control);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.tz-lock .icon { width: 16px; height: 16px; }
.tz-lock .tz-dots { font-family: var(--f-mono); letter-spacing: 0.12em; color: var(--faint); }

/* The note at the foot of every page */
.tz-ruo {
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.tz-ruo p { max-width: 70em; font-size: 13px; line-height: 1.6; color: var(--muted); }
.tz-ruo strong { font-weight: 400; color: var(--ink); }

/* Numbered steps */
.tz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); counter-reset: step; }
.tz-step { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); }
.tz-step__n { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.tz-step p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Icons in content */
.tz .icon { width: 20px; height: 20px; }

@media (max-width: 979px) {
  .tz-section { padding-block: var(--s6); }
  .tz-section--first, .tz-section--first.tz-section--tight { padding-top: calc(var(--utility-h) + 64px + var(--s5)); }
  .tz-steps { grid-template-columns: 1fr; gap: var(--s2); }
  .tz-step { padding: var(--s3); }
}
@media (max-width: 600px) {
  .tz-lead { font-size: 17px; }
  .tz-actions .btn { flex: 1 1 100%; }
}

.tz-redact { --base: 0.18; --lift: 0.07; display: inline-block; height: 12px; border-radius: 2px; background: rgb(22 38 43 / var(--base)); vertical-align: middle; }

/* =========================================================
   Direction C: a few in full, the rest redacted
   ========================================================= */

.c-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; }
.c-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.c-stats div { padding-top: var(--s2); display: grid; gap: 4px; }
.c-stats b { font-family: var(--f-mono); font-weight: 400; font-size: 32px; line-height: 1.1; }
.c-stats div:first-child b { color: var(--teal); }
.c-stats span { font-size: 14px; color: var(--muted); }

.c-feature { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.c-prod { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s3); padding: var(--s3); }
.c-prod__top { display: grid; gap: var(--s1); }
.c-prod__top .tz-label { font-size: 11px; }
.c-prod .tz-facts { align-content: start; }
.c-prod .tz-facts > div { padding-block: 10px; }
.c-prod .tz-facts dt { color: var(--ink); font-size: 15px; }
.c-prod .tz-facts dd { color: var(--muted); }
.c-prod .tz-facts > div:first-child { border-top: 0; padding-top: 0; }
.c-prod__doc { display: flex; align-items: center; gap: var(--s1); font-size: 13px; color: var(--muted); }
.c-prod__doc .icon { width: 16px; height: 16px; color: var(--ink); }
.c-prod__price { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.c-prod__price span { font-size: 13px; color: var(--muted); }

.c-rest { position: relative; }
.c-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.c-group { padding: var(--s3); display: grid; gap: 0; align-content: start; }
.c-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-bottom: var(--s2); }
.c-group__n { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.c-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; min-height: 48px; border-top: 1px solid var(--line); }
.c-row .tz-redact { height: 14px; }
.c-row__sizes { display: flex; gap: 6px; }
.c-row__sizes .tz-redact { --base: 0.08; --lift: 0.03; height: 20px; width: 44px; }
.c-row .icon { width: 16px; height: 16px; color: var(--faint); }
.c-more { padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.c-more b { font-family: var(--f-mono); font-weight: 400; color: var(--ink); }

.c-veil { position: absolute; inset: 0; display: grid; place-items: end center; padding: var(--s3) var(--s3) var(--s5); background: linear-gradient(180deg, rgb(225 235 232 / 0) 0%, rgb(225 235 232 / 0) 36%, rgb(225 235 232 / 0.86) 62%, rgb(225 235 232 / 0.97) 100%); }
.c-unlock { width: min(520px, 100%); padding: var(--s5); display: grid; gap: var(--s2); text-align: center; justify-items: center; box-shadow: 0 32px 80px -32px rgb(22 38 43 / 0.35); }
.c-unlock__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--field); }
.c-unlock .tz-lead { margin-top: 0; font-size: 16px; }
.c-unlock .tz-actions { justify-content: center; margin-top: var(--s2); }

.c-apply { position: sticky; bottom: 0; z-index: 40; background: var(--ink); color: var(--field); }
.c-apply__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 80px; padding-block: var(--s2); }
.c-apply__txt { display: flex; align-items: center; gap: var(--s3); font-size: 15px; }
.c-apply__txt b { font-family: var(--f-mono); font-weight: 400; font-size: 20px; color: var(--field); }
.c-apply__txt span { color: rgb(234 240 238 / 0.72); }
.c-apply__txt .short { display: none; }
.c-apply__txt .always { display: inline; }
.c-apply .tz-actions { margin-top: 0; flex-wrap: nowrap; }
.c-apply .btn { --btn-bg: var(--teal); --btn-fg: #F5F8F7; --btn-bg-hover: var(--teal-deep); }
.c-apply .btn--secondary { --btn-bg: transparent; --btn-fg: var(--field); --btn-bg-hover: rgb(234 240 238 / 0.08); border-color: rgb(234 240 238 / 0.4); }

@media (max-width: 1199px) {
  .c-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 979px) {
  .c-hero { grid-template-columns: 1fr; gap: var(--s4); }
  .c-grid { grid-template-columns: 1fr; }
  .c-unlock { padding: var(--s4) var(--s3); }
}
@media (max-width: 600px) {
  .c-feature { grid-template-columns: 1fr; gap: var(--s2); }
  .c-stats b { font-size: 26px; }
  .c-apply__in { min-height: 72px; }
  .c-apply__txt .long, .c-apply__txt b, .c-apply .btn--secondary { display: none; }
  .c-apply__txt .short { display: inline; font-size: 13px; white-space: nowrap; }
  .c-apply__in { gap: var(--s2); }
  .c-apply__txt { gap: var(--s1); }
  .c-apply .tz-actions { flex: 1 1 auto; justify-content: flex-end; }
  .c-apply .btn { flex: 0 1 auto; }
  .c-row__sizes .tz-redact:nth-child(n+2) { display: none; }
}

/* The outline rows shimmer softly, a slow sweep like content loading behind a lock. Only the bars' background
   moves, so nothing shifts. The rows start a little apart, so it reads as one wave and not a blink. */
@media (prefers-reduced-motion: no-preference) {
  .c-row .tz-redact {
    background-image: linear-gradient(100deg, rgb(22 38 43 / var(--base)) 35%, rgb(22 38 43 / var(--lift)) 50%, rgb(22 38 43 / var(--base)) 65%);
    background-size: 300% 100%;
    background-color: transparent;
    animation: tz-sheen 4.8s ease-in-out infinite;
    animation-delay: calc((var(--gw, 0) + var(--rw, 0)) * 0.22s);
  }
  .c-row:nth-of-type(2) { --rw: 1; }
  .c-row:nth-of-type(3) { --rw: 2; }
  .c-row:nth-of-type(4) { --rw: 3; }
  .c-grid > .c-group:nth-child(2n) { --gw: 2; }
  .c-grid > .c-group:nth-child(3n) { --gw: 4; }
  .c-grid > .c-group:nth-child(4n) { --gw: 6; }
}
@keyframes tz-sheen {
  0%   { background-position: 100% 0; }
  60%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}