/* /products/ (Patreon membership page): layout glue only.
   Every surface, colour, shadow and type style comes from /styles/ht.css (design system v2).
   Nothing here redefines tokens or component looks. */

/* Lists rendered as tag rows: drop the default list box */
ul.tags { margin: 0; }   /* list reset lives in ht.css */

/* ---- 1. Hero: tier picker + proof row ---- */
.pt-hero .btn-row { margin-bottom: var(--s-5); }
.pt-picker { margin: 0 0 var(--s-4); }
.pt-picker-label {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.pt-proof { margin: 0; }
.pt-proof .tag { white-space: normal; }

/* ---- 2. Tiers: the "what's inside" link under each Join button ---- */
.pt-tier-more {
  display: inline-block; align-self: center;
  margin-top: var(--s-1); padding-block: .65rem;   /* a 40px+ tap target */
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--link);
}

/* ---- 3. Compare table: swipe hint (phones only) + CTA row inside the table plate ---- */
.pt-table-hint { display: none; margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 2px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
@media (max-width: 699px) { .pt-table-hint { display: block; } }
.pt-table-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  padding: var(--panel-pad-sm) var(--panel-pad);
  border-top: 2px solid var(--line);
  background: var(--inset);
}
.pt-table-foot p { margin: 0; max-width: 52ch; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }

/* ---- 4. Library deep-dive ---- */
.pt-lib .split { align-items: start; }
@media (min-width: 880px) { .pt-lib .split { align-items: center; } }
.pt-lib-title { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0; font-size: var(--fs-h3); }
.pt-lib-title img { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.pt-lib .stats { gap: var(--s-2) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 84px), 1fr)); }
.pt-lib .stat-num { font-size: clamp(1.45rem, .9rem + 2.6vw, 2.75rem); }
.pt-lib .meta { margin-bottom: 0; }   /* the panel's .stack keeps the rhythm between blocks */
.pt-lib .screen { margin-bottom: var(--depth); }
/* phones: the media screen of the image-left panel follows its text, like the others */
@media (max-width: 879px) { .pt-lib .split-wide-right > .screen { order: 2; } }

.pt-community-head { margin: 0 0 var(--gap); }
.pt-community-head h3 { margin: 0 0 .25em; }
.pt-community-head p { margin: 0; color: var(--text-muted); }
.pt-community .grid { gap: var(--gap); }
.pt-community .screen { margin-bottom: var(--depth); }

/* ---- 5. Shop catalogue: group heads ---- */
.pt-pack-head { display: grid; gap: var(--s-4); }
.pt-pack-title { display: flex; align-items: center; gap: var(--s-3) var(--s-4); }
.pt-pack-title img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.pt-pack-title h3 { margin: 0 0 .15em; font-size: var(--fs-h3); }
.pt-pack-title p { margin: 0; color: var(--text-muted); }
.pt-pack-head .filter-bar { padding-top: var(--s-4); border-top: 2px solid var(--line); }
/* item cards in a grid: equal heights, actions pinned to the bottom */
[data-filter-target="packs"] > .item-card, #shop .grid > .item-card { grid-template-rows: auto 1fr; }
#shop .item-card .item-actions { align-self: end; }
#shop .item-title { font-size: var(--fs-h4); }

/* ---- 6. Try before you join: trial -> full pack ---- */
.trial-card { gap: var(--s-3); }
.trial-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start;
  padding: var(--s-4);
  background: var(--inset);
  border: var(--bw-sm) solid var(--line);
  border-radius: var(--r-md);
}
.trial-step .meta { margin: 0 0 .35em; }
.trial-step .card-title { margin: 0 0 .25em; }
.trial-step .card-text { margin: 0; }
.trial-then {
  margin: 0; padding-left: var(--s-4);
  font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted);
}
.trial-then span { display: inline-block; margin-right: .35em; }

/* ---- 7. Supports: icons on the cards, the funding-goal plate ---- */
.pt-card-icon { width: 64px; height: 64px; object-fit: contain; }
.pt-goal .eyebrow { margin-bottom: var(--s-2); }
.pt-goal .callout-title { font-size: var(--fs-h3); }

/* ---- 8. Steps: CTA row under the steps ---- */
.pt-steps-cta { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--line); }

@media (max-width: 520px) {
  .trial-step { grid-template-columns: minmax(0, 1fr); }
  .trial-step .item-icon { width: 44px; height: 44px; }
  .pt-table-foot .btn { width: 100%; }
}

/* ---- 5b. Catalogue "Show all" (shared/pages/patreon.js adds .pt-collapsed / .pt-over) ---- */
.pt-collapsed > .pt-over { display: none; }
.pt-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.pt-more p { margin: 0; color: var(--text-muted); font-weight: 600; }
.pt-more[hidden] { display: none; }

/* ---- Tablet rhythm: no orphaned last card ---- */
/* Tiers: two columns with the featured tier full-width below them, then three columns from 960px */
@media (min-width: 640px) and (max-width: 959px) {
  .pt-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-tiers > .is-featured { grid-column: 1 / -1; }
  .pt-tiers > .is-featured .tier-points { columns: 2; column-gap: var(--s-6); }
  .pt-tiers > .is-featured .tier-points > li { break-inside: avoid; }
  .pt-tiers > .is-featured .btn { max-width: 420px; align-self: center; width: 100%; }
}
@media (min-width: 960px) { .pt-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Community clips: always a row of three once there is room */
@media (min-width: 600px) { .pt-community .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* "What your membership supports": 2 x 2 on tablets */
@media (min-width: 560px) and (max-width: 999px) { .pt-supports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }