/* ==========================================================================
   Coffee Origins page. Loaded after styles.css (shared tokens and components).
   ========================================================================== */

/* Hero jump links ------------------------------------------------------- */
.jump-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jump-links a {
  padding: 10px 20px;
  border: 1px solid var(--text-inverse-muted);
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: pre;
  transition: background-color 0.2s, color 0.2s;
}
.jump-links a:hover { background: var(--text-inverse); color: var(--text-primary); }

/* Where it grows (map) --------------------------------------------------- */
.map-section { background: var(--surface-subtle); }
.map-section__inner {
  display: flex;
  align-items: center;
  gap: 96px;
  max-width: var(--content);
  margin-inline: auto;
}
.map-section__copy { display: flex; flex-direction: column; gap: 24px; width: 480px; flex: none; }
.map-section__copy > p:nth-of-type(2) { color: var(--text-secondary); }
.altitude-list { display: flex; flex-direction: column; gap: 12px; }
.altitude-list li { display: flex; align-items: center; gap: 12px; }
.altitude-list img { width: 10px; height: 10px; flex: none; }
.altitude-list .body-s { color: var(--text-secondary); }

.map {
  position: relative;
  flex: 0 1 640px;
  width: 640px;
  max-width: 100%;
  aspect-ratio: 640 / 520;
  background: var(--surface-jute);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.map__outline { position: absolute; left: 0; top: 1.92%; width: 100%; height: 96.15%; }
.map { container-type: inline-size; }
.map__pin { position: absolute; width: clamp(10px, 2.5cqw, 16px); height: clamp(10px, 2.5cqw, 16px); }
.map__label {
  position: absolute;
  font-size: clamp(10px, 2.19cqw, 14px);
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.map__label--city { font-size: clamp(9px, 1.88cqw, 12px); line-height: 18px; font-weight: 400; color: var(--text-secondary); }

/* In Figma the 480 + 96 + 640 row is 16px wider than the 1200 content box */
@media (min-width: 1200px) {
  .map-section__inner { max-width: 1216px; margin-inline: -8px; }
}

/* Origin sections -------------------------------------------------------- */
.origin { scroll-margin-top: 72px; }
.origin--subtle { background: var(--surface-subtle); }
.origin__inner {
  display: flex;
  align-items: center;
  gap: 96px;
  max-width: var(--content);
  margin-inline: auto;
}
.origin__media {
  flex: none;
  width: 540px;
  height: 680px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.origin__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 564px; flex: none; }
.origin--flip .origin__inner { flex-direction: row-reverse; }
.origin__name {
  font-size: 72px;
  line-height: 80px;
  font-weight: 500;
  letter-spacing: -1.8px;
}
.origin__tagline {
  max-width: 560px;
  font-size: 28px;
  line-height: 38px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.28px;
  color: var(--text-secondary);
}
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; width: 100%; margin: 0; }
.spec { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--border-default); }
.spec dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.spec dd { margin: 0; }
/* Body paragraphs only: the eyebrow keeps its accent colour, "Best for" stays primary */
.origin__copy > p:not(.eyebrow):not(.best-for) { color: var(--text-secondary); }
.best-for { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.origin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.origin__actions .link-arrow { padding-block: 16px; }

/* Compare ---------------------------------------------------------------- */
.compare { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.compare .section-head { gap: 16px; }
.compare__wrap { width: 100%; max-width: var(--content); overflow-x: auto; }
.compare__table { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; text-align: left; }
.compare__table thead th,
.compare__table thead td {
  padding: 18px 0;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.26px;
}
.compare__table tbody th,
.compare__table tbody td { padding: 18px 0; border-bottom: 1px solid var(--border-default); }
.compare__table tbody th {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.compare__table tr > :first-child { width: 256px; padding-left: 24px; }
.compare__table tr > :last-child { padding-right: 24px; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1199px) {
  .map-section__inner,
  .origin__inner { gap: 48px; }
  .map-section__copy { width: 400px; }
  .origin__media { width: 440px; height: 600px; }
  .origin__copy { width: auto; flex: 1; min-width: 0; }
}

@media (max-width: 1023px) {
  .map__label--left { left: 34.38% !important; transform: translateX(calc(-100% - 4px)); }
  .map-section__inner,
  .origin__inner,
  .origin--flip .origin__inner { flex-direction: column; align-items: stretch; }
  .map-section__copy { width: auto; }
  .map { flex: none; width: 100%; max-width: 640px; }
  .origin__media,
  .origin--flip .origin__media { width: 100%; height: 480px; }
  .origin--flip .origin__media { order: -1; }
  .origin__copy { width: 100%; }
  .origin__name { font-size: 56px; line-height: 64px; letter-spacing: -1.4px; }
}

@media (max-width: 639px) {
  .origin__media { height: 360px; }
  .origin__name { font-size: 44px; line-height: 52px; }
  .origin__tagline { font-size: 22px; line-height: 30px; }
  .specs { grid-template-columns: 1fr; }
  .origin__actions { flex-direction: column; align-items: flex-start; gap: 0; }
  .compare__table thead th { font-size: 20px; }
}