/**
 * Card primitives
 * Base cards, listing cards, artist cards, album cards, cohort cards, review cards
 */
@layer ks-primitives {
  /* ==========================================================================
     Base Card Variants
     ========================================================================== */

  .ks-card-default,
  .ks-card-muted,
  .ks-card-feature {
    border-radius: var(--ks-radius-md);
    border: var(--ks-border-width) solid var(--ks-color-border-subtle);
    box-shadow: var(--ks-shadow-sm);
  }

  a:where(.ks-card-default, .ks-card-muted, .ks-card-feature) {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .ks-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ks-space-3);
    min-block-size: 100%;
    padding: var(--ks-space-6);
    border: var(--ks-border-width-strong) dashed var(--ks-color-border-default);
    border-radius: var(--ks-radius-md);
    color: var(--ks-color-text-muted);
    text-align: center;
    text-decoration: none;
    transition:
      border-color var(--ks-duration-base) var(--ks-ease-standard),
      color var(--ks-duration-base) var(--ks-ease-standard),
      background-color var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-card-add:hover,
  .ks-card-add:focus-visible {
    border-color: var(--ks-color-primary-600);
    color: var(--ks-color-primary-700);
    background-color: var(--ks-color-primary-50);
  }

  .ks-card-default {
    background-color: var(--ks-color-surface-card);
    color: var(--ks-color-text-default);
  }

  .ks-card-hover:hover {
    box-shadow: var(--ks-shadow-md);
    transition: box-shadow var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-card-glass {
    background-color: var(--ks-color-overlay-inverse);
    backdrop-filter: blur(8px);
    border-radius: var(--ks-radius-md);
  }

  .ks-card-glass--bordered {
    border: var(--ks-border-width) solid var(--ks-color-overlay-inverse-light);
  }

  .ks-card-muted {
    background-color: var(--ks-color-surface-section);
    color: var(--ks-color-text-default);
  }

  .ks-card-feature {
    background:
      linear-gradient(
        135deg,
        var(--ks-color-primary-50),
        var(--ks-color-tertiary-50)
      );
    color: var(--ks-color-text-strong);
  }

  .dark .ks-card-feature {
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--ks-color-primary-900) 55%, var(--ks-color-surface-section)),
        var(--ks-color-surface-section)
      );
    color: var(--ks-color-text-default);
  }

  .ks-spotlight-shell {
    border: var(--ks-border-width) solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-lg);
    background:
      radial-gradient(
        circle at top right,
        color-mix(in srgb, var(--ks-color-primary-200) 60%, transparent),
        transparent 40%
      ),
      radial-gradient(
        circle at bottom left,
        color-mix(in srgb, var(--ks-color-tertiary-200) 75%, transparent),
        transparent 45%
      ),
      linear-gradient(
        135deg,
        var(--ks-color-primary-50),
        var(--ks-color-surface-page) 52%,
        var(--ks-color-tertiary-50)
      );
    box-shadow: var(--ks-shadow-lg);
    color: var(--ks-color-text-strong);
  }

  .dark .ks-spotlight-shell {
    border-color: color-mix(in srgb, var(--ks-color-text-inverse) 12%, transparent);
    background:
      radial-gradient(
        circle at top right,
        color-mix(in srgb, var(--ks-color-primary-500) 24%, transparent),
        transparent 42%
      ),
      radial-gradient(
        circle at bottom left,
        color-mix(in srgb, var(--ks-color-tertiary-500) 22%, transparent),
        transparent 48%
      ),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--ks-color-primary-900) 68%, var(--ks-color-surface-section)),
        var(--ks-color-surface-section) 55%,
        color-mix(in srgb, var(--ks-color-tertiary-900) 50%, var(--ks-color-surface-section))
      );
    color: var(--ks-color-text-default);
  }

  .ks-spotlight-panel {
    border: var(--ks-border-width) solid color-mix(in srgb, var(--ks-color-surface-card) 82%, var(--ks-color-border-subtle));
    border-radius: var(--ks-radius-lg);
    background-color: color-mix(in srgb, var(--ks-color-surface-card) 88%, transparent);
    box-shadow: var(--ks-shadow-md);
    backdrop-filter: blur(12px);
  }

  .dark .ks-spotlight-panel {
    border-color: color-mix(in srgb, var(--ks-color-text-inverse) 12%, transparent);
    background-color: color-mix(in srgb, var(--ks-color-surface-card) 72%, transparent);
  }

  .ks-spotlight-badge {
    box-shadow: var(--ks-shadow-md);
  }

  .ks-card-primary-outline {
    border: var(--ks-border-width-strong) solid var(--ks-color-primary-200);
    border-radius: var(--ks-radius-md);
    background-color: var(--ks-color-surface-page);
    color: var(--ks-color-text-default);
  }

  .ks-card-frame {
    position: relative;
    overflow: hidden;
  }

  .ks-card-body {
    padding: var(--ks-space-4);
  }

  .ks-card-padded {
    padding: var(--ks-space-6);
  }

  .ks-card-padded-lg {
    padding: var(--ks-space-8);
  }

  /* Fixed-width card for horizontal scrollers/clusters */
  .ks-card-fixed {
    inline-size: 220px;
    flex-shrink: 0;
  }

  .ks-card-dark {
    background: var(--ks-color-gray-800, #1f2937);
    color: var(--ks-color-gray-100, #f3f4f6);
  }

  .ks-card-primary {
    background: linear-gradient(to right, var(--ks-color-primary-600), var(--ks-color-primary-700));
    color: var(--ks-color-white);
  }

  .ks-card-footer-row {
    padding-block-start: var(--ks-space-3);
    border-block-start: var(--ks-border-width) solid var(--ks-color-border-subtle);
  }

  /* ==========================================================================
     Interactive Card Effects
     ========================================================================== */

  .ks-card-interactive {
    transition:
      transform var(--ks-duration-fast) var(--ks-ease-emphasis),
      box-shadow var(--ks-duration-base) var(--ks-ease-standard),
      border-color var(--ks-duration-base) var(--ks-ease-standard),
      color var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-card-interactive:hover,
  .ks-card-interactive:focus-within {
    transform: translateY(-0.125rem);
    border-color: var(--ks-color-primary-500);
    box-shadow: var(--ks-shadow-lg);
  }

  .ks-card-accent {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 0.25rem;
    background: linear-gradient(90deg, var(--ks-color-primary-500), var(--ks-color-secondary-500));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-card-interactive:hover .ks-card-accent,
  .ks-card-interactive:focus-within .ks-card-accent {
    transform: scaleX(1);
  }

  .ks-card-media {
    position: relative;
    overflow: hidden;
  }

  .ks-card-media > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--ks-duration-slow) var(--ks-ease-emphasis);
  }

  .ks-card-interactive:hover .ks-card-media > img,
  .ks-card-interactive:focus-within .ks-card-media > img {
    transform: scale(1.05);
  }

  /* ==========================================================================
     Listing Card
     ========================================================================== */

  .ks-listing-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
    cursor: pointer;
    border: var(--ks-border-width) solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-md);
    background-color: var(--ks-color-surface-card);
    color: var(--ks-color-text-default);
    box-shadow: var(--ks-shadow-md);
    transition:
      transform var(--ks-duration-fast) var(--ks-ease-emphasis),
      box-shadow var(--ks-duration-base) var(--ks-ease-standard),
      border-color var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-listing-card:hover,
  .ks-listing-card:focus-within {
    transform: translateY(-0.125rem);
    border-color: var(--ks-color-primary-500);
    box-shadow: var(--ks-shadow-lg);
  }

  /* Strong bottom-up gradient overlay for media (restored from pre-split primitives.css) */
  .ks-overlay-gradient-strong {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      var(--ks-color-overlay-strong),
      var(--ks-color-overlay-subtle) 45%,
      transparent
    );
  }

  /* Hidden until the parent listing card is hovered/focused */
  .ks-hover-reveal {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ks-duration-slow) var(--ks-ease-standard);
  }

  .ks-listing-card:hover .ks-hover-reveal,
  .ks-listing-card:focus-within .ks-hover-reveal {
    opacity: 1;
  }

  .ks-listing-card:hover .ks-overlay-center.ks-hover-reveal,
  .ks-listing-card:focus-within .ks-overlay-center.ks-hover-reveal {
    pointer-events: auto;
  }

  /* Round play button used inside media overlays */
  .ks-play-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ks-space-16);
    block-size: var(--ks-space-16);
    border-radius: var(--ks-radius-full);
    background-color: var(--ks-color-surface-page);
    color: var(--ks-color-primary-600);
    box-shadow: var(--ks-shadow-lg);
    text-decoration: none;
    transition:
      color var(--ks-duration-base) var(--ks-ease-standard),
      background-color var(--ks-duration-base) var(--ks-ease-standard),
      transform var(--ks-duration-fast) var(--ks-ease-emphasis);
  }

  .ks-play-action:hover,
  .ks-play-action:focus-visible {
    background-color: var(--ks-color-surface-section);
    color: var(--ks-color-primary-700);
    transform: scale(1.08);
  }

  .ks-play-action:focus-visible {
    outline: var(--ks-border-width-strong) solid var(--ks-color-primary-400);
    outline-offset: var(--ks-space-1);
  }

  .ks-play-action > :where(svg) {
    margin-inline-start: 0.125rem;
  }

  .ks-listing-card-media {
    position: relative;
    overflow: hidden;
    block-size: calc(var(--ks-space-16) * 4);
  }

  .ks-listing-card-media > a {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    color: inherit;
    text-decoration: none;
  }

  .ks-listing-card-body {
    --ks-listing-card-gap: var(--ks-space-5);

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--ks-listing-card-gap);
    padding: var(--ks-listing-card-gap);
  }

  .ks-listing-card-title {
    margin: 0;
    color: var(--ks-color-text-strong);
    font-family: var(--ks-font-body);
    font-size: var(--ks-space-5);
    font-weight: var(--ks-font-weight-strong);
    line-height: 1.22;
    transition: color var(--ks-duration-base) var(--ks-ease-standard);
  }

  .ks-listing-card-title :where(a) {
    color: inherit;
    text-decoration: none;
  }

  .ks-listing-card-body > section {
    margin: 0;
  }

  .ks-listing-card-body > .ks-stack-sm > * + * {
    margin-block-start: var(--ks-listing-card-gap);
  }

  .ks-listing-card:hover .ks-listing-card-title,
  .ks-listing-card:focus-within .ks-listing-card-title {
    color: var(--ks-color-primary-700);
  }

  /* Horizontal listing card (media beside body from tablet up) */
  @media (min-width: 640px) {
    .ks-listing-card--hz {
      flex-direction: row;
    }

    .ks-listing-card--hz .ks-listing-card-media {
      flex: 0 0 40%;
      block-size: auto;
    }
  }

  .ks-listing-card-artists {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ks-listing-card-artists > li {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-2);
  }

  .ks-listing-card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ks-space-6);
    block-size: var(--ks-space-6);
    border-radius: var(--ks-radius-full);
    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;
    flex: 0 0 auto;
  }

  .ks-listing-card-venue {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-3);
    margin: 0;
    color: var(--ks-color-text-muted);
    font-style: normal;
  }

  .ks-listing-card-venue > :where(svg) {
    color: var(--ks-color-primary-600);
    flex: 0 0 auto;
    margin-block-start: var(--ks-space-1);
  }

  .ks-listing-card-venue strong {
    color: var(--ks-color-text-strong);
  }

  .ks-listing-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ks-space-4);
    margin-block-start: 0;
  }

  /* Dashboard event card variant */
  .ks-dashboard-event-card .ks-listing-card-avatar {
    background-color: var(--ks-color-primary-500);
    background-image: linear-gradient(135deg, var(--ks-color-primary-500), var(--ks-color-secondary-500));
  }

  .ks-dashboard-event-card__meta {
    margin: 0;
    color: var(--ks-color-text-muted);
    font-size: var(--ks-font-size-sm);
  }

  .ks-dashboard-event-card__meta dt,
  .ks-dashboard-event-card__meta dd {
    margin: 0;
  }

  .ks-dashboard-event-card__meta dd {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-1);
  }

  .ks-dashboard-event-card__meta :where(svg) {
    color: var(--ks-color-text-muted);
  }

  .ks-dashboard-event-card .ks-listing-card-footer {
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: var(--ks-space-3);
  }

  .ks-dashboard-event-card .ks-listing-card-footer > .ks-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .ks-listing-card-meta {
    display: inline-grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    gap: var(--ks-space-2);
    margin: 0;
    color: var(--ks-color-primary-800);
  }

  .ks-listing-card-meta > div {
    padding: var(--ks-space-2) var(--ks-space-3);
    border-radius: var(--ks-radius-md);
    background-color: var(--ks-color-primary-100);
  }

  .ks-listing-card-meta :where(div, dd) {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    margin: 0;
    white-space: nowrap;
  }

  :where(.dark) .ks-listing-card-meta {
    color: var(--ks-color-primary-300);
  }

  :where(.dark) .ks-listing-card-meta > div {
    background-color: var(--ks-color-primary-900);
  }

  /* Course card meta modifier */
  .ks-course-card-rich .ks-listing-card-meta {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: var(--ks-space-4);
  }

  .ks-course-card-rich .ks-button + .ks-caption {
    margin-block-start: var(--ks-space-3);
  }

  /* Responsive adjustments */
  @media (max-width: 639px) {
    .ks-listing-card-body {
      --ks-listing-card-gap: var(--ks-space-4);
    }

    .ks-listing-card-footer .ks-button {
      inline-size: 100%;
    }
  }

  @media (max-width: 479px) {
    .ks-listing-card-meta {
      grid-template-columns: 1fr;
    }

    .ks-listing-card-footer .ks-button {
      justify-content: center;
    }
  }

  @media (min-width: 640px) {
    .ks-listing-card-meta {
      grid-template-columns: max-content max-content;
    }

    .ks-listing-card-footer .ks-button {
      inline-size: auto;
    }
  }

  /* ==========================================================================
     Artist Card - Horizontal variant
     ========================================================================== */

  .ks-artist-card-hz {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    overflow: hidden;
    background: var(--ks-color-white);
    transition: box-shadow 0.3s var(--ks-ease-standard);
  }

  :where(.dark) .ks-artist-card-hz {
    background: var(--ks-color-gray-900);
  }

  @media (min-width: 768px) {
    .ks-artist-card-hz {
      flex-direction: row;
      height: 20rem;
    }
  }

  @media (min-width: 1024px) {
    .ks-artist-card-hz {
      height: 24rem;
    }
  }

  .ks-artist-card-hz:hover {
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-artist-card-hz--featured {
    background: linear-gradient(to right, var(--ks-color-primary-50), var(--ks-color-secondary-50), var(--ks-color-primary-50));
  }

  :where(.dark) .ks-artist-card-hz--featured {
    background: linear-gradient(to right, color-mix(in srgb, var(--ks-color-primary-900) 20%, transparent), color-mix(in srgb, var(--ks-color-secondary-900) 20%, transparent), color-mix(in srgb, var(--ks-color-primary-900) 20%, transparent));
  }

  .ks-artist-card-hz__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ks-color-primary-200) 40%, transparent), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
  }

  :where(.dark) .ks-artist-card-hz__shimmer {
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ks-color-primary-600) 20%, transparent), transparent);
    background-size: 200% 100%;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .ks-artist-card-hz__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 12rem;
    flex-shrink: 0;
    z-index: 1;
  }

  @media (min-width: 640px) {
    .ks-artist-card-hz__media {
      height: 14rem;
    }
  }

  @media (min-width: 768px) {
    .ks-artist-card-hz__media {
      width: 20rem;
      height: 100%;
    }
  }

  @media (min-width: 1024px) {
    .ks-artist-card-hz__media {
      width: 24rem;
    }
  }

  .ks-artist-card-hz__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent, color-mix(in srgb, black 20%, transparent));
  }

  @media (min-width: 768px) {
    .ks-artist-card-hz__overlay {
      background: linear-gradient(to right, transparent, transparent, color-mix(in srgb, black 20%, transparent));
    }
  }

  .ks-artist-card-hz__content {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: var(--ks-space-4);
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  @media (min-width: 768px) {
    .ks-artist-card-hz__content {
      padding: var(--ks-space-6);
    }
  }

  .ks-artist-card-hz__name {
    transition: color 0.2s var(--ks-ease-standard);
  }

  .ks-artist-card-hz:hover .ks-artist-card-hz__name {
    color: var(--ks-color-primary-600);
  }

  :where(.dark) .ks-artist-card-hz:hover .ks-artist-card-hz__name {
    color: var(--ks-color-primary-400);
  }

  /* ==========================================================================
     Artist Card - Event variant (tall vertical)
     ========================================================================== */

  .ks-artist-card-event {
    cursor: pointer;
  }

  .ks-artist-card-event__inner {
    position: relative;
    overflow: hidden;
    box-shadow: var(--ks-shadow-xl);
    transition: box-shadow 0.5s var(--ks-ease-standard), transform 0.5s var(--ks-ease-standard);
  }

  .ks-artist-card-event:hover .ks-artist-card-event__inner {
    box-shadow: var(--ks-shadow-xl);
    transform: translateY(-0.5rem);
  }

  .ks-artist-card-event__media {
    position: relative;
    height: 20rem;
    overflow: hidden;
  }

  .ks-artist-card-event__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 33%;
    background: linear-gradient(to top, color-mix(in srgb, black 80%, transparent), transparent);
  }

  .ks-artist-card-event__socials {
    position: absolute;
    top: var(--ks-space-4);
    right: var(--ks-space-4);
    opacity: 0;
    transition: opacity 0.5s var(--ks-ease-standard);
  }

  .ks-artist-card-event:hover .ks-artist-card-event__socials {
    opacity: 1;
  }

  .ks-artist-card-event__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--ks-space-6);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .ks-artist-card-event__underline {
    height: 0.25rem;
    background: linear-gradient(to right, var(--ks-color-primary-400), var(--ks-color-secondary-400));
    border-radius: var(--ks-radius-full);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ks-ease-standard);
  }

  .ks-artist-card-event:hover .ks-artist-card-event__underline {
    transform: scaleX(1);
  }

  .ks-artist-card-event__footer {
    padding: var(--ks-space-4);
    background: linear-gradient(to right, var(--ks-color-primary-50), var(--ks-color-secondary-50));
  }

  :where(.dark) .ks-artist-card-event__footer {
    background: linear-gradient(to right, var(--ks-color-gray-700), var(--ks-color-gray-800));
  }

  /* ==========================================================================
     Artist Card - Default/vertical variant
     ========================================================================== */

  .ks-artist-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    overflow: hidden;
    background: var(--ks-color-white);
    transition: box-shadow 0.3s var(--ks-ease-standard);
  }

  :where(.dark) .ks-artist-card {
    background: var(--ks-color-gray-900);
  }

  .ks-artist-card:hover {
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-artist-card--featured {
    background: linear-gradient(to right, var(--ks-color-primary-50), var(--ks-color-secondary-50), var(--ks-color-primary-50));
  }

  :where(.dark) .ks-artist-card--featured {
    background: linear-gradient(to right, color-mix(in srgb, var(--ks-color-primary-900) 20%, transparent), color-mix(in srgb, var(--ks-color-secondary-900) 20%, transparent), color-mix(in srgb, var(--ks-color-primary-900) 20%, transparent));
  }

  .ks-artist-card__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ks-color-primary-200) 40%, transparent), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
  }

  :where(.dark) .ks-artist-card__shimmer {
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ks-color-primary-600) 20%, transparent), transparent);
    background-size: 200% 100%;
  }

  .ks-artist-card__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 12rem;
    flex-shrink: 0;
    z-index: 1;
  }

  @media (min-width: 640px) {
    .ks-artist-card__media {
      height: 14rem;
    }
  }

  .ks-artist-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent, color-mix(in srgb, black 20%, transparent));
  }

  .ks-artist-card__content {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: var(--ks-space-4);
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  .ks-artist-card__name {
    transition: color 0.2s var(--ks-ease-standard);
  }

  .ks-artist-card:hover .ks-artist-card__name {
    color: var(--ks-color-primary-600);
  }

  :where(.dark) .ks-artist-card:hover .ks-artist-card__name {
    color: var(--ks-color-primary-400);
  }

  /* ==========================================================================
     Album Card - vertical/compact/featured variants
     ========================================================================== */

  .ks-album-card {
    display: flex;
    flex-direction: column;
    width: 20rem;
    background: var(--ks-color-white);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s var(--ks-ease-standard);
  }

  :where(.dark) .ks-album-card {
    background: var(--ks-color-gray-800);
  }

  .ks-album-card:hover {
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-album-card--compact {
    width: 16rem;
  }

  .ks-album-card--featured {
    ring: 2px solid var(--ks-color-primary-500);
  }

  .ks-album-card__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .ks-album-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--ks-color-gray-200);
  }

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

  .ks-album-card__type-badge {
    position: absolute;
    top: var(--ks-space-3);
    right: var(--ks-space-3);
    z-index: 1;
  }

  .ks-album-card__featured-badge {
    position: absolute;
    top: var(--ks-space-4);
    left: var(--ks-space-4);
    z-index: 1;
  }

  .ks-album-card__title {
    transition: color 0.2s var(--ks-ease-standard);
  }

  .ks-album-card:hover .ks-album-card__title {
    color: var(--ks-color-primary-600);
  }

  :where(.dark) .ks-album-card:hover .ks-album-card__title {
    color: var(--ks-color-primary-400);
  }

  .ks-album-card__platform {
    opacity: 1;
    transition: opacity 0.2s var(--ks-ease-standard);
  }

  .ks-album-card__platform:hover {
    opacity: 0.8;
  }

  /* ==========================================================================
     Album Card - horizontal variant
     ========================================================================== */

  .ks-album-card-hz {
    display: flex;
    flex-direction: column;
    background: var(--ks-color-white);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    overflow: hidden;
    transition: box-shadow 0.3s var(--ks-ease-standard);
  }

  :where(.dark) .ks-album-card-hz {
    background: var(--ks-color-gray-800);
  }

  @media (min-width: 768px) {
    .ks-album-card-hz {
      flex-direction: row;
    }
  }

  .ks-album-card-hz:hover {
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-album-card-hz__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 12rem;
    flex-shrink: 0;
  }

  @media (min-width: 768px) {
    .ks-album-card-hz__media {
      width: 12rem;
      height: auto;
    }
  }

  @media (min-width: 1024px) {
    .ks-album-card-hz__media {
      width: 16rem;
    }
  }

  .ks-album-card-hz__content {
    flex: 1;
    min-width: 0;
    padding: var(--ks-space-6);
    display: flex;
    flex-direction: column;
  }

  /* ==========================================================================
     Cohort Card
     ========================================================================== */

  .ks-cohort-card {
    background: var(--ks-color-surface-card);
    border-radius: var(--ks-radius-lg);
    box-shadow: var(--ks-shadow-xl);
    overflow: hidden;
    transition: box-shadow 300ms var(--ks-ease-standard);
  }

  .ks-cohort-card:hover {
    box-shadow: var(--ks-shadow-xl);
  }

  :where(.dark) .ks-cohort-card {
    background: var(--ks-color-gray-800);
  }

  .ks-cohort-card__inner {
    display: flex;
    flex-direction: column;
  }

  .ks-cohort-card--horizontal .ks-cohort-card__inner {
    flex-direction: column;
  }

  @media (min-width: 1024px) {
    .ks-cohort-card--horizontal .ks-cohort-card__inner {
      flex-direction: row;
    }
  }

  .ks-cohort-card__media {
    position: relative;
    height: 14rem;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .ks-cohort-card__media {
      height: 18rem;
    }
  }

  .ks-cohort-card--horizontal .ks-cohort-card__media {
    flex-shrink: 0;
  }

  @media (min-width: 1024px) {
    .ks-cohort-card--horizontal .ks-cohort-card__media {
      width: 40%;
      height: auto;
      align-self: stretch;
    }
  }

  .ks-cohort-card__media-inner {
    width: 100%;
    height: 100%;
  }

  @media (min-width: 1024px) {
    .ks-cohort-card--horizontal .ks-cohort-card__media-inner {
      position: absolute;
      inset: 0;
    }
  }

  .ks-cohort-card__media img,
  .ks-cohort-card__media picture,
  .ks-cohort-card__media picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ks-cohort-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ks-color-primary-500), var(--ks-color-secondary-600));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ks-cohort-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 50%, transparent);
  }

  .ks-cohort-card--horizontal .ks-cohort-card__gradient {
    background: linear-gradient(to top, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 50%, transparent);
  }

  @media (min-width: 1024px) {
    .ks-cohort-card--horizontal .ks-cohort-card__gradient {
      background: linear-gradient(to right, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 50%, transparent);
    }
  }

  .ks-cohort-card__level {
    position: absolute;
    top: var(--ks-space-5);
    left: var(--ks-space-5);
  }

  .ks-cohort-card__seats {
    position: absolute;
    bottom: var(--ks-space-5);
    right: var(--ks-space-5);
    padding: 0.375rem var(--ks-space-4);
    background: var(--ks-color-secondary-600);
    color: white;
    font-size: 0.875rem;
    font-weight: var(--ks-font-weight-semibold);
    border-radius: var(--ks-radius-full);
    box-shadow: var(--ks-shadow-lg);
    animation: ks-blink 1.5s ease-in-out infinite;
  }

  .ks-cohort-card--horizontal .ks-cohort-card__seats {
    right: auto;
    left: var(--ks-space-5);
  }

  .ks-cohort-card__content {
    padding: var(--ks-space-6);
  }

  @media (min-width: 768px) {
    .ks-cohort-card__content {
      padding: var(--ks-space-8);
    }
  }

  @media (min-width: 1024px) {
    .ks-cohort-card--horizontal .ks-cohort-card__content {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .ks-cohort-card__instructor {
    display: flex;
    align-items: center;
    gap: var(--ks-space-3);
  }

  .ks-cohort-card__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--ks-font-weight-bold);
    font-size: 1.125rem;
    flex-shrink: 0;
  }

  @media (min-width: 768px) {
    .ks-cohort-card__avatar {
      width: 3rem;
      height: 3rem;
    }
  }

  .ks-cohort-card__avatar img,
  .ks-cohort-card__avatar picture,
  .ks-cohort-card__avatar picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ks-cohort-card__details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ks-space-3);
  }

  .ks-cohort-card--horizontal .ks-cohort-card__details {
    gap: var(--ks-space-2);
  }

  .ks-cohort-card__detail {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-2);
    color: var(--ks-color-text-default);
  }

  :where(.dark) .ks-cohort-card__detail {
    color: var(--ks-color-gray-300);
  }

  .ks-cohort-card__features {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .ks-cohort-card--horizontal .ks-cohort-card__features {
    display: grid;
    grid-template-columns: 1fr;
  }

  @media (min-width: 1024px) {
    .ks-cohort-card--horizontal .ks-cohort-card__features {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .ks-cohort-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-2);
    font-size: 0.875rem;
    color: var(--ks-color-text-muted);
  }

  :where(.dark) .ks-cohort-card__feature {
    color: var(--ks-color-gray-300);
  }

  .ks-cohort-card__countdown {
    padding: var(--ks-space-3);
    background: linear-gradient(to right, var(--ks-color-secondary-50), var(--ks-color-secondary-100));
    border-radius: var(--ks-radius-md);
    border-left: 4px solid var(--ks-color-secondary-600);
  }

  :where(.dark) .ks-cohort-card__countdown {
    background: linear-gradient(to right, color-mix(in srgb, var(--ks-color-secondary-900) 30%, transparent), color-mix(in srgb, var(--ks-color-secondary-800) 30%, transparent));
  }

  .ks-cohort-card__countdown-value {
    font-size: 1.25rem;
    font-weight: var(--ks-font-weight-bold);
    color: var(--ks-color-secondary-600);
  }

  :where(.dark) .ks-cohort-card__countdown-value {
    color: var(--ks-color-secondary-400);
  }

  /* Additional cohort card styles */
  .ks-cohort-card__image {
    position: relative;
    height: 8rem;
    overflow: hidden;
  }

  .ks-cohort-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ks-cohort-card__badge {
    position: absolute;
    top: var(--ks-space-2);
    left: var(--ks-space-2);
  }

  /* ==========================================================================
     Review Card
     ========================================================================== */

  .ks-review-card {
    background: var(--ks-color-gray-50);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-space-5);
    box-shadow: var(--ks-shadow-sm);
    transition: box-shadow 200ms var(--ks-ease-standard);
  }

  .ks-review-card:hover {
    box-shadow: var(--ks-shadow-md);
  }

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

  .ks-review-card__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
    background: var(--ks-color-gray-200);
  }

  :where(.dark) .ks-review-card__avatar {
    background: var(--ks-color-gray-600);
  }

  .ks-review-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ks-review-card__avatar-placeholder {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ks-radius-full);
    background: linear-gradient(to bottom right, var(--ks-color-primary-400), var(--ks-color-primary-600));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ks-review-card__quote {
    position: relative;
  }

  .ks-review-card__quote-icon {
    position: absolute;
    top: var(--ks-space-1);
    left: 0;
  }

  /* ==========================================================================
     Event Highlight Card
     ========================================================================== */

  .ks-event-highlight-card {
    position: relative;
    background: var(--ks-color-surface-card);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-space-6);
    border: 2px solid var(--ks-color-primary-100);
    overflow: hidden;
    transition: border-color 300ms var(--ks-ease-standard), box-shadow 300ms var(--ks-ease-standard);
  }

  :where(.dark) .ks-event-highlight-card {
    background: var(--ks-color-gray-800);
    border-color: var(--ks-color-gray-700);
  }

  .ks-event-highlight-card:hover {
    border-color: var(--ks-color-primary-400);
    box-shadow: var(--ks-shadow-xl);
  }

  :where(.dark) .ks-event-highlight-card:hover {
    border-color: var(--ks-color-primary-600);
  }

  .ks-event-highlight-card__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--ks-color-primary-400) 20%, transparent), color-mix(in srgb, var(--ks-color-secondary-400) 20%, transparent));
    border-radius: 0 0 0 100%;
    transform: translate(2rem, -2rem);
    transition: transform 500ms var(--ks-ease-standard);
  }

  .ks-event-highlight-card:hover .ks-event-highlight-card__corner {
    transform: translate(2rem, -2rem) scale(1.5);
  }

  .ks-event-highlight-card__number-wrap {
    position: relative;
  }

  .ks-event-highlight-card__ping {
    position: absolute;
    inset: 0;
    background: var(--ks-color-primary-400);
    border-radius: var(--ks-radius-full);
    animation: ks-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.2;
  }

  @keyframes ks-ping {
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  :where(.dark) .ks-event-highlight-card__ping {
    background: var(--ks-color-primary-500);
  }

  .ks-event-highlight-card__number {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, var(--ks-color-primary-500), var(--ks-color-primary-600));
    border-radius: var(--ks-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: var(--ks-shadow-lg);
    transition: transform 300ms var(--ks-ease-standard);
  }

  :where(.dark) .ks-event-highlight-card__number {
    background: linear-gradient(to bottom right, var(--ks-color-primary-600), var(--ks-color-primary-700));
  }

  .ks-event-highlight-card:hover .ks-event-highlight-card__number {
    transform: scale(1.1);
  }

  .ks-event-highlight-card__accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background: linear-gradient(to right, var(--ks-color-primary-400), var(--ks-color-secondary-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms var(--ks-ease-standard);
  }

  .ks-event-highlight-card:hover .ks-event-highlight-card__accent {
    transform: scaleX(1);
  }

  /* ==========================================================================
     Discipline Card
     ========================================================================== */

  .ks-discipline-card {
    position: relative;
    border-radius: var(--ks-radius-lg);
    overflow: hidden;
    box-shadow: var(--ks-shadow-lg);
    transition: transform 300ms var(--ks-ease-standard), box-shadow 300ms var(--ks-ease-standard);
  }

  .ks-discipline-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-discipline-card__media {
    position: relative;
    height: 16rem;
    overflow: hidden;
  }

  .ks-discipline-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ks-ease-standard);
  }

  .ks-discipline-card:hover .ks-discipline-card__media img {
    transform: scale(1.1);
  }

  .ks-discipline-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 50%, transparent);
    transition: opacity 300ms var(--ks-ease-standard);
  }

  .ks-discipline-card:hover .ks-discipline-card__gradient {
    opacity: 0.9;
  }

  .ks-discipline-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--ks-space-6);
    color: var(--ks-color-white);
  }

  .ks-discipline-card__title {
    font-size: var(--ks-font-size-xl);
    font-weight: 700;
    margin-bottom: var(--ks-space-2);
    transition: transform 300ms var(--ks-ease-standard);
  }

  .ks-discipline-card:hover .ks-discipline-card__title {
    transform: translateY(-0.25rem);
  }

  .ks-discipline-card__meta {
    font-size: 0.875rem;
    opacity: 0.9;
  }

  .ks-discipline-card__badge {
    position: absolute;
    top: var(--ks-space-4);
    right: var(--ks-space-4);
  }

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

  .ks-video-teaser {
    background: var(--ks-color-surface-card);
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    box-shadow: var(--ks-shadow-md);
    border: 1px solid var(--ks-color-gray-100);
    transition: box-shadow 300ms var(--ks-ease-standard), border-color 300ms var(--ks-ease-standard);
  }

  .ks-video-teaser:hover {
    box-shadow: var(--ks-shadow-xl);
    border-color: var(--ks-color-primary-200);
  }

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

  :where(.dark) .ks-video-teaser:hover {
    border-color: var(--ks-color-primary-700);
  }

  .ks-video-teaser__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .ks-video-teaser__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ks-ease-standard);
  }

  .ks-video-teaser:hover .ks-video-teaser__media img {
    transform: scale(1.05);
  }

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

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

  .ks-video-teaser__play-btn {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-color-overlay-inverse-strong);
    border-radius: var(--ks-radius-full);
    color: var(--ks-color-primary-600);
    transition: transform 300ms var(--ks-ease-standard);
  }

  .ks-video-teaser:hover .ks-video-teaser__play-btn {
    transform: scale(1.1);
  }

  .ks-video-teaser__duration {
    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);
  }

  .ks-video-teaser__content {
    padding: var(--ks-space-4);
  }

  .ks-video-teaser__title {
    transition: color 200ms var(--ks-ease-standard);
  }

  .ks-video-teaser:hover .ks-video-teaser__title {
    color: var(--ks-color-primary-600);
  }

  :where(.dark) .ks-video-teaser:hover .ks-video-teaser__title {
    color: var(--ks-color-primary-400);
  }

  /* ============================================
     TESTIMONIALS
     ============================================ */

  .ks-testimonials {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
  }

  .ks-testimonial-card {
    position: relative;
    background: var(--ks-color-surface-section);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    padding: var(--ks-space-4);
    transition: box-shadow 300ms var(--ks-ease-standard);
  }

  @media (min-width: 768px) {
    .ks-testimonial-card { padding: var(--ks-space-8); }
  }

  @media (min-width: 1024px) {
    .ks-testimonial-card { padding: var(--ks-space-12); }
  }

  .ks-testimonial-card:hover { box-shadow: var(--ks-shadow-lg); }

  :where(.dark) .ks-testimonial-card {
    background: var(--ks-color-gray-800);
  }

  .ks-testimonial-quote-icon {
    position: absolute;
    top: -1rem;
    left: -1rem;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--ks-color-primary-500), var(--ks-color-primary-700));
    border-radius: var(--ks-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ks-testimonial-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ks-color-text-default);
    line-height: 1.65;
    margin-bottom: var(--ks-space-4);
  }

  @media (min-width: 1024px) {
    .ks-testimonial-text { font-size: 1.5rem; }
  }
  :where(.dark) .ks-testimonial-text { color: var(--ks-color-gray-300); }

  .ks-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--ks-space-4);
    justify-content: center;
  }

  .ks-testimonial-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-full);
    border: 4px solid var(--ks-color-surface-page);
    box-shadow: var(--ks-shadow-md);
    overflow: hidden;
  }

  .ks-testimonial-avatar img,
  .ks-testimonial-avatar picture,
  .ks-testimonial-avatar picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  :where(.dark) .ks-testimonial-avatar { border-color: var(--ks-color-gray-700); }

  .ks-testimonial-avatar--placeholder {
    background: var(--ks-color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :where(.dark) .ks-testimonial-avatar--placeholder { background: var(--ks-color-gray-600); }

  .ks-testimonial-event {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-color-primary-600);
  }
  :where(.dark) .ks-testimonial-event { color: var(--ks-color-primary-400); }

  .ks-testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: var(--ks-color-surface-page);
    border: none;
    border-radius: var(--ks-radius-full);
    box-shadow: var(--ks-shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 200ms var(--ks-ease-standard), transform 200ms var(--ks-ease-standard);
  }

  .ks-testimonial-nav:hover {
    box-shadow: var(--ks-shadow-lg);
    transform: translateY(-50%) scale(1.1);
  }
  :where(.dark) .ks-testimonial-nav { background: var(--ks-color-gray-800); }

  .ks-testimonial-nav--prev {
    left: 0;
    transform: translateY(-50%) translateX(-1rem);
  }

  .ks-testimonial-nav--prev:hover {
    transform: translateY(-50%) translateX(-1rem) scale(1.1);
  }

  .ks-testimonial-nav--next {
    right: 0;
    transform: translateY(-50%) translateX(1rem);
  }

  .ks-testimonial-nav--next:hover {
    transform: translateY(-50%) translateX(1rem) scale(1.1);
  }

  .ks-testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: var(--ks-space-8);
  }

  .ks-testimonial-dot {
    width: 0.75rem;
    height: 0.75rem;
    padding: 1rem;
    box-sizing: content-box;
    border-radius: var(--ks-radius-full);
    background-clip: content-box;
    background-color: var(--ks-color-gray-300);
    border: none;
    cursor: pointer;
    transition: background-color 200ms var(--ks-ease-standard), transform 200ms var(--ks-ease-standard);
  }

  .ks-testimonial-dot:hover { background-color: var(--ks-color-gray-400); }
  :where(.dark) .ks-testimonial-dot { background-color: var(--ks-color-gray-600); }
  :where(.dark) .ks-testimonial-dot:hover { background-color: var(--ks-color-gray-500); }

  .ks-testimonial-dot.active {
    background-color: var(--ks-color-primary-600);
    transform: scale(1.25);
  }

  .ks-star-rating {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ks-space-6);
  }

  .ks-star-rating--start { justify-content: flex-start; }

  .ks-star-rating svg { fill: var(--ks-color-warning-400); }

  .ks-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ks-space-8);
    margin-top: var(--ks-space-8);
  }

  @media (min-width: 768px) {
    .ks-stats-grid {
      grid-template-columns: repeat(4, 1fr);
      margin-top: var(--ks-space-12);
    }
  }

  /* ==========================================================================
     Instructor Card
     ========================================================================== */

  .ks-instructor-card {
    display: block;
    background: var(--ks-color-gray-800);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-6);
    border: 1px solid var(--ks-color-gray-700);
    transition: box-shadow 300ms var(--ks-ease-standard), border-color 300ms var(--ks-ease-standard);
  }

  @media (min-width: 768px) {
    .ks-instructor-card {
      padding: var(--ks-space-8);
    }
  }

  .ks-instructor-card:hover {
    box-shadow: var(--ks-shadow-xl);
    border-color: var(--ks-color-gray-600);
  }

  .ks-instructor-card__image {
    position: relative;
    width: 9rem;
    height: 9rem;
    margin-inline: auto;
    margin-bottom: var(--ks-space-6);
  }

  @media (min-width: 768px) {
    .ks-instructor-card__image {
      width: 11rem;
      height: 11rem;
    }
  }

  .ks-instructor-card__badge {
    position: absolute;
    bottom: calc(-1 * var(--ks-space-2));
    left: 50%;
    transform: translateX(-50%);
  }

  .ks-instructor-card__arrow {
    background: var(--ks-color-gray-700);
    color: var(--ks-color-gray-400);
    transition: background-color 300ms var(--ks-ease-standard), color 300ms var(--ks-ease-standard);
  }

  .ks-instructor-card:hover .ks-instructor-card__arrow {
    background: var(--ks-color-primary-500);
    color: var(--ks-color-white);
  }

  /* ==========================================================================
     Event List Item
     ========================================================================== */

  .ks-event-list-item {
    padding: var(--ks-space-6);
  }

  .ks-event-list-item__layout {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-event-list-item__layout {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }
  }

  .ks-event-list-item__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-event-list-item__main {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  .ks-event-list-item__image {
    width: 100%;
    flex-shrink: 0;
    border-radius: var(--ks-radius-lg);
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .ks-event-list-item__image {
      width: 10rem;
    }
  }

  .ks-event-list-item__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Author bio social links - make field wrappers invisible to flex layout */
  .author-social-links .field,
  .author-social-links .field__items {
    display: contents;
  }

  /* Article header meta - responsive layout */
  .ks-article-header__meta {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-article-header__meta {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  /* Author bio component - responsive grid layout */
  .ks-author-bio__grid {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-6);
  }

  @media (min-width: 768px) {
    .ks-author-bio__grid {
      flex-direction: row;
    }
  }

  .ks-author-bio__avatar-link {
    display: block;
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    .ks-author-bio__avatar-link {
      margin: 0;
    }
  }

  .ks-author-bio__content {
    text-align: center;
  }

  @media (min-width: 768px) {
    .ks-author-bio__content {
      text-align: start;
    }
  }

  .ks-author-bio__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ks-space-2);
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 768px) {
    .ks-author-bio__actions {
      justify-content: flex-start;
    }
  }

  /* ==========================================================================
     Highlight Card - Video/media highlight grid with play overlay
     ========================================================================== */

  .ks-highlight-header {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
    margin-bottom: var(--ks-space-8);
  }

  @media (min-width: 768px) {
    .ks-highlight-header {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }

  .ks-highlight-year {
    color: var(--ks-color-warning-600);
    margin-left: var(--ks-space-2);
  }

  :where(.dark) .ks-highlight-year {
    color: var(--ks-color-warning-400);
  }

  .ks-highlight-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ks-space-2);
    margin-bottom: var(--ks-space-8);
  }

  .ks-highlight-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-2);
    padding: var(--ks-space-2) var(--ks-space-4);
    border-radius: var(--ks-radius-full);
    font-size: 0.875rem;
    font-weight: var(--ks-font-weight-medium);
    transition: all 200ms var(--ks-ease-standard);
    background: var(--ks-color-surface);
    color: var(--ks-color-text-muted);
    border: 1px solid var(--ks-color-border);
    cursor: pointer;
  }

  .ks-highlight-filter:hover {
    background: var(--ks-color-danger-50);
  }

  :where(.dark) .ks-highlight-filter {
    background: var(--ks-color-gray-800);
    color: var(--ks-color-gray-300);
    border-color: var(--ks-color-gray-700);
  }

  :where(.dark) .ks-highlight-filter:hover {
    background: var(--ks-color-gray-700);
  }

  .ks-highlight-filter.active {
    background: var(--ks-color-danger-600);
    color: white;
    border-color: transparent;
    box-shadow: var(--ks-shadow-md);
  }

  .ks-highlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-highlight-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--ks-space-6);
    }
  }

  @media (min-width: 1024px) {
    .ks-highlight-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .ks-highlight-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--ks-radius-xl);
    cursor: pointer;
    transition: transform 300ms var(--ks-ease-standard), box-shadow 300ms var(--ks-ease-standard);
    aspect-ratio: 4 / 3;
  }

  .ks-highlight-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-highlight-card--featured {
    aspect-ratio: 16 / 10;
  }

  @media (min-width: 768px) {
    .ks-highlight-card--featured {
      grid-column: span 2;
      grid-row: span 2;
      aspect-ratio: 2 / 1;
    }
  }

  .ks-highlight-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .ks-highlight-card__media img,
  .ks-highlight-card__media picture,
  .ks-highlight-card__media picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ks-highlight-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 80%), rgb(0 0 0 / 30%) 50%, transparent);
  }

  .ks-highlight-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ks-highlight-card__play-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ks-radius-full);
    background: rgb(255 255 255 / 20%);
    backdrop-filter: blur(4px);
    border: 2px solid rgb(255 255 255 / 40%);
    transition: transform 300ms var(--ks-ease-standard), background 300ms var(--ks-ease-standard);
  }

  .ks-highlight-card:hover .ks-highlight-card__play-btn {
    transform: scale(1.1);
    background: rgb(255 255 255 / 30%);
  }

  .ks-highlight-card__play-btn--lg {
    width: 4rem;
    height: 4rem;
  }

  @media (min-width: 768px) {
    .ks-highlight-card__play-btn--lg {
      width: 5rem;
      height: 5rem;
    }
  }

  .ks-highlight-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--ks-space-4);
  }

  .ks-highlight-card--featured .ks-highlight-card__content {
    padding: var(--ks-space-5);
  }

  .ks-highlight-card__title {
    font-weight: var(--ks-font-weight-semibold);
    color: white;
    margin-bottom: var(--ks-space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ks-highlight-card__border {
    position: absolute;
    inset: 0;
    border-radius: var(--ks-radius-xl);
    border: 2px solid transparent;
    transition: border-color 300ms var(--ks-ease-standard);
    pointer-events: none;
  }

  .ks-highlight-card:hover .ks-highlight-card__border {
    border-color: rgb(251 191 36 / 50%);
  }

  .ks-highlight-empty {
    text-align: center;
    padding-block: var(--ks-space-12);
  }

  .ks-reset-filter {
    margin-top: var(--ks-space-3);
    color: var(--ks-color-danger-600);
    font-weight: var(--ks-font-weight-medium);
    background: none;
    border: none;
    cursor: pointer;
  }

  .ks-reset-filter:hover {
    text-decoration: underline;
  }

  :where(.dark) .ks-reset-filter {
    color: var(--ks-color-danger-400);
  }

  /* ==========================================================================
     Event Card Horizontal - Horizontal event listing card
     ========================================================================== */

  .ks-event-card-h {
    display: flex;
    flex-direction: column;
    background: var(--ks-color-surface);
    border-radius: var(--ks-radius-xl);
    overflow: hidden;
    box-shadow: var(--ks-shadow-md);
    border: 1px solid var(--ks-color-gray-100);
    transition: box-shadow 300ms var(--ks-ease-standard), border-color 300ms var(--ks-ease-standard);
  }

  @media (min-width: 768px) {
    .ks-event-card-h {
      flex-direction: row;
    }
  }

  .ks-event-card-h:hover {
    box-shadow: var(--ks-shadow-xl);
    border-color: var(--ks-color-primary-200);
  }

  :where(.dark) .ks-event-card-h {
    background: var(--ks-color-gray-800);
    border-color: var(--ks-color-gray-700);
  }

  :where(.dark) .ks-event-card-h:hover {
    border-color: var(--ks-color-primary-600);
  }

  .ks-event-card-h__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .ks-event-card-h__media {
      width: 16rem;
      flex-shrink: 0;
      aspect-ratio: auto;
    }
  }

  .ks-event-card-h__badge-left {
    position: absolute;
    top: var(--ks-space-3);
    left: var(--ks-space-3);
    z-index: 10;
  }

  .ks-event-card-h__badge-right {
    position: absolute;
    top: var(--ks-space-3);
    right: var(--ks-space-3);
    z-index: 10;
  }

  .ks-event-card-h__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 60%);
    pointer-events: none;
  }

  .ks-event-card-h__content {
    flex: 1;
    padding: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-event-card-h__content {
      padding: var(--ks-space-5);
    }
  }

  .ks-event-card-h__title a {
    color: inherit;
    transition: color 150ms var(--ks-ease-standard);
  }

  .group:hover .ks-event-card-h__title a {
    color: var(--ks-color-primary-600);
  }

  :where(.dark) .group:hover .ks-event-card-h__title a {
    color: var(--ks-color-primary-400);
  }

  .ks-event-card-h__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-space-3);
    margin-top: var(--ks-space-3);
  }

  .ks-event-card-h__datetime {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-1);
    padding: var(--ks-space-2) var(--ks-space-3);
    background: var(--ks-color-primary-50);
    border: 1px solid var(--ks-color-primary-100);
    border-radius: var(--ks-radius-lg);
  }

  :where(.dark) .ks-event-card-h__datetime {
    background: color-mix(in srgb, var(--ks-color-primary-900) 30%, transparent);
    border-color: var(--ks-color-primary-800);
  }

  /* ==========================================================================
     Event Info Card - Gradient info display cards
     ========================================================================== */

  .ks-event-info-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--ks-radius-xl);
    background: linear-gradient(135deg, var(--ks-color-primary-500), var(--ks-color-primary-700));
    min-height: 10rem;
  }

  .ks-event-info-card__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ks-color-primary-500), var(--ks-color-primary-700));
    opacity: 0.9;
  }

  .ks-event-info-card__inner {
    position: relative;
    height: 100%;
  }

  .ks-event-info-card__blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
  }

  .ks-event-info-card__content {
    position: relative;
    z-index: 10;
    padding: var(--ks-space-6);
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .ks-event-info-card__value {
    font-family: var(--ks-font-heading);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: var(--ks-font-weight-bold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .ks-event-info-card__value--lg {
    font-family: var(--ks-font-heading);
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: var(--ks-font-weight-bold);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .ks-event-info-card__value--md {
    font-family: var(--ks-font-heading);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: var(--ks-font-weight-bold);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* ==========================================================================
     Festival Components - Festival section and event cards
     ========================================================================== */

  .ks-festival-section {
    background: linear-gradient(
      to right,
      var(--ks-color-surface-section),
      var(--ks-color-surface-page),
      var(--ks-color-surface-section)
    );
  }

  :where(.dark) .ks-festival-section {
    background: linear-gradient(
      to right,
      var(--ks-color-surface-strong),
      var(--ks-color-surface-section),
      var(--ks-color-surface-strong)
    );
  }

  @media (max-width: 767.98px) {
    .ks-festival-section {
      padding-block-start: var(--ks-space-6);
    }
  }

  .ks-festival-highlights {
    padding-block: var(--ks-space-4);
    background: var(--ks-color-surface-muted);
    overflow-x: hidden;
  }

  @media (min-width: 640px) {
    .ks-festival-highlights {
      padding-block: var(--ks-space-8);
    }
  }

  @media (min-width: 768px) {
    .ks-festival-highlights {
      padding-block: var(--ks-space-16);
    }
  }

  :where(.dark) .ks-festival-highlights {
    background: var(--ks-color-gray-900);
  }

  .ks-festival-events {
    overflow-x: hidden;
  }

  .ks-festival-events__scroll {
    display: flex;
    gap: var(--ks-space-6);
    overflow-x: auto;
    padding-bottom: var(--ks-space-4);
    margin: 0 calc(-1 * var(--ks-space-4));
    padding-left: var(--ks-space-4);
    padding-right: var(--ks-space-4);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ks-festival-events__scroll::-webkit-scrollbar {
    display: none;
  }

  .ks-festival-event-card {
    flex: none;
    width: 18rem;
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .ks-festival-event-card {
      width: 20rem;
    }
  }

  .ks-festival-event-card__link {
    display: block;
    position: relative;
    background: var(--ks-color-surface);
    border-radius: var(--ks-radius-2xl);
    overflow: hidden;
    box-shadow: var(--ks-shadow-lg);
    border: 1px solid var(--ks-color-gray-100);
    transition: box-shadow 300ms var(--ks-ease-standard);
  }

  .ks-festival-event-card__link:hover {
    box-shadow: var(--ks-shadow-xl);
  }

  :where(.dark) .ks-festival-event-card__link {
    background: var(--ks-color-gray-900);
    border-color: var(--ks-color-gray-800);
  }

  .ks-festival-event-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .ks-festival-event-card__badge {
    position: absolute;
    top: var(--ks-space-3);
    left: var(--ks-space-3);
    display: flex;
    align-items: center;
    gap: var(--ks-space-1);
    padding: var(--ks-space-1) var(--ks-space-3);
    background: color-mix(in srgb, var(--ks-color-surface) 90%, transparent);
    backdrop-filter: blur(8px);
    border-radius: var(--ks-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-color-text);
  }

  :where(.dark) .ks-festival-event-card__badge {
    background: color-mix(in srgb, var(--ks-color-gray-900) 90%, transparent);
    color: var(--ks-color-gray-200);
  }

  .ks-festival-event-card__title {
    transition: color 150ms var(--ks-ease-standard);
  }

  .group:hover .ks-festival-event-card__title {
    color: var(--ks-color-error-600);
  }

  :where(.dark) .group:hover .ks-festival-event-card__title {
    color: var(--ks-color-error-400);
  }

  .ks-festival-impact {
    position: relative;
    background: linear-gradient(to bottom, var(--ks-color-gray-900), var(--ks-color-gray-950));
    color: white;
    overflow: hidden;
  }

  .ks-festival-impact__bg {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
  }

  .ks-festival-impact__glow {
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: var(--ks-radius-full);
    filter: blur(3rem);
  }

  .ks-festival-impact__glow--amber {
    top: 0;
    left: 25%;
    background: var(--ks-color-warning-500);
  }

  .ks-festival-impact__glow--rose {
    bottom: 0;
    right: 25%;
    background: var(--ks-color-error-500);
  }

  .ks-festival-overview__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ks-space-12);
    align-items: center;
  }

  @media (min-width: 1024px) {
    .ks-festival-overview__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .ks-festival-overview__content {
    max-width: 36rem;
  }

  /* ==========================================================================
     Video Sidebar - Tag links in video sidebar
     ========================================================================== */

  .ks-video-sidebar__tags a {
    display: inline-block;
    padding: var(--ks-space-1) var(--ks-space-3);
    background: var(--ks-color-surface-muted);
    color: var(--ks-color-text);
    border-radius: var(--ks-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 150ms var(--ks-ease-standard);
  }

  .ks-video-sidebar__tags a:hover {
    background: var(--ks-color-gray-200);
  }

  :where(.dark) .ks-video-sidebar__tags a {
    background: var(--ks-color-gray-700);
    color: var(--ks-color-gray-300);
  }

  :where(.dark) .ks-video-sidebar__tags a:hover {
    background: var(--ks-color-gray-600);
  }

  /* ==========================================================================
     Featured Artists - Grid of artist avatars
     ========================================================================== */

  .ks-featured-artists {
    overflow-x: hidden;
  }

  .ks-featured-artists__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--ks-space-6);
  }

  @media (min-width: 768px) {
    .ks-featured-artists__grid {
      gap: var(--ks-space-8);
    }
  }

  @media (min-width: 1024px) {
    .ks-featured-artists__grid {
      gap: var(--ks-space-10);
    }
  }

  .ks-artist-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
  }

  .ks-artist-avatar__image-wrap {
    position: relative;
  }

  .ks-artist-avatar__image {
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
    outline: 2px solid color-mix(in srgb, var(--ks-color-warning-500) 50%, transparent);
    transition: all 300ms var(--ks-ease-standard);
  }

  @media (min-width: 768px) {
    .ks-artist-avatar__image {
      width: 5rem;
      height: 5rem;
    }
  }

  .ks-artist-avatar:hover .ks-artist-avatar__image,
  .group:hover .ks-artist-avatar__image {
    outline-color: var(--ks-color-warning-500);
    transform: scale(1.05);
  }

  .ks-artist-avatar__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-color-gray-700);
  }

  .ks-artist-avatar__glow {
    position: absolute;
    inset: 0;
    border-radius: var(--ks-radius-full);
    background: transparent;
    transition: all 300ms var(--ks-ease-standard);
    pointer-events: none;
  }

  .ks-artist-avatar:hover .ks-artist-avatar__glow {
    background: color-mix(in srgb, var(--ks-color-warning-500) 10%, transparent);
  }

  .ks-artist-avatar__name {
    color: var(--ks-color-white);
    font-size: var(--ks-font-size-sm);
    font-weight: 500;
    max-width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 200ms var(--ks-ease-standard);
  }

  @media (min-width: 768px) {
    .ks-artist-avatar__name {
      font-size: var(--ks-font-size-base);
      max-width: 120px;
    }
  }

  .ks-artist-avatar:hover .ks-artist-avatar__name {
    color: var(--ks-color-warning-300);
  }

  .ks-artist-avatar--more .ks-artist-avatar__count {
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-full);
    background: var(--ks-color-gray-800);
    outline: 2px solid var(--ks-color-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms var(--ks-ease-standard);
  }

  @media (min-width: 768px) {
    .ks-artist-avatar--more .ks-artist-avatar__count {
      width: 5rem;
      height: 5rem;
    }
  }

  .ks-artist-avatar--more:hover .ks-artist-avatar__count {
    outline-color: color-mix(in srgb, var(--ks-color-warning-500) 50%, transparent);
    transform: scale(1.05);
  }

  .ks-artist-avatar__label {
    color: var(--ks-color-gray-400);
    font-size: var(--ks-font-size-sm);
    transition: color 200ms var(--ks-ease-standard);
  }

  .ks-artist-avatar--more:hover .ks-artist-avatar__label {
    color: var(--ks-color-warning-300);
  }

  .ks-artist-avatar__arrow {
    opacity: 0;
    transition: opacity 200ms var(--ks-ease-standard);
  }

  .ks-artist-avatar--more:hover .ks-artist-avatar__arrow {
    opacity: 1;
  }

  /* ==========================================================================
     Featured Video Hero - Large featured video card
     ========================================================================== */

  .ks-review-video-hero {
    background: linear-gradient(
      135deg,
      var(--ks-color-primary-800),
      var(--ks-color-secondary-800),
      var(--ks-color-tertiary-800)
    );
  }

  .ks-featured-video-hero {
    margin-block-end: var(--ks-space-6);
  }

  .ks-featured-video-hero > a {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ks-space-4);
    text-decoration: none;
    color: inherit;
  }

  @media (min-width: 768px) {
    .ks-featured-video-hero > a {
      grid-template-columns: 1.5fr 1fr;
      gap: var(--ks-space-6);
    }
  }

  .ks-featured-video-hero__media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--ks-radius-lg);
    overflow: hidden;
  }

  .ks-featured-video-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ks-ease-standard);
  }

  .ks-featured-video-hero:hover .ks-featured-video-hero__media img {
    transform: scale(1.02);
  }

  .ks-featured-video-hero__featured-badge {
    position: absolute;
    top: var(--ks-space-3);
    left: var(--ks-space-3);
  }

  .ks-featured-video-hero__duration {
    position: absolute;
    bottom: var(--ks-space-3);
    right: var(--ks-space-3);
  }

  .ks-featured-video-hero__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ==========================================================================
     Impact Stats - Statistics display grid
     ========================================================================== */

  .ks-impact-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ks-space-4);
  }

  @media (min-width: 1024px) {
    .ks-impact-stats {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--ks-space-6);
    }
  }

  .ks-impact-stat {
    position: relative;
    padding: var(--ks-space-6);
    border-radius: var(--ks-radius-2xl);
    background: color-mix(in srgb, white 5%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
  }

  @media (min-width: 768px) {
    .ks-impact-stat {
      padding: var(--ks-space-8);
    }
  }

  .ks-impact-stat__icon {
    display: inline-flex;
    padding: var(--ks-space-3);
    border-radius: var(--ks-radius-xl);
    margin-bottom: var(--ks-space-4);
  }

  .ks-impact-stat__icon[data-index="0"] {
    background: linear-gradient(to bottom right, var(--ks-color-error-500), var(--ks-color-error-600));
  }

  .ks-impact-stat__icon[data-index="1"] {
    background: linear-gradient(to bottom right, var(--ks-color-warning-500), var(--ks-color-warning-600));
  }

  .ks-impact-stat__icon[data-index="2"] {
    background: linear-gradient(to bottom right, var(--ks-color-success-500), var(--ks-color-success-600));
  }

  .ks-impact-stat__icon[data-index="3"] {
    background: linear-gradient(to bottom right, var(--ks-color-purple-500), var(--ks-color-purple-600));
  }

  .ks-impact-stat__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--ks-space-2);
  }

  @media (min-width: 768px) {
    .ks-impact-stat__value {
      font-size: 3rem;
    }
  }

  .ks-impact-stat__label {
    color: var(--ks-color-gray-400);
    font-size: 0.875rem;
  }

  @media (min-width: 768px) {
    .ks-impact-stat__label {
      font-size: 1rem;
    }
  }

  /* Growth Timeline */
  .ks-growth-timeline {
    margin-top: var(--ks-space-12);
    padding-top: var(--ks-space-12);
    border-top: 1px solid color-mix(in srgb, var(--ks-color-white) 10%, transparent);
  }

  .ks-growth-timeline__track {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-growth-timeline__track {
      flex-direction: row;
      justify-content: center;
      gap: var(--ks-space-4);
    }
  }

  .ks-growth-timeline__card {
    background: color-mix(in srgb, var(--ks-color-white) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-color-white) 15%, transparent);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-4);
    backdrop-filter: blur(8px);
    text-align: center;
    min-width: 140px;
  }

  @media (min-width: 768px) {
    .ks-growth-timeline__card {
      min-width: 160px;
    }
  }

  .ks-growth-timeline__card--future {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--ks-color-warning-500) 20%, transparent),
      color-mix(in srgb, var(--ks-color-danger-500) 20%, transparent)
    );
    border-color: var(--ks-color-warning-500);
  }

  .ks-growth-timeline__arrow {
    color: var(--ks-color-warning-400);
    opacity: 0.6;
  }

  /* ==========================================================================
     Festival Archive Nav
     ========================================================================== */

  .festival-archive-nav {
    background: var(--ks-color-surface);
  }

  /* Timeline visual */
  .festival-timeline {
    display: none;
  }

  @media (min-width: 768px) {
    .festival-timeline {
      display: block;
    }
  }

  .festival-timeline__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .festival-timeline__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ks-space-2);
  }

  .timeline-node {
    width: 1rem;
    height: 1rem;
    border-radius: var(--ks-radius-full);
    border: 2px solid var(--ks-color-gray-300);
    background: var(--ks-color-white);
    cursor: pointer;
    transition: all 200ms var(--ks-ease-standard);
  }

  .timeline-node--active {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ks-color-primary-500);
    border-color: var(--ks-color-primary-500);
  }

  .timeline-node--upcoming {
    border-style: dashed;
    border-color: var(--ks-color-warning-400);
  }

  .timeline-year {
    font-size: var(--ks-font-size-xs);
    color: var(--ks-color-text-muted);
    font-weight: 500;
  }

  .timeline-year--active {
    color: var(--ks-color-primary-600);
    font-weight: 700;
  }

  .timeline-connector {
    width: 3rem;
    height: 2px;
    background: var(--ks-color-gray-200);
  }

  .timeline-connector--fade {
    background: linear-gradient(to right, var(--ks-color-gray-200), transparent);
  }

  /* Edition Buttons */
  .edition-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .edition-buttons {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
  }

  .edition-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ks-space-2);
    padding: var(--ks-space-4);
    background: var(--ks-color-white);
    border: 2px solid var(--ks-color-gray-200);
    border-radius: var(--ks-radius-lg);
    text-decoration: none;
    color: var(--ks-color-text);
    transition: all 200ms var(--ks-ease-standard);
    cursor: pointer;
  }

  .edition-button:hover {
    border-color: var(--ks-color-primary-300);
    box-shadow: var(--ks-shadow-md);
  }

  .edition-button.active {
    background: var(--ks-color-primary-50);
    border-color: var(--ks-color-primary-500);
  }

  :where(.dark) .edition-button {
    background: var(--ks-color-gray-800);
    border-color: var(--ks-color-gray-700);
    color: var(--ks-color-text-inverse);
  }

  .edition-badge {
    font-size: var(--ks-font-size-xs);
    font-weight: 600;
    padding: var(--ks-space-1) var(--ks-space-2);
    border-radius: var(--ks-radius-full);
  }

  .edition-badge--upcoming {
    background: var(--ks-color-warning-100);
    color: var(--ks-color-warning-700);
  }

  .edition-badge--recent {
    background: var(--ks-color-success-100);
    color: var(--ks-color-success-700);
  }

  .edition-button__year {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    font-size: var(--ks-font-size-xl);
    font-weight: 700;
  }

  .edition-calendar-icon {
    color: var(--ks-color-primary-500);
  }

  .edition-stats {
    display: flex;
    align-items: center;
    gap: var(--ks-space-3);
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-text-muted);
  }

  /* ==========================================================================
     Quick Facts - Fact display cards
     ========================================================================== */

  .ks-quick-facts {
    padding: var(--ks-space-6);
    background: var(--ks-color-surface);
    border-radius: var(--ks-radius-lg);
    border: 1px solid var(--ks-color-gray-200);
  }

  :where(.dark) .ks-quick-facts {
    background: var(--ks-color-gray-900);
    border-color: var(--ks-color-gray-700);
  }

  .ks-fact-item {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-1);
  }

  .ks-fact-label {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ks-color-text-muted);
  }

  .ks-fact-value {
    padding: var(--ks-space-2) var(--ks-space-3);
    border-radius: var(--ks-radius-md);
    font-weight: 500;
    background: var(--ks-color-primary-50);
    color: var(--ks-color-primary-700);
  }

  :where(.dark) .ks-fact-value {
    background: color-mix(in srgb, var(--ks-color-primary-900) 20%, transparent);
    color: var(--ks-color-primary-300);
  }

  /* ==========================================================================
     Differentiator - Why choose us cards
     ========================================================================== */

  .ks-differentiator__header {
    max-width: 48rem;
    margin: 0 auto var(--ks-space-12);
  }

  @media (min-width: 768px) {
    .ks-differentiator__header {
      margin-bottom: var(--ks-space-16);
    }
  }

  .ks-differentiator__cards {
    margin-bottom: var(--ks-space-12);
  }

  @media (min-width: 768px) {
    .ks-differentiator__cards {
      margin-bottom: var(--ks-space-16);
    }
  }

  .ks-differentiator__card {
    position: relative;
    background: var(--ks-color-white);
    border-radius: var(--ks-radius-2xl);
    padding: var(--ks-space-8);
    box-shadow: var(--ks-shadow-lg);
    border: 1px solid var(--ks-color-gray-100);
    overflow: hidden;
    text-align: center;
    transition: box-shadow 0.5s var(--ks-ease-standard);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
  }

  @media (min-width: 768px) {
    .ks-differentiator__card {
      padding: var(--ks-space-10);
      text-align: left;
    }
  }

  :where(.dark) .ks-differentiator__card {
    background: var(--ks-color-gray-800);
    border-color: var(--ks-color-gray-700);
  }

  .ks-differentiator__card:hover {
    box-shadow: var(--ks-shadow-2xl);
  }

  .ks-differentiator__glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--ks-color-primary-500) 10%, transparent), color-mix(in srgb, var(--ks-color-secondary-500) 10%, transparent));
    border-radius: var(--ks-radius-full);
    filter: blur(48px);
    transform: translate(8rem, -8rem);
    transition: transform 0.7s var(--ks-ease-standard);
  }

  :where(.dark) .ks-differentiator__glow {
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--ks-color-primary-500) 5%, transparent), color-mix(in srgb, var(--ks-color-secondary-500) 5%, transparent));
  }

  .ks-differentiator__card:hover .ks-differentiator__glow {
    transform: translate(6rem, -6rem);
  }

  .ks-differentiator__glow--secondary {
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--ks-color-secondary-500) 10%, transparent), color-mix(in srgb, var(--ks-color-tertiary-500) 10%, transparent));
  }

  :where(.dark) .ks-differentiator__glow--secondary {
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--ks-color-secondary-500) 5%, transparent), color-mix(in srgb, var(--ks-color-tertiary-500) 5%, transparent));
  }

  .ks-differentiator__icon {
    position: relative;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ks-shadow-lg);
    transition: transform 0.3s var(--ks-ease-standard);
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    .ks-differentiator__icon {
      width: 5rem;
      height: 5rem;
      margin: 0;
    }
  }

  .ks-differentiator__card:hover .ks-differentiator__icon {
    transform: scale(1.1);
  }

  .ks-differentiator__icon--primary {
    background: linear-gradient(to bottom right, var(--ks-color-primary-500), var(--ks-color-primary-600));
  }

  :where(.dark) .ks-differentiator__icon--primary {
    background: linear-gradient(to bottom right, var(--ks-color-primary-600), var(--ks-color-primary-700));
  }

  .ks-differentiator__icon--secondary {
    background: linear-gradient(to bottom right, var(--ks-color-secondary-500), var(--ks-color-secondary-600));
  }

  :where(.dark) .ks-differentiator__icon--secondary {
    background: linear-gradient(to bottom right, var(--ks-color-secondary-600), var(--ks-color-secondary-700));
  }

  /* Improvement Item - feature/update cards with glassmorphism */
  .ks-improvement-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-4);
    background: var(--ks-color-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ks-color-primary-200);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-6);
    box-shadow: var(--ks-shadow-lg);
    transition: border-color 300ms var(--ks-ease-standard);
  }

  .ks-improvement-item:hover {
    border-color: var(--ks-color-primary-400);
  }

  :where(.dark) .ks-improvement-item {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }

  :where(.dark) .ks-improvement-item:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}