/* ======================================================================
   assets/css/index.css
   Index-Drawer (links) + Thumbs + Info-Drawer + Fade-in Motion
   ====================================================================== */

:root {
  --thumb-h: 66px;
  --arrowlink-shift: 1.05em;
  --arrowlink-speed: 180ms;
  --arrowlink-delay: 60ms;
}

/* ======================================================================
   Animation: Fade-up (universell nutzbar)
   ====================================================================== */
@keyframes fade-up-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================================
   Arrow-Links (Index, Footer, Info-Links)
   ====================================================================== */

.arrowlink {
  position: relative;
  display: inline-block;
  padding-left: 0;
  text-decoration: none;
  transition: padding-left var(--arrowlink-speed) ease-out;
}

.arrowlink::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--arrowlink-speed) ease-out var(--arrowlink-delay);
}

.arrowlink:hover,
.arrowlink:focus-visible {
  padding-left: var(--arrowlink-shift);
}

.arrowlink:hover::before,
.arrowlink:focus-visible::before {
  opacity: 1;
}

.arrowlink:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.arrowlink.left::before {
  content: "←";
}

@media (hover: none) {
  .arrowlink {
    padding-left: var(--arrowlink-shift);
  }

  .arrowlink::before {
    opacity: 1;
    transition: none;
  }
}

/* Index-Link: Pfeil ↔ X via aria-expanded */
[data-index-toggle]::before {
  content: "→";
}

/* Info-Link: Pfeil ↔ X via aria-expanded */
[data-info-toggle]::before {
  content: "→";
}

/* ======================================================================
   Spinner am Index-Link (via .is-loading)
   ====================================================================== */
@keyframes index-spin {
  to {
    transform: rotate(360deg);
  }
}

[data-index-toggle].is-loading {
  position: relative;
}

[data-index-toggle].is-loading::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  border-top-color: transparent;
  opacity: 0.8;
  animation: index-spin .7s linear infinite;
  pointer-events: none;
}

/* ======================================================================
   Index-Drawer Basis
   ====================================================================== */
.indexpanel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .28s ease;
  z-index: 40;
  overflow: hidden;
}

@media (min-width: 768px) {
  .indexpanel {
    width: max(240px, calc(100vw - var(--stream-w) - 8px));
  }
}

.indexpanel__bleed {
  position: absolute;
  inset: 0;
  background: #fff;
}

.indexpanel__scroller {
  position: absolute;
  inset: 0;
  padding: 0 0 8px 0;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.indexpanel.is-open {
  transform: translateX(0);
}

.indexpanel__overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: transparent;
}

/* Mobile: Stream ausblenden, wenn Drawer offen */
@media (max-width: 767.98px) {
  .indexpanel {
    width: 100vw;
  }

  html.drawer-open .stream,
  html.drawer-open .stream__rail {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* ======================================================================
   Index-Thumbs + Fade-in beim ersten Öffnen
   ====================================================================== */
#index-panel .indexday {
  font-size: 0;
  line-height: 0;
  white-space: normal;
  margin: 0;
  padding: 0;
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  animation: fade-up-in .6s ease-out forwards;
}

#index-panel .indexday:nth-child(n) {
  animation-delay: calc(var(--i, 0) * 50ms);
}

.indexpanel.was-opened #index-panel .indexday {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Abstand zwischen Tagen */
#index-panel .indexday+.indexday {
  margin-top: 8px;
}

/* Thumbs */
#index-panel .indexthumb {
  position: relative;
  display: inline-block;
  height: var(--thumb-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  vertical-align: top;
  background: #eee;
  cursor: pointer;
}

#index-panel .indexthumb picture,
#index-panel .indexthumb img,
#index-panel .indexthumb img.thumbs__img {
  display: block;
  height: 100%;
  width: auto;
  margin: 0;
  padding: 0;
}

#index-panel .indexthumb img.thumbs__img {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

#index-panel .indexthumb img.thumbs__img.is-ready {
  opacity: 1;
}

/* Overlays für S/W und Aufhellung */
#index-panel .indexthumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  mix-blend-mode: saturation;
  opacity: 1;
  transition: opacity 220ms ease-out;
  pointer-events: none;
}

#index-panel .indexthumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 220ms ease-out;
  pointer-events: none;
}

/* Hover/Fokus */
@media (hover:hover) and (pointer:fine) {

  #index-panel .indexday:has(.indexthumb:hover) .indexthumb::before,
  #index-panel .indexday:has(.indexthumb:hover) .indexthumb::after,
  #index-panel .indexday:has(.indexthumb:focus-visible) .indexthumb::before,
  #index-panel .indexday:has(.indexthumb:focus-visible) .indexthumb::after {
    opacity: 0;
  }

  #index-panel .indexthumb:hover img.thumbs__img.is-ready,
  #index-panel .indexthumb:focus-visible img.thumbs__img.is-ready {
    transform: scale(1.035);
    transition: transform 180ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }
}

/* Touchgeräte: immer farbig */
@media (hover:none),
(pointer:coarse) {

  #index-panel .indexthumb::before,
  #index-panel .indexthumb::after {
    opacity: 0 !important;
  }
}

/* ======================================================================
   Info-Drawer
   ====================================================================== */
.infopanel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .28s ease;
  z-index: 35;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .infopanel {
    width: max(240px, calc(100vw - var(--stream-w) - 8px));
  }
}

.infopanel.is-open {
  transform: translateX(0);
}

.infopanel__overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: transparent;
}

.infopanel .info-content {
  padding: 24px 16px 16px 16px;
  box-sizing: border-box;
}

@supports (padding-top: 2lh) {
  .infopanel .info-content {
    padding-top: 3lh;
    padding-bottom: 2lh;
  }
}

/* ======================================================================
   Index Page (Standalone)
   ====================================================================== */

/* Columns for Date Alignment */
.columns {
  position: relative;
  width: 100%;
  height: 1em;
  line-height: 1;
}

.columns>div {
  position: absolute;
  top: 0;
  white-space: nowrap;
  font-weight: 500;
}

.columns .one {
  left: 0;
}

.columns .two {
  left: 24.77%;
  transform: translateX(-50%);
}

.columns .three {
  left: 55.75%;
}

/* Day Row Layout */
.index-day {
  margin-bottom: 4rem;
}

.index-day__date {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

/* Horizontal Strip */
.index-day__strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  display: flex;
}

.index-day__strip-inner {
  display: flex;
  gap: 10px;
}

.index-day__thumb {
  flex: 0 0 auto;
  height: 150px;
  margin: 0;
  background: #f4f4f4;
}

.index-day__thumb img {
  height: 100%;
  width: auto;
  display: block;
}

/* Main Container */
.main-index {
  padding-top: 6rem;
  /* Space for header */
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ======================================================================
   Index-Link Special Logic (Startpage)
   Matches Stream-Link logic but with Right Arrow
   ====================================================================== */

/* 1. Kill the default left arrow (from .arrowlink) */
.arrowlink.index-link::before {
  content: none !important;
  display: none !important;
}

/* 2. Add the right arrow (hidden by default) */
.arrowlink.index-link::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--arrowlink-speed) ease-out var(--arrowlink-delay);
}

/* 3. Desktop Hover: Shift text right, keep arrow HIDDEN */
@media (hover: hover) {
  .arrowlink.index-link:hover {
    padding-left: var(--arrowlink-shift);
    padding-right: 0;
  }

  .arrowlink.index-link:hover::after {
    opacity: 0 !important;
  }
}

/* 4. Mobile/Touch: Show arrow on right, make space */
@media (hover: none) {
  .arrowlink.index-link {
    padding-left: 0 !important;
    padding-right: var(--arrowlink-shift);
  }

  .arrowlink.index-link::after {
    opacity: 1 !important;
    transition: none;
  }
}