/* Pedal Peak · home-2026.css — homepage sections. No motion. */

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--max) * .47)) minmax(0, calc(var(--max) * .53)) minmax(var(--gutter), 1fr);
  min-height: clamp(600px, 84svh, 800px);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.hero-copy { grid-column: 2; align-self: center; display: grid; gap: var(--s-5); padding-block: var(--s-9) var(--s-8); padding-inline-end: var(--s-6); position: relative; z-index: 1; }
.hero h1 { font-size: clamp(4.25rem, 1.5rem + 7vw, 8.75rem); margin-top: var(--s-2); }
.hero .lede { margin-top: var(--s-2); }
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-5) var(--s-7); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.proof strong { display: block; font: 700 clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.proof span { display: block; margin-top: var(--s-1); font-size: var(--t-small); color: var(--muted); }
.hero-stage { grid-column: 3 / -1; position: relative; min-height: 420px; display: grid; }
.hero-art { position: relative; --fade-r: 0%; --fade-t: 0%; --fade-b: 0%; --fade-l: 30%; grid-area: 1 / 1; min-height: 100%; }
.hero-art .hero-art-svg, .hero-art svg { width: 100%; height: 100%; }
.hero-card {
  position: absolute; inset: auto auto var(--s-7) var(--s-7); max-width: 300px;
  display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5) var(--s-4);
  background: var(--surface); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-media); box-shadow: var(--shadow-overlay);
}
.hero-card:hover { border-color: var(--ink); color: var(--ink); }
.hero-card strong { font: 700 2rem/1 var(--font-display); text-transform: uppercase; }
.hero-card .hc-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); font-variant-numeric: tabular-nums; font-size: var(--t-small); color: var(--ink-soft); }
.hero-card .hc-go { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.hero-card .hc-go::after { content: " →"; }

@media (max-width: 1099px) {
  .hero { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max)) minmax(var(--gutter), 1fr); min-height: 0; }
  .hero-copy { grid-column: 2; padding-block: var(--s-8) var(--s-6); padding-inline-end: 0; }
  .hero-stage { grid-column: 1 / -1; min-height: clamp(340px, 62vw, 560px); }
  .hero-art { --fade-l: 0%; --fade-t: 18%; --fade-r: 0%; }
  .hero-card { inset: auto auto var(--s-5) var(--gutter); }
}
@media (max-width: 560px) {
  .hero-copy { padding-block: var(--s-6) var(--s-5); gap: var(--s-4); }
  .proof { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .proof span { font-size: var(--t-meta); }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-stage { min-height: 0; grid-template-rows: 280px auto; }
  .hero-art { min-height: 280px; }
  .hero-card { position: static; grid-area: 2 / 1; max-width: none; margin: var(--s-4) var(--gutter) var(--s-6); padding: var(--s-3) var(--s-4); }
  .hero-card strong { font-size: 1.625rem; }
}

/* ---------- brand strip ---------- */
.brands { border-bottom: 1px solid var(--line); padding-block: var(--s-8) 0; }
.brands .eyebrow { margin-bottom: var(--s-5); }
.brand-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.brand-strip li { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.brand-strip li:nth-child(4n+1) { border-left: 1px solid var(--line); }
.brand-cell { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: var(--s-4); color: var(--ink-soft); text-decoration: none; }
.brand-cell:hover { color: var(--accent-text); background: var(--surface); }
.brand-cell .brand-logo { height: 30px; }
@media (max-width: 760px) {
  .brand-strip { grid-template-columns: repeat(2, 1fr); }
  .brand-strip li:nth-child(4n+1) { border-left: 0; }
  .brand-strip li:nth-child(2n+1) { border-left: 1px solid var(--line); }
  .brand-cell { min-height: 80px; padding-inline: var(--s-2); }
  .brand-cell .brand-logo { height: 26px; }
}

/* ---------- start with the ride: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }
.tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); overflow: hidden; text-decoration: none; color: var(--ink); }
.tile:hover { border-color: var(--ink); color: var(--ink); }
.tile .art-media { flex: 1; aspect-ratio: 4 / 3; }
.tile-text { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5) var(--s-5); }
.tile-name { font: 700 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/.95 var(--font-display); text-transform: uppercase; }
.tile-meta { font-size: var(--t-small); color: var(--muted); }
.t-gravel { grid-column: span 6; grid-row: span 2; }
.t-gravel .art-media { aspect-ratio: auto; min-height: 280px; }
.t-gravel .tile-name { font-size: clamp(3rem, 2.2rem + 3vw, 5.25rem); }
.t-gravel .tile-text { padding: var(--s-5) var(--s-6) var(--s-6); }
.t-road, .t-mtb, .t-ebike, .t-kids { grid-column: span 3; }
.t-gear, .t-parts { grid-column: span 6; flex-direction: row; align-items: stretch; }
.t-gear .art-media, .t-parts .art-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; }
.t-gear .tile-text, .t-parts .tile-text { align-content: center; }
@media (max-width: 960px) {
  .t-gravel { grid-column: span 12; grid-row: auto; }
  .t-gravel .art-media { aspect-ratio: 16 / 9; min-height: 0; }
  .t-road, .t-mtb, .t-ebike, .t-kids { grid-column: span 6; }
  .t-gear, .t-parts { grid-column: span 12; }
}
@media (max-width: 520px) {
  .bento { gap: var(--s-3); }
  .tile-text { padding: var(--s-3) var(--s-4) var(--s-4); }
  .t-gear .art-media, .t-parts .art-media { flex-basis: 34%; }
}

/* ---------- on the floor ---------- */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.floor-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: stretch; }
.feature { display: grid; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-media); overflow: hidden; }
.feature-media { display: block; }
.feature-media .art-media { aspect-ratio: 16 / 11; }
.feature-body { display: grid; gap: var(--s-4); padding: var(--s-6); align-content: start; }
.feature-title { font: 700 clamp(2.75rem, 2rem + 2.6vw, 4.5rem)/.92 var(--font-display); text-transform: uppercase; }
.feature-title a { text-decoration: none; }
.feature-title a:hover { color: var(--accent-text); }
.spec-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.spec-chips div { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.spec-chips dt { font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spec-chips dd { font-size: var(--t-small); }
.feature-buy { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.price-lg { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem) !important; }
.cluster { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.row-list { border-top: 1px solid var(--line-strong); display: grid; grid-auto-rows: 1fr; }
.row-item { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.row-art .art-media { aspect-ratio: 4 / 3; }
.row-art .art-media .art { padding: 2%; }
.row-main { display: grid; gap: var(--s-1); }
.row-title { font: 700 clamp(1.75rem, 1.5rem + .8vw, 2.25rem)/1 var(--font-display); text-transform: uppercase; }
.row-title a { text-decoration: none; }
.row-title a:hover { color: var(--accent-text); }
.row-buy { display: grid; gap: var(--s-2); justify-items: end; }
@media (max-width: 1000px) {
  .floor-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 520px) {
  .feature-body { padding: var(--s-5); }
  .row-item { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
  .row-buy { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
}

/* ---------- workshop ---------- */
.workshop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
.workshop-copy { display: grid; gap: var(--s-5); position: sticky; top: 112px; }
.price-list { border-bottom: 1px solid var(--line-strong); }
.price-list li { border-top: 1px solid var(--line-strong); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--s-2) var(--s-6); padding-block: var(--s-5); text-decoration: none; color: var(--ink); min-height: 44px; }
.svc:hover { background: var(--surface); color: var(--ink); }
.svc:hover .svc-name { color: var(--accent-text); }
.svc-main { display: grid; gap: var(--s-1); }
.svc-name { font: 600 clamp(1.75rem, 1.5rem + 1vw, 2.375rem)/1 var(--font-display); }
.svc-inc { font-size: var(--t-small); color: var(--muted); max-width: 52ch; }
.svc-days { font: 500 var(--t-meta)/1.3 var(--font-mono); color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.svc-price { font: 700 clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem)/1 var(--font-display); min-width: 4ch; text-align: right; }
.note { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-media); background: var(--surface); display: grid; gap: var(--s-2); }
.note h3 { font-size: 1.75rem; }
@media (max-width: 960px) {
  .workshop { grid-template-columns: 1fr; gap: var(--s-7); }
  .workshop-copy { position: static; }
}
@media (max-width: 560px) {
  .svc { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-days { grid-column: 1; grid-row: 2; }
  .svc-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ---------- trade-in (dark band) ---------- */
.trade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8) var(--s-9); align-items: start; }
.trade h2 { max-width: 11ch; }
.trade .eyebrow { color: var(--muted); }
.steps { display: grid; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line-strong); counter-increment: s; }
.steps li:last-child { border-bottom: 1px solid var(--line-strong); }
.steps li::before { content: "0" counter(s); font: 500 var(--t-small)/1.6 var(--font-mono); color: var(--accent-text); }
.steps p { color: var(--ink-soft); }
.trade-note { margin-top: var(--s-6); display: grid; gap: var(--s-4); justify-items: start; }
@media (max-width: 960px) { .trade { grid-template-columns: 1fr; } }

/* ---------- rides ---------- */
.rides-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.ride-feature { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); justify-items: start; }
.ride-feature h3 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
.ride-date { display: flex; align-items: flex-end; gap: var(--s-4); }
.ride-day { font: 700 clamp(5rem, 3.5rem + 5vw, 8rem)/.8 var(--font-display); color: var(--accent-text); }
.ride-mon { font: 500 var(--t-small)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding-bottom: var(--s-2); }
.ride-stats { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; border-top: 1px solid var(--line); }
.ride-stats div { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.ride-stats dt { font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ride-stats dd { font-size: var(--t-body); font-weight: 500; }
.ride-list { border-top: 1px solid var(--line-strong); }
.ride-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 76px; gap: var(--s-4); align-items: center; padding-block: var(--s-5); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 44px; }
.ride-row:hover { background: var(--surface); color: var(--ink); }
.ride-row:hover .ride-row-title { color: var(--accent-text); }
.ride-row-date { font-size: var(--t-small); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
.ride-row-date strong { display: block; font: 700 2.5rem/.9 var(--font-display); color: var(--ink); letter-spacing: 0; }
.ride-row-main { display: grid; gap: var(--s-1); }
.ride-row-title { font: 600 clamp(1.5rem, 1.35rem + .6vw, 1.875rem)/1.05 var(--font-display); }
.ride-row-sub { font-size: var(--t-small); color: var(--muted); }
.ride-row-km { text-align: right; font: 600 1.25rem/1 var(--font-display); }
@media (max-width: 1000px) { .rides-grid { grid-template-columns: 1fr; gap: var(--s-7); } }
@media (max-width: 560px) {
  .ride-feature { padding: var(--s-5); }
  .ride-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-3); }
  .ride-row .pace { display: none; }
}

/* wide photographs */
.photo-wide { position: relative; margin: 0 0 var(--s-6); }
.photo-wide > .photo-in { position: relative; aspect-ratio: 21 / 9; background: var(--surface-2); border-radius: var(--r-media); overflow: hidden; }
.workshop > .photo-wide { grid-column: 1 / -1; margin-bottom: 0; }
.photo-wide figcaption { position: absolute; inset: auto var(--s-4) var(--s-3) auto; font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .04em; color: #fff; background: rgba(20, 23, 26, .72); padding: 4px 8px; border-radius: var(--r-control); max-inline-size: calc(100% - var(--s-8)); }
@media (max-width: 640px) {
  .photo-wide > .photo-in { aspect-ratio: 16 / 10; }
  .photo-wide figcaption { position: static; background: none; color: var(--muted); padding: var(--s-2) 0 0; max-inline-size: none; }
}