/* ==========================================================================
   pages/home.css — Experience West Africa home
   Hero / porthole patterns proven on the TWA build; country grid, theme
   tracks and placeholder treatment are new.
   ========================================================================== */

/* ======================= Hero ======================= */
.hero { position: relative; min-height: min(92svh, 900px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
@media (max-width: 700px) { .hero { min-height: min(88svh, 720px); } }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide picture { width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active img { animation: kenburns 14s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); } }

.hero__wash {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--scrim) 6%, color-mix(in srgb, var(--scrim) 78%, transparent) 44%, color-mix(in srgb, var(--scrim) 24%, transparent) 100%),
    linear-gradient(to right, color-mix(in srgb, var(--earth) 66%, transparent) 0%, color-mix(in srgb, var(--earth) 20%, transparent) 60%, transparent 100%);
}
.hero__inner { width: 100%; padding-block: var(--s-9) var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); }
.hero__eyebrow { margin-block-end: var(--s-2); }
.hero__headline { font-size: var(--step-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); font-weight: 800; max-width: 15ch; }
.hero__accent { color: var(--gold); font-style: normal; }
.hero__lede, .hero__cta { opacity: 0; transform: translateY(16px); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); }
.hero__lede { transition-delay: 700ms; } .hero__cta { transition-delay: 850ms; }
.is-ready .hero__lede, .is-ready .hero__cta { opacity: 1; transform: none; }
.no-js .hero__lede, .no-js .hero__cta { opacity: 1; transform: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.hero__dots { position: absolute; right: var(--gutter); bottom: var(--s-7); display: flex; gap: var(--s-3); z-index: 2; }
.hero__dot { width: 28px; height: 2px; background: color-mix(in srgb, var(--bone) 30%, transparent); }
.hero__dot[aria-current="true"] { background: var(--gold); }
@media (max-width: 700px) { .hero__dots { display: none; } }
.no-js .hero__dots { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active img { animation: none; } .hero__lede, .hero__cta { opacity: 1 !important; transform: none !important; } }

/* ======================= Section heads ======================= */
.section__head { display: flex; flex-direction: column; gap: var(--s-4); margin-block-end: var(--s-7); max-width: var(--measure); }
.section__title { font-size: var(--step-h2); }
@media (min-width: 860px) {
  .section__head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; max-width: none; }
  .section__head--split > * { max-width: 46ch; }
}

/* ======================= Country grid ======================= */
.cc-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cc {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.cc:hover { border-color: var(--line-firm); transform: translateY(-4px); }
.cc:focus-within { border-color: var(--gold); }
.cc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.cc__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.cc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease); }
.cc:hover .cc__media img { transform: scale(1.07); }
/* Reference maps sit contained on a clean field, not cropped or zoomed. */
.cc__media img.cc__map { object-fit: contain; background: #fdfbf6; padding: 7%; }
.cc:hover .cc__media img.cc__map { transform: none; }

/* Placeholder for countries without supplied photography — intentional
   woven field, never a fake photo, never blank. Replaced automatically when
   the client supplies a `hero` image. */
.cc__placeholder {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--accent) 12%, transparent) 15px 16px),
    repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--bone) 4%, transparent) 22px 23px),
    linear-gradient(140deg, var(--earth-deep), var(--ink-2));
}
.cc__placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}
.cc__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.cc__code { color: var(--bone-mute); }
.cc__name { font-size: var(--step-h3); font-weight: 700; }
.cc__tag { color: var(--bone-dim); font-size: var(--step-small); }

/* ======================= 360 porthole ======================= */
.porthole { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .porthole { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); } }
.porthole__copy { display: flex; flex-direction: column; gap: var(--s-4); }
.porthole__title { font-size: var(--step-h2); }
.porthole__chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-3); }
.chip {
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-firm); border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--step-util); letter-spacing: var(--tr-util-lg);
  text-transform: uppercase; color: var(--bone-dim);
}
.chip--pending { opacity: 0.55; border-style: dashed; }

.viewer { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line-firm); border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3); isolation: isolate; }
.viewer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.viewer:hover .viewer__poster { transform: scale(1.03); }
.viewer__scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--scrim) 90%, transparent) 8%, transparent 58%); }
.viewer__overlay { position: absolute; inset-inline: 0; bottom: 0; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.viewer__name { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 600; letter-spacing: var(--tr-display); }
.viewer__enter { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.viewer__enter-btn {
  display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--scrim) 74%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line-gold); border-radius: var(--r-full); color: var(--bone);
  font-family: var(--font-mono); font-size: var(--step-util); letter-spacing: var(--tr-util-lg); text-transform: uppercase;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.viewer__enter-btn:hover { background: var(--gold); color: var(--on-accent); transform: scale(1.03); }

/* ======================= Theme tracks (vivid solid panels) =======================
   On the light sand section, each panel is a SOLID track colour with the text
   colour the contrast data demands: dark text on jade/clay/gold, light on
   earth. This is where clay + jade carry real, prominent UI. */
.themes { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.theme {
  --c: var(--gold); --ink-on: var(--ink);
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); border-radius: var(--r-lg); background: var(--c); color: var(--ink-on);
  overflow: hidden; isolation: isolate;
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.theme[data-track="nature"]    { --c: var(--jade); --ink-on: var(--ink); }
.theme[data-track="heritage"]  { --c: var(--clay); --ink-on: var(--ink); }
.theme[data-track="culture"]   { --c: var(--gold); --ink-on: var(--ink); }
.theme[data-track="lifestyle"] { --c: var(--earth); --ink-on: var(--bone); }
.theme:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
/* woven texture over the fill, subtle */
.theme::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .10;
  background: repeating-linear-gradient(90deg, transparent 0 13px, #000 13px 14px),
              repeating-linear-gradient(0deg, transparent 0 19px, #000 19px 20px);
}
.theme__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-on); opacity: .8; }
.theme__name { font-size: var(--step-h3); font-weight: 700; color: var(--ink-on); }
.theme__eg { color: var(--ink-on); opacity: 1; font-weight: 500; }

/* ======================= Awaiting-content marker ======================= */
.awaiting {
  display: inline-block; padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--line-firm); border-radius: var(--r-sm);
  color: var(--bone-mute); font-size: var(--step-util); letter-spacing: var(--tr-util-lg); text-transform: uppercase;
}

/* ======================= Closing ======================= */
.closing { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); max-width: 32ch; }
.closing__title { font-size: var(--step-h1); }

/* ======================= grid halves (events/journal) ======================= */
.grid { display: grid; gap: var(--s-5); }
.grid--halves { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--s-7); }

/* ==== LIGHT THEME: on-image contexts keep light text over the dark scrim ==== */
.hero__eyebrow, .hero__headline, .hero__lede { color: var(--on-image); }
.hero .mono { color: color-mix(in srgb, var(--on-image) 84%, transparent); }
.hero__accent { color: var(--gold); }
.hero__dot { background: color-mix(in srgb, var(--on-image) 42%, transparent); }
.hero__dot[aria-current="true"] { background: var(--gold); }
.viewer__name, .viewer__overlay .mono { color: var(--on-image); }
.viewer__enter-btn { color: var(--on-image); }
.viewer__enter-btn:hover { color: var(--on-accent); }
/* country placeholder: LIGHT warm field now, not a dark block */
.cc__placeholder {
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--accent) 22%, transparent) 15px 16px),
    repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--earth) 8%, transparent) 22px 23px),
    linear-gradient(140deg, var(--ink-2), var(--ink-3));
}
.cc__placeholder::after { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%); }
/* porthole chips readable on light */
.chip { color: var(--bone-dim); }
/* hero ghost button sits over the image -> light outline + text */
.hero .btn--ghost { border-color: color-mix(in srgb, var(--on-image) 55%, transparent); color: var(--on-image); }
.hero .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }