@charset "UTF-8";
/* ==========================================================================
   AVAVA TRAVEL — Africa page
   Loaded after style.css and destination.css: tokens, top bar, footer and the
   shared destination blocks (breadcrumb, header, why panel, guide card, hub
   rail, planner) come from those two. Here live the blocks unique to Africa.
   --------------------------------------------------------------------------
   01. Page tokens
   02. Country board — plates
   03. Responsive — 1400 / 1100 / 900 / 640 / 420
   --------------------------------------------------------------------------
   Sizes follow the reference: --u is 1% of the section's content box at a
   1920 px design width, so sections with a 2.083 gutter carry a smaller unit.
   ========================================================================== */

/* ==========================================================================
   01. Page tokens
   ========================================================================== */

.page-africa {
  --af-photo-accent: #F0B48A;
}

[data-theme="dark"] .page-africa {
  --af-photo-accent: #E2661F;
}

/* ==========================================================================
   02. Country board — plates
   ========================================================================== */

.pboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 1.25);
  margin: 0 calc(var(--u) * 2.083);
}

.pcard {
  display: flex;
  flex-direction: column;
  border: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  background: var(--af-card);
  color: inherit;
}

.pcard--wide { grid-column: span 2; }

.pcard--new {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: linear-gradient(rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.08)), var(--af-card);
}

[data-theme="dark"] .pcard--new { border-color: rgba(var(--accent-rgb), 0.55); }

.pcard--row {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
}

.pcard__photo {
  position: relative;
  display: block;
  height: calc(var(--u) * 13.958);
  min-height: 200px;
  overflow: hidden;
}

.pcard__photo--tall {
  height: calc(var(--u) * 20.625);
  min-height: 280px;
}

.pcard__photo--side {
  flex: 1 1 44%;
  min-width: min(320px, 100%);
  height: auto;
  min-height: calc(var(--u) * 12.083);
}

.pcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the top gradient keeps the white PLATE nn label readable on a bright photo */
.pcard__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 10, 10, 0.86) 0%, transparent 58%),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.5) 0%, transparent 26%);
  pointer-events: none;
}

.pcard__scrim--side { background: linear-gradient(to right, rgba(10, 10, 10, 0.8) 0%, transparent 62%); }

.pcard__no {
  position: absolute;
  left: calc(var(--u) * 1.042);
  top: calc(var(--u) * 0.938);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  letter-spacing: 0.24em;
  color: #FFFFFF;
  opacity: 0.7;
  pointer-events: none;
}

.pcard--wide .pcard__no {
  left: calc(var(--u) * 1.146);
  top: calc(var(--u) * 1.042);
}

.pcard__badge {
  position: absolute;
  left: calc(var(--u) * 0.833);
  top: calc(var(--u) * 0.833);
  background: var(--accent);
  color: #FFFFFF;
  padding: calc(var(--u) * 0.365) calc(var(--u) * 0.625);
  font-size: clamp(12px, calc(var(--u) * 0.781), 15px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

.pcard__caption {
  position: absolute;
  left: calc(var(--u) * 1.042);
  right: calc(var(--u) * 1.042);
  bottom: calc(var(--u) * 0.938);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.146);
  pointer-events: none;
}

.pcard--wide .pcard__caption {
  left: calc(var(--u) * 1.25);
  right: calc(var(--u) * 1.25);
  bottom: calc(var(--u) * 1.042);
}

.pcard__caption--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.156);
}

.pcard__caption--side {
  left: calc(var(--u) * 1.25);
  right: auto;
  bottom: calc(var(--u) * 1.042);
}

.pcard__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.156);
  min-width: 0;
}

.pcard__code {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(13px, calc(var(--u) * 0.833), 16px);
  letter-spacing: 0.2em;
  color: var(--af-photo-accent);
}

.pcard__code--sm { font-size: clamp(12px, calc(var(--u) * 0.781), 15px); }

.pcard__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(24px, calc(var(--u) * 2.083), 40px);
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
}

.pcard__name--lg {
  font-size: clamp(34px, calc(var(--u) * 3.229), 62px);
  line-height: 0.95;
}

.pcard__name--md { font-size: clamp(28px, calc(var(--u) * 2.5), 48px); }

.pcard__hint {
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 500;
  color: #FFFFFF;
  opacity: 0.85;
}

.pcard__script {
  margin-left: auto;
  padding-bottom: calc(var(--u) * 0.417);
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: clamp(30px, calc(var(--u) * 2.917), 56px);
  line-height: 0.5;
  color: var(--af-photo-accent);
  white-space: nowrap;
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.573);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 1.042) calc(var(--u) * 1.042);
}

.pcard__body--wide {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  flex-wrap: wrap;
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.25) calc(var(--u) * 1.146);
}

.pcard__body--row {
  flex: 1 1 44%;
  min-width: min(320px, 100%);
  flex-direction: row;
  align-items: center;
  gap: calc(var(--u) * 1.563);
  flex-wrap: wrap;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.354);
}

.pcard__facts {
  flex: 1 1 calc(var(--u) * 15.625);
  min-width: min(280px, 100%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.521);
}

.pcard__facts--row {
  flex: 1 1 calc(var(--u) * 14.583);
  min-width: 0;
  gap: calc(var(--u) * 0.417);
}

.pcard__line {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.625);
}

.pcard--wide .pcard__line { gap: calc(var(--u) * 0.729); }

.pcard__routes {
  font-size: clamp(14px, calc(var(--u) * 1.042), 20px);
  font-weight: 600;
}

.pcard--wide .pcard__routes,
.pcard__routes--lg { font-size: clamp(15px, calc(var(--u) * 1.094), 21px); }

.pcard__price {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(17px, calc(var(--u) * 1.302), 25px);
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

.pcard__price--push { margin-left: auto; }

.pcard__price--lg { font-size: clamp(18px, calc(var(--u) * 1.406), 27px); }

.pcard__price--row {
  margin-left: auto;
  flex: none;
  font-size: clamp(20px, calc(var(--u) * 1.563), 30px);
}

.pcard__seats {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 500;
  opacity: 0.7;
}

.pcard__seats--hot {
  color: var(--accent);
  opacity: 1;
}

.pcard__note {
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 500;
  opacity: 0.75;
  text-wrap: pretty;
}

.pcard__meterline {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.729);
  padding-top: calc(var(--u) * 0.208);
  flex-wrap: wrap;
}

.pcard__cta {
  flex: none;
  border: max(1.5px, calc(var(--u) * 0.078)) solid var(--accent);
  padding: calc(var(--u) * 0.625) calc(var(--u) * 1.042);
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.pcard:hover .pcard__cta {
  background: var(--accent);
  color: var(--cta-label);
}

.meter--plate { height: max(4px, calc(var(--u) * 0.26)); background: rgba(var(--ink-rgb), 0.16); }
.meter--plate-lg { height: max(5px, calc(var(--u) * 0.313)); background: rgba(var(--ink-rgb), 0.16); }

[data-theme="dark"] .meter--plate,
[data-theme="dark"] .meter--plate-lg { background: rgba(var(--ink-rgb), 0.18); }

.meter--fixed {
  flex: none;
  width: max(160px, calc(var(--u) * 11.458));
}

.meter__fill--15 { width: 15%; }
.meter__fill--30 { width: 30%; }
.meter__fill--45 { width: 45%; }
.meter__fill--68 { width: 68%; }

/* ==========================================================================
   03. Responsive
   ========================================================================== */

@media (max-width: 1100px) {

  .pboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard--wide { grid-column: span 2; }}

@media (max-width: 900px) {
  .pboard { grid-template-columns: 1fr; gap: 18px; }
  .pcard--wide,
  .pcard--row { grid-column: auto; }
  .pcard__photo,
  .pcard__photo--tall { height: 220px; min-height: 0; }
  .pcard__photo--side { height: 220px; min-height: 0; flex: 1 1 100%; }
  .pcard__name--lg { font-size: 34px; }
  .pcard__script { font-size: 30px; }
  .pcard__body--wide,
  .pcard__body--row { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px 18px; }
  .pcard__facts { min-width: 0; }
  .pcard__price--row { margin-left: 0; }
  .pcard__cta { text-align: center; }
}

@media (max-width: 420px) {
  .pcard__photo,
  .pcard__photo--tall,
  .pcard__photo--side { height: 190px; }
  .pcard__name--lg { font-size: 28px; }
  .pcard__cta { padding: 12px 14px; font-size: 13px; }}