/* Homepage news card for Vigilia. Loaded only from index.html.
   Every selector stays under .vigilia-card, so shared site CSS is untouched.
   Phone layout is only inside max-width: 680px.
   Desktop layout is only inside min-width: 681px. */

.vigilia-card {
  background: #0a0a0a;
  color: var(--white);
}

.vigilia-card h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
}

.vigilia-card__when,
.vigilia-card__where,
.vigilia-card__age,
.vigilia-card__note {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.vigilia-card__chunk {
  white-space: nowrap;
}

/* One fixed 9:16 frame for both slides. The reel is 720×1280, so it
   fills the frame without a crop. The 4:5 flyer is contained and centred
   on the same dark ground. The frame does not change size when the slide
   changes, so the sections under the card stay put. */
.vigilia-card__frame {
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  touch-action: pan-y;
}

.vigilia-card__track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s ease;
}

.vigilia-card__track[data-index="1"] {
  transform: translate3d(-100%, 0, 0);
}

.vigilia-card__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.vigilia-card__still,
.vigilia-card__video,
.vigilia-card__flyer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  background: transparent;
}

.vigilia-card--playing .vigilia-card__still {
  opacity: 0;
}

.vigilia-card__controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vigilia-card__arrow,
.vigilia-card__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.vigilia-card__arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.vigilia-card__arrow span {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.vigilia-card__arrow--prev span {
  transform: translateX(2px) rotate(-135deg);
}

.vigilia-card__arrow--next span {
  transform: translateX(-2px) rotate(45deg);
}

.vigilia-card__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

.vigilia-card__dot[aria-current="true"]::before {
  background: var(--pink);
}

@media (max-width: 680px) {
  .vigilia-card {
    padding: var(--sy) 20px;
    scroll-margin-top: calc(65px + 16px);
  }

  .vigilia-card__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-width: 0;
  }

  .vigilia-card__stage {
    width: 100%;
    max-width: 360px;
    min-width: 0;
  }

  .vigilia-card__frame {
    width: 100%;
  }

  .vigilia-card__controls {
    margin-top: 2px;
  }

  .vigilia-card__arrow {
    display: none;
  }

  .vigilia-card .eyebrow {
    margin-bottom: 14px;
  }

  .vigilia-card h2 {
    font-size: 44px;
  }

  .vigilia-card__when {
    margin-top: 14px;
    color: var(--white);
    font-size: 16px;
    line-height: 1.4;
  }

  .vigilia-card__where {
    margin-top: 4px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.4;
  }

  .vigilia-card__age {
    margin-top: 12px;
    color: var(--pink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .vigilia-card__note {
    margin-top: 14px;
    max-width: 22em;
    color: #c4bec1;
    font-size: 16px;
    line-height: 1.5;
  }
}

@media (min-width: 681px) {
  .vigilia-card {
    padding: var(--sy) var(--page-inline);
    scroll-margin-top: 96px;
  }

  .vigilia-card__layout {
    display: grid;
    grid-template-columns: minmax(220px, min(300px, 32vw)) minmax(0, 1fr);
    column-gap: clamp(36px, 5vw, 88px);
    align-items: center;
    min-width: 0;
  }

  .vigilia-card__stage,
  .vigilia-card__copy {
    min-width: 0;
  }

  .vigilia-card__frame {
    width: 100%;
  }

  .vigilia-card__controls {
    justify-content: flex-start;
    margin-top: 6px;
    margin-left: -10px;
  }

  .vigilia-card .eyebrow {
    margin-bottom: 18px;
  }

  .vigilia-card h2 {
    font-size: clamp(52px, 4.6vw, 76px);
  }

  .vigilia-card__when {
    margin-top: 18px;
    color: var(--white);
    font-size: 17px;
    line-height: 1.45;
  }

  .vigilia-card__where {
    margin-top: 6px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.45;
  }

  .vigilia-card__age {
    margin-top: 16px;
    color: var(--pink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .vigilia-card__note {
    margin-top: 16px;
    max-width: 34em;
    color: #c4bec1;
    font-size: 17px;
    line-height: 1.6;
  }
}

/* Slim line over the hero, taken out of flow. It sits in the gap under
   the fixed header and above the logo, so the hero box, the logo, the
   scroll cue and the header stay put. */
.vigilia-strip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  margin: 0;
  color: var(--pink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

.vigilia-strip a {
  pointer-events: auto;
  color: var(--white);
  letter-spacing: 0.22em;
}

.vigilia-strip a:hover {
  color: var(--pink);
}

.vigilia-strip__sep {
  letter-spacing: 0;
  padding: 0 0.35em;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 680px) {
  .vigilia-strip {
    top: 70px;
    left: 20px;
    right: 20px;
    /* 0.02em keeps "Buy on Bandcamp" on this line inside the 20px inset at 360px. */
    letter-spacing: 0.02em;
  }

  .vigilia-strip a {
    margin-left: auto;
    letter-spacing: 0.02em;
  }
}

@media (min-width: 681px) {
  .vigilia-strip {
    top: 86px;
    left: var(--page-inline);
    right: var(--page-inline);
    gap: 1.4em;
  }

  .vigilia-strip a {
    margin-left: 0.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vigilia-card__slide[data-slide="reel"] {
    display: none;
  }

  .vigilia-card__controls {
    display: none;
  }

  .vigilia-card__track {
    transform: none;
    transition: none;
  }

  .vigilia-card__video {
    display: none;
  }
}