.inspiration,
.countries { scroll-margin-top: 5rem; }

.inspiration {
  padding: clamp(5rem, 10vw, 10rem) max(5vw, 2rem);
  background: #f3f0e8;
  color: var(--ink);
}

.discovery-heading {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.discovery-heading .kicker { grid-column: 1 / -1; }

.discovery-heading h2,
.countries h2 {
  margin: 0;
  font: 400 clamp(3rem, 6vw, 6.5rem)/.94 var(--serif);
}

.discovery-heading > p:last-child {
  max-width: 32rem;
  margin: 0 0 .5rem;
  color: #55554f;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.7;
}

.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #c9c4b9;
}

.inspiration-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(300px, 38vw, 520px);
  padding: 1.7rem;
  overflow: hidden;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  border: 0;
  background: #171918;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}

.inspiration-card::after {
  position: absolute;
  z-index: 1;
  content: "";
  inset: 0;
  border: 2px solid transparent;
  background: linear-gradient(180deg, transparent 15%, rgb(5 6 6 / 92%) 100%);
  transition: border-color .25s ease, background .25s ease;
}

.inspiration-card:hover::after,
.inspiration-card:focus-visible::after { border-color: var(--gold); background: linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(5 6 6 / 95%)); }

.inspiration-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspiration-photo.image-fallback { padding: 28%; object-fit: contain; opacity: .35; }

.inspiration-card > .image-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
}

.inspiration-card > span {
  position: absolute;
  z-index: 2;
  top: 1.5rem;
  left: 1.7rem;
  color: var(--gold-light);
  font-family: var(--serif);
}

.inspiration-card strong,
.inspiration-card small { position: relative; z-index: 2; }
.inspiration-card strong { font: 400 clamp(1.8rem, 3vw, 3.2rem)/1 var(--serif); }
.inspiration-card small { margin-top: 1rem; color: var(--gold-light); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.countries {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 8vw, 10rem);
  padding: clamp(5rem, 9vw, 9rem) max(5vw, 2rem);
  background: #111311;
  color: #f3f0e8;
}

.countries-intro { position: sticky; top: 8rem; align-self: start; }
.countries-intro .kicker { margin-bottom: 1rem; }
.country-list { border-top: 1px solid #3b3c37; }

.country-list button {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  width: 100%;
  gap: 1rem;
  align-items: center;
  padding: 2rem .5rem;
  border: 0;
  border-bottom: 1px solid #3b3c37;
  background: transparent;
  color: #f3f0e8;
  text-align: left;
  cursor: pointer;
}

.country-list button:hover,
.country-list button:focus-visible { background: #191b18; outline: 2px solid var(--gold-light); outline-offset: -2px; }
.country-list span, .country-list small { color: var(--gold-light); }
.country-list strong { overflow-wrap: anywhere; font: 400 clamp(1.7rem, 3vw, 3rem) var(--serif); }
.country-list small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.discovery-empty { padding: 2rem 0; color: #aaa69d; }

@media (max-width: 850px) {
  .inspiration, .countries { padding-inline: 1.25rem; }
  .discovery-heading, .countries { grid-template-columns: 1fr; }
  .inspiration-grid { grid-template-columns: 1fr 1fr; }
  .countries-intro { position: static; }
  .country-list button { padding: 1.5rem .25rem; }
}

@media (max-width: 520px) {
  .inspiration-grid { grid-template-columns: 1fr; }
  .inspiration-card { min-height: 360px; }
  .country-list button { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .country-list small { grid-column: 2; }
}