/* ------------------------------------------------------------------ W10 brand
   Imagery slots introduced in wave 10: the homepage hero photograph, mission-card
   location photographs, course stage headers, and the pricing / account banners.
   Every image is honest subject matter — the aeroplane, the places, the gear —
   never a fake screenshot of the simulator. Class names are new; nothing here
   overrides an existing rule. */

/* --- homepage hero photograph (right column, replaces nothing structurally:
       the figure is the .hero grid's second column, same slot the panel used) */
.hero-visual {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--bg-1);
}
.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-visual figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: linear-gradient(to top, rgba(7, 8, 10, .84), rgba(7, 8, 10, 0));
}
.hero-visual figcaption b {
  font-weight: 600;
  color: var(--coral-base);
}
[data-theme="light"] .hero-visual figcaption {
  color: #e9edf1;
  background: linear-gradient(to top, rgba(7, 8, 10, .78), rgba(7, 8, 10, 0));
}
@media (max-width: 1180px) {
  .hero-visual { order: 1; max-width: 560px; }
}

/* --- mission-card location photograph (between the ICAO row and the name) */
.card-img-wrap { display: block; }
.card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: var(--s3);
}

/* --- course ladder stage header photograph (top of the stage's text column) */
.co-img-wrap { display: block; }
.co-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line, #23282f);
  border-radius: var(--r-sm, 8px);
  margin-bottom: var(--s3, 12px);
}
.co-stage.is-locked .co-img {
  filter: saturate(.55) brightness(.82);
}

/* --- pricing / account banner photographs */
.page-banner {
  margin: 0 0 var(--s6, 32px);
  border: 1px solid var(--line, #23282f);
  border-radius: var(--r-lg, 12px);
  overflow: hidden;
  background-color: var(--bg-1, #0b0d10);
}
.page-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.ac-hero .page-banner {
  margin: var(--s5, 24px) 0 0;
}