/* =========================================================
   GAB!GURU — EVENTS MANAGER
   ========================================================= */

.gabi-em-list,
.gabi-em-hero-wrap,
.gabi-event-list,
.gabi-price-list {
  --gabi-em-background: #fffdf9;
  --gabi-em-soft: #f5ece6;
  --gabi-em-text: #302925;
  --gabi-em-muted: #766a63;
  --gabi-em-accent: #a8684c;
  --gabi-em-border: rgba(168, 104, 76, 0.25);
  --gabi-em-shadow: 0 18px 50px rgba(48, 35, 29, 0.1);

  /* kolor przycisku "Zapisz się" — dokładnie taki sam jak przycisk "ZOBACZ TERMINY" w hero (et_pb_button_6) */
  --gabi-em-primary: #6f3f52;
  --gabi-em-primary-hover: #5e3646;

  /* oficjalny niebieski Messengera */
  --gabi-em-messenger: #0084ff;
  --gabi-em-messenger-hover: #006fd6;

  width: 100%;
}

/* Divi może generować puste akapity wokół shortcode'ów */

.gabi-em-list p:empty,
.gabi-em-hero-wrap p:empty,
.gabi-event-list p:empty,
.gabi-price-list p:empty {
  display: none;
}

/* =========================================================
   HERO — NAJBLIŻSZE SZKOLENIE
   ========================================================= */

.gabi-em-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;

  width: 100%;
  max-width: 860px;
  margin-top: 16px !important;
  padding: 22px 24px !important;
  box-sizing: border-box;

  color: var(--gabi-em-text);
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid var(--gabi-em-border);
  border-radius: 16px;
  box-shadow: var(--gabi-em-shadow);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gabi-em-hero__name {
  color: var(--gabi-em-text);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.gabi-em-label,
.gabi-event-row__label {
  display: block;
  margin-bottom: 5px;

  color: var(--gabi-em-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =========================================================
   ODLICZANIE (dni / godziny / minuty / sekundy)
   ========================================================= */

.gabi-em-countdown {
  width: 100%;
  margin-top: 8px;

  display: flex;
  align-items: center;
  gap: 7px;
}

.gabi-em-countdown__item {
  flex: 1;
  min-width: 0;
  padding: 8px 5px;

  text-align: center;

  background: var(--gabi-em-soft);
  border-radius: 10px;
}

.gabi-em-countdown__item strong {
  display: block;

  color: var(--gabi-em-accent);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.gabi-em-countdown__item span {
  display: block;
  margin-top: 5px;

  color: var(--gabi-em-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.gabi-em-countdown__separator {
  color: var(--gabi-em-accent);
  font-size: 19px;
  font-weight: 600;
}

.gabi-em-countdown__ended {
  color: var(--gabi-em-accent);
  font-size: 14px;
  font-weight: 700;
}

/* =========================================================
   PRZYCISKI — WSPÓLNE DLA HERO I DOLNEJ LISTY
   Samodzielne style (nie korzystają z globalnego et_pb_button Divi).

   UWAGA: Events Manager dokłada własną regułę
   ".em.pixelbones a { color/background !important }" o wyższej
   specyficzności niż zwykła klasa. Żeby ją przebić, selektory
   przycisków poniżej powtarzają ten sam prefiks ".em.pixelbones"
   + własny !important — inaczej wtyczka zawsze wygrywa.
   ========================================================= */

.gabi-event-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.gabi-em-button,
.gabi-event-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  margin: 0 !important;
  padding: 12px 26px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  border: none;
  border-radius: 6px;
  cursor: pointer;

  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

/* Kolor i tło — z podniesioną specyficznością, żeby przebić regułę wtyczki EM */

.em.pixelbones a.gabi-em-button,
.em.pixelbones a.gabi-event-button {
  color: #ffffff !important;
  background-color: var(--gabi-em-primary) !important;
  box-shadow: none !important;
}

.em.pixelbones a.gabi-em-button:hover,
.em.pixelbones a.gabi-em-button:focus-visible,
.em.pixelbones a.gabi-event-button:hover,
.em.pixelbones a.gabi-event-button:focus-visible {
  background-color: var(--gabi-em-primary-hover) !important;
}

.em.pixelbones a.gabi-em-button--messenger,
.em.pixelbones a.gabi-event-button--messenger {
  background-color: var(--gabi-em-messenger) !important;
}

.em.pixelbones a.gabi-em-button--messenger:hover,
.em.pixelbones a.gabi-em-button--messenger:focus-visible,
.em.pixelbones a.gabi-event-button--messenger:hover,
.em.pixelbones a.gabi-event-button--messenger:focus-visible {
  background-color: var(--gabi-em-messenger-hover) !important;
}

.gabi-em-button:hover,
.gabi-event-button:hover {
  transform: translateY(-1px);
}

/* Strzałka pojawiająca się na hover — jak w przycisku "ZOBACZ TERMINY" */

.gabi-em-button::after,
.gabi-event-button::after {
  content: "\2192";
  display: inline-block;
  margin-left: 2px;

  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.gabi-em-button:hover::after,
.gabi-event-button:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.gabi-em-icon-messenger {
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  fill: #ffffff;
}

/* =========================================================
   DOLNA LISTA TERMINÓW (gabi-event-list / gabi-event-row)
   ========================================================= */

.gabi-em-list,
.gabi-event-list {
  display: grid;
  gap: 16px;

  color: var(--gabi-em-text);
}

.gabi-em-row,
.gabi-event-row {
  display: grid;
  grid-template-columns:
    minmax(230px, 1.25fr)
    minmax(120px, 0.45fr)
    auto;
  align-items: center;
  gap: 28px;

  padding: 24px 26px;

  background: var(--gabi-em-background);
  border: 1px solid var(--gabi-em-border);
  border-radius: 16px;
  box-shadow: var(--gabi-em-shadow);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.gabi-em-row:hover,
.gabi-event-row:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 104, 76, 0.48);
  box-shadow: 0 22px 55px rgba(48, 35, 29, 0.13);
}

.gabi-em-row__date strong,
.gabi-event-row__date strong {
  display: block;

  color: var(--gabi-em-text);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.gabi-em-row__spaces,
.gabi-event-row__spaces {
  min-width: 115px;
  padding: 13px 16px;

  text-align: center;

  background: var(--gabi-em-soft);
  border-radius: 10px;
}

.gabi-em-row__spaces .gabi-em-label,
.gabi-event-row__spaces .gabi-event-row__label {
  margin-bottom: 6px;
}

.gabi-em-row__spaces strong,
.gabi-event-row__spaces strong {
  display: block;

  color: var(--gabi-em-accent);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   KARTA CENOWA (gabi-price-list / gabi-price-card)
   Układ: nazwa szkolenia, kategoria (kolor #9f5630), sekcja
   data + wolne miejsca (z górnym/dolnym obramowaniem), a na
   dole cena (bez etykiety, do lewej) i przyciski (do prawej).
   Przyciski korzystają z tych samych klas co w Hero i dolnej
   liście terminów, więc wyglądają identycznie.
   ========================================================= */

.gabi-price-list {
  display: grid;
  gap: 12px;

  color: var(--gabi-em-text);
}

.gabi-price-card {
  display: flex;
  flex-direction: column;

  padding: 18px 20px;

  background: var(--gabi-em-background);
  border: 1px solid var(--gabi-em-border);
  border-radius: 16px;
  box-shadow: var(--gabi-em-shadow);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.gabi-price-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 104, 76, 0.48);
  box-shadow: 0 22px 55px rgba(48, 35, 29, 0.13);
}

.gabi-price-card__name {
  color: var(--gabi-em-text);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Kategoria — kolor wymuszony !important + podniesiona specyficzność,
   bo #_EVENTCATEGORIES renderuje link <a>, a wtyczka EM narzuca
   swój kolor na wszystkie linki (patrz sekcja PRZYCISKI wyżej). */

.gabi-price-card__category {
  margin-top: 0;

  color: #9f5630;
  font-size: 13px;
  font-weight: 600;
}

.gabi-price-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;

  margin: 10px 0;
  padding: 10px 0;

  border-top: 1px solid #e6d5c8;
  border-bottom: 1px solid #e6d5c8;
}

.gabi-price-card__date {
  color: var(--gabi-em-text);
  font-size: 15px;
  font-weight: 600;
}

.gabi-price-card__spaces {
  color: var(--gabi-em-muted);
  font-size: 14px;
}

.gabi-price-card__spaces strong {
  color: var(--gabi-em-accent);
  font-weight: 700;
}

.gabi-price-card__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gabi-price-card__price {
  color: var(--gabi-em-accent);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

.gabi-price-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .gabi-em-hero {
    max-width: 720px;
  }

  .gabi-em-row,
  .gabi-event-row {
    grid-template-columns:
      minmax(220px, 1fr)
      minmax(110px, 0.35fr);
  }

  .gabi-event-row__actions {
    grid-column: 1 / -1;

    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }

  .gabi-price-card__bottom {
    align-items: flex-start;
  }
}

/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 767px) {
  .gabi-em-hero {
    padding: 14px 16px;
    border-radius: 14px;
  }

  .gabi-em-countdown {
    width: 100%;
  }

  .gabi-em-countdown__item {
    flex: 1;
    min-width: 0;
    padding: 8px 4px;
  }

  .gabi-em-countdown__item strong {
    font-size: 18px;
  }

  .gabi-em-row,
  .gabi-event-row {
    grid-template-columns: 1fr;
    gap: 18px;

    padding: 22px 18px;
    border-radius: 14px;
  }

  .gabi-event-row__actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
  }

  .gabi-event-row__actions .gabi-event-button {
    width: 100%;
    text-align: center;
  }

  .gabi-em-row__spaces,
  .gabi-event-row__spaces {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    text-align: left;
  }

  .gabi-em-row__spaces .gabi-em-label,
  .gabi-event-row__spaces .gabi-event-row__label {
    margin-bottom: 0;
  }

  .gabi-price-card {
    padding: 20px 18px;
    border-radius: 14px;
  }

  .gabi-price-card__meta {
    margin: 8px 0;
    padding: 8px 0;
  }

  .gabi-price-card__bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .gabi-price-card__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
  }

  .gabi-price-card__actions .gabi-em-button,
  .gabi-price-card__actions .gabi-event-button {
    width: 100%;
  }
}