/* One quiet reading control for slideshows and the moving journey list.
   Page styles own placement; this file owns its appearance at every width.
   A reserved label column keeps the icon and button still on Pause / Play.
   The compact visible pill retains a separate, minimum 44px touch area. */
html body button.playback-control[data-playback-state],
html body button.playback-control[data-playback-state]:hover {
  --playback-icon-size: 14px;
  --playback-gap: 7px;
  --playback-height: 36px;
  --playback-padding: 6px 10px;
  position: relative;
  display: inline-grid;
  grid-template-columns: var(--playback-icon-size) 4.2em;
  align-items: center;
  justify-content: center;
  gap: var(--playback-gap);
  width: max-content;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: var(--playback-height);
  padding: var(--playback-padding);
  /* Half-strength header-inspired glass. Black ink allows more image through
     while keeping at least 4.7:1 text contrast even over a black photograph. */
  color: var(--playback-ink, #000);
  background: var(--playback-surface, rgba(245, 239, 227, .5));
  border: 1px solid var(--playback-border, rgba(35, 26, 16, .22));
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: var(--playback-blur, blur(2px));
  -webkit-backdrop-filter: var(--playback-blur, blur(2px));
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: var(--weight-label);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  text-shadow: var(--playback-text-shadow, none);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Override older page-level press transforms without moving the hit target. */
  transform: none !important;
  scale: 1;
  opacity: 1;
  transition: none !important;
}

/* Extend vertically without taking space from the neighbouring arrows or
   card links. Absolute positioning uses the button's existing grid cell. */
html body button.playback-control[data-playback-state]::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: -1px;
  height: 100%;
  min-height: 44px;
  transform: translateY(-50%);
}
@media (max-width: 640px) {
  html body button.playback-control[data-playback-state],
  html body button.playback-control[data-playback-state]:hover {
    --playback-icon-size: 12px;
    --playback-gap: 6px;
    --playback-height: 32px;
    --playback-padding: 4px 8px;
  }
}

html body button.playback-control[data-playback-state][hidden] { display: none; }

.playback-control .playback-control__icon {
  display: block;
  width: var(--playback-icon-size);
  height: var(--playback-icon-size);
  background: currentColor;
  filter: var(--playback-icon-filter, none);
  -webkit-mask: url("../assets/images/icons/Shared_Pause.svg") center / contain no-repeat;
  mask: url("../assets/images/icons/Shared_Pause.svg") center / contain no-repeat;
}
.playback-control[data-playback-state="paused"] .playback-control__icon {
  -webkit-mask-image: url("../assets/images/icons/Shared_Play.svg");
  mask-image: url("../assets/images/icons/Shared_Play.svg");
}
.playback-control .playback-control__label {
  display: block;
  min-width: 0;
  text-align: left;
}
html body button.playback-control[data-playback-state]:focus-visible {
  outline: 2px solid var(--warm-ivory, #f3ede0);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--espresso, #231a10);
}
@media (hover: hover) and (pointer: fine) {
  html body button.playback-control[data-playback-state]:hover {
    background: var(--playback-surface-hover, rgba(245, 239, 227, .56));
    border-color: var(--playback-border, rgba(35, 26, 16, .4));
  }
}
html body button.playback-control[data-playback-state]:active:not(:focus-visible) {
  /* Colour-only press feedback keeps the expanded hit area under the finger. */
  scale: 1;
  background: var(--playback-surface-pressed, rgba(245, 239, 227, .62));
}
@media (prefers-reduced-motion: reduce) {
  html body button.playback-control[data-playback-state]:active { scale: 1; }
}
/* Photo-backed controls share the approved clear treatment at every width.
   Discover's larger-screen journey-list control keeps the glass default.
   Do not fade the button or its hit area, only separate its foreground. */
.scene-carousel__playback,
.zuvani-pillars__rotation,
.scene-carousel__arrow,
.zuvani-pillars__controls > .zuvani-pillars__control {
  --playback-surface: transparent;
  --playback-surface-hover: transparent;
  --playback-surface-pressed: rgba(0, 0, 0, .08);
  --playback-blur: none;
  --playback-ink: #f5efe3;
  --playback-border: rgba(245, 239, 227, .42);
  --playback-text-shadow: 0 1px 2px #000, 0 0 1px #000;
  --playback-icon-filter: drop-shadow(0 1px 1px #000);
}
/* Match the photographic carousel arrows to Play/Pause without touching
   their existing dimensions, grid cells or native button behaviour. */
html body .scene-carousel__controls button.scene-carousel__arrow,
html body .zuvani-pillars__controls button.zuvani-pillars__control {
  color: var(--playback-ink);
  background: var(--playback-surface);
  border-color: var(--playback-border);
  box-shadow: none;
  backdrop-filter: var(--playback-blur);
  -webkit-backdrop-filter: var(--playback-blur);
  text-shadow: var(--playback-text-shadow);
  /* Keep existing press motion, but make the clear/tinted feedback instant. */
  transition-property: transform, opacity;
}
.scene-carousel__arrow svg { filter: var(--playback-icon-filter, none); }
html body .scene-carousel__controls button.scene-carousel__arrow:active,
html body .zuvani-pillars__controls button.zuvani-pillars__control:active {
  background: var(--playback-surface-pressed);
}
html body .scene-carousel__controls button.scene-carousel__arrow:focus-visible,
html body .zuvani-pillars__controls button.zuvani-pillars__control:focus-visible {
  outline: 2px solid var(--warm-ivory, #f3ede0);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--espresso, #231a10);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html body button:is(.playback-control[data-playback-state], .scene-carousel__arrow, [data-pillar-prev], [data-pillar-next]) {
    /* Variables also cover hover/press, without weakening their hit areas. */
    --playback-surface: #f5efe3;
    --playback-surface-hover: #f5efe3;
    --playback-surface-pressed: #e9e2d6;
    --playback-border: currentColor;
    --playback-blur: none;
    --playback-ink: #000;
    --playback-text-shadow: none;
    --playback-icon-filter: none;
  }
}
@media (forced-colors: active) {
  html body button:is(.playback-control[data-playback-state], .scene-carousel__arrow, [data-pillar-prev], [data-pillar-next]) {
    --playback-surface: ButtonFace;
    --playback-surface-hover: ButtonFace;
    --playback-surface-pressed: ButtonFace;
    --playback-ink: ButtonText;
    --playback-border: ButtonText;
    --playback-blur: none;
    --playback-text-shadow: none;
    --playback-icon-filter: none;
  }
  .playback-control .playback-control__icon { forced-color-adjust: none; background: ButtonText; }
}

/* Journeys: a centred title with a right-aligned control in normal grid flow,
   so pressing the control never replaces a positioning transform. */
.designed-plan__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 44px;
  padding-inline: clamp(24px, 4vw, 64px);
}
.designed-plan__head > .designed__label { grid-column: 2; grid-row: 1; }
html body .designed-plan__toggle.playback-control {
  position: relative;
  inset: auto;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-block: 0;
}
@media (max-width: 640px) {
  .designed-plan__head { min-height: 0; padding-inline: 22px; }
  html body .designed-plan__toggle.playback-control[data-playback-state] { display: none; }
}

/* Collective keeps Play/Pause centred between the arrows, indicators below. */
.scene-carousel__controls > .scene-carousel__playback { align-self: center; }

/* Preserve the existing static-list / no-JS / reduced-motion rules. */
html:not(.discover-enhanced) body .designed-plan__toggle.playback-control { display: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-motion-preferences="system"] body .designed-plan__toggle.playback-control { display: none; }
}

/* Compact carousel arrows: match the visible Play/Pause height, while
   preserving the original 44px control row and an invisible 44px hit area. */
.scene-carousel__controls,
.zuvani-pillars__gallery {
  --carousel-control-size: 36px;
  --carousel-arrow-size: 14px;
}
@media (max-width: 640px) {
  .scene-carousel__controls,
  .zuvani-pillars__gallery {
    --carousel-control-size: 32px;
    --carousel-arrow-size: 12px;
  }
}
html body .scene-carousel__controls button.scene-carousel__arrow,
html body .zuvani-pillars__controls button.zuvani-pillars__control {
  position: relative;
  width: var(--carousel-control-size);
  height: var(--carousel-control-size);
  min-width: 0;
  min-height: 0;
  padding: 0;
  align-self: center;
  overflow: visible;
  touch-action: manipulation;
}
html body .scene-carousel__controls button.scene-carousel__arrow::before,
html body .zuvani-pillars__controls button.zuvani-pillars__control::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.scene-carousel__arrow svg {
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
}
.zuvani-pillars__controls > .zuvani-pillars__control > span {
  font-size: var(--carousel-arrow-size);
  line-height: 1;
}
.scene-carousel__controls { grid-template-rows: minmax(44px, auto) 44px; }
.zuvani-pillars__gallery { grid-template-rows: auto minmax(44px, auto) auto; }
.zuvani-pillars__controls > [data-pillar-prev] { justify-self: end; }
.zuvani-pillars__controls > [data-pillar-next] { justify-self: start; }