/* Főoldal ivory törzse: „A konferenciáról", kiemelt előadók, Kibernaptár sáv. */

/* Kétkolumnás szekció: balra a cím, jobbra a szöveg (a mockup arányai). */
.about {
  display: grid;
  gap: var(--sp-5) clamp(var(--sp-6), 5vw, var(--sp-8));
}

@media (min-width: 56rem) {
  .about {
    grid-template-columns: minmax(12rem, 20rem) 1fr;
  }

  .about__title {
    /* A cím a szövegtörzs első sorával kezdődjön egy vonalban. */
    margin-top: -0.15em;
  }
}

.about__body > p {
  max-width: 68ch;
}

/* ------------------------------------------------------- kiemelt előadók sáv */

.speaker-preview {
  display: grid;
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

/* --------------------------------------------------- előadói sáv (léptethető)
   A Swiper web component a saját árnyék-DOM-jában stílusozza magát, ezért itt
   csak a slotolt kártyák és a saját léptetőgombjaink állnak. */

.speaker-slider {
  position: relative;
}

.speaker-slider__track {
  display: block;
  /* A sáv széle a kártyák széle: a Swiper enélkül a kilógó kártyát is kirajzolná. */
  overflow: hidden;
}

/* A kártyák nem egyforma hosszúak (más a munkahely és a beosztás), a slide
   viszont a tartalmához nőjön, ne a legmagasabbhoz. */
.speaker-slider__track swiper-slide {
  height: auto;
}

.speaker-slider__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px-es tapintható méret. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--c-rule-gold);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-gold-ink);
  cursor: pointer;
  font-size: 0.9375rem;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.slider-btn:hover {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-on-dark);
}

.slider-btn:active {
  background: var(--c-deep);
}

/* ------------------------------- sötét záró sáv (Zártkörű esemény + Kibernaptár)
   Teljes szélességű, csíkos kék felület két hasábbal; a hasábok között a
   tervlapon arany választóvonal fut. */

.dark-band__inner {
  display: grid;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
}

@media (min-width: 56rem) {
  .dark-band__inner {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  /* A választóvonal a MÁSODIK hasábot előzi meg: egy hasáb esetén nincs vonal. */
  .dark-band__col + .dark-band__col {
    padding-left: clamp(var(--sp-6), 5vw, var(--sp-8));
    border-left: 1px solid var(--c-rule-on-dark);
  }

  .dark-band__col:first-child {
    padding-right: clamp(var(--sp-6), 5vw, var(--sp-8));
  }
}

.dark-band__title {
  margin-bottom: var(--sp-5);
  color: var(--c-on-dark);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
}

.dark-band__text {
  max-width: 42ch;
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
  color: var(--c-on-dark-muted);
}