/* Standalone runtime CSS. Loaded only on pages containing Image Reveal Blocks. */
.wpt-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.wpt-image-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #2f4244;
  color: #fff;
}
.wpt-image-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.wpt-image-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Readable when expanded, including the no-JavaScript fallback. */
  background: rgb(0 0 0 / 68%);
}
.wpt-image-card.is-enhanced::before { background: rgb(0 0 0 / 10%); }
.wpt-image-card.is-enhanced:has(.wpt-image-card__toggle[aria-expanded="true"])::before {
  background: rgb(0 0 0 / 68%);
}
.wpt-image-card__body {
  width: 100%;
  padding: 32px clamp(24px, 6vw, 88px);
  align-self: center;
  text-align: center;
}
.wpt-image-card__heading {
  margin: 0;
  color: #fff;
  overflow-wrap: anywhere;
  line-height: 1.12;
  font-size: clamp(24px, 2.6vw, 38px);
  /* Keep white headlines defined over the brighter resting photos. */
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%), 0 0 8px rgb(0 0 0 / 30%);
}
.wpt-image-card.is-enhanced .wpt-image-card__body { display: grid; }
.wpt-image-card.is-enhanced .wpt-image-card__heading,
.wpt-image-card.is-enhanced .wpt-image-card__text { grid-area: 1 / 1; align-self: center; }
/* Keep the named disclosure in the accessibility tree as its visible copy swaps. */
.wpt-image-card__toggle[aria-expanded="true"] .wpt-image-card__label { opacity: 0; }
.wpt-image-card__toggle {
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
}
.wpt-image-card__toggle::after {
  content: '';
  position: absolute;
  inset: 0;
}
.wpt-image-card__toggle:focus-visible {
  outline: none;
}
.wpt-image-card:has(.wpt-image-card__toggle:focus-visible) {
  outline: 3px solid #fff;
  outline-offset: -7px;
  box-shadow: 0 0 0 3px #2d1207;
}
.wpt-image-card__indicator {
  display: block;
  position: absolute;
  bottom: 18px;
  right: 18px;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
}
/* Size comes from the theme's type-p2 card copy scale (18px, 22px from 1024px). */
.wpt-image-card__text {
  position: relative;
  margin-top: 20px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.wpt-image-card.is-enhanced .wpt-image-card__text { margin-top: 0; pointer-events: none; }
.wpt-image-card__text > :first-child { margin-top: 0; }
.wpt-image-card__text > :last-child { margin-bottom: 0; }
.wpt-image-card__text p + p { margin-top: 12px; }
.wpt-image-card__text ul, .wpt-image-card__text ol { padding-left: 24px; text-align: left; }
.wpt-image-card__text ul { list-style: disc; }
.wpt-image-card__text ol { list-style: decimal; }
.wpt-image-card__text a { color: #fff; text-decoration: underline; position: relative; z-index: 1; pointer-events: auto; }
.wpt-image-card__text a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wpt-image-card [hidden] { display: none !important; }
/* Reserve the expanded text's space to avoid moving neighbouring cards on hover. */
.wpt-image-card.is-enhanced .wpt-image-card__text[hidden] {
  display: block !important;
  visibility: hidden;
}
@media (min-width: 768px) {
  .wpt-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .wpt-image-card__indicator { opacity: 0; }
  .wpt-image-card__toggle:focus-visible .wpt-image-card__indicator { opacity: 1; }
}
/*
 * The image stays still while overlay opacity follows the disclosure state.
 * Outgoing copy leaves quickly
 * (ease-in) and incoming copy follows a beat later (ease-out), so the two barely
 * overlap. Both drift along one vertical path: up and away on reveal, back down on
 * return. Transitions reverse from their current values on rapid hover changes.
 */
@media (prefers-reduced-motion: no-preference) {
  .wpt-image-card {
    --wpt-reveal-out: 160ms cubic-bezier(.4, 0, 1, 1);
    --wpt-reveal-in: 320ms cubic-bezier(0, 0, .2, 1) 120ms;
    --wpt-reveal-drift: 6px;
  }
  .wpt-image-card__label { display: block; }
  .wpt-image-card.is-animated::before {
    /* Keep the dark backing until outgoing body copy has finished fading. */
    transition: background-color 320ms cubic-bezier(0, 0, .2, 1) 160ms;
  }
  .wpt-image-card.is-animated:has(.wpt-image-card__toggle[aria-expanded="true"])::before {
    transition: background-color 160ms cubic-bezier(0, 0, .2, 1);
  }
  /* .is-animated is added after first paint so the initial collapse is not animated. */
  .wpt-image-card.is-animated .wpt-image-card__label {
    transition: opacity var(--wpt-reveal-in), transform var(--wpt-reveal-in);
  }
  .wpt-image-card.is-animated .wpt-image-card__toggle[aria-expanded="true"] .wpt-image-card__label {
    transition: opacity var(--wpt-reveal-out), transform var(--wpt-reveal-out);
  }
  .wpt-image-card__toggle[aria-expanded="true"] .wpt-image-card__label {
    transform: translateY(calc(var(--wpt-reveal-drift) * -1));
  }
  .wpt-image-card.is-enhanced .wpt-image-card__text {
    opacity: 1;
    transform: none;
  }
  .wpt-image-card.is-enhanced .wpt-image-card__text[hidden] {
    opacity: 0;
    transform: translateY(var(--wpt-reveal-drift));
  }
  .wpt-image-card.is-animated .wpt-image-card__text {
    transition: opacity var(--wpt-reveal-in), transform var(--wpt-reveal-in), visibility 0s;
  }
  .wpt-image-card.is-animated .wpt-image-card__text[hidden] {
    /* Finish fading out visually; JS removes closed copy from focus/AT immediately. */
    transition: opacity var(--wpt-reveal-out), transform var(--wpt-reveal-out), visibility 0s 160ms;
  }
}
@media (forced-colors: active) {
  .wpt-image-card { border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .wpt-image-card__heading, .wpt-image-card__text a { color: CanvasText; text-shadow: none; }
  .wpt-image-card__image, .wpt-image-card::before { display: none; }
  .wpt-image-card:has(:focus-visible) { outline: 3px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .wpt-image-card::before, .wpt-image-card__label, .wpt-image-card__text { transition: none; animation: none; }
}
@media print {
  .wpt-image-card { aspect-ratio: auto; background: #fff; color: #000; break-inside: avoid; }
  .wpt-image-card.is-enhanced .wpt-image-card__body { display: block; }
  .wpt-image-card__toggle[aria-expanded="true"] .wpt-image-card__label { opacity: 1; }
  .wpt-image-card__heading, .wpt-image-card__text a { color: #000; text-shadow: none; }
  .wpt-image-card__image, .wpt-image-card::before, .wpt-image-card__indicator { display: none; }
  .wpt-image-card.is-enhanced .wpt-image-card__text,
  .wpt-image-card .wpt-image-card__label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wpt-image-card.is-enhanced .wpt-image-card__text[hidden] { visibility: visible; }
}