/* ===========================================================================
 * Hauptstadt-Entsorger — video clips ("Einblicke aus unseren Einsätzen")
 *
 * The section rendered by he_reel_section() in inc/reel.php: a rail of short
 * portrait clips on the front page, a centred pair on the About / Service /
 * City pages.
 *
 * SELF-CONTAINED ON PURPOSE. Every ui.css token is referenced with a literal
 * fallback — var(--hp-green, #276C03) — so this file also works on the About
 * page, which is still styled from main.css and never loads the hp- kit. Do
 * not introduce a bare var(--hp-…) here or that page loses its colours.
 *
 * Contents
 *   1. Section shell
 *   2. Track (rail + pair)
 *   3. Card
 *   4. Playing state
 *   5. Rail arrows
 *   6. Responsive
 * ========================================================================= */

/* ------------------------------------------------------- 1. Section shell */
/* Padding follows --hp-pad where the design-system tokens are loaded, so this
   band keeps step with the sections around it — the service templates dial
   that token down, and without this the clips section stayed at full height
   and left a visibly bigger gap than every other seam on the page. The literal
   is the fallback for templates that do not load ui.css. */
.hp-clips {
  position: relative;
  width: 100%;
  padding: var(--hp-pad, clamp(56px, 6.4vw, 104px)) 0;
  background-color: var(--hp-surface, #FFFFFF);
}

.hp-clips--tint {
  background-color: var(--hp-tint, #FAF6F0);
}

/* --- The seam with the sections around it -------------------------------
 * .hp-clips is not .hp-section, so the collapse rule in ui.css cannot see it.
 * A section above and this band below therefore stacked a full --hp-pad of
 * bottom padding onto a full --hp-pad of top padding: ~180px of empty page at
 * desktop width, twice the rhythm of every other seam, and on the service
 * templates the only thing marking it is #FFF meeting #FAF6F0 — a change so
 * slight it reads as nothing at all.
 *
 * Two cases. The surfaces differ: split ONE pad across the seam, so the band
 * change gets the same breathing room as every other band change on the page.
 * The surfaces match: there is nothing to justify a gap, so collapse it the
 * way ui.css already does between two plain sections.
 *
 * [class="hp-section"] is an exact attribute match — a genuinely plain white
 * section, never hp-svc-cta / hp-wa / hp-section--dark, which bring their own
 * background and keep their padding. Same convention as ui.css. */
[class="hp-section"]:has(+ .hp-clips--tint),
.hp-section--tint:has(+ .hp-clips:not(.hp-clips--tint)) {
  padding-bottom: clamp(28px, 3.2vw, 52px);
}

[class="hp-section"] + .hp-clips--tint,
.hp-section--tint + .hp-clips:not(.hp-clips--tint) {
  padding-top: clamp(28px, 3.2vw, 52px);
}

[class="hp-section"] + .hp-clips:not(.hp-clips--tint),
.hp-section--tint + .hp-clips--tint,
.hp-clips:not(.hp-clips--tint) + [class="hp-section"],
.hp-clips--tint + .hp-section--tint {
  padding-top: 0;
}

.hp-clips__container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-clips__head {
  max-width: 760px;
  margin: 0 auto clamp(32px, 3.6vw, 52px);
  text-align: center;
}

.hp-clips__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-green, #276C03);
}

.hp-clips__eyebrow::before,
.hp-clips__eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--hp-orange, #FFA500);
}

.hp-clips__title {
  margin: 0;
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: clamp(27px, 3.1vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--hp-ink, #16231B);
}

.hp-clips__lede {
  margin: 18px 0 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--hp-body, #59635C);
}

/* -------------------------------------------------------------- 2. Track */
.hp-clips__viewport {
  position: relative;
}

/* The rail sits OUTSIDE .hp-clips__container (see he_reel_section) so it runs
   the full width of the section. No 100vw and no negative margins: 100vw
   ignores the scrollbar, which would give the whole page a horizontal wobble. */
.hp-clips__viewport--full { width: 100%; }

/* Rail — one horizontal row, scroll-snapped, for the full set.
 *
 * Twenty 9:16 cards in a wrapping grid would be six rows of very tall boxes and
 * roughly four screens of page. A rail keeps the whole set to the height of a
 * single card and matches how vertical video is browsed everywhere else.
 *
 * padding-block leaves room for the cards' hover lift and their shadow; without
 * it the top of a raised card is clipped by the scroll container. */
.hp-clips__track--rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 232px;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 24px 18px;
}

.hp-clips__track--rail::-webkit-scrollbar { display: none; }

.hp-clips__track--rail .hp-clip { scroll-snap-align: start; }

/* Pair — two or three cards centred, used where the clips are a supporting
   detail rather than the point of the section. */
.hp-clips__track--pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 2.2vw, 28px);
}

.hp-clips__track--pair .hp-clip {
  flex: 0 1 260px;
  max-width: 260px;
}

/* --------------------------------------------------------------- 3. Card */
/* The hover lift lives on the FIGURE, not on the frame inside it. The player
   stage is positioned against the figure, so lifting only the frame would slide
   the poster out from under the video by 5px. */
.hp-clip {
  position: relative;
  margin: 0;
  min-width: 0;
  transition: transform 0.3s ease;
}

.hp-clip:hover { transform: translateY(-5px); }

/* The button IS the poster. A real <button> so it is focusable, reachable by
   keyboard and announced correctly, with no extra ARIA. */
.hp-clip__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 5px solid #fff;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--hp-green-dark, #16300A);
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(22, 48, 10, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hp-clip:hover .hp-clip__frame {
  box-shadow: 0 24px 48px rgba(22, 48, 10, 0.24);
}

.hp-clip__frame:focus-visible {
  outline: 3px solid var(--hp-orange, #FFA500);
  outline-offset: 3px;
}

.hp-clip__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.hp-clip:hover .hp-clip__poster { transform: scale(1.05); }

/* Shown until the poster has been fetched — see inc/reel.php. Branded, so an
   unconfigured site looks deliberate rather than broken, and the card still
   plays when clicked. */
.hp-clip__poster--empty {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 165, 0, 0.22), transparent 60%),
    linear-gradient(165deg, var(--hp-green, #276C03) 0%, var(--hp-green-dark, #16300A) 100%);
}

/* Legibility for the play button and the duration on a bright poster. */
.hp-clip__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 26, 5, 0.55), transparent 42%);
  transition: opacity 0.3s ease;
}

.hp-clip__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--hp-green, #276C03);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

/* Nudged right so the triangle looks centred — its visual mass sits left. */
.hp-clip__play svg { margin-left: 3px; }

.hp-clip:hover .hp-clip__play {
  background-color: var(--hp-orange, #FFA500);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

.hp-clip__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.4;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- 4. Preview and pinned
 * reel.js appends a .hp-clip__stage holding the iframe. It covers the poster
 * rather than replacing it, so removing the stage on mouseleave restores the
 * card instantly with nothing to re-download. */
/* inset: 5px sits it inside the frame's 5px white border; the radius is the
   frame's 16px minus that border, so the corners line up.
   pointer-events: none is load-bearing for the preview — the stage covers the
   button, and without it a click would land on a chrome-less Vimeo player
   (which just toggles pause) instead of pinning the card. Re-enabled below for
   the pinned player, where the controls do need to be clickable. */
.hp-clip__stage {
  position: absolute;
  inset: 5px;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 11px;
  background-color: var(--hp-green-dark, #16300A);
  pointer-events: none;
}

.hp-clip.is-pinned .hp-clip__stage { pointer-events: auto; }

.hp-clip__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Hover preview: silent, looping, no chrome. The play badge and the gradient
   get out of the way; the duration stays, since it is still useful. */
.hp-clip.is-preview .hp-clip__play,
.hp-clip.is-pinned .hp-clip__play { opacity: 0; }

.hp-clip.is-preview .hp-clip__frame::after,
.hp-clip.is-pinned .hp-clip__frame::after { opacity: 0; }

.hp-clip.is-preview .hp-clip__time { z-index: 2; }

/* A preview is silent, so say so — otherwise a visitor hovering a clip with
   people talking in it thinks the audio is broken. */
.hp-clip.is-preview .hp-clip__frame::before {
  content: "Zum Abspielen klicken";
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.62);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
}

/* Pinned: the card the visitor actually chose. Lifted out of the row and given
   the accent border so it is obvious which one is playing. */
.hp-clip.is-pinned .hp-clip__frame {
  cursor: default;
  border-color: var(--hp-orange, #FFA500);
  box-shadow: 0 26px 54px rgba(22, 48, 10, 0.34);
}

/* Held still while it plays: a card that bobs under the pointer while you are
   reaching for its controls is maddening. Declared after .hp-clip:hover, which
   it ties with on specificity, so source order settles it. */
.hp-clip.is-pinned,
.hp-clip.is-pinned:hover { transform: none; }

.hp-clip.is-pinned .hp-clip__time { display: none; }

.hp-clip__close {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: var(--hp-ink, #16231B);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hp-clip__close:hover {
  background-color: var(--hp-orange, #FFA500);
  transform: scale(1.08);
}

.hp-clip__close:focus-visible {
  outline: 3px solid var(--hp-orange, #FFA500);
  outline-offset: 2px;
}

/* ------------------------------------------------------ 5. Drag and dots
 * The prev/next arrows are gone. They had to be overlaid on a full-bleed rail,
 * which meant permanently covering part of the first and last card and sitting
 * in the way of the hover-to-play they were next to. Dragging and a dot row do
 * the same job without taking anything from the cards. */

/* Only a mouse can drag — the cursor says so only where that is true. Touch
   scrolls the rail natively and needs no hint. */
@media (hover: hover) and (pointer: fine) {
  .hp-clips__track--rail { cursor: grab; }
  .hp-clips__track--rail.is-grabbing { cursor: grabbing; }
}

/* While dragging, stop the browser turning the gesture into a text selection
   halfway through. */
.hp-clips__track--rail.is-grabbing {
  user-select: none;
  scroll-snap-type: none; /* snapping fights a drag in progress */
}

.hp-clips__track--rail.is-grabbing .hp-clip { pointer-events: none; }

.hp-clip__poster {
  -webkit-user-drag: none;
  user-select: none;
}

/* One dot per screenful, added by reel.js and left out entirely when the rail
   already fits. */
.hp-clips__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0 24px;
}

.hp-clips__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(22, 48, 10, 0.2);
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.hp-clips__dot:hover { background-color: rgba(22, 48, 10, 0.4); }

/* The active dot stretches into a pill instead of just changing colour, so the
   position is readable at a glance and not only by hue. */
.hp-clips__dot.is-active {
  width: 26px;
  border-radius: 20px;
  background-color: var(--hp-orange, #FFA500);
}

.hp-clips__dot:focus-visible {
  outline: 3px solid var(--hp-orange, #FFA500);
  outline-offset: 3px;
}

/* --------------------------------------------------------- 6. Responsive */
@media (max-width: 680px) {
  .hp-clips__track--rail {
    grid-auto-columns: 66%;
    padding-inline: 20px;
  }

  .hp-clips__track--pair .hp-clip {
    flex-basis: calc(50% - 8px);
    max-width: none;
  }

  .hp-clip__play { width: 46px; height: 46px; }
  .hp-clip__close { top: -8px; right: -8px; width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-clip,
  .hp-clip__frame,
  .hp-clip__poster,
  .hp-clip__play {
    transition: none;
  }
  .hp-clip:hover { transform: none; }
  .hp-clip:hover .hp-clip__poster { transform: none; }
  .hp-clips__track--rail { scroll-behavior: auto; }
}