/**
 * Media primitives
 * Images, videos, avatars, thumbnails, overlays
 */
@layer ks-primitives {
  /* ==========================================================================
     Media Layer & Cover/Contain
     ========================================================================== */

  .ks-media-layer {
    position: absolute;
    inset: 0;
  }

  .ks-media-contain,
  .ks-media-cover {
    display: flex;
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--ks-color-surface-black);
    overflow: hidden;
  }

  .ks-media-align-end {
    justify-content: flex-end;
  }

  .ks-media-contain :where(a, article, .field, .field__item, .blazy, .media, picture),
  .ks-media-cover :where(a, article, .field, .field__item, .blazy, .media, picture) {
    inline-size: 100%;
    block-size: 100%;
  }

  .ks-media-contain :where(picture),
  .ks-media-cover :where(picture) {
    display: block;
  }

  .ks-media-contain :where(img),
  .ks-media-cover :where(img) {
    display: block;
    block-size: 100%;
    max-inline-size: none;
  }

  .ks-media-contain :where(img) {
    inline-size: 100%;
    object-fit: contain;
  }

  .ks-media-cover :where(img) {
    inline-size: 100%;
    object-fit: cover;
  }

  .ks-media-position-top :where(img) {
    object-position: center top;
  }

  .ks-object-cover {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ==========================================================================
     Media Zoom Effect
     ========================================================================== */

  .ks-media-zoom :where(img) {
    transition: transform var(--ks-duration-slow) var(--ks-ease-emphasis);
  }

  .ks-listing-card:hover .ks-media-zoom :where(img),
  .ks-listing-card:focus-within .ks-media-zoom :where(img),
  .group:hover .ks-media-zoom :where(img),
  .group:focus-within .ks-media-zoom :where(img) {
    transform: scale(1.05);
  }

  /* ==========================================================================
     Media Shapes & Borders
     ========================================================================== */

  .ks-media-circle {
    border-radius: var(--ks-radius-full);
  }

  .ks-media-ring-muted {
    border: var(--ks-border-width-strong) solid var(--ks-color-border-subtle);
  }

  .group:hover .ks-media-ring-muted,
  .group:focus-within .ks-media-ring-muted {
    border-color: var(--ks-color-primary-500);
  }

  /* ==========================================================================
     Media Fluid
     ========================================================================== */

  .ks-media-fluid :where(article, .field, .field__item, .blazy, .media, picture) {
    inline-size: 100%;
  }

  .ks-media-fluid :where(picture) {
    display: block;
  }

  .ks-media-fluid :where(img) {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 100%;
  }

  /* ==========================================================================
     Media Muted & Placeholder
     ========================================================================== */

  .ks-media-muted {
    overflow: hidden;
    background-color: var(--ks-color-surface-muted);
  }

  :where(.dark) .ks-media-muted {
    background-color: var(--ks-color-gray-700);
  }

  .ks-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-color-gray-100);
    color: var(--ks-color-gray-400);
  }

  :where(.dark) .ks-media-placeholder {
    background: var(--ks-color-gray-700);
    color: var(--ks-color-gray-500);
  }

  .ks-media-thumb {
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    flex-shrink: 0;
  }

  /* ==========================================================================
     Overlays
     ========================================================================== */

  .ks-overlay-top,
  .ks-overlay-bottom {
    position: absolute;
    inset-inline: 0;
    z-index: 2;
  }

  .ks-overlay-top {
    inset-block-start: 0;
    padding-block: var(--ks-space-6);
  }

  .ks-overlay-bottom {
    inset-block-end: 0;
    padding-block: var(--ks-space-6);
    background: var(--ks-color-overlay-strong);
    backdrop-filter: blur(12px);
  }

  .ks-overlay-title {
    padding-block: var(--ks-space-2);
    background-color: var(--ks-color-overlay-subtle);
  }

  .ks-showcase-footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
  }

  /* ==========================================================================
     Avatars
     ========================================================================== */

  .ks-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--ks-space-8);
    block-size: var(--ks-space-8);
    overflow: hidden;
    border-radius: var(--ks-radius-full);
  }

  .ks-avatar-sm :where(a, article, .field, .field__item, .blazy, .media, picture) {
    inline-size: 100%;
    block-size: 100%;
  }

  .ks-avatar-sm :where(picture) {
    display: block;
  }

  .ks-avatar-sm :where(img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  .ks-avatar-md {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
  }

  .ks-avatar-md img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ks-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
    border: 2px solid var(--ks-color-primary-400);
    box-shadow: var(--ks-shadow-md);
  }

  .ks-avatar-lg :where(a, article, .field, .field__item, .blazy, .media, picture) {
    inline-size: 100%;
    block-size: 100%;
  }

  .ks-avatar-lg :where(picture) {
    display: block;
  }

  .ks-avatar-lg :where(img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  .ks-avatar-xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--ks-color-primary-400);
    box-shadow: var(--ks-shadow-lg);
  }

  .ks-avatar-xl :where(a, article, .field, .field__item, .blazy, .media, picture) {
    inline-size: 100%;
    block-size: 100%;
  }

  .ks-avatar-xl :where(picture) {
    display: block;
  }

  .ks-avatar-xl :where(img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* Translucent inverse ring around an avatar (for dark/gradient backgrounds) */
  .ks-avatar-ring {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ks-color-text-inverse) 30%, transparent);
  }

  /* Avatar fallback (initials) */
  .ks-avatar-fallback {
    background-color: var(--ks-color-primary-700);
    color: var(--ks-color-text-inverse);
    font-size: 0.75rem;
    font-weight: var(--ks-font-weight-strong);
    line-height: 1;
  }

  .ks-avatar-lg .ks-avatar-fallback {
    font-size: 1.5rem;
  }

  .ks-avatar-xl .ks-avatar-fallback {
    font-size: 2.5rem;
  }

  /* Avatar frame for action buttons */
  .ks-avatar-frame {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
  }

  .ks-avatar-action {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ks-space-2);
    background-color: var(--ks-color-surface-card);
    color: var(--ks-color-text-strong);
    border-radius: var(--ks-radius-full);
    box-shadow: var(--ks-shadow-md);
  }

  .ks-avatar-action:hover,
  .ks-avatar-action:focus-visible {
    background-color: var(--ks-color-surface-section);
  }

  /* Avatar stack (overlapping) */
  .ks-avatar-stack {
    display: flex;
    flex-shrink: 0;
  }

  .ks-avatar-stack > * {
    margin-inline-start: -0.5rem;
  }

  .ks-avatar-stack > *:first-child {
    margin-inline-start: 0;
  }

  .ks-avatar-stack-item {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--ks-color-surface-section);
  }

  .ks-avatar-stack-item :where(a, article, .field, .field__item, .blazy, .media, picture, .media-avatar) {
    inline-size: 100%;
    block-size: 100%;
  }

  .ks-avatar-stack-item :where(picture) {
    display: block;
  }

  .ks-avatar-stack-item :where(img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* ==========================================================================
     Thumbnails
     ========================================================================== */

  .ks-thumb {
    width: 6rem;
    height: 6rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    flex-shrink: 0;
  }

  .ks-thumb :where(img, picture) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .ks-thumb-sm {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    flex-shrink: 0;
  }

  .ks-thumb-md {
    width: 6rem;
    height: 6rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    flex-shrink: 0;
  }

  .ks-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ks-color-secondary-400), var(--ks-color-secondary-600));
    color: var(--ks-color-text-inverse);
  }

  /* ==========================================================================
     Video
     ========================================================================== */

  .ks-video-frame {
    position: relative;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    background-color: var(--ks-color-surface-black);
  }

  .ks-aspect-video {
    aspect-ratio: 16 / 9;
  }

  .ks-aspect-vertical {
    aspect-ratio: 9 / 16;
  }

  .ks-aspect-square {
    aspect-ratio: 1;
  }

  /* Video Modal */
  .ks-video-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-color-overlay-strong);
    backdrop-filter: blur(4px);
    padding: var(--ks-space-4);
  }

  .ks-video-modal__close {
    position: absolute;
    top: var(--ks-space-4);
    right: var(--ks-space-4);
    padding: var(--ks-space-2);
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 200ms var(--ks-ease-standard);
  }

  .ks-video-modal__close:hover {
    color: var(--ks-color-warning-400);
  }

  .ks-video-modal__content {
    position: relative;
    width: 100%;
    max-width: 64rem;
    aspect-ratio: 16 / 9;
    background: black;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
  }

  .ks-video-modal__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Video teaser item (small list item variant) */
  .ks-video-teaser-item {
    display: flex;
    gap: var(--ks-space-3);
    padding: var(--ks-space-2);
    border-radius: var(--ks-radius-md);
    transition: background 200ms var(--ks-ease-standard);
    cursor: pointer;
  }

  .ks-video-teaser-item:hover {
    background: var(--ks-color-gray-100);
  }

  :where(.dark) .ks-video-teaser-item:hover {
    background: var(--ks-color-gray-700);
  }

  .ks-video-teaser-item__thumb {
    position: relative;
    width: 7rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--ks-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
  }

  .ks-video-teaser-item__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-color-overlay-light);
    opacity: 0;
    transition: opacity 200ms var(--ks-ease-standard);
  }

  .ks-video-teaser-item:hover .ks-video-teaser-item__play {
    opacity: 1;
  }

  .ks-media-frame__badge {
    position: absolute;
    bottom: var(--ks-space-2);
    right: var(--ks-space-2);
    padding: var(--ks-space-1) var(--ks-space-2);
    background: var(--ks-color-overlay-heavy);
    color: var(--ks-color-white);
    font-size: var(--ks-font-size-xs);
    font-weight: var(--ks-font-weight-medium);
    border-radius: var(--ks-radius-sm);
  }
}