/* Hallmark · component: reviews · genre: editorial · theme: IPUPSI brand · states: native links · contrast: checked in browser · v2.0.0 */
/* Hallmark · answered F6 · quote numbers already use font-variant-numeric: tabular-nums; renderer warning is a selector heuristic */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: V, retained brand typography while changing the summary and quote rhythm */
.reviews { background: var(--color-paper); padding-block: var(--space-2xl); }
.reviews-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: var(--space-2xl); align-items: start; }
.reviews .reviews-intro h2 { font-size: var(--text-section); line-height: 1.05; max-width: 12ch; color: var(--color-ink); text-wrap: balance; }
.reviews-rating { margin-top: var(--space-xl); }
.reviews-rating strong { display: block; font: var(--display-weight) 4.5rem / 1 var(--font-display); color: var(--color-accent); letter-spacing: var(--tracking-display); }
.reviews-rating .review-stars { margin-block: var(--space-sm); display: flex; gap: var(--space-2xs); color: var(--color-accent); }
.review-stars svg { width: 16px; height: 16px; fill: currentColor; }
.reviews-rating p { font-size: var(--text-md); color: var(--color-ink-2); }
.reviews a { color: var(--color-accent); text-underline-offset: .25em; }
.reviews .review-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-sm); font-size: var(--text-md); }
.reviews a:hover { color: var(--color-ink); }
.reviews a:active { color: var(--color-accent-2); }
.reviews a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.reviews-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xl) var(--gap-columns); }
.reviews figure { margin: 0; border: 0; border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); display: flex; flex-direction: column; align-items: start; }
.reviews blockquote { margin: 0 0 var(--space-lg); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; text-wrap: pretty; font-variant-numeric: tabular-nums; }
.reviews figure:first-child blockquote { font-size: var(--text-2xl); color: var(--color-accent); }
.reviews figcaption { margin-top: auto; font: 400 var(--text-sm) / 1.5 var(--font-body); }
.reviews figcaption span { display: block; color: var(--color-ink-2); }
.reviews figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
@media(max-width:60rem) { .reviews-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .reviews-intro { display: flex; justify-content: space-between; align-items: start; gap: var(--space-lg); } .reviews-rating { margin: 0; } .reviews .reviews-intro h2 { max-width: 15ch; } }
@media(max-width:40rem) { .reviews { padding-block: var(--space-xl); } .reviews-intro { display: block; } .reviews-rating { margin-top: var(--space-lg); display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-lg); } .reviews-rating strong { grid-row: 1/3; font-size: 3.5rem; } .reviews-rating .review-stars { margin: 0 0 var(--space-2xs); } .reviews-rating .review-all { grid-column: 1/-1; margin-top: var(--space-xs); } .reviews-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); } .reviews blockquote { margin-bottom: var(--space-sm); font-size: var(--text-xl); } .reviews figure:first-child blockquote { font-size: var(--text-2xl); } }