/* /perl-vs-porcelain-veneers/ SYSTEM v3 (perl-vs-porcelain.css?v=3)
   Page-specific additions only. site.css owns all shared components. */

/* strength + longevity: asymmetric hairline pair, never two equal cards */
.vsp-pair {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  border-top: 1px solid var(--line);
}
.vsp-pair__col {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem) 0;
}
.vsp-pair__col + .vsp-pair__col {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 3rem);
  padding-right: 0;
  background: oklch(95.8% 0.018 87 / 0.55);
}
.vsp-pair__col h3 { margin-bottom: 0.9rem; }
.vsp-pair__col h3 + p { margin-top: 0; }
.vsp-pair__col p { color: var(--ink-soft); max-width: 52ch; }
.vsp-pair__col p + p { margin-top: 0.9rem; }

/* how they look: macro photo demoted to a small offset inset under the shade guide */
.vsp-inset {
  max-width: 56%;
  margin-top: 1.75rem;
  margin-left: auto;
}

/* who should choose what: offset columns, PERL side in the lux frame */
.vsp-choose {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.vsp-choose__perl { background: var(--panel); }
.vsp-choose__porc { padding-top: clamp(0.5rem, 2vw, 2rem); }

@media (max-width: 860px) {
  .vsp-pair { grid-template-columns: 1fr; }
  .vsp-pair__col { padding-inline: 0; }
  .vsp-pair__col + .vsp-pair__col {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .vsp-choose { grid-template-columns: 1fr; }
  .vsp-choose__porc { padding-top: 0; }
  .vsp-inset { max-width: 68%; }
}

/* theme-dark: the highlighted PERL column keeps its cream tint, so ink goes dark */
body.theme-dark .sect:not(.light-break) .vsp-pair__col + .vsp-pair__col h3 { color: oklch(28% 0.012 85); }
body.theme-dark .sect:not(.light-break) .vsp-pair__col + .vsp-pair__col p { color: oklch(40% 0.012 85); }
body.theme-dark .sect:not(.light-break) .vsp-pair__col + .vsp-pair__col { background: oklch(95.8% 0.018 87); }