/* Delvado — homepage styles. Loaded after site.css by index.html and beta/index.html. */

.beta-bar {
  background: #0b0c0c;
  color: #ffffff;
  font-size: 0.875rem;
  padding: 8px 15px;
  text-align: center;
}
.beta-bar strong { color: #ff9d97; }

/* ---- Three routes in ---- */
.routes { max-width: 1200px; margin: 0 auto; padding: 64px 15px 0; }
.routes h2 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 8px; font-weight: 700; }
.routes .routes-lede { font-size: 1.0625rem; line-height: 1.6; color: #505a5f; margin: 0 0 36px; max-width: 620px; }

.routes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 32px; }

.route { display: block; text-decoration: none; color: #0b0c0c; }
.route-media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f3f2f1; }
.route-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.route:hover .route-media img,
.route:focus-visible .route-media img { transform: scale(1.04); }

.route-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.route-head h3 {
  font-size: 1.0625rem; font-weight: 700; margin: 0;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.route-arrow { flex: 0 0 auto; color: #C90900; transition: transform 0.25s ease; }
.route:hover .route-arrow,
.route:focus-visible .route-arrow { transform: translateX(6px); }
.route p { font-size: 1rem; line-height: 1.5; color: #505a5f; font-style: italic; margin: 10px 0 0; text-wrap: pretty; }

.routes-end { max-width: 1200px; margin: 56px auto 0; padding: 0 15px; }
.routes-end div { border-top: 2px solid #b1b4b6; }

/* ---- Full-bleed band with two-column copy ---- */
.band { margin-top: 64px; }
.band-media { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #0b0c0c; }
.band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.band-body {
  max-width: 1200px; margin: 0 auto; padding: 40px 15px 72px;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px;
  align-items: start;
}
.band-body h2 { font-size: 2.25rem; line-height: 1.1; margin: 0 0 24px; font-weight: 700; }
.band-body h2 span { display: block; font-weight: 400; margin-top: 8px; }
.band-cols { columns: 2; column-gap: 40px; }
.band-cols p { font-size: 1rem; line-height: 1.6; margin: 0 0 16px; }
.band-cols p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .band-body { grid-template-columns: 1fr; gap: 24px; padding-bottom: 56px; }
  .band-body h2 { font-size: 1.875rem; }
  .band-cols { columns: 1; }
}

/* Red variant of the band, for the supply section */
.band--red { background: var(--red-dark); }
.band--red .band-media { background: var(--red-dark); }
.band--red .band-body h2,
.band--red .band-cols p,
.band--red .band-cols h3 { color: #ffffff; }

.band-cols h3 {
  font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px;
  break-inside: avoid; break-after: avoid;
}

/* ---- Supply: image + linked points, routes style ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.points { display: grid; gap: 32px; }
.point { border-top: 2px solid #b1b4b6; padding-top: 4px; }
.point .route-head h3 { text-transform: none; letter-spacing: 0; font-size: 1.1875rem; }
.point p { font-style: normal; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---- Gallery in routes style ---- */
.gallery { background: none; border-top: 0; }
.gallery .wrap { max-width: 1200px; padding: 64px 15px 0; }
.gallery h2 { text-align: left; margin: 0 0 8px; }
.gallery > .wrap > p { text-align: left; margin: 0 0 36px; max-width: 620px; color: #505a5f; }
.gallery-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); justify-content: stretch; gap: 32px; }

/* ---- Quality: red closing statement ---- */
.quality { background: var(--red-dark); background-image: none; border: 0; margin-top: 64px; }
.quality .wrap { max-width: 1200px; text-align: left; padding: 72px 15px; }
.quality h2 { font-size: 2.25rem; line-height: 1.1; margin: 0 0 20px; }
.quality p { max-width: 720px; font-size: 1.0625rem; line-height: 1.6; }

/* Supply section on a full-width wash */
.routes--wash { margin-top: 0; padding-bottom: 64px; background: var(--wash); box-shadow: 0 0 0 100vmax var(--wash); clip-path: inset(0 -100vmax); }
.routes--wash .routes-end { display: none; }

/* ---- Beta 2 only ---- */
.routes--landscape .route-media { aspect-ratio: 3 / 2; }
.split-copy { display: grid; gap: 16px; }
.split-copy p { font-size: 1rem; line-height: 1.6; margin: 0; }
.split--small { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.split--small .route-media { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .split--small { grid-template-columns: 1fr; } }
.routes--landscape { padding-bottom: 64px; }

/* ---- Homepage photos: soft corners ---- */
.routes .route-media { border-radius: 16px; overflow: hidden; }
.routes .route-media img { transition: transform 0.3s ease; }
.routes a.route:hover .route-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .routes a.route:hover .route-media img { transform: none; } }