/* AfterWorkTV — rotary "fan" video carousel ([kortkod-arkiv-lista]) + filter ([kortkod-arkiv-filter]). */
.awtv-arkiv {
  --awtv-radius: 50px;          /* card/thumbnail radius — matches the main video player */
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 0;
}

/* --- Search ([kortkod-arkiv-filter]) — full width, styled like the header CTA ----- */
.awtv-search {
  --awtv-search-radius: 25px;   /* half of the video player's 50px */
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

/* Input + embedded auto/manual switch share one relative wrapper. */
.awtv-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.awtv-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  padding: 10px 118px 10px 18px;   /* right room for the "Direkt" label + switch */
  border-radius: var(--awtv-search-radius) !important;   /* match the button (Elementor otherwise overrides) */
  border: 0;                       /* no border */
  background: #fff;
  color: #111;
  font: inherit;
  box-sizing: border-box;
}
.awtv-search-input::placeholder { color: #888; font-size: 0.72rem; } /* same size as the "Direkt" label */
/* Focus ring in the primary colour at 50% opacity. */
.awtv-search-input:focus {
  outline: 2px solid color-mix(in srgb, var(--e-global-color-primary, #d600a8) 50%, transparent);
  outline-offset: 2px;
}

/* Embedded switch: auto-search (live) vs search-on-button. Vertically centred, right side. */
.awtv-search-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #777;
  cursor: pointer;
  user-select: none;
}
.awtv-search-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.awtv-search-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #ccc;
  transition: background 0.2s ease;
  flex: 0 0 auto;
}
.awtv-search-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.awtv-search-toggle input:checked + .awtv-search-switch { background: var(--e-global-color-primary, #d600a8); }
.awtv-search-toggle input:checked + .awtv-search-switch::after { transform: translateX(16px); }
.awtv-search-toggle input:focus-visible + .awtv-search-switch { outline: 2px solid #61cef1; outline-offset: 2px; }

.awtv-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--awtv-search-radius);
  background: var(--e-global-color-primary, #d600a8);
  color: #000;                     /* black text */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Hover background colour. */
.awtv-search-btn:hover,
.awtv-search-btn:focus-visible { background-color: #397e95; }
.awtv-search-btn:focus-visible { outline: 2px solid #61cef1; outline-offset: 2px; }

/* ===== Mobile: button-only search + even spacing ===== */
@media (max-width: 767px) {
  /* Hide the "Direkt" switch (search is button-only here) and reclaim the input's right padding. */
  .awtv-search-toggle { display: none !important; }
  .awtv-search-input { padding-right: 18px !important; }

  /* The search sits 4 containers deep (b7e02c3 > e22021d > 5a3d981 > 6a7643e); their stacked
     gaps + padding made the gap UP to the text much bigger than the gap DOWN to the cards.
     Collapse those wrappers and set an even gap on the search itself. */
  .elementor-element-b7e02c3,
  .elementor-element-e22021d,
  .elementor-element-5a3d981,
  .elementor-element-6a7643e {
    gap: 0 !important;
    row-gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .awtv-search { margin-top: 24px !important; margin-bottom: 24px !important; }
  .awtv-arkiv { margin-top: 0 !important; }
}

/* --- Fan carousel --------------------------------------------------------- */
.awtv-fan {
  --awtv-card-w: clamp(170px, 22vw, 225px);
  --awtv-card-h: clamp(227px, 29.3vw, 300px);   /* 3:4 of the width, max 300px tall */
  --awtv-items: 1;                              /* set by JS to the visible count */
  position: relative;
  height: clamp(360px, 52vh, 500px);
  /* Full-bleed: break out of the parent container to span the whole window width,
     so the cards fan out to the window edges (clipped there) instead of the container. */
  width: 100vw;
  max-width: 100vw;
  margin: 24px 0 0;
  margin-left: calc(50% - 50vw);
  /* Open at the top (cards overflow upward); clip the sides at the window edge and the bottom at
     this box. Section spacing is handled with a negative margin on the section in Elementor. */
  overflow: visible;
  clip-path: inset(-1000px 0 0 0);
  touch-action: pan-y;
}

.awtv-fan-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--awtv-card-w);
  height: var(--awtv-card-h);
  margin: calc(var(--awtv-card-h) * -0.5) 0 0 calc(var(--awtv-card-w) * -0.5);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: inherit;
  transform-origin: 0% 100%;                    /* bottom-left pivot → fan */
  transform:
    translate(calc(var(--active, 0) * 800%), calc(var(--active, 0) * 200%))
    rotate(calc(var(--active, 0) * 120deg));
  transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
  z-index: var(--z, 0);
  will-change: transform;
}
/* Reveal the fan only once JS has positioned the cards — avoids the initial "bunched" flash.
   The .awtv-fan--anim class is only added on the frontend (where the JS runs); in the Elementor
   editor the JS is skipped, so the fan has no --anim class and stays visible. */
.awtv-fan--anim { opacity: 0; }
.awtv-fan--anim.is-ready { opacity: 1; transition: opacity 0.45s ease; }
.awtv-fan--anim:not(.is-ready) .awtv-fan-item { transition: none; }

.awtv-fan-item:focus-visible { outline: 3px solid #61cef1; outline-offset: 4px; }
/* Selected card — ~5px outline in the same style as the focused search input (primary @ 50% opacity). */
.awtv-fan-item.is-active .awtv-fan-box {
  outline: 5px solid color-mix(in srgb, var(--e-global-color-primary, #d600a8) 50%, transparent);
  outline-offset: 3px;
}
/* Kill any hover/focus background (e.g. Elementor's button styles) peeking behind the rounded card. */
.awtv-fan-item:hover,
.awtv-fan-item:focus,
.awtv-fan-item:active {
  background: none !important;
  background-image: none !important;
}

.awtv-fan-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--awtv-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.awtv-fan-box::after {                          /* bottom gradient for title legibility */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.awtv-lista-thumb {
  position: absolute;
  inset: 0;
  display: block;
  background-color: #000;
  background-position: center;
  background-size: cover;                       /* full-bleed portrait, like the reference */
  background-repeat: no-repeat;
  border-radius: var(--awtv-radius);            /* clip the image to the rounded mask (incl. bottom corners) */
}

/* Number on the card (like the reference). */
.awtv-fan-num {
  position: absolute;
  top: 14px;
  left: 20px;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Title overlaid at the bottom-left, white. */
.awtv-lista-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px 18px;
  pointer-events: none;
}
.awtv-lista-title {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.awtv-lista-len {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

/* --- States --------------------------------------------------------------- */
.awtv-noresult { color: #fff; padding: 12px 6px; }
.awtv-lista--empty { color: #fff; padding: 16px; }

@media (prefers-reduced-motion: reduce) {
  .awtv-fan-item { transition: none; }
}