/* Country pages (colombia, peru, brazil, argentina). Loaded after style.css; tokens come from there.
   Each page sets one theme class on <body>: --c1 is the country's primary colour (30%), --c2 its accent (10%),
   neutrals (Shell, Cream, Ink) carry the other 60%. */

.c-co { --c1: var(--violet);     --c1-on: var(--cream); --c2: var(--apricot); --c1-text: var(--violet); }
.c-pe { --c1: var(--terracotta); --c1-on: var(--cream); --c2: var(--sky);     --c1-text: var(--terracotta-text); }
.c-br { --c1: var(--green);      --c1-on: var(--cream); --c2: var(--apricot); --c1-text: var(--green-text); }
.c-ar { --c1: var(--cobalt);     --c1-on: var(--cream); --c2: var(--seafoam); --c1-text: var(--cobalt); }

.c-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); box-sizing: border-box; }
.c-h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; }

.c-btn-accent { background: var(--c2); color: var(--ink); }
@media (hover: hover) { .c-btn-accent:hover { background: color-mix(in srgb, var(--c2) 86%, var(--ink)); color: var(--ink); } }

/* ---------- Hero ---------- */
.c-hero { position: relative; isolation: isolate; overflow: clip; display: flex; min-height: 100svh; background: var(--c1); color: var(--c1-on); }
.c-hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg) var(--bgpos, center) / cover no-repeat; opacity: 0.26; }
.c-hero-inner {
  width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
  padding: 120px clamp(16px, 4vw, 56px) 72px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 5vw, 80px); align-items: center;
}
.c-kicker { margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; }
.c-hero h1 { margin: 0 0 22px; font-family: var(--serif); font-weight: 500; font-size: clamp(44px, min(7.4vw, 12vh), 112px); line-height: 1; text-wrap: balance; }
.c-hero h1 em { color: var(--c2); }
.c-lede { margin: 0 0 32px; max-width: 34ch; font-size: clamp(18px, 2.3vh, 22px); line-height: 1.45; }
.c-hero-photo {
  margin: 0; justify-self: center; width: min(100%, 380px); padding: 10px; box-sizing: border-box;
  background: var(--cream); border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  rotate: 3deg; aspect-ratio: 4 / 5; max-height: 70vh;
}
.c-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(var(--r-card) - 6px); }

/* ---------- Why ---------- */
.c-why, .c-pillars, .c-about { padding: clamp(72px, 12vh, 120px) 0; }
.c-why { background: var(--shell); }
.c-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.c-why h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 54px); line-height: 1.08; text-wrap: balance; }
.c-why-body { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.c-why-body p { margin: 0; font-size: clamp(18px, 2.3vh, 21px); line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }

/* ---------- Pillars ---------- */
.c-pillars { background: var(--cream); }
.c-pillars .c-h2 { margin-bottom: clamp(28px, 5vh, 48px); }
.c-pillar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vh, 44px) clamp(28px, 6vw, 88px); }
.c-pillar-list li { border-top: 1.5px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.c-pillar-list h3 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; color: var(--c1-text); padding-bottom: 4px; }
.c-pillar-list p { margin: 0; max-width: 40ch; color: var(--ink-soft); font-size: 17px; }

/* ---------- Hubs (on Ink, every card in its own tint) ---------- */
.c-hubs { background: var(--ink); color: var(--cream); padding: clamp(72px, 12vh, 120px) 0; }
.c-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 5vh, 48px); }
.c-head p { margin: 0; max-width: 60ch; color: #CFC7BE; font-size: 18px; }
.c-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.c-hub {
  border: 1px solid color-mix(in srgb, var(--t) 55%, transparent); border-radius: var(--r-card); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.c-hub h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--t); }
.c-hub p { margin: 0; color: #CFC7BE; font-size: 16px; }
@media (hover: hover) { .c-hub:hover { border-color: var(--t); background: color-mix(in srgb, var(--t) 8%, transparent); } }

/* ---------- About ---------- */
.c-about { background: var(--shell); }
.c-about-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.c-about-photo { margin: 0; padding: 10px; box-sizing: border-box; background: var(--cream); border-radius: var(--r-card); box-shadow: var(--shadow-lift); rotate: -2deg; aspect-ratio: 4 / 5; max-height: 72vh; width: min(100%, 420px); }
.c-about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(var(--r-card) - 6px); }
.c-about-body { display: flex; flex-direction: column; gap: clamp(20px, 4vh, 36px); }
.c-facts { display: flex; flex-direction: column; }
.c-facts > div { border-top: 1.5px solid var(--ink); padding: 18px 0 22px; display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 4px 16px; }
.c-facts h3 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--c1-text); }
.c-facts p { margin: 0; color: var(--ink-soft); font-size: 17px; max-width: 46ch; }

/* ---------- Closer ---------- */
.c-closer { background: var(--c1); color: var(--c1-on); padding: clamp(72px, 14vh, 140px) 0; }
.c-closer-inner { width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 0 clamp(16px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.c-closer h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6.4vw, 88px); line-height: 1.02; max-width: 16ch; text-wrap: balance; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 900px) {
  .c-hero { min-height: 0; }
  .c-hero-inner { grid-template-columns: 1fr; padding-top: 112px; padding-bottom: 56px; }
  .c-hero-photo { width: min(280px, 72vw); justify-self: start; rotate: 2deg; max-height: none; }
  .c-why-grid, .c-about-grid { grid-template-columns: 1fr; }
  .c-pillar-list, .c-hub-grid { grid-template-columns: 1fr; }
  .c-about-photo { width: min(300px, 76vw); max-height: none; }
  .c-facts > div { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .c-hero .btn-xl, .c-closer .btn-xl { white-space: normal; text-align: center; } }

@media (prefers-reduced-motion: reduce) { .c-hero-photo, .c-about-photo { rotate: 0deg; } }

/* Hubs: filled in the same way as the Get involved cards on the home page */
.c-hub { background: var(--t); border-color: var(--t); }
.c-hub h3, .c-hub p { color: var(--ink); }
@media (hover: hover) { .c-hub { transition: translate var(--dur-ui) var(--ease-out); } .c-hub:hover { background: var(--t); translate: 0 -4px; } }

/* ---------- Colombia v2: headline, dates, subline, items under "Why", speakers band ---------- */
.c-hero h1 { font-size: clamp(40px, min(6.6vw, 10.5vh), 96px); margin-bottom: 16px; }
.c-headline { margin: 0 0 8px; max-width: 22ch; font-family: var(--serif); font-weight: 500; font-size: clamp(24px, min(2.8vw, 4.4vh), 38px); line-height: 1.15; text-wrap: balance; }
.c-dates { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(19px, 2.8vh, 24px); color: var(--c2); }
.c-hero .c-lede { max-width: 44ch; font-size: clamp(16px, 2.2vh, 19px); margin-bottom: 26px; }

.c-why2 .c-why-grid { margin-bottom: clamp(36px, 7vh, 72px); }
.c-why-items { margin: 0; }

.c-sp { background: var(--cream); padding: clamp(48px, 9vh, 88px) 0; }
.c-sp-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.c-sp h2 { margin: 0; max-width: 24ch; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.12; text-wrap: balance; }

/* ---------- Round of edits: purple three-line heading, small pillars, thin closing strip ---------- */
.c-why2 h2 { color: var(--c1-text); font-size: clamp(40px, 5.2vw, 72px); line-height: 1; }
.c-why-items h3 { color: var(--ink); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; padding-bottom: 0; }
.c-why-items { gap: clamp(22px, 4vh, 36px) clamp(28px, 6vw, 88px); }
.c-why-items p { font-size: 16px; }

.c-closer { padding: clamp(24px, 4.5vh, 40px) 0; }
.c-closer-inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; }
.c-closer h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.1; max-width: none; }
@media (max-width: 640px) { .c-closer-inner { flex-direction: column; align-items: flex-start; } }

/* Dates: the key fact, so larger and tucked closer under the country */
.c-hero h1 { margin-bottom: 4px; }
.c-dates { margin: 0 0 18px; font-size: 30px; line-height: 1.1; }
@media (max-width: 640px) { .c-dates { font-size: 26px; } }

/* Hero type scale: kicker and subline share one size; country and dates share one line at 36px under the city */
.c-hero h1 { margin-bottom: 18px; }
.c-place { display: block; margin-top: 6px; font-size: 38px; line-height: 1.15; font-weight: 500; color: var(--c2); }
.c-place em { font-style: italic; }
.c-sep { color: var(--c1-on); opacity: 0.7; }
.c-kicker { font-size: 22px; }
.c-hero .c-lede { font-size: 22px; }
@media (max-width: 640px) { .c-place { font-size: clamp(24px, 7.4vw, 30px); } }

/* "Why Santa Marta" on one line */
.c-why2 h2 { font-size: clamp(34px, 4.4vw, 62px); }
@media (min-width: 901px) { .c-why2 h2 { white-space: nowrap; } }

/* "Why Santa Marta": the paragraph sits right under the heading instead of floating in a right column */
.c-why2 .c-why-grid { grid-template-columns: 1fr; gap: clamp(14px, 2.4vh, 22px); }
.c-why2 .c-why-body { padding-top: 0; }
.c-why2 .c-why-body p { max-width: 62ch; }

/* Where it happens: all cards in Apricot. Hover changes the shade instead of lifting the card */
@media (hover: hover) {
  .c-hub { transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; }
  .c-hub:hover { translate: none; background: var(--apricot-deep); border-color: var(--apricot-deep); }
}

/* The two closing buttons share one width on each page */
.c-sp .btn, .c-closer .btn { box-sizing: border-box; width: var(--cta-w, 200px); text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .c-sp .btn, .c-closer .btn { width: 100%; max-width: 360px; white-space: normal; } }

/* Why: each description sits to the right of its title */
@media (min-width: 700px) {
  .c-why-items li { display: grid; grid-template-columns: minmax(104px, 0.62fr) minmax(0, 1.38fr); column-gap: clamp(16px, 2vw, 28px); align-items: start; }
  .c-why-items li p { padding-top: 0.5em; max-width: 34ch; }
}

/* Hero photo: 5% smaller than the enlarged version, pushed to the right edge; the text column keeps its original layout */
@media (min-width: 1100px) {
  .c-hero-photo { width: 446px; padding: 12px; justify-self: end; margin-right: -46px; max-height: max(420px, calc(100svh - 240px)); }
}

/* Optical alignment: the big title's side bearing pushed it ~5px in from the kicker, lede and button */
.c-hero h1 { margin-left: -0.06em; }

/* Where it happens: the intro line matches the Why intro above it */
.c-head p { font-size: clamp(18px, 2.3vh, 21px); line-height: 1.55; }

/* Why with no pillar list below it (pages still waiting for content): no extra gap under the text */
.c-why2 .c-why-grid:last-child { margin-bottom: 0; }
.c-why2:has(.c-why-grid:last-child) { padding-bottom: clamp(48px, 8vh, 72px); }

/* Phones: never split the dates across lines */
.c-place em { white-space: nowrap; }