/* Location guides: destination-specific delivery pages */

.location-page .site-header { position: sticky; }
.location-page main { overflow: clip; }

.location-hero {
  background: var(--surface);
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3.5rem, 8vw, 7rem);
}
.location-breadcrumb {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.location-breadcrumb a { color: inherit; }
.location-breadcrumb span { color: var(--accent); }
.location-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.8fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}
.location-kicker {
  color: var(--primary-bright);
  font-weight: 700;
  margin-bottom: 0.85rem;
}
.location-hero h1 { max-width: 14ch; }
.location-lede { color: var(--muted); font-size: clamp(1.1rem, 1.5vw, 1.24rem); }
.location-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; }
.location-fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}
.location-fact-list li { display: inline-flex; align-items: center; gap: 0.45rem; }
.location-fact-list li::before { content: ""; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--accent); }
.location-hero-photo { margin: 0; position: relative; }
.location-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: min(20px, 3vw); }
.location-photo-note {
  max-width: 22ch;
  margin: -2.4rem 1.1rem 0 auto;
  position: relative;
  padding: 0.9rem 1.05rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.location-section { padding-block: clamp(3.75rem, 8vw, 7rem); }
.location-section--tint { background: var(--surface); }
.location-heading { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.location-heading p { color: var(--muted); font-size: 1.08rem; }
.location-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.location-split h2 { max-width: 13ch; }
.location-copy { color: var(--muted); }
.location-copy p:last-child { margin-bottom: 0; }
.location-checklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.location-checklist li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.location-checklist strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }
.location-checklist span { color: var(--muted); }
.location-checklist b { color: var(--accent); font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }

.location-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.8rem); }
.location-product { min-width: 0; }
.location-product a { display: block; color: inherit; text-decoration: none; }
.location-product img { width: 100%; aspect-ratio: 0.82; object-fit: cover; border-radius: 10px; transition: transform 0.45s var(--ease-out); }
.location-product a:hover img { transform: scale(1.025); }
.location-product h3 { margin: 0.85rem 0 0.18rem; }
.location-product p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.location-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.95rem;
  padding: 0.68rem 1rem;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.25s var(--ease-out);
}
.location-product a:hover .location-product-cta,
.location-product a:focus-visible .location-product-cta { background: var(--primary-bright); }

.location-faq { max-width: 820px; }
.location-faq .faq-item { border-top: 1px solid var(--line); }
.location-faq .faq-item:last-child { border-bottom: 1px solid var(--line); }
.location-closer { background: oklch(0.22 0.035 155); color: oklch(0.96 0.008 150); text-align: center; }
.location-closer .wrap { display: grid; justify-items: center; }
.location-closer h2 { max-width: 17ch; }
.location-closer p { color: oklch(0.82 0.02 150); font-size: 1.08rem; }
.location-closer .btn-ghost { color: oklch(0.96 0.008 150); border-color: oklch(0.45 0.04 155); }
.location-closer .btn-ghost:hover { color: white; background: oklch(0.3 0.045 155); }
.location-closer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 1rem; }
.location-page .site-footer { padding-top: 2.25rem; }

@media (max-width: 760px) {
  .location-hero-grid,
  .location-split { grid-template-columns: 1fr; }
  .location-hero-photo { max-width: 430px; width: 100%; margin-inline: auto; }
  .location-hero h1 { max-width: 16ch; }
  .location-product-grid { grid-template-columns: 1fr; gap: 2rem; }
  .location-product a { display: block; }
  .location-product h3 { margin-top: 0.85rem; }

  .location-product img { aspect-ratio: 0.85; }
  .location-product-cta { width: 100%; margin-top: 1rem; }
}

@media (max-width: 440px) {
  .location-actions .btn { width: 100%; justify-content: center; }
  .location-fact-list { display: grid; }

}

@media (prefers-reduced-motion: reduce) {
  .location-product img { transition: none; }
}