/* Vita-specific blocks only: the template gallery, the zoom view, the pricing card. Layout, color tokens, header,
   footer, and the shared blocks come from the fleet showcase kit (css/kit.css, css/rk-tokens.css); the oxblood
   accent comes from site.yml. */

/* ---------- template gallery ---------- */
.gallery-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.gallery-item { min-width: 0; }
.gallery-item h3 { margin-top: 0.9rem; font-size: 1.0625rem; }
.gallery-item p { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); }
.gallery-page { display: block; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: box-shadow 160ms ease, transform 160ms ease; }
.gallery-page img { display: block; width: 100%; height: auto; }
.gallery-more { margin: 2.5rem 0 0; }
.gallery-more .btn { white-space: normal; max-width: 100%; text-align: center; }
.zoom-link { display: block; border-radius: 4px; color: inherit; text-decoration: none; cursor: zoom-in; }
.zoom-link:hover .gallery-page { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
/* Under 1,024 px the tiles stand one to a row: a resume shows its top (name, summary, first role) and a letter its whole
   page, each about as wide as the screen, so the text reads without opening the zoom view. */
@media (max-width: 1023px) { .gallery-tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gallery-page { transition: none; } .zoom-link:hover .gallery-page { transform: none; } }

/* ---------- zoom view: a modal <dialog>, one template's whole page ---------- */
.zoom { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #e6eaf1; }
.zoom[open] { display: flex; flex-direction: column; }
.zoom::backdrop { background: rgb(9 13 22 / 0.92); }
.zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
.zoom-title { font-size: 1.0625rem; margin: 0; color: #fff; }
.zoom-count { margin: 2px 0 0; font-size: 0.8125rem; color: #c3cad6; }
.zoom-actions { display: flex; gap: 6px; flex-shrink: 0; }
.zoom .icon-btn { color: #fff; border-color: rgb(255 255 255 / 0.45); background: rgb(255 255 255 / 0.08); }
.zoom-body { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 0 1rem 2rem; }
.zoom-page { display: block; width: min(100%, 860px); }
.zoom-page img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.7); }
.zoom-desc { max-width: 860px; margin: 1rem 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.55; color: #e6eaf1; }
html.zoom-open { overflow: hidden; }

/* ---------- pricing card (owner ruling of 2026-09-14: one plan) ---------- */
.price-card { max-width: 34rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem; box-shadow: var(--shadow-card); }
.price { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.price-amount { font-size: clamp(3rem, 2.4rem + 3vw, 4.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price-unit { font-size: 1.25rem; font-weight: 700; color: var(--text-muted); }
.price-soon { margin: 1.25rem 0 0; padding: 0.875rem 1rem; border: 1px dashed var(--line); border-radius: var(--r); line-height: 1.55; }
.included { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.included li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.45; }
.included svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.price-legal { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--text-muted); }
.tm-notice { max-width: 34rem; margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- legal pages ---------- */
.legal { max-width: 46rem; padding-block: clamp(2.5rem, 6vw, 5rem); }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); line-height: 1.1; }
.legal h1 + p { margin-top: 0.75rem; color: var(--text-muted); }
.legal h2 { margin-top: 2.5rem; font-size: 1.375rem; line-height: 1.25; }
.legal p, .legal ul { margin-top: 0.9rem; }
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.7; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.5rem; }