/*
 * nashville.css: the guest landing page at /nashville, where Instagram and
 * TikTok traffic lands. Loaded after site.css and pages.css and only uses
 * their tokens (black, #1DB954, Sofia Sans for the headlines).
 *
 * Phone first: the store buttons sit above the fold at 390px, every link is
 * at least 44px tall, nothing animates, and every photo below the hero is
 * lazy so the first paint is the hero image and the copy.
 */

.nv-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--nav-h) + 28px) 0 clamp(40px, 6vw, 88px); min-height: min(100svh, 860px); display: flex; align-items: center; }
.nv-hero-bg { position: absolute; inset: 0; z-index: -1; }
.nv-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0.75; }
.nv-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 8, 7, 0.35) 0%, rgba(6, 8, 7, 0.55) 45%, var(--bg) 100%), linear-gradient(90deg, rgba(6, 8, 7, 0.85) 0%, rgba(6, 8, 7, 0.2) 75%); }
.nv-hero-copy { max-width: 720px; display: grid; gap: 18px; }
.nv-h1 { font-size: clamp(44px, 8vw, 92px); margin: 0; text-wrap: balance; }
.nv-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #c9d4cc; margin: 0; max-width: 44ch; }

.nv-inline { color: var(--green); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.nv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nv-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, 0.025); display: flex; flex-direction: column; }
.nv-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; background: #000; }
.nv-card-body { padding: 22px 22px 26px; }
.nv-card h3 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.nv-card p { color: var(--muted); font-size: 15.5px; }

.nv-how { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.nv-how-shot img { display: block; width: 100%; height: auto; max-width: 340px; aspect-ratio: 880 / 1168; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); margin-left: auto; }

.nv-where { position: relative; isolation: isolate; overflow: hidden; }
.nv-where-bg { position: absolute; inset: 0; z-index: -1; }
.nv-where-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.nv-where-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(6, 8, 7, 0.6) 40%, var(--bg) 100%); }
.nv-venues { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 20px 0 8px; }
.nv-venues li { border: 1px solid var(--line-strong); border-left: 3px solid var(--green); border-radius: 14px; padding: 14px 16px; background: rgba(6, 8, 7, 0.75); }
.nv-venues strong { display: block; font-size: 17px; }
.nv-venues span { display: block; color: var(--muted); font-size: 14.5px; }
/* Empty list: show the launching line. One live bar: hide it. */
.nv-venues:not(:has(li)) { display: none; }
.nv-where:has(.nv-venues li) .nv-launching { display: none; }
.nv-launching { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; max-width: 22ch; margin: 18px 0 14px; }
.nv-launching-sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: clamp(16px, 1.6vw, 19px); letter-spacing: 0; line-height: 1.5; color: var(--ink); margin-top: 10px; max-width: 48ch; }
.nv-where-note { color: var(--muted); max-width: 60ch; }

@media (max-width: 860px) {
  .nv-cards { grid-template-columns: 1fr; }
  .nv-card { flex-direction: row; }
  .nv-card img { width: 34%; height: auto; aspect-ratio: auto; min-height: 100%; flex: none; }
  .nv-card-body { padding: 16px 16px 18px; }
  .nv-card h3 { font-size: 18px; }
  .nv-card p { font-size: 14.5px; }
  .nv-how { grid-template-columns: 1fr; }
  .nv-how-shot { display: none; }
}
@media (max-width: 640px) {
  .nv-hero { min-height: 0; padding-top: calc(var(--nav-h) + 20px); }
  .nv-hero-copy { gap: 14px; }
  .nv-h1 { font-size: clamp(40px, 11vw, 56px); }
}