/*
 * Nyhetsflödet: rörelse och hover.
 *
 * Bara presentation. Markupen är densamma, korten renderas på servern och syns utan JS.
 */

/* Sidbyte: kort övertoning mellan sidor (MPA view transitions, Chromium). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: sk-page-out 140ms ease-in both;
}

::view-transition-new(root) {
  animation: sk-page-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes sk-page-out {
  to {
    opacity: 0;
  }
}

@keyframes sk-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Kort: samma lugna kurva överallt */
.news-stream > .news-teaser,
.news-stream > .news-card {
  --sk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  transition:
    transform 260ms var(--sk-ease),
    box-shadow 260ms var(--sk-ease),
    border-color 260ms var(--sk-ease),
    background-color 260ms var(--sk-ease),
    opacity 260ms var(--sk-ease);
}

/* Accentlinje upptill som växer fram vid hover */
.news-stream > .news-teaser:not(.news-teaser--arena):not(.news-teaser--commercial-ad)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--region-primary), color-mix(in srgb, var(--region-primary) 55%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--sk-ease);
  pointer-events: none;
}

.news-stream > .news-teaser .news-teaser__media img {
  transition: transform 640ms var(--sk-ease), filter 400ms var(--sk-ease);
}

.news-stream > .news-teaser .news-teaser__title,
.news-stream > .news-teaser .news-teaser__excerpt {
  transition: color 200ms var(--sk-ease);
}

.news-stream > .news-teaser .news-teaser__badge {
  transition: transform 220ms var(--sk-ease), box-shadow 220ms var(--sk-ease);
}

@media (hover: hover) and (pointer: fine) {
  .news-stream > .news-teaser:not(.news-teaser--arena):hover {
    transform: translateY(-3px);
    box-shadow:
      0 18px 40px color-mix(in srgb, #000 12%, transparent),
      0 0 0 1px color-mix(in srgb, var(--region-primary) 20%, transparent);
  }

  .news-stream > .news-teaser:not(.news-teaser--arena):hover::after {
    transform: scaleX(1);
  }

  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__link:hover .news-teaser__media img {
    transform: scale(1.045);
  }

  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__link:hover .news-teaser__excerpt {
    color: var(--region-text);
  }

  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__link:hover .news-teaser__badge--category {
    transform: translateY(-1px);
  }

  /* Redaktionell listvy har ingen kortram: ingen linje, ingen lyft */
  .news-stream--editorial > .news-teaser::after {
    display: none;
  }

  .news-stream--editorial > .news-teaser:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Tangentbord: tydlig ram runt hela kortet */
.news-stream > .news-teaser:not(.news-teaser--arena):focus-within {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--region-primary) 55%, transparent),
    0 14px 34px color-mix(in srgb, #000 10%, transparent);
}

.news-stream > .news-teaser .news-teaser__link:focus-visible {
  outline: none;
}

/* Telefon: tryckåterkoppling i stället för hover */
@media (hover: none) {
  .news-stream > .news-teaser:not(.news-teaser--arena):active {
    transform: scale(0.988);
    transition-duration: 110ms;
  }
}

/* Inladdning under vecket */
.news-stream > .is-reveal-pending {
  opacity: 0;
  transform: translateY(18px);
}

.news-stream > .is-reveal-pending.is-revealed {
  animation: sk-card-in 520ms var(--sk-ease) var(--reveal-delay, 0ms) both;
}

@keyframes sk-card-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Klick: det valda kortet trycks in, resten tonas ner tills nästa sida tar över */
.news-stream.is-leaving > .news-teaser:not(.is-leaving),
.news-stream.is-leaving > .news-card:not(.is-leaving) {
  opacity: 0.55;
}

.news-stream > .news-teaser.is-leaving,
.news-stream > .news-card.is-leaving {
  transform: scale(0.985);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--region-primary) 60%, transparent);
}

/* Telefon: lite luft och tydligare hierarki i kortet */
@media (max-width: 639px) {
  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__body {
    padding: 0.9rem 0.95rem 1.05rem;
  }

  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__badges {
    gap: 0.3rem 0.35rem;
  }

  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__meta-info {
    gap: 0.4rem 0.55rem;
  }

  .news-stream > .news-teaser:not(.news-teaser--arena) .news-teaser__excerpt {
    font-size: 0.98rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .news-stream > .is-reveal-pending {
    opacity: 1;
    transform: none;
  }

  .news-stream > .is-reveal-pending.is-revealed {
    animation: none;
  }
}