/* ==========================================================================
   Cap10K — media section renderers (W3b)
   image · image_text · image_carousel · video · embed · raw_html · map
   Loads after style.css (declared dependency), which owns .embed-frame /
   .embed-facade. Everything here either adds a class of its own or modifies
   one of those two. Tokens come from W1 with hard-coded fallbacks so the
   sheet is safe to load standalone.
   ========================================================================== */

/* ── Shared column ─────────────────────────────────────────────────────── */
.c10k-media {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}
.c10k-media--prose { max-width: 46rem; }
.c10k-media--wide  { max-width: 64rem; }
.c10k-media--full  { max-width: none; }
.c10k-media--icon  { max-width: 11rem; }
/* Text-ish and functional blocks line up with the section heading instead of centring. */
.c10k-media--flush { margin-inline: 0; }

/* ── Figure ────────────────────────────────────────────────────────────── */
.c10k-figure { margin: 0; min-width: 0; }

.c10k-figure__frame {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--c10k-radius-card, 1rem);
  background: var(--c10k-sand-100, #F5F3ED);
}
.c10k-figure__frame--ratio { aspect-ratio: var(--c10k-figure-aspect, 4 / 3); }
.c10k-figure__frame--ratio > img { height: 100%; object-fit: cover; }

.c10k-figure__img {
  display: block;
  width: 100%;
  height: auto;
}

a.c10k-figure__frame,
button.c10k-figure__frame {
  cursor: pointer;
  background: var(--c10k-sand-100, #F5F3ED);
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
}
a.c10k-figure__frame:hover .c10k-figure__img,
button.c10k-figure__frame:hover .c10k-figure__img {
  transform: scale(1.02);
}
.c10k-figure__img { transition: transform 0.45s var(--c10k-ease, cubic-bezier(0.22, 1, 0.36, 1)); }

/* Zoom affordance on a lightbox trigger. Solid ink chip = AA on any photo. */
.c10k-figure__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(30, 32, 34, 0.78);
  pointer-events: none;
}

.c10k-figure__caption {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c10k-muted, #54595F);
}
.c10k-figure__caption a { color: var(--c10k-blue-600, #094080); }

.c10k-figure--full .c10k-figure__frame { border-radius: 0; }
.c10k-figure--icon .c10k-figure__frame { background: none; }

/* Captions on the dark / coloured bands stay readable. */
/* `section--image` is safe to name here since W18: the wrapper emits the LAYOUT as
   `section--layout-image`, so the bare class means the dark photo TONE and nothing else. */
.section--ink .c10k-figure__caption,
.section--blue .c10k-figure__caption,
.section--image .c10k-figure__caption,
.section--red .c10k-figure__caption { color: rgba(255, 255, 255, 0.86); }
.section--lime .c10k-figure__caption { color: var(--c10k-ink-900, #1E2022); }

.section--ink .c10k-map__address,
.section--blue .c10k-map__address,
.section--red .c10k-map__address { color: rgba(255, 255, 255, 0.86); }
.section--ink .c10k-rawhtml,
.section--blue .c10k-rawhtml,
.section--red .c10k-rawhtml { color: rgba(255, 255, 255, 0.88); }
.section--ink .c10k-rawhtml a,
.section--blue .c10k-rawhtml a,
.section--red .c10k-rawhtml a { color: var(--c10k-lime-300, #E4ED8F); }

/* ── Buttons under a media block ───────────────────────────────────────── */
.c10k-media-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.c10k-media-buttons--center { justify-content: center; }
.c10k-media-buttons--right  { justify-content: flex-end; }

/* ── image_text ────────────────────────────────────────────────────────── */
.c10k-imgtext {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.c10k-imgtext__media,
.c10k-imgtext__body { min-width: 0; }

.c10k-imgtext__body > .prose { max-width: none; }
.c10k-imgtext__body > .prose > :first-child { margin-top: 0; }
.c10k-imgtext__body > .prose > :last-child  { margin-bottom: 0; }

@media (min-width: 768px) {
  .c10k-imgtext {
    grid-template-columns: var(--c10k-it-cols, minmax(0, 1fr) minmax(0, 1fr));
    gap: 3rem;
  }
  /* DOM order is always media-then-text (mobile stacks media first); on desktop
     a right-hand media column is a pure `order` swap. */
  .c10k-imgtext--right > .c10k-imgtext__media { order: 2; }
  .c10k-imgtext--right > .c10k-imgtext__body  { order: 1; }
}

/* A one/two-image gallery beside the copy. */
.c10k-imgtext__media .c10k-gallery { margin: 0; }

/* ── image_carousel ────────────────────────────────────────────────────── */
/* W10: carousels must sit in block flow or a minmax(0,1fr) cell, never in a
   fit-content parent, and need width:100% inside #site's flex column. */
.c10k-media-carousel {
  display: block;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}

/* ── Embeds ────────────────────────────────────────────────────────────── */
.c10k-embed { width: 100%; min-width: 0; }

.embed-frame--169   { aspect-ratio: 16 / 9; }
.embed-frame--43    { aspect-ratio: 4 / 3; }
.embed-frame--fixed { aspect-ratio: auto; height: var(--c10k-embed-h, 480px); }

.c10k-embed--file video { background: #000; }

/* Facade: the button already carries .embed-facade from style.css. */
.embed-facade.embed-frame--43    { aspect-ratio: 4 / 3; }
.embed-facade.embed-frame--fixed { aspect-ratio: auto; height: var(--c10k-embed-h, 480px); }

.c10k-facade__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c10k-facade__icon {
  width: 4.5rem;
  height: 4.5rem;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
}
.embed-facade:hover .c10k-facade__icon,
.embed-facade:focus-visible .c10k-facade__icon { color: var(--c10k-lime-500, #C2D500); }

/* The swapped-in player keeps the facade's shape. */
.c10k-embed--facade > .embed-frame { display: block; }

/* ── map ───────────────────────────────────────────────────────────────── */
.c10k-map { width: 100%; min-width: 0; }
.c10k-map .embed-frame { background: var(--c10k-sand-100, #F5F3ED); }
.c10k-map__actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.c10k-map__address {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--c10k-muted, #54595F);
}

/* ── raw_html ──────────────────────────────────────────────────────────── */
.c10k-rawhtml { width: 100%; min-width: 0; }
.c10k-rawhtml > *:first-child { margin-top: 0; }
.c10k-raw-notice {
  border: 1px dashed var(--c10k-gold-600, #C9A400);
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 0.75rem;
  background: #FEFBEA;
  color: var(--c10k-ink-900, #1E2022);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.c10k-raw-notice strong {
  display: block;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .c10k-figure__img { transition: none !important; }
  a.c10k-figure__frame:hover .c10k-figure__img,
  button.c10k-figure__frame:hover .c10k-figure__img { transform: none !important; }
  /* W1 hides video[autoplay]; a decorative background embed goes with it. */
  .c10k-embed--bg { display: none !important; }
}