/* Strona wydarzenia z pływającymi bąblami-imionami par (np. Śluby) —
   .stage/.photo-layer/.nav-island to współdzielone style ze strony głównej
   (style.css, html/body overflow:hidden — strona NIE przewija się, tak jak
   strona główna), tu tylko to, czego strona główna nie ma. */

/* Bąble mają pływać NAD tekstem, nie pod nim — .nav-islands ma z-index:5
   (style.css), .event-intro z-index:8, więc bez tego panel tekstu zasłaniał
   bąble. */
.stage .nav-islands {
  z-index: 9;
}

/* Tekst NA zdjęciu, w tym samym miejscu co panel na stronie Info
   (info.css: .bio-viewport, top:16vh, left:6vw) — ale, w przeciwieństwie do
   Info, z widocznym tłem: Cool Gray 10 półprzezroczyste, ten sam kolor co
   panel wstępu na blogu (blog.css: .blog-intro). max-height+overflow-y to
   tylko zabezpieczenie na bardzo niskie ekrany — w praktyce tekst mieści
   się bez przewijania. */
.event-intro {
  position: absolute;
  top: 16vh;
  left: 6vw;
  z-index: 8;
  width: min(38vw, 560px);
  max-height: 68vh;
  overflow-y: auto;
  padding: 24px 32px;
  box-sizing: border-box;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: rgba(99, 102, 106, 0.58);
}

/* Na dotyku (tablet) panel nie może mieć własnego przewijania — patrz
   dokładnie ten sam problem i rozwiązanie w blog.css. */
@media (pointer: coarse) {
  .event-intro {
    overflow-y: visible;
  }
}

.event-intro h1 {
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  margin: 0 0 20px 0;
  color: #fff;
}

.event-intro p {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px 0;
}

.event-intro p:last-child {
  margin-bottom: 0;
}

/* Na telefonie pływające bąble par są ukryte (jak menu — patrz
   mobile-nav.css), więc bez tego imiona par znikałyby całkowicie na wąskim
   ekranie. Prosta, statyczna lista w normalnym przepływie strony. */
.couple-list-mobile {
  display: none;
}

/* --- Telefon: dokładnie ten sam zabieg co w blogu (blog.css) — nakładka
   tekstu na zdjęcie nie działa na dotyku (albo się nie mieści i jest
   ucinana, albo łapie gest przewijania). Strona zaczyna się przewijać:
   zdjęcie dostaje wysokość dopasowaną do własnych proporcji (bez czarnego
   pasa pod spodem), a tekst staje się zwykłym blokiem PO NIM, w normalnym
   przepływie — bez limitu, bez przycinania, bez własnego scrolla. --- */
@media (max-width: 600px) {
  html, body {
    overflow: visible;
    overflow-x: clip;
    height: auto;
    min-height: 100%;
  }

  /* height:auto + overflow:hidden (zapobiega "zapadaniu się" marginesu
     dziecka) — .stage realnie rośnie do wysokości zdjęcia + całego tekstu
     poniżej, bez limitu, bez przycinania. Dokładnie ten sam zabieg co w
     blog.css/.blog-hero. */
  .stage {
    height: auto;
    overflow: hidden;
  }

  .photo-layer {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 56.25vw; /* 9/16 szerokości ekranu — wysokość zdjęcia 16:9 bez pustego pasa */
  }

  .stage .nav-islands {
    position: absolute;
  }

  .event-intro {
    position: static;
    margin-top: 56.25vw;
    width: auto;
    max-width: none;
    max-height: none;
    overflow-y: visible;
    background: none;
    padding: 4vh 6vw 2vh;
  }

  .event-intro h1,
  .event-intro p {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.5);
  }

  .couple-list-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 2vh 6vw 4vh;
    margin: 0;
    list-style: none;
  }

  .couple-list-mobile li {
    display: flex;
  }

  /* Pary z galerią (couple.photos) dostają <button> zamiast zwykłego
     tekstu w <li> — te same "pigułki", plus wskazówka, że da się kliknąć. */
  .couple-list-mobile li,
  .couple-list-mobile-item {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 8px 14px;
    border-radius: 999px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.5);
  }

  .couple-list-mobile-item {
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
  }
}