/* KingSport V2 · official KOL and award continuation
 * Design system: KingSport / design-systems/kingsport/DESIGN.md
 * Structural family: product catalogue -> campaign proof ribbon -> award evidence
 * Mode: health + trust. Evidence: verified.
 */
@import url("award-integration-directions-round1/shared/awards.css");

.ks-kol-preview {
  display: grid;
  width: min(100%, var(--container-max));
  height: 392px;
  grid-template-columns: minmax(0, 49fr) minmax(228px, 21fr) minmax(392px, 30fr);
  grid-template-rows: minmax(0, 1fr) auto;
  margin: calc(0px - var(--section-y-tablet)) auto 0;
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
}

.ks-kol-preview__campaign {
  position: relative;
  min-width: 0;
  height: 100%;
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid var(--border-soft);
  background: var(--surface-warm);
}

.ks-kol-preview__campaign > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 54%;
  transform: scale(1.32);
  transform-origin: 48% 54%;
}

.ks-kol-preview__caption {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  max-width: 48ch;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: color-mix(in oklab, var(--surface), transparent 5%);
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(var(--space-2));
}

.ks-kol-preview__caption strong {
  display: block;
  font-size: var(--text-base);
  line-height: 1.25;
}

.ks-kol-preview__caption span {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.ks-kol-preview__bridge {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  background: var(--accent-active);
  color: var(--accent-on);
}

.ks-kol-preview__bridge-inner {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
}

.ks-kol-preview__bridge h2 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(27px, 2.25vw, 34px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.ks-kol-preview__bridge p {
  max-width: 29ch;
  margin: var(--space-4) 0 0;
  color: color-mix(in oklab, var(--accent-on), transparent 10%);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.ks-kol-preview__stories {
  display: grid;
  min-width: 0;
  grid-column: 3;
  grid-row: 1 / 3;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

.ks-kol-preview__story {
  display: grid;
  min-width: 0;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  padding: var(--space-2) 0 var(--space-3);
}

.ks-kol-preview__story + .ks-kol-preview__story {
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

.ks-kol-preview__media {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
}

.ks-kol-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform var(--motion-base) var(--ease-standard);
}

.ks-kol-preview__story:hover .ks-kol-preview__media img { transform: scale(1.018); }

.ks-kol-preview__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-1) 0 0;
}

.ks-kol-preview__copy time {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.ks-kol-preview__copy h3 {
  min-width: 0;
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}

.ks-kol-preview__copy p {
  display: -webkit-box;
  max-width: 39ch;
  margin: var(--space-2) 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ks-kol-preview__story-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  margin-top: auto;
  border-bottom: 1px solid currentColor;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 750;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.ks-kol-preview__story-link:hover { color: var(--accent-hover); transform: translateY(-1px); }
.ks-kol-preview__story-link:active { color: var(--accent-active); transform: translateY(1px); }
.ks-kol-preview__story-link:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent), transparent 62%); outline-offset: 3px; }
.ks-kol-preview__story-link[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.ks-kol-preview__story-link[data-state="loading"] { cursor: progress; opacity: .68; }
.ks-kol-preview__story-link[data-state="error"] { color: var(--danger); }
.ks-kol-preview__story-link[data-state="success"] { color: var(--success); }

.ks-kol-preview__source {
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: var(--space-3) var(--space-6) var(--space-4);
  border-top: 1px solid color-mix(in oklab, var(--accent-on), transparent 78%);
  background: var(--accent-active);
  color: color-mix(in oklab, var(--accent-on), transparent 24%);
  font-size: 11px;
  line-height: 1.4;
}

.ks-kol-preview__source a { color: inherit; text-underline-offset: var(--space-1); }
.ks-kol-preview__source a:hover { color: var(--accent-on); }

@media (max-width: 1100px) {
  .ks-kol-preview {
    height: auto;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    grid-template-rows: 320px auto auto;
  }

  .ks-kol-preview__campaign { grid-column: 1; grid-row: 1 / 3; }
  .ks-kol-preview__bridge { grid-column: 2; grid-row: 1; }
  .ks-kol-preview__source { grid-column: 2; grid-row: 2; }
  .ks-kol-preview__stories { grid-column: 1 / 3; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .ks-kol-preview__story + .ks-kol-preview__story { padding-top: var(--space-2); border-top: 0; border-left: 1px solid var(--border-soft); padding-left: var(--space-5); }
  .ks-kol-preview__copy p { display: block; overflow: visible; -webkit-line-clamp: unset; }
}

@media (max-width: 720px) {
  .ks-kol-preview { display: block; height: auto; margin-top: 0; }
  .ks-kol-preview__campaign { height: 310px; border-right: 0; }
  .ks-kol-preview__campaign > img { object-position: 48% 51%; transform: scale(1.42); }
  .ks-kol-preview__caption { right: var(--container-gutter-phone); bottom: var(--container-gutter-phone); left: var(--container-gutter-phone); }
  .ks-kol-preview__bridge-inner { padding: var(--space-6) var(--container-gutter-phone); }
  .ks-kol-preview__bridge h2 { font-size: 28px; }
  .ks-kol-preview__bridge p { max-width: 48ch; }
  .ks-kol-preview__source { padding-inline: var(--container-gutter-phone); }
  .ks-kol-preview__stories { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--container-gutter-phone); }
  .ks-kol-preview__story { min-height: 196px; grid-template-columns: 112px minmax(0, 1fr); }
  .ks-kol-preview__story + .ks-kol-preview__story { padding-top: var(--space-3); padding-left: 0; border-top: 1px solid var(--border-soft); border-left: 0; }
  .ks-kol-preview__copy p { display: block; overflow: visible; -webkit-line-clamp: unset; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-kol-preview *,
  .ks-kol-preview *::before,
  .ks-kol-preview *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}