/* UKAV Humans · trang /humans. Màu và chữ lấy từ tokens.css */

[hidden] { display: none !important; }
.nav a[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 4px; }

/* đầu trang */
.h-head { background: var(--u-mist); padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 5vw, 56px); }
.h-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); max-width: 820px; }

/* danh sách */
.h-list { padding-top: clamp(36px, 5vw, 56px); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; margin-bottom: 32px; }
.filters label { display: flex; flex-direction: column; gap: 6px; font: 700 .74rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.filters select { font: 500 .95rem/1.2 var(--font-text); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 11px 36px 11px 14px; min-width: 240px; max-width: 100%; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: right 18px top 50%, right 13px top 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.filters .count { margin-left: auto; font-size: .9rem; color: var(--ink-muted); }

.h-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.h-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.h-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(11,31,51,.12); }
.h-card figure img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.h-card .txt { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.h-card .no { font: 700 .72rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-txt); }
.h-card p { font: 600 1.05rem/1.45 var(--font-text); color: var(--brand); margin: 12px 0 16px; }
.h-card h3 { font-size: 1.3rem; margin-top: auto; }
.h-card .meta { font-size: .9rem; color: var(--u-ink-80); margin-top: 4px; }
.h-card .tag { align-self: flex-start; }

.empty { text-align: center; padding: 56px 24px; border: 2px dashed var(--rule); border-radius: 14px; }
.empty .big { font: 700 clamp(1.5rem, 3.5vw, 2rem)/1.3 var(--font-display); color: var(--brand); }
.empty p + p { margin-top: 10px; color: var(--u-ink-80); }
.none { padding: 40px 0; color: var(--ink-muted); }

/* bài chi tiết */
.h-story { padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.back { display: inline-block; font: 700 .9rem/1 var(--font-text); text-decoration: none; margin-bottom: 32px; }
.s-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.s-photos { position: sticky; top: 100px; display: grid; gap: 18px; }
.s-photos figure { background: #fff; padding: 12px 12px 40px; box-shadow: 0 18px 40px rgba(11,31,51,.16); }
.s-photos figure img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.s-photos figure:nth-child(1) { transform: rotate(-2deg); }
.s-photos.n2, .s-photos.n3 { grid-template-columns: 1fr 1fr; }
.s-photos.n2 figure:nth-child(1), .s-photos.n3 figure:nth-child(1) { grid-column: 1 / -1; }
.s-photos figure:nth-child(2) { transform: rotate(3deg); }
.s-photos figure:nth-child(3) { transform: rotate(-3deg); }
.s-photos figure:nth-child(n+2) { padding: 8px 8px 26px; }
.s-photos figure:nth-child(n+2) img { aspect-ratio: 1; }
.s-body blockquote { font: 600 clamp(1.45rem, 3vw, 2rem)/1.35 var(--font-text); color: var(--brand); }
.s-body blockquote::before { content: '“'; display: block; font: 700 4.4rem/0.6 var(--font-display); color: var(--accent); margin-bottom: 8px; }
.s-body h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-top: 32px; }
.s-body .meta { margin-top: 6px; color: var(--u-ink-80); font-weight: 600; }
.s-body .text { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.s-body .text p { margin-top: 16px; color: var(--u-ink-80); }
.s-body .text p:first-child { margin-top: 0; }
.s-body .foot { margin-top: 28px; font-size: .9rem; color: var(--ink-muted); }
.next { display: block; margin-top: 32px; padding: 20px 22px; background: var(--u-mist); border-radius: 10px; text-decoration: none; font-weight: 600; }

/* lời mời */
.h-cta { background: var(--brand); color: #fff; text-align: center; }
.h-cta h2 { color: #fff; }
.h-cta .lead { color: #DCE6EE; margin: 16px auto 30px; }

@media (max-width: 960px) {
  .h-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .s-grid { grid-template-columns: 1fr; }
  .s-photos { position: static; max-width: 460px; gap: 12px; }
  .s-photos.n2, .s-photos.n3 { grid-template-columns: 2fr 1fr; align-items: start; }
  .s-photos.n2 figure:nth-child(1), .s-photos.n3 figure:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .s-photos figure { padding: 8px 8px 28px; }
  .s-photos figure:nth-child(n+2) { padding: 5px 5px 16px; }
  .nav a[aria-current="page"] { box-shadow: none; padding-bottom: 14px; }
}
@media (max-width: 520px) {
  .h-grid { grid-template-columns: 1fr; }
  .filters label, .filters select { width: 100%; }
  .filters .count { margin-left: 0; }
}