/* Krótkie streszczenia wydarzeń (Bryllupper/Konfirmationer) na stronie
   /events/ — ten sam wygląd co panel opisu na właściwych stronach
   wydarzeń (event-gallery.css: .event-intro — Cool Gray 10, półprzezroczyste),
   tylko dwie osobne karty zamiast jednej, każda z tytułem-linkiem do
   podstrony. */

.events-summaries {
  position: absolute;
  top: 16vh;
  left: 6vw;
  z-index: 8;
  width: min(38vw, 560px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.events-summary-card {
  background: rgba(99, 102, 106, 0.58);
  padding: 24px 32px;
  box-sizing: border-box;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.events-summary-card h2 {
  margin: 0 0 12px 0;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.25;
}

.events-summary-card h2 a {
  color: #fff;
  text-decoration: none;
}

.events-summary-card h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* Tablet — trochę szerszy panel, tak jak .event-intro/.bio-viewport na
   innych stronach. */
@media (min-width: 601px) and (max-width: 1366px) {
  .events-summaries {
    width: min(46vw, 460px);
    left: 5vw;
  }
}

/* Telefon — ten sam zabieg co .site-intro na stronie głównej: bez
   przebudowy strony na przewijaną, panel po prostu mieści się w wąskiej
   szerokości, mniejsze marginesy i czcionka. */
@media (max-width: 600px) {
  .events-summaries {
    top: auto;
    bottom: 3vh;
    left: 4vw;
    right: 4vw;
    width: auto;
    gap: 12px;
  }

  .events-summary-card {
    padding: 16px 20px;
  }

  .events-summary-card h2 {
    font-size: 18px;
  }

  .events-summary-card p {
    font-size: 13px;
    line-height: 1.6;
  }
}