/*
 * wl-extensions.css — styles for the components the white-label module never shipped
 * (Message, Filter Pill, Segmented Control, Banner Image, Table), built clean from the
 * design system's canonical definitions and bound to the --brand-component-* tokens the
 * brand pipeline emits (@pagekit/design-tokens, Phase B).
 *
 * Fallback rule: filter-pill / segmented-control / table-cell tokens also exist in the
 * base skin's token dump, so those resolve unbranded. message / banner-image tokens do
 * NOT — their declarations carry var() fallbacks to the SEMANTIC layer (which the skin
 * does define), so an unbranded page still renders correctly.
 */

/* ---------------------------------------------------------------- Message */
.message {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--brand-component-message-radius, var(--brand-size-radius-small));
}
.message__content {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--brand-component-message-gap, var(--brand-size-spacing-0-5rem));
  padding: var(--brand-component-message-padding, var(--brand-size-spacing-1-25rem));
  padding-right: 0;
}
.message__text {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--brand-typography-font-family-body), sans-serif;
  font-size: var(--text-style-body-font-size, 1rem);
}
.message__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.message__accent {
  flex: 0 0 auto;
  width: 4px;
  align-self: stretch;
}
.message--positive {
  background: var(--brand-component-message-container-positive, var(--brand-color-light-positive-positive-container));
  color: var(--brand-component-message-text-positive, var(--brand-color-light-positive-on-positive-container));
}
.message--positive .message__icon,
.message--positive .message__accent {
  fill: var(--brand-component-message-accent-positive, var(--brand-color-light-positive-positive));
  background: var(--brand-component-message-accent-positive, var(--brand-color-light-positive-positive));
}
.message--information {
  background: var(--brand-component-message-container-information, var(--brand-color-light-informative-informative-container));
  color: var(--brand-component-message-text-information, var(--brand-color-light-informative-on-informative-container));
}
.message--information .message__icon,
.message--information .message__accent {
  fill: var(--brand-component-message-accent-information, var(--brand-color-light-informative-informative));
  background: var(--brand-component-message-accent-information, var(--brand-color-light-informative-informative));
}
.message--critical {
  background: var(--brand-component-message-container-critical, var(--brand-color-light-critical-critical-container));
  color: var(--brand-component-message-text-critical, var(--brand-color-light-critical-on-critical-container));
}
.message--critical .message__icon,
.message--critical .message__accent {
  fill: var(--brand-component-message-accent-critical, var(--brand-color-light-critical-critical));
  background: var(--brand-component-message-accent-critical, var(--brand-color-light-critical-critical));
}
.message__icon {
  background: none !important;
}

/* ------------------------------------------------------------- Filter Pill */
.filter-pill {
  display: inline-flex;
  align-items: center;
  border: 0;
  cursor: pointer;
  gap: var(--brand-component-filter-pill-gap);
  padding: var(--brand-component-filter-pill-padding-y) var(--brand-component-filter-pill-padding-x);
  border-radius: var(--brand-component-filter-pill-radius);
  background: var(--brand-component-filter-pill-background-default);
  color: var(--brand-component-filter-pill-text-default);
  font-family: var(--brand-typography-font-family-body), sans-serif;
  font-size: var(--text-style-label-font-size, 0.875rem);
  font-weight: var(--brand-typography-font-weight-emphasis, 500);
}
.filter-pill--small {
  padding-left: var(--brand-component-filter-pill-small-padding-x);
  padding-right: var(--brand-component-filter-pill-small-padding-x);
}
.filter-pill__remove {
  width: 16px;
  height: 16px;
  fill: var(--brand-component-filter-pill-icon-default);
}
.filter-pill:hover {
  background: var(--brand-component-filter-pill-background-hover);
  color: var(--brand-component-filter-pill-text-hover);
}
.filter-pill:hover .filter-pill__remove {
  fill: var(--brand-component-filter-pill-icon-hover);
}

/* -------------------------------------------------------- Segmented Control */
.segmented-control {
  display: inline-flex;
  align-items: center;
  padding: var(--brand-component-segmented-control-padding);
  border-radius: var(--brand-component-segmented-control-radius);
  background: var(--brand-component-segmented-control-background);
  border: 1px solid var(--brand-component-segmented-control-border);
}
.segmented-control__item {
  border: 0;
  cursor: pointer;
  padding: var(--brand-component-segmented-control-item-padding-y) var(--brand-component-segmented-control-item-padding-x);
  border-radius: var(--brand-component-segmented-control-item-radius);
  background: var(--brand-component-segmented-control-item-background-default);
  color: var(--brand-component-segmented-control-item-text-default);
  font-family: var(--brand-typography-font-family-body), sans-serif;
  font-size: var(--text-style-label-font-size, 0.875rem);
  font-weight: var(--brand-typography-font-weight-emphasis, 500);
}
.segmented-control__item:hover {
  background: var(--brand-component-segmented-control-item-background-hover);
  color: var(--brand-component-segmented-control-item-text-hover);
}
.segmented-control__item--active,
.segmented-control__item--active:hover {
  background: var(--brand-component-segmented-control-item-background-active);
  color: var(--brand-component-segmented-control-item-text-active);
}

/* ------------------------------------------------------------- Banner Image */
.banner-image {
  overflow: hidden;
  border-radius: var(--brand-component-banner-image-radius, var(--brand-size-radius-medium));
  aspect-ratio: 1280 / 462;
  background: var(--brand-component-banner-image-placeholder, var(--brand-color-light-surface-surface-alternative));
}
.banner-image--tall {
  aspect-ratio: 1280 / 640;
}
.banner-image__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------- Table */
.table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--brand-component-table-radius, var(--brand-size-radius-small));
  overflow: hidden;
  font-family: var(--brand-typography-font-family-body), sans-serif;
}
.table__caption {
  text-align: left;
  padding-bottom: var(--brand-size-spacing-0-5rem);
  font-weight: var(--brand-typography-font-weight-emphasis, 500);
}
.table__header {
  text-align: left;
  background: var(--brand-component-table-cell-background-header-default, var(--brand-color-light-alpha-primary));
  padding: var(--brand-component-table-cell-padding-y) var(--brand-component-table-cell-padding-x);
  font-size: var(--text-style-label-font-size, 0.875rem);
  font-weight: var(--brand-typography-font-weight-emphasis, 500);
  color: var(--brand-component-table-cell-text, var(--brand-color-light-surface-on-surface));
}
.table__head {
  border-bottom: 2px solid var(--brand-component-table-header-rule, var(--brand-color-light-primary-primary));
}
.table__cell {
  padding: var(--brand-component-table-cell-padding-y) var(--brand-component-table-cell-padding-x);
  font-size: var(--text-style-body-small-font-size, 0.875rem);
  color: var(--brand-component-table-cell-text, var(--brand-color-light-surface-on-surface));
}
.table__row {
  border-bottom: 1px solid var(--brand-component-table-divider, var(--brand-color-light-border-subtle));
}
.table__row:last-child {
  border-bottom: 0;
}
.table__row--stripe {
  background: var(--brand-component-table-cell-background-cell-stripe, var(--brand-color-light-alpha-primary-low));
}

/* ------------------------------------------------------------------- Footer */
/* The vccmhw footer's LinkedIn link is a sprite icon (was an <img> at a dead
 * Magnolia asset path); the skin only sizes `.footer__social-link img`. */
.footer__social-link .icon {
  display: block;
  width: 32px;
  height: 32px;
}

/* ------------------------------------------------ Carousel accessibility */
/* Keep the existing brand chrome; add only the focus affordance that keyboard
 * users need to track which of the compact carousel controls owns input. */
.carousel__nav-button:focus-visible,
.carousel__play-pause:focus-visible,
.carousel__dot:focus-visible,
.slider__prev:focus-visible,
.slider__next:focus-visible,
.slider__body[tabindex]:focus-visible {
  outline: 3px solid var(--brand-component-carousel-icon, currentColor);
  outline-offset: 3px;
}

.slider__body[tabindex]:focus-visible {
  border-radius: var(--brand-size-radius-small, 4px);
}

/* Slider edit layouts hide interaction chrome, but an authored CTA remains a
 * real part of the component preview and must not disappear with the arrows. */
.slider--edit .slider__controls--author {
  display: flex;
}

/* Swiper is lazy-loaded. Until it arrives, preserve a complete keyboard and
 * no-JavaScript fallback instead of clipping focusable cards out of sight. */
.slider__body.swiper:not(.swiper-initialized) {
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.slider__body.swiper:not(.swiper-initialized) .swiper-slide {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__slide,
  .carousel__dot,
  .slider .swiper-wrapper {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------- Hero motion control */
/* The control is a sibling of the masked media rather than its child. Page
 * header shapes and the home-hero edge fade therefore cannot clip the one
 * control that lets a visitor stop motion. */
.pagekit-motion-video__control {
  position: absolute;
  z-index: 4;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  inset-block-end: clamp(1rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--brand-color-light-border-default, #403d3e);
  border-radius: var(--brand-size-radius-full, 999px);
  background: var(--brand-color-light-material-level-0, #fff);
  color: var(--brand-color-light-surface-on-surface, #231f20);
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
  cursor: pointer;
}

.pagekit-motion-video__control[hidden] {
  display: none;
}

.pagekit-motion-video__control:hover {
  background: var(--brand-color-light-primary-primary-container, #f1f7de);
}

.pagekit-motion-video__control:focus-visible {
  outline: 3px solid var(--brand-color-light-primary-primary-outline, currentColor);
  outline-offset: 3px;
}

.pagekit-motion-video__icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .pagekit-motion-video__control {
    transition: none;
  }
}

/* ---------------------------------------------------- Public media access */
/* Native controls are the resilient baseline for authored audio and uploaded
 * video. The legacy stylesheet hid the real audio element because it expected
 * a custom player runtime that was never included in the public bundle. */
.audio__source.audio__source--native {
  display: block;
  width: 100%;
  min-height: 3rem;
}

.video__player--native {
  display: block;
}

.media-transcript {
  margin-block-start: var(--brand-size-spacing-1rem, 1rem);
  color: var(--brand-color-light-surface-on-surface, #231f20);
}

.media-transcript__details {
  border: 1px solid var(--brand-color-light-border-default, #8e8c8c);
  border-radius: var(--brand-size-radius-small, 4px);
  background: var(--brand-color-light-material-level-0, #fff);
}

.media-transcript__summary {
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  font-weight: var(--brand-typography-font-weight-emphasis, 700);
  cursor: pointer;
}

.media-transcript__summary:focus-visible,
.media-transcript__link:focus-visible,
.image-gallery__item:focus-visible {
  outline: 3px solid var(--brand-color-light-primary-primary-outline, currentColor);
  outline-offset: 3px;
}

.media-transcript__text {
  padding: 0 1rem 1rem;
  white-space: pre-wrap;
}

.media-transcript__link-wrap {
  margin-block: 0.75rem 0;
}

.image-gallery__lightbox {
  overflow: auto;
  overscroll-behavior: contain;
}

.image-gallery__lightbox-prev[aria-disabled="true"],
.image-gallery__lightbox-next[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .image-gallery__lightbox,
  .image-gallery__lightbox-content,
  .image-gallery__lightbox-image {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}