/**
 * Product UI — Span × Size × Type (2026-08-01)
 * Spec: data/ui_kit/product-span-size.standard.json
 * Metaphor: legacy coarse 1×1 ≈ new 8×8 reference cell (12-col desktop / 4-col mobile)
 */

:root {
  --pa-span-gap: 12px;
  --pa-span-ru: 40px; /* row unit @ M — 8×8 ref ≈ 320px tall */
  --pa-type-font: var(--pa-font-sans, 'Inter', system-ui, sans-serif);
  --pa-type-hero: 1.5rem;
  --pa-type-h1: 1.375rem;
  --pa-type-h2: 1.125rem;
  --pa-type-title: 1rem;
  --pa-type-desc: 0.8125rem;
  --pa-type-label: 0.75rem;
  --pa-type-hint: 0.6875rem;
  --pa-cc-icon: 56px;
  --pa-cc-media-h: 140px;
  --pa-cc-pad-x: 16px;
  --pa-cc-pad-y: 14px;
  --pa-field-error: var(--pa-danger, #c53030);
  --pa-field-success: var(--pa-success, #21c878);
}

/* ——— Size scale (inner scale; span = place) ——— */
.pa-size--xs,
[data-pa-size='xs'] {
  --pa-span-ru: 28px;
  --pa-type-hero: 1.125rem;
  --pa-type-h1: 1.0625rem;
  --pa-type-h2: 0.9375rem;
  --pa-type-title: 0.8125rem;
  --pa-type-desc: 0.6875rem;
  --pa-type-label: 0.625rem;
  --pa-type-hint: 0.625rem;
  --pa-cc-icon: 32px;
  --pa-cc-media-h: 72px;
  --pa-cc-pad-x: 10px;
  --pa-cc-pad-y: 8px;
}
.pa-size--s,
[data-pa-size='s'] {
  --pa-span-ru: 32px;
  --pa-type-hero: 1.25rem;
  --pa-type-h1: 1.125rem;
  --pa-type-h2: 1rem;
  --pa-type-title: 0.875rem;
  --pa-type-desc: 0.75rem;
  --pa-type-label: 0.6875rem;
  --pa-type-hint: 0.6875rem;
  --pa-cc-icon: 40px;
  --pa-cc-media-h: 96px;
  --pa-cc-pad-x: 12px;
  --pa-cc-pad-y: 10px;
}
.pa-size--m,
[data-pa-size='m'] {
  --pa-span-ru: 40px;
  --pa-type-hero: 1.5rem;
  --pa-type-h1: 1.375rem;
  --pa-type-h2: 1.125rem;
  --pa-type-title: 1rem;
  --pa-type-desc: 0.8125rem;
  --pa-type-label: 0.75rem;
  --pa-type-hint: 0.6875rem;
  --pa-cc-icon: 56px;
  --pa-cc-media-h: 140px;
  --pa-cc-pad-x: 16px;
  --pa-cc-pad-y: 14px;
}
.pa-size--l,
[data-pa-size='l'] {
  --pa-span-ru: 48px;
  --pa-type-hero: 1.75rem;
  --pa-type-h1: 1.5rem;
  --pa-type-h2: 1.25rem;
  --pa-type-title: 1.125rem;
  --pa-type-desc: 0.875rem;
  --pa-type-label: 0.75rem;
  --pa-type-hint: 0.75rem;
  --pa-cc-icon: 64px;
  --pa-cc-media-h: 160px;
  --pa-cc-pad-x: 20px;
  --pa-cc-pad-y: 16px;
}
.pa-size--xl,
[data-pa-size='xl'] {
  --pa-span-ru: 56px;
  --pa-type-hero: 2rem;
  --pa-type-h1: 1.75rem;
  --pa-type-h2: 1.375rem;
  --pa-type-title: 1.25rem;
  --pa-type-desc: 0.9375rem;
  --pa-type-label: 0.8125rem;
  --pa-type-hint: 0.75rem;
  --pa-cc-icon: 72px;
  --pa-cc-media-h: 180px;
  --pa-cc-pad-x: 22px;
  --pa-cc-pad-y: 18px;
}

/* Type slots — same family, size-driven */
.pa-type-hero,
.pa-span-grid .pa-type-hero,
[data-pa-product] .pa-type-hero {
  font-family: var(--pa-type-font);
  font-size: var(--pa-type-hero);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.pa-type-h1,
[data-pa-product] .pa-type-h1 {
  font-family: var(--pa-type-font);
  font-size: var(--pa-type-h1);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.pa-type-h2,
[data-pa-product] .pa-type-h2 {
  font-family: var(--pa-type-font);
  font-size: var(--pa-type-h2);
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}

/* ——— 12-col span grid ——— */
.pa-span-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pa-span-gap);
  width: 100%;
  align-items: stretch;
}

.pa-span {
  min-width: 0;
  box-sizing: border-box;
}

/* data-pa-span="CxR" — C = column span (1–12), R = row units */
.pa-span[data-pa-span='2x2'],
.pa-span--2x2 { grid-column: span 2; min-height: calc(2 * var(--pa-span-ru)); }
.pa-span[data-pa-span='2x3'],
.pa-span--2x3 { grid-column: span 2; min-height: calc(3 * var(--pa-span-ru)); }
.pa-span[data-pa-span='3x2'],
.pa-span--3x2 { grid-column: span 3; min-height: calc(2 * var(--pa-span-ru)); }
.pa-span[data-pa-span='3x3'],
.pa-span--3x3 { grid-column: span 3; min-height: calc(3 * var(--pa-span-ru)); }
.pa-span[data-pa-span='4x2'],
.pa-span--4x2 { grid-column: span 4; min-height: calc(2 * var(--pa-span-ru)); }
.pa-span[data-pa-span='4x3'],
.pa-span--4x3 { grid-column: span 4; min-height: calc(3 * var(--pa-span-ru)); }
.pa-span[data-pa-span='4x4'],
.pa-span--4x4 { grid-column: span 4; min-height: calc(4 * var(--pa-span-ru)); }
.pa-span[data-pa-span='4x6'],
.pa-span--4x6 { grid-column: span 4; min-height: calc(6 * var(--pa-span-ru)); }
.pa-span[data-pa-span='6x2'],
.pa-span--6x2 { grid-column: span 6; min-height: calc(2 * var(--pa-span-ru)); }
.pa-span[data-pa-span='6x3'],
.pa-span--6x3 { grid-column: span 6; min-height: calc(3 * var(--pa-span-ru)); }
.pa-span[data-pa-span='6x4'],
.pa-span--6x4 { grid-column: span 6; min-height: calc(4 * var(--pa-span-ru)); }
.pa-span[data-pa-span='6x6'],
.pa-span--6x6 { grid-column: span 6; min-height: calc(6 * var(--pa-span-ru)); }
/* Layout shells (form + aside): column span only — height from content */
.pa-span[data-pa-span='5x12'],
.pa-span--5x12 { grid-column: span 5; min-height: 0; }
.pa-span[data-pa-span='7x12'],
.pa-span--7x12 { grid-column: span 7; min-height: 0; }
.pa-span[data-pa-span='8x4'],
.pa-span--8x4 { grid-column: span 8; min-height: calc(4 * var(--pa-span-ru)); }
.pa-span[data-pa-span='8x8'],
.pa-span--8x8 { grid-column: span 8; min-height: calc(8 * var(--pa-span-ru)); }
.pa-span[data-pa-span='12x2'],
.pa-span--12x2 { grid-column: span 12; min-height: calc(2 * var(--pa-span-ru)); }
.pa-span[data-pa-span='12x3'],
.pa-span--12x3 { grid-column: span 12; min-height: calc(3 * var(--pa-span-ru)); }
.pa-span[data-pa-span='12x4'],
.pa-span--12x4 { grid-column: span 12; min-height: calc(4 * var(--pa-span-ru)); }

/* Choice card consumes size tokens when inside sized scope */
.pa-size--xs .choice-card,
.pa-size--s .choice-card,
.pa-size--m .choice-card,
.pa-size--l .choice-card,
.pa-size--xl .choice-card,
[data-pa-size] .choice-card,
.choice-card[data-pa-size] {
  font-family: var(--pa-type-font);
  max-width: none;
}
.pa-size--xs .choice-card__title,
.pa-size--s .choice-card__title,
.pa-size--m .choice-card__title,
.pa-size--l .choice-card__title,
.pa-size--xl .choice-card__title,
[data-pa-size] .choice-card__title,
.choice-card[data-pa-size] .choice-card__title {
  font-family: var(--pa-type-font);
  font-size: var(--pa-type-title);
}
.pa-size--xs .choice-card__desc,
.pa-size--s .choice-card__desc,
.pa-size--m .choice-card__desc,
.pa-size--l .choice-card__desc,
.pa-size--xl .choice-card__desc,
[data-pa-size] .choice-card__desc,
.choice-card[data-pa-size] .choice-card__desc {
  font-family: var(--pa-type-font);
  font-size: var(--pa-type-desc);
}
.pa-size--xs .choice-card__media,
.pa-size--s .choice-card__media,
.pa-size--m .choice-card__media,
.pa-size--l .choice-card__media,
.pa-size--xl .choice-card__media,
[data-pa-size] .choice-card__media,
.choice-card[data-pa-size] .choice-card__media {
  height: var(--pa-cc-media-h);
}
.pa-size--xs .choice-card__icon,
.pa-size--s .choice-card__icon,
.pa-size--m .choice-card__icon,
.pa-size--l .choice-card__icon,
.pa-size--xl .choice-card__icon,
[data-pa-size] .choice-card__icon,
.choice-card[data-pa-size] .choice-card__icon {
  width: var(--pa-cc-icon);
  height: var(--pa-cc-icon);
  margin-top: calc(var(--pa-cc-icon) / -2);
}
.pa-size--xs .choice-card__body,
.pa-size--s .choice-card__body,
.pa-size--m .choice-card__body,
.pa-size--l .choice-card__body,
.pa-size--xl .choice-card__body,
[data-pa-size] .choice-card__body,
.choice-card[data-pa-size] .choice-card__body {
  padding: var(--pa-cc-pad-y) var(--pa-cc-pad-x) calc(var(--pa-cc-pad-y) + 6px);
}

/* Host fills span cell */
.pa-span-grid > .choice-card-host,
.pa-span-grid > .pa-span {
  width: 100%;
}
.pa-span-grid > .choice-card-host > .choice-card {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ——— Validation chrome ——— */
.pa-field.is-invalid .pa-field__control,
.pa-field.is-invalid .pa-input,
.pa-field.is-invalid .pa-date,
.pa-field.is-invalid .pa-phone {
  border-color: var(--pa-field-error) !important;
  box-shadow: 0 0 0 2px rgba(197, 48, 48, 0.15);
}
.pa-field.is-valid .pa-field__control,
.pa-field.is-valid .pa-input {
  border-color: var(--pa-field-success);
}
.pa-field__error {
  display: none;
  margin: 6px 0 0;
  font-family: var(--pa-type-font);
  font-size: var(--pa-type-hint);
  font-weight: 500;
  color: var(--pa-field-error);
  line-height: 1.35;
}
.pa-field.is-invalid .pa-field__error {
  display: block;
}
.pa-input.is-invalid,
.pa-date__text.is-invalid {
  border-color: var(--pa-field-error) !important;
}

/* ——— Mobile 4-col profile ——— */
@media (max-width: 720px) {
  .pa-span-grid,
  .pa-span-grid.pa-span-grid--mobile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Map desktop spans → mobile 4-col */
  .pa-span[data-pa-span='2x2'],
  .pa-span--2x2,
  .pa-span[data-pa-span='2x3'],
  .pa-span--2x3,
  .pa-span[data-pa-span='3x2'],
  .pa-span--3x2,
  .pa-span[data-pa-span='3x3'],
  .pa-span--3x3,
  .pa-span[data-pa-span='4x2'],
  .pa-span--4x2,
  .pa-span[data-pa-span='4x3'],
  .pa-span--4x3,
  .pa-span[data-pa-span='4x4'],
  .pa-span--4x4,
  .pa-span[data-pa-span='4x6'],
  .pa-span--4x6 {
    grid-column: span 2;
  }
  .pa-span[data-pa-span='6x2'],
  .pa-span--6x2,
  .pa-span[data-pa-span='6x3'],
  .pa-span--6x3,
  .pa-span[data-pa-span='6x4'],
  .pa-span--6x4,
  .pa-span[data-pa-span='6x6'],
  .pa-span--6x6,
  .pa-span[data-pa-span='8x4'],
  .pa-span--8x4,
  .pa-span[data-pa-span='8x8'],
  .pa-span--8x8,
  .pa-span[data-pa-span='12x2'],
  .pa-span--12x2,
  .pa-span[data-pa-span='12x3'],
  .pa-span--12x3,
  .pa-span[data-pa-span='12x4'],
  .pa-span--12x4 {
    grid-column: span 4;
  }
  .pa-span[data-pa-span='6x4'],
  .pa-span--6x4,
  .pa-span[data-pa-span='6x6'],
  .pa-span--6x6 {
    min-height: calc(3 * var(--pa-span-ru));
  }
  .pa-span[data-pa-span='8x8'],
  .pa-span--8x8 {
    min-height: calc(4 * var(--pa-span-ru));
  }
}

/* Gallery helpers */
.pa-span-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px dashed var(--pa-border-medium, #c7d0de);
  border-radius: 12px;
  background: var(--pa-surface-white, #fff);
  font-family: var(--pa-type-font);
  text-align: center;
}
.pa-span-demo-card strong {
  font-size: var(--pa-type-title);
}
.pa-span-demo-card span {
  font-size: var(--pa-type-hint);
  color: var(--pa-text-secondary, #66738a);
}