/* ==========================================================================
   Mojegazdinstvo — Događaji (Events) Redesign Faza A
   Reference: docs/design-specs/events-redesign-spec.md v1.1
   Tokeni: themes/wowonder/custom/css/style.css (:root sekcija)
   Reuse: .agro-ask-drawer (foundation), .agro-confirm-dialog (platform standard)
   ========================================================================== */

/* === 1. PAGE LAYOUT (entry stranica) === */

.agro-events-page {
  background: var(--agro-surface);
  min-height: 100vh;
  padding-bottom: 48px;
}

.agro-events-page__container {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 24px;
  margin: 0 auto;
  max-width: 1320px;
  padding: 24px 16px;
}


.agro-events-page__main {
  max-width: 760px;
  min-width: 0;
}

.agro-events-page__sidebar-left,
.agro-events-page__sidebar-right {
  min-width: 0;
}

@media (max-width: 991px) {
  .agro-events-page__container {
    grid-template-columns: 1fr;
  }

  .agro-events-page__sidebar-left {
    display: none;
  }

  .agro-events-page__sidebar-right {
    order: 2;
  }

  /* Single event detail — sakrij inline filter card (FILTERI sekcija) na mobile/tablet.
     Aside ostaje u DOM-u jer .agro-events-filter-fab (sticky badge bottom-right) cita
     .agro-event-filters preko cloneNode() — JS i FAB ostaju funkcionalni.
     Scope: .agro-event-detail-hero postoji samo na detail strani, ne na listing-u. */
  .agro-events-page:has(.agro-event-detail-hero) .agro-events-page__sidebar-right {
    display: none;
  }
}

/* === 1b. TOPBAR (breadcrumb + back button) === */

.agro-event-topbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.agro-event-breadcrumb {
  align-items: center;
  color: var(--agro-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.agro-event-breadcrumb a {
  color: var(--agro-text-muted);
  text-decoration: none;
}

.agro-event-breadcrumb a:hover {
  color: var(--agro-primary);
  text-decoration: underline;
}

.agro-event-breadcrumb > span:last-child {
  color: var(--agro-text-secondary, var(--agro-text));
  font-weight: 600;
}

.agro-event-back-btn {
  align-items: center;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text-secondary, var(--agro-text));
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  line-height: 1;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.agro-event-back-btn:hover,
.agro-event-back-btn:focus-visible {
  background: var(--agro-surface-soft, #f6f8f4);
  border-color: var(--agro-primary);
  color: var(--agro-primary);
  text-decoration: none;
}

.agro-event-back-btn:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}

.agro-event-back-btn svg {
  flex-shrink: 0;
}

/* === 2. HERO BLOCK === */

.agro-events-hero {
  background: linear-gradient(135deg, var(--agro-cream, var(--agro-surface-card)) 0%, var(--agro-primary-bg) 100%);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  margin-bottom: 20px;
  padding: 24px;
  position: relative;
}

.agro-events-hero__eyebrow {
  color: var(--agro-primary-dark);
  font-family: var(--agro-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.agro-events-hero__title {
  color: var(--agro-text);
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.agro-events-hero__subtitle {
  color: var(--agro-text-secondary, var(--agro-text-muted));
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.agro-events-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 575px) {
  .agro-events-hero {
    padding: 16px;
  }

  .agro-events-hero__title {
    font-size: 22px;
  }
}

/* === 3. CREATE CTA (premium gate) === */

.agro-event-create-btn {
  align-items: center;
  background: var(--agro-primary);
  border: 0;
  border-radius: var(--agro-radius);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--agro-font-body);
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  text-decoration: none;
  transition: background 150ms ease, transform 100ms ease;
}

.agro-event-create-btn:hover {
  background: var(--agro-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.agro-event-create-btn:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 3px;
}

.agro-event-create-btn--locked {
  background: var(--agro-disabled-bg, #e8e8e8);
  color: var(--agro-text-secondary, var(--agro-text-muted));
  cursor: not-allowed;
  opacity: 0.85;
}

.agro-event-create-btn--locked:hover {
  background: var(--agro-disabled-bg, #e8e8e8);
  color: var(--agro-text-secondary, var(--agro-text-muted));
  transform: none;
}

.agro-event-create-btn__icon {
  flex-shrink: 0;
}

/* === 4. TAB NAV === */

.agro-event-tabs {
  background: var(--agro-surface-card);
  border-bottom: 1px solid var(--agro-border);
  display: flex;
  gap: 0;
  /* Browse grupa levo, Personal grupa desno — vizuelno razdvojene */
  justify-content: space-between;
  margin-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.agro-event-tabs__group {
  display: flex;
  gap: 0;
}

.agro-event-tabs__group--personal {
  /* Suptilna leva ivica koja označava prelaz iz browse u personal sekciju */
  border-left: 1px solid var(--agro-border);
  margin-left: 12px;
  padding-left: 12px;
}

@media (max-width: 575px) {
  .agro-event-tabs {
    flex-wrap: wrap;
  }

  .agro-event-tabs__group--personal {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--agro-border);
    width: 100%;
  }
}

.agro-event-tabs__item {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--agro-text-secondary, var(--agro-text-muted));
  cursor: pointer;
  display: inline-flex;
  font-family: var(--agro-font-body);
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  min-height: 44px;
  padding: 12px 16px;
  scroll-snap-align: start;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}

.agro-event-tabs__item:hover {
  color: var(--agro-text);
}

.agro-event-tabs__item--active {
  border-bottom-color: var(--agro-primary);
  color: var(--agro-primary-dark);
}

.agro-event-tabs__item:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: -2px;
}

.agro-event-tabs__badge {
  background: var(--agro-primary-bg);
  border-radius: var(--agro-radius-pill);
  color: var(--agro-primary-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

/* === 5. TOOLBAR (sort dropdown + count) === */

.agro-event-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.agro-event-toolbar__count {
  color: var(--agro-text-muted);
  font-size: 14px;
}

.agro-event-sort {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.agro-event-sort__label {
  color: var(--agro-text-muted);
  font-size: 13px;
}

.agro-event-sort__select {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text);
  font-family: var(--agro-font-body);
  font-size: 14px;
  min-height: 36px;
  padding: 6px 32px 6px 12px;
}

/* === 6. EVENT CARD === */

.agro-event-card {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  box-shadow: var(--agro-shadow-card, var(--agro-shadow-sm));
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  /* overflow: visible da bi badge/heart/menu mogli da "lebde" izvan gornje desne ivice */
  overflow: visible;
  position: relative;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.agro-event-card:hover {
  box-shadow: var(--agro-shadow-card-hover, var(--agro-shadow-md));
  transform: translateY(-2px);
}

.agro-event-card__cover {
  aspect-ratio: 21 / 9;
  background: var(--agro-surface-alt);
  /* Cover ima vlastiti top border-radius jer kartica je sad overflow: visible */
  border-top-left-radius: var(--agro-radius-card, var(--agro-radius-lg));
  border-top-right-radius: var(--agro-radius-card, var(--agro-radius-lg));
  overflow: hidden;
  position: relative;
}

.agro-event-card__cover img {
  aspect-ratio: 21 / 9;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Dinamički broj dana iznad placeholder kalendara (kad event nema pravi cover).
   Pozicija odgovara centru kalendar ikone iz event-placeholder.svg
   (viewBox 1200×600 → calendar group translate(550, 280), date area center
   ~ global (600, 355) ≈ 50%, 59% viewBox-a). Font-size manji jer je kalendar
   smanjen sa 120×100 na 100×85 — broj treba da stane u date area (~22px). */
.agro-event-card__cover-day {
  color: #2e7d32;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 60%;
  transform: translate(-50%, -50%);
}

@media (max-width: 575px) {
  .agro-event-card__cover-day {
    font-size: 18px;
  }
}

.agro-event-card__category-chip {
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--agro-radius-pill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  color: var(--agro-primary-dark);
  font-size: 12px;
  font-weight: 700;
  left: 12px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  position: absolute;
  text-transform: uppercase;
  top: 12px;
}

/* Organizator pill (avatar + @ime inline) — modern floating offset iznad category chip-a.
   Pozicioniran u odnosu na .agro-event-card (ne cover) jer kartica je overflow: visible. */
.agro-event-card__cover-organizer {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  display: inline-flex;
  gap: 8px;
  left: -10px;
  max-width: calc(100% - 80px); /* ostavlja prostor za heart + date badge na desnoj strani */
  padding: 4px 12px 4px 4px;
  position: absolute;
  top: -10px;
  z-index: 3;
}

.agro-event-card__cover-organizer-avatar {
  border: 2px solid #fff;
  border-radius: 50%;
  flex-shrink: 0;
  height: 36px;
  object-fit: cover;
  width: 36px;
}

.agro-event-card__cover-organizer-name {
  color: var(--agro-text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agro-event-card__cover-organizer--inactive {
  opacity: 0.75;
}

.agro-event-card__cover-organizer--inactive .agro-event-card__cover-organizer-avatar {
  filter: grayscale(0.6);
}

.agro-event-card__cover-organizer--inactive .agro-event-card__cover-organizer-name {
  font-style: italic;
  text-decoration: line-through;
}

/* Kad kartica ima cover-organizer pill, category chip se pomera ispod njega.
   :has() podržano u svim modernim browserima (>2023). */
.agro-event-card:has(.agro-event-card__cover-organizer) .agro-event-card__category-chip {
  top: 46px;
}

/* "Istekao" badge — float u gornjem desnom uglu (zamenjuje date badge za past događaje).
   Vizuelno se razlikuje od category-chip-a tamnijom semantičnom bojom (muted red)
   da signališe "read-only" stanje. */
.agro-event-card__expired-badge {
  align-items: center;
  background: rgba(220, 38, 38, 0.95); /* muted red */
  border-radius: var(--agro-radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  position: absolute;
  /* Float u gornjem desnom uglu (isti pattern kao date-badge — negativan offset). */
  right: -10px;
  text-transform: uppercase;
  top: -10px;
  z-index: 4; /* iznad date-badge-a koji ima z-index:3 */
}

.agro-event-card__expired-badge svg {
  flex-shrink: 0;
}

/* Past event — sakrij date badge (vlasnik vidi Istekao na tom mestu).
   Save heart se takođe sklanja da ne bude konflikt sa pozicijom u gornjem desnom uglu. */
.agro-event-card--expired .agro-event-card__date-badge,
.agro-event-card--expired .agro-event-card__save {
  display: none;
}

/* Vizuelni signal cele kartice da je istekla — blago desaturisana, ali čitljiva. */
.agro-event-card--expired .agro-event-card__cover img {
  filter: grayscale(0.4) brightness(0.92);
}

.agro-event-card--expired .agro-event-card__title a {
  color: var(--agro-text-muted);
}

/* Detail hero varijanta — veća i sa pozicijom desno (da ne kolidira sa category chip-om). */
.agro-event-card__expired-badge--hero {
  font-size: 12px;
  left: auto;
  padding: 6px 12px;
  right: 16px;
  top: 16px;
}

.agro-event-card__date-badge {
  align-items: center;
  background: #fff;
  border-radius: var(--agro-radius);
  /* Modern offset shadow — istaknut floating efekt iznad ivice kartice */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  color: var(--agro-text);
  display: flex;
  flex-direction: column;
  font-family: var(--agro-font-body);
  line-height: 1.05;
  min-width: 52px;
  padding: 6px 8px;
  position: absolute;
  /* Float izvan kartice — negativni offset i levo i gore (modern floating badge pattern) */
  right: -10px;
  text-align: center;
  top: -10px;
  z-index: 3;
}

.agro-event-card__date-day {
  color: var(--agro-primary-dark);
  font-size: 22px;
  font-weight: 800;
}

.agro-event-card__date-month {
  color: var(--agro-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agro-event-card__body {
  /* width: 100% da bi unutrašnji RSVP container imao puni okvir za centriranje
     dugmadi. Bez toga, kao flex item u kartici sa column smerom, body se ponekad
     sažima do content-a (zavisno od browser-a) i RSVP container postaje uži, pa
     dugmad ne deluju centrirana. */
  box-sizing: border-box;
  padding: 16px 20px 18px;
  width: 100%;
}

.agro-event-card__title {
  color: var(--agro-text);
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.agro-event-card__title a {
  color: inherit;
  text-decoration: none;
}

.agro-event-card__title a:hover {
  color: var(--agro-primary-dark);
}

.agro-event-card__meta {
  align-items: center;
  color: var(--agro-text-secondary, var(--agro-text-muted));
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 4px 14px;
  margin: 0 0 12px;
}

.agro-event-card__meta-item {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.agro-event-card__meta-icon {
  color: var(--agro-text-muted);
  flex-shrink: 0;
}

.agro-event-card__organizer {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
  margin: 8px 0 12px;
}

/* Deep-link fokus iz notifikacije — pulse highlight kratko */
.agro-event-card--focused {
  animation: agro-event-card-focus-pulse 1.4s ease-out 3;
  border: 2px solid var(--agro-accent, #4a7c2a) !important;
  position: relative;
  z-index: 5;
}

@keyframes agro-event-card-focus-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(74, 124, 42, 0.7),
      0 0 0 0 rgba(74, 124, 42, 0.45),
      0 8px 24px rgba(74, 124, 42, 0.25);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(74, 124, 42, 0.35),
      0 0 0 18px rgba(74, 124, 42, 0.12),
      0 12px 36px rgba(74, 124, 42, 0.45);
    transform: scale(1.025);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(74, 124, 42, 0),
      0 0 0 0 rgba(74, 124, 42, 0),
      0 8px 24px rgba(74, 124, 42, 0.25);
    transform: scale(1);
  }
}

.agro-event-card__invited-by {
  align-items: center;
  background: var(--agro-bg-soft, #f5f7f2);
  border-radius: 6px;
  color: var(--agro-text-secondary, var(--agro-text-muted));
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  margin: 0 0 12px;
  padding: 6px 10px;
}

.agro-event-card__invited-by-link {
  color: var(--agro-accent, #4a7c2a);
  font-weight: 600;
  text-decoration: none;
}

.agro-event-card__invited-by-link:hover {
  text-decoration: underline;
}

.agro-event-card__organizer-avatar {
  border-radius: 50%;
  height: 28px;
  object-fit: cover;
  width: 28px;
}

.agro-event-card__organizer-name {
  color: var(--agro-text);
  font-weight: 600;
}

.agro-event-card__organizer--inactive .agro-event-card__organizer-name {
  color: var(--agro-text-muted);
  font-style: italic;
}

.agro-event-card__menu-trigger {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: var(--agro-radius);
  /* Modern floating shadow, isti kao date badge */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  color: var(--agro-text-secondary, var(--agro-text-muted));
  cursor: pointer;
  display: flex;
  /* Match badge dimensions */
  height: 47px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  /* Levo od badge-a (badge na right: -10, width 52, gap 8 → right: -10 + 52 + 8 = 50) */
  right: 50px;
  top: -10px;
  transition: opacity 200ms ease, background 150ms ease;
  width: 44px;
  z-index: 3;
}

.agro-event-card:hover .agro-event-card__menu-trigger,
.agro-event-card__menu-trigger.is-pressed {
  opacity: 1;
}

.agro-event-card__menu-trigger:hover {
  background: #fff;
  color: var(--agro-text);
}

/* === 6b. SAVE BUTTON (heart, top-right; mirror agro-offer-card__fav) === */

.agro-event-card__save {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: var(--agro-radius);
  /* Modern floating shadow, isti kao date badge */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  color: var(--agro-text-secondary, var(--agro-text-muted));
  cursor: pointer;
  display: flex;
  height: 47px;
  justify-content: center;
  position: absolute;
  /* Levo od badge-a (badge na right: -10, width 52, gap 8 → right: -10 + 52 + 8 = 50) */
  right: 50px;
  top: -10px;
  transition: background 150ms ease, color 150ms ease, transform 120ms ease;
  width: 44px;
  z-index: 3;
}

.agro-event-card__save:hover {
  background: #fff;
  color: var(--agro-danger, #e53935);
}

.agro-event-card__save:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}

.agro-event-card__save:active {
  transform: scale(0.92);
}

.agro-event-card__save--active {
  color: var(--agro-danger, #e53935);
}

/* === 7. RSVP BUTTONS (inline u card + detail) === */

.agro-event-rsvp {
  /* Centrirano grupisanje dugmadi — konzistentno bez obzira na karticu/naslov */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 4px;
  width: 100%;
}

.agro-event-rsvp-btn {
  align-items: center;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text);
  cursor: pointer;
  display: inline-flex;
  /* Fiksna veličina umesto flex:1 1 0 — vizuelno isti dugmići u svakoj kartici */
  flex: 0 0 auto;
  font-family: var(--agro-font-body);
  font-size: 15px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  min-height: 48px;
  min-width: 160px;
  padding: 0 24px;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

.agro-event-rsvp-btn:active {
  transform: scale(0.97);
}

.agro-event-rsvp-btn:hover {
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary-light);
  color: var(--agro-primary-dark);
}

.agro-event-rsvp-btn--active {
  background: var(--agro-primary);
  border-color: var(--agro-primary);
  color: #fff;
}

.agro-event-rsvp-btn--active:hover {
  background: var(--agro-primary-dark);
  border-color: var(--agro-primary-dark);
  color: #fff;
}

.agro-event-rsvp-btn:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}

.agro-event-rsvp-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.agro-event-rsvp-btn__icon {
  flex-shrink: 0;
}

/* === Pozivnice tab: Idem/Možda LEVO, Odbij DESNO === */
.agro-event-rsvp--invited {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: space-between;
}

.agro-event-rsvp--invited .agro-event-rsvp__group {
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
}

.agro-event-rsvp--invited .agro-event-rsvp-btn {
  min-width: 0;
  padding: 0 18px;
}

/* Crveni "Odbij" — koristi --agro-danger platform token */
.agro-event-rsvp-btn--decline {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-danger, #c62828);
  color: var(--agro-danger, #c62828);
  flex: 0 0 auto;
  min-width: 110px;
}

.agro-event-rsvp-btn--decline:hover {
  background: var(--agro-danger, #c62828);
  border-color: var(--agro-danger, #c62828);
  color: #fff;
}

.agro-event-rsvp-btn--decline:focus-visible {
  outline: 2px solid var(--agro-danger, #c62828);
  outline-offset: 2px;
}

.agro-event-rsvp-btn--decline:active {
  transform: scale(0.97);
}

/* Fade-out animacija nakon decline-a — kartica se "ispari" pre uklanjanja iz DOM-a */
.agro-event-card--declining {
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px) scale(0.96);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}

@media (max-width: 480px) {
  /* Na uskim ekranima Pozivnice tab: stack vertikalno (Idem/Možda gore, Odbij dole). */
  .agro-event-rsvp--invited {
    flex-direction: column;
    gap: 8px;
  }

  .agro-event-rsvp--invited .agro-event-rsvp__group {
    width: 100%;
  }

  .agro-event-rsvp--invited .agro-event-rsvp__group .agro-event-rsvp-btn {
    flex: 1 1 0;
  }

  .agro-event-rsvp-btn--decline {
    width: 100%;
  }
}

/* Mobile/tablet (≤768px): Idem/Možda UVEK inline jedan pored drugog —
   dele dostupnu sirinu (flex: 1 1 0), bez minimuma sirine. */
@media (max-width: 768px) {
  .agro-event-rsvp:not(.agro-event-rsvp--invited) {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .agro-event-rsvp:not(.agro-event-rsvp--invited) .agro-event-rsvp__group {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    gap: 8px;
    min-width: 0;
  }

  .agro-event-rsvp:not(.agro-event-rsvp--invited) .agro-event-rsvp-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* === 8. FILTER CHIPS (right rail) === */

.agro-event-filters {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  margin-bottom: 16px;
  padding: 16px;
}

.agro-event-filters__heading {
  color: var(--agro-text);
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.agro-event-filters__group {
  margin-bottom: 16px;
}

.agro-event-filters__group:last-child {
  margin-bottom: 0;
}

.agro-event-filters__label {
  color: var(--agro-text-muted);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.agro-event-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agro-event-filters__chip {
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  color: var(--agro-text);
  cursor: pointer;
  font-family: var(--agro-font-body);
  font-size: 12px;
  font-weight: 600;
  min-height: 32px;
  padding: 6px 12px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.agro-event-filters__chip:hover {
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary-light);
  color: var(--agro-primary-dark);
}

.agro-event-filters__chip--active {
  background: var(--agro-primary);
  border-color: var(--agro-primary);
  color: #fff;
}

.agro-event-filters__radio {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 6px 0;
}

.agro-event-filters__radio input[type="radio"] {
  accent-color: var(--agro-primary);
}

.agro-event-filters__location-input {
  background: var(--agro-surface-input, var(--agro-surface));
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text);
  font-family: var(--agro-font-body);
  font-size: 14px;
  min-height: 40px;
  padding: 8px 12px;
  width: 100%;
}

.agro-event-filters__location-wrap {
  position: relative;
}

.agro-event-filters__location-list {
  background: #fff;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 4px 0 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
}

.agro-event-filters__location-list[hidden] {
  display: none;
}

.agro-event-filters__location-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  transition: background 120ms ease;
}

.agro-event-filters__location-item:hover,
.agro-event-filters__location-item--active {
  background: var(--agro-primary-bg);
}

.agro-event-filters__location-item__name {
  color: var(--agro-text);
  font-size: 14px;
  font-weight: 600;
}

.agro-event-filters__location-item__meta {
  color: var(--agro-text-muted);
  font-size: 12px;
}

.agro-event-filters__location-item__type-badge {
  background: var(--agro-primary-bg);
  border-radius: 4px;
  color: var(--agro-primary-dark);
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  margin-right: 6px;
  padding: 2px 6px;
  text-transform: uppercase;
}

.agro-event-filters__location-empty {
  color: var(--agro-text-muted);
  font-size: 13px;
  padding: 12px;
  text-align: center;
}

.agro-event-filters__reset {
  align-items: center;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-primary-dark);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  margin: 16px auto 0;
  padding: 10px 16px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: 100%;
}

.agro-event-filters__reset:hover {
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary);
  color: var(--agro-primary);
}

.agro-event-filters__reset:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}

.agro-event-filters__reset:active {
  transform: scale(0.98);
}

/* === 9. SLIDE-IN DRAWER (create/edit) === */

.agro-event-drawer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000;
}

.agro-event-drawer[hidden] {
  display: none !important;
}

.agro-event-drawer__overlay {
  background: rgba(20, 30, 20, 0.45);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 280ms ease;
}

.agro-event-drawer.is-open .agro-event-drawer__overlay {
  opacity: 1;
}

.agro-event-drawer__panel {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(76, 175, 80, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(249, 168, 37, 0.06) 0%, transparent 50%),
    var(--agro-surface-card);
  border-left: 1px solid var(--agro-border);
  bottom: 0;
  box-shadow: -8px 0 32px rgba(70, 60, 40, 0.16);
  display: flex;
  flex-direction: column;
  max-width: 560px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  width: 100%;
}

.agro-event-drawer.is-open .agro-event-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .agro-event-drawer__overlay,
  .agro-event-drawer__panel {
    transition: none;
  }
}

.agro-event-drawer__header {
  align-items: flex-start;
  background: linear-gradient(135deg, var(--agro-cream, var(--agro-surface-card)) 0%, var(--agro-primary-bg) 100%);
  border-bottom: 1px solid var(--agro-border);
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 20px 16px;
}

.agro-event-drawer__title {
  color: var(--agro-text);
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.agro-event-drawer__eyebrow {
  color: var(--agro-primary-dark);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.agro-event-drawer__close {
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--agro-border);
  border-radius: 50%;
  /* box-sizing + padding:0 + line-height:1 — sprečava da WoWonder/bootstrap globalni
     button stilovi (vertikalni padding) izduže dugme u "jaje" formu. */
  box-sizing: border-box;
  color: var(--agro-text);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  line-height: 1;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  transition: background 150ms ease;
  width: 36px;
}

.agro-event-drawer__close svg {
  display: block;
  flex-shrink: 0;
}

.agro-event-drawer__close:hover {
  background: #fff;
}

/* Form wraps body + footer inside panel — must be flex column so body can scroll
   and footer stays pinned. Without this, form is display: block and footer
   overflows below the viewport. */
.agro-event-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.agro-event-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.agro-event-drawer__footer {
  background: var(--agro-surface-card);
  border-top: 1px solid var(--agro-border);
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 20px;
}

@media (max-width: 575px) {
  .agro-event-drawer__panel {
    max-width: 100vw;
  }
}

/* === 10. FORM (drawer interior) === */

.agro-event-form__field {
  margin-bottom: 18px;
}

.agro-event-form__label {
  color: var(--agro-text);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.agro-event-form__required {
  color: var(--agro-danger);
}

.agro-event-form__input,
.agro-event-form__textarea,
.agro-event-form__select {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text);
  font-family: var(--agro-font-body);
  font-size: 15px;
  padding: 10px 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}

.agro-event-form__input:focus,
.agro-event-form__textarea:focus,
.agro-event-form__select:focus {
  border-color: var(--agro-primary);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
  outline: none;
}

.agro-event-form__input[aria-invalid="true"],
.agro-event-form__textarea[aria-invalid="true"] {
  border-color: var(--agro-danger);
}

.agro-event-form__textarea {
  min-height: 96px;
  resize: vertical;
}

.agro-event-form__error {
  color: var(--agro-danger-text, var(--agro-danger));
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

.agro-event-form__helper {
  color: var(--agro-text-muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.agro-event-form__row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
  .agro-event-form__row {
    grid-template-columns: 1fr;
  }
}

.agro-event-form__category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agro-event-form__category-chip {
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  color: var(--agro-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  padding: 6px 14px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.agro-event-form__category-chip--active {
  background: var(--agro-primary);
  border-color: var(--agro-primary);
  color: #fff;
}

.agro-event-form__checkbox {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.agro-event-form__checkbox input[type="checkbox"] {
  accent-color: var(--agro-primary);
  height: 18px;
  width: 18px;
}

.agro-event-form__cover-upload {
  background: var(--agro-surface);
  border: 2px dashed var(--agro-border);
  border-radius: var(--agro-radius);
  cursor: pointer;
  padding: 24px;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease;
}

.agro-event-form__cover-upload:hover {
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary-light);
}

.agro-event-form__cover-preview {
  border-radius: var(--agro-radius);
  max-height: 200px;
  object-fit: cover;
  width: 100%;
}

/* === 11. DETAIL PAGE === */

.agro-event-detail-hero {
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

.agro-event-detail-hero img {
  aspect-ratio: 21 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
  max-height: 420px;
}

.agro-event-detail-hero__cover-day {
  color: #2e7d32;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  /* Sinhronizovano sa novom pozicijom kalendara u event-placeholder.svg
     (translate(550, 280), date area center y≈360 / 600 = 60%). */
  top: 60%;
  transform: translate(-50%, -50%);
}

@media (max-width: 575px) {
  .agro-event-detail-hero__cover-day {
    font-size: 20px;
  }
}

/* Mobile + placeholder cover: hero ima vise vertikalnog prostora (4:3 umesto 21:9)
   pa kalendar i brand tekst izgledaju vece i citljivije. Primenjuje se samo na
   single event detail hero (ne na list cards) i samo kad se koristi placeholder
   SVG (event-placeholder.svg) — pravi cover slike zadrzavaju 21:9. */
@media (max-width: 768px) {
  .agro-event-detail-hero--placeholder img {
    aspect-ratio: 4 / 3;
  }

  .agro-event-detail-hero--placeholder .agro-event-detail-hero__cover-day {
    /* Vece skaliranje kalendara → veci broj dana */
    font-size: 30px;
  }
}

.agro-event-info-card {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  margin-bottom: 16px;
  padding: 20px 24px;
}

.agro-event-info-card__title {
  color: var(--agro-text);
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}

.agro-event-info-card__meta-row {
  align-items: center;
  color: var(--agro-text-secondary, var(--agro-text-muted));
  display: flex;
  font-size: 14px;
  gap: 10px;
  margin-bottom: 8px;
}

.agro-event-info-card__meta-icon {
  color: var(--agro-primary-dark);
  flex-shrink: 0;
}

.agro-event-description {
  color: var(--agro-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 16px 0;
  white-space: pre-wrap;
}

/* === 12. COUNTDOWN === */

.agro-event-countdown {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  display: flex;
  gap: 12px;
  justify-content: space-around;
  margin-bottom: 16px;
  padding: 16px;
}

.agro-event-countdown__cell {
  text-align: center;
}

.agro-event-countdown__number {
  color: var(--agro-primary-dark);
  display: block;
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.agro-event-countdown__label {
  color: var(--agro-text-muted);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 4px;
  text-transform: uppercase;
}

/* === 13. EMPTY STATE === */

.agro-event-empty-state {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-card, var(--agro-radius-lg));
  padding: 48px 24px;
  text-align: center;
}

.agro-event-empty-state__icon {
  color: var(--agro-text-muted);
  margin-bottom: 16px;
  opacity: 0.7;
}

.agro-event-empty-state__title {
  color: var(--agro-text);
  font-family: var(--agro-font-heading, 'Roboto Slab', Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

.agro-event-empty-state__body {
  color: var(--agro-text-secondary, var(--agro-text-muted));
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.agro-event-empty-state__cta {
  display: inline-flex;
}

/* === 14. LOADING SKELETON === */

.agro-event-card--skeleton {
  pointer-events: none;
}

/* FC5 — skeleton placeholdere koje generiše AgroEventsList.showSkeleton() */
.agro-event-card--skeleton .agro-event-card__cover {
  animation: agro-event-shimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--agro-border) 0%, var(--agro-surface-alt) 50%, var(--agro-border) 100%);
  background-size: 200% 100%;
}

.agro-event-card__title-skeleton,
.agro-event-card__meta-skeleton {
  animation: agro-event-shimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--agro-border) 0%, var(--agro-surface-alt) 50%, var(--agro-border) 100%);
  background-size: 200% 100%;
  border-radius: var(--agro-radius-sm);
}

.agro-event-card__title-skeleton {
  height: 22px;
  width: 75%;
  margin: 12px 0 8px;
}

.agro-event-card__meta-skeleton {
  height: 14px;
  width: 50%;
  margin: 6px 0;
}

.agro-event-skeleton__line {
  animation: agro-event-shimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--agro-border) 0%, var(--agro-surface-alt) 50%, var(--agro-border) 100%);
  background-size: 200% 100%;
  border-radius: var(--agro-radius-sm);
  height: 12px;
  margin: 8px 0;
}

.agro-event-skeleton__line--lg {
  height: 18px;
  width: 70%;
}

.agro-event-skeleton__line--xl {
  height: 200px;
  margin-bottom: 12px;
}

@keyframes agro-event-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agro-event-skeleton__line {
    animation: none;
  }
}

/* === 15. CONFIRM DIALOG (reuse .agro-confirm-dialog) === */
/* Pattern već postoji u platformi (commit 6278cbb). Ovde samo dodatne overrides ako trebaju. */

/* === 16. MOBILE OVERRIDE === */

@media (max-width: 575px) {
  .agro-event-card__body {
    padding: 14px 16px;
  }

  .agro-event-card__title {
    font-size: 16px;
  }

  .agro-event-info-card {
    padding: 16px;
  }

  .agro-event-info-card__title {
    font-size: 22px;
  }

  .agro-event-countdown {
    flex-wrap: wrap;
    gap: 8px;
  }

  .agro-event-countdown__cell {
    flex: 1 1 calc(50% - 8px);
  }
}

/* ==========================================================================
   FAZA B (K13) — Gallery, Program, Q&A, Invite drawer, Privacy, ICS, Maps
   ========================================================================== */

/* === 16b. CARD 3-DOT MENU (floating dropdown) — Audit fix F3 === */

.agro-event-card-menu {
  background: var(--agro-surface-card, #ffffff);
  border: 1px solid var(--agro-border, #e5e5e5);
  border-radius: var(--agro-radius-card, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  min-width: 160px;
  overflow: hidden;
  padding: 4px;
  z-index: 1000;
}

.agro-event-card-menu button[data-event-menu-action] {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--agro-text-primary, #1a1a1a);
  cursor: pointer;
  display: block;
  font-size: 14px;
  min-height: 40px;
  padding: 10px 14px;
  text-align: left;
  transition: background 120ms ease;
  width: 100%;
}

.agro-event-card-menu button[data-event-menu-action]:hover {
  background: var(--agro-surface-hover, rgba(45, 122, 61, 0.06));
}

.agro-event-card-menu button[data-event-menu-action="delete"] {
  color: var(--agro-danger, #c44545);
}

.agro-event-card-menu button[data-event-menu-action="delete"]:hover {
  background: rgba(196, 69, 69, 0.08);
}

/* === 17. GALLERY === */

.agro-event-gallery {
  margin: 24px 0;
}

.agro-event-gallery__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--agro-text-primary, #1a1a1a);
  margin: 0 0 12px;
}

.agro-event-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.agro-event-gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--agro-radius-card, 12px);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--agro-surface-muted, #f4f4f4);
  border: 1px solid var(--agro-border, #e5e5e5);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.agro-event-gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.agro-event-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agro-event-gallery__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  z-index: 2;
}

.agro-event-gallery__item--editable .agro-event-gallery__remove {
  display: flex;
}

.agro-event-gallery__upload {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 2px dashed var(--agro-border, #d0d0d0);
  border-radius: var(--agro-radius-card, 12px);
  cursor: pointer;
  color: var(--agro-text-muted, #6b6b6b);
  font-size: 14px;
  transition: border-color 150ms ease, background 150ms ease;
  background: transparent;
}

.agro-event-gallery__upload:hover {
  border-color: var(--agro-primary, #2d7a3d);
  background: var(--agro-surface-hover, rgba(45, 122, 61, 0.04));
}

/* Visually hidden ali ostaje accessible (focusable + screen reader). Robusno
   protiv globalnih CSS reset-ova koji bi override-ovali display:none. */
.agro-event-gallery__upload-input,
input.agro-event-gallery__upload-input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Lightbox */

.agro-event-gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.agro-event-gallery-lightbox[aria-hidden="false"] {
  display: flex;
}

.agro-event-gallery-lightbox__image {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
}

.agro-event-gallery-lightbox__close,
.agro-event-gallery-lightbox__prev,
.agro-event-gallery-lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 150ms ease;
}

.agro-event-gallery-lightbox__close:hover,
.agro-event-gallery-lightbox__prev:hover,
.agro-event-gallery-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.agro-event-gallery-lightbox__close {
  top: 24px;
  right: 24px;
}

.agro-event-gallery-lightbox__prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.agro-event-gallery-lightbox__next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* === 18. PROGRAM (rich text) === */

.agro-event-program {
  margin: 24px 0;
  padding: 20px;
  background: var(--agro-surface-card, #ffffff);
  border-radius: var(--agro-radius-card, 12px);
  border: 1px solid var(--agro-border, #e5e5e5);
}

.agro-event-program__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--agro-text-primary, #1a1a1a);
  margin: 0 0 12px;
}

.agro-event-program__content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--agro-text-primary, #1a1a1a);
  white-space: pre-line;
}

.agro-event-program__empty {
  color: var(--agro-text-muted, #6b6b6b);
  font-style: italic;
}

.agro-event-program__textarea {
  width: 100%;
  min-height: 180px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--agro-border, #d0d0d0);
  border-radius: var(--agro-radius-input, 8px);
  resize: vertical;
  box-sizing: border-box;
}

.agro-event-program__textarea:focus {
  outline: none;
  border-color: var(--agro-primary, #2d7a3d);
  box-shadow: 0 0 0 3px rgba(45, 122, 61, 0.12);
}

.agro-event-program__counter {
  font-size: 12px;
  color: var(--agro-text-muted, #6b6b6b);
  text-align: right;
  margin-top: 4px;
}

.agro-event-program__counter--warning {
  color: var(--agro-warning, #b58000);
}

.agro-event-program__counter--error {
  color: var(--agro-danger, #c44545);
}

/* === 19. Q&A SECTION (redesign 2026-05) ===
   Konzistentan look za organizatora i posetioca. Pitanje + odgovor su threading
   row-ovi sa avatarom (inicijali fallback). Organizator-odgovor ima pill badge i
   diskretan zeleni akcent. */

.agro-event-qa-section {
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-lg, 12px);
  margin: 24px 0;
  padding: 20px 22px;
}

.agro-event-qa-section__header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 16px;
}

.agro-event-qa-section__heading {
  align-items: center;
  display: flex;
  gap: 10px;
}

.agro-event-qa-section__icon {
  color: var(--agro-primary, #2e7d32);
  flex-shrink: 0;
}

.agro-event-qa-section__title {
  color: var(--agro-text, #1a2e1a);
  font-family: var(--agro-font-heading, inherit);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
}

.agro-event-qa-section__count {
  background: var(--agro-primary-bg, #f0f7f0);
  border-radius: var(--agro-radius-pill, 999px);
  color: var(--agro-primary-dark, #1b5e20);
  font-size: 12px;
  font-weight: 700;
  min-width: 28px;
  padding: 3px 10px;
  text-align: center;
}

.agro-event-qa-section__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* Empty state */
.agro-event-qa-section__empty {
  align-items: center;
  background: var(--agro-surface, #fafaf8);
  border: 1px dashed var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius, 8px);
  color: var(--agro-text-muted, #4a5e55);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
}

.agro-event-qa-section__empty-icon {
  color: var(--agro-primary-light, #4caf50);
  opacity: 0.7;
}

.agro-event-qa-section__empty-text {
  color: var(--agro-text-muted, #4a5e55);
  font-size: 14px;
  font-style: normal;
  margin: 0;
}

/* === Q&A Item === */

.agro-event-qa-item {
  background: var(--agro-surface, #fafaf8);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius, 8px);
  padding: 14px 16px;
  transition: border-color 150ms ease, background 150ms ease;
}

.agro-event-qa-item--answered {
  border-color: color-mix(in srgb, var(--agro-primary, #2e7d32) 24%, var(--agro-border, #e0d8c8) 76%);
}

.agro-event-qa-item__question-row,
.agro-event-qa-item__answer-row {
  display: flex;
  gap: 12px;
}

.agro-event-qa-item__answer-row {
  background: var(--agro-primary-bg, #f0f7f0);
  border-radius: var(--agro-radius, 8px);
  border-left: 3px solid var(--agro-primary, #2e7d32);
  margin-top: 12px;
  padding: 12px 14px;
}

.agro-event-qa-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.agro-event-qa-item__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.agro-event-qa-item__author {
  color: var(--agro-text, #1a2e1a);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.agro-event-qa-item__dot {
  color: var(--agro-text-muted, #4a5e55);
  font-size: 12px;
}

.agro-event-qa-item__time {
  color: var(--agro-text-muted, #4a5e55);
  font-size: 12px;
  font-weight: 400;
}

.agro-event-qa-item__question,
.agro-event-qa-item__answer {
  color: var(--agro-text, #1a2e1a);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  word-wrap: break-word;
}

.agro-event-qa-item__answer {
  color: var(--agro-text-secondary, #3a4e3a);
}

/* === Avatar (inicijali fallback) === */

.agro-event-qa-avatar {
  background: var(--agro-primary-bg, #f0f7f0);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: 50%;
  color: var(--agro-primary-dark, #1b5e20);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  height: 36px;
  overflow: hidden;
  position: relative;
  width: 36px;
}

.agro-event-qa-avatar--organizer {
  background: var(--agro-primary, #2e7d32);
  border-color: var(--agro-primary-dark, #1b5e20);
  color: #fff;
}

.agro-event-qa-avatar__img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.agro-event-qa-avatar__initials {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 100%;
}

/* === Organizator badge (uz ime u answer row) === */

.agro-event-qa-badge {
  background: var(--agro-primary, #2e7d32);
  border-radius: var(--agro-radius-pill, 999px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* === Item actions (Odgovori / Obriši) === */

.agro-event-qa-item__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--agro-border, #e0d8c8);
}

.agro-event-qa-item--answered .agro-event-qa-item__actions {
  border-top: none;
  padding-top: 0;
}

.agro-event-qa-item__action {
  align-items: center;
  background: transparent;
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-sm, 6px);
  color: var(--agro-text-secondary, #3a4e3a);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  line-height: 1;
  padding: 7px 12px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.agro-event-qa-item__action:hover {
  background: var(--agro-primary-bg, #f0f7f0);
  border-color: var(--agro-primary, #2e7d32);
  color: var(--agro-primary-dark, #1b5e20);
}

.agro-event-qa-item__action:focus-visible {
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-event-qa-item__action--primary {
  background: var(--agro-primary, #2e7d32);
  border-color: var(--agro-primary, #2e7d32);
  color: #fff;
}

.agro-event-qa-item__action--primary:hover {
  background: var(--agro-primary-dark, #1b5e20);
  border-color: var(--agro-primary-dark, #1b5e20);
  color: #fff;
}

.agro-event-qa-item__action--ghost {
  color: var(--agro-text-muted, #4a5e55);
}

.agro-event-qa-item__action--ghost:hover {
  background: color-mix(in srgb, var(--agro-danger, #c62828) 8%, transparent);
  border-color: var(--agro-danger, #c62828);
  color: var(--agro-danger, #c62828);
}

/* === Inline answer composer (organizator klikne Odgovori) === */

.agro-event-qa-item__answer-form {
  animation: agroQaSlideDown 180ms ease-out;
  margin-top: 12px;
}

@keyframes agroQaSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agro-event-qa-item__answer-form[hidden] {
  display: none;
}

.agro-event-qa-item__answer-form-row {
  background: var(--agro-primary-bg, #f0f7f0);
  border-left: 3px solid var(--agro-primary, #2e7d32);
  border-radius: var(--agro-radius, 8px);
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}

.agro-event-qa-item__answer-form-body {
  flex: 1 1 auto;
  min-width: 0;
}

.agro-event-qa-item__answer-textarea {
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-sm, 6px);
  box-sizing: border-box;
  color: var(--agro-text, #1a2e1a);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  min-height: 56px;
  outline: none;
  padding: 8px 10px;
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}

.agro-event-qa-item__answer-textarea::placeholder {
  color: var(--agro-text-muted, #4a5e55);
  opacity: 0.7;
}

.agro-event-qa-item__answer-textarea:focus {
  border-color: var(--agro-primary, #2e7d32);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.18);
}

.agro-event-qa-item__answer-form-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 8px;
}

.agro-event-qa-item__answer-counter {
  color: var(--agro-text-muted, #4a5e55);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.agro-event-qa-item__answer-form-buttons {
  display: flex;
  gap: 6px;
}

.agro-event-qa-item__answer-form-buttons .agro-event-qa-item__action[disabled] {
  background: var(--agro-disabled-bg, #e8e8e8);
  border-color: var(--agro-disabled-bg, #e8e8e8);
  color: var(--agro-disabled-text, #9e9e9e);
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .agro-event-qa-item__answer-form-row {
    padding: 10px 12px;
  }
  .agro-event-qa-item__answer-form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .agro-event-qa-item__answer-form-buttons {
    justify-content: flex-end;
  }
}

/* === Q&A form === */

.agro-event-qa-form {
  background: var(--agro-surface, #fafaf8);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius, 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.agro-event-qa-form:focus-within {
  border-color: var(--agro-primary, #2e7d32);
  box-shadow: var(--agro-focus-ring);
}

.agro-event-qa-form__input-wrap {
  position: relative;
}

.agro-event-qa-form__textarea {
  background: transparent;
  border: none;
  box-sizing: border-box;
  color: var(--agro-text, #1a2e1a);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  min-height: 64px;
  outline: none;
  padding: 4px 0;
  resize: vertical;
  width: 100%;
}

.agro-event-qa-form__textarea::placeholder {
  color: var(--agro-text-muted, #4a5e55);
  opacity: 0.7;
}

.agro-event-qa-form__actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.agro-event-qa-form__counter {
  color: var(--agro-text-muted, #4a5e55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.agro-event-qa-form__submit {
  align-items: center;
  background: var(--agro-primary, #2e7d32);
  border: 1px solid var(--agro-primary, #2e7d32);
  border-radius: var(--agro-radius, 8px);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  line-height: 1;
  min-height: 38px;
  padding: 8px 18px;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.agro-event-qa-form__submit:hover:not([disabled]) {
  background: var(--agro-primary-dark, #1b5e20);
  border-color: var(--agro-primary-dark, #1b5e20);
}

.agro-event-qa-form__submit:active:not([disabled]) {
  transform: scale(0.97);
}

.agro-event-qa-form__submit:focus-visible {
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-event-qa-form__submit[disabled] {
  background: var(--agro-disabled-bg, #e8e8e8);
  border-color: var(--agro-disabled-bg, #e8e8e8);
  color: var(--agro-disabled-text, #9e9e9e);
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .agro-event-qa-section {
    padding: 16px 14px;
  }

  .agro-event-qa-item {
    padding: 12px;
  }

  .agro-event-qa-item__answer-row {
    padding: 10px 12px;
  }

  .agro-event-qa-avatar {
    height: 32px;
    width: 32px;
  }

  .agro-event-qa-item__actions {
    flex-wrap: wrap;
  }
}

/* === 20. INVITE DRAWER (secondary slide-in 480px) === */

.agro-event-invite-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--agro-surface-card, #ffffff);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.16);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}

.agro-event-invite-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

.agro-event-invite-drawer__header {
  padding: 20px;
  border-bottom: 1px solid var(--agro-border, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agro-event-invite-drawer__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--agro-text-primary, #1a1a1a);
}

.agro-event-invite-drawer__close {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--agro-text-muted, #6b6b6b);
  transition: background 150ms ease;
}

.agro-event-invite-drawer__close:hover {
  background: var(--agro-surface-hover, rgba(0, 0, 0, 0.06));
}

.agro-event-invite-drawer__search {
  padding: 16px 20px;
  border-bottom: 1px solid var(--agro-border, #e5e5e5);
}

.agro-event-invite-drawer__search-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--agro-border, #d0d0d0);
  border-radius: var(--agro-radius-input, 8px);
  box-sizing: border-box;
}

.agro-event-invite-drawer__search-input:focus {
  outline: none;
  border-color: var(--agro-primary, #2d7a3d);
  box-shadow: 0 0 0 3px rgba(45, 122, 61, 0.12);
}

.agro-event-invite-drawer__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.agro-event-invite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 150ms ease;
}

.agro-event-invite-item:hover {
  background: var(--agro-surface-hover, rgba(45, 122, 61, 0.04));
}

.agro-event-invite-item__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.agro-event-invite-item__info {
  flex: 1;
  min-width: 0;
}

.agro-event-invite-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--agro-text-primary, #1a1a1a);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agro-event-invite-item__username {
  font-size: 12px;
  color: var(--agro-text-muted, #6b6b6b);
}

.agro-event-invite-item__checkbox {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--agro-primary, #2d7a3d);
}

.agro-event-invite-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--agro-border, #e5e5e5);
  background: var(--agro-surface-muted, #f8f8f6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.agro-event-invite-drawer__count {
  font-size: 13px;
  color: var(--agro-text-muted, #6b6b6b);
}

.agro-event-invite-drawer__send {
  background: var(--agro-primary, #2d7a3d);
  color: #fff;
  border: none;
  border-radius: var(--agro-radius-input, 8px);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
  min-height: 44px;
}

.agro-event-invite-drawer__send:hover:not(:disabled) {
  background: var(--agro-primary-hover, #266832);
}

.agro-event-invite-drawer__send:disabled {
  background: var(--agro-text-muted, #b0b0b0);
  cursor: not-allowed;
}

/* === 21. PRIVACY TOGGLE === */

.agro-event-privacy-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agro-event-privacy-toggle__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--agro-text-primary, #1a1a1a);
}

.agro-event-privacy-toggle__options {
  display: flex;
  gap: 10px;
}

.agro-event-privacy-toggle__option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--agro-border, #d0d0d0);
  border-radius: var(--agro-radius-input, 8px);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.agro-event-privacy-toggle__option:has(input:checked) {
  border-color: var(--agro-primary, #2d7a3d);
  background: var(--agro-surface-hover, rgba(45, 122, 61, 0.06));
}

.agro-event-privacy-toggle__option input {
  margin: 0;
  accent-color: var(--agro-primary, #2d7a3d);
}

.agro-event-privacy-toggle__option-text {
  font-size: 14px;
  color: var(--agro-text-primary, #1a1a1a);
}

.agro-event-privacy-toggle__help {
  font-size: 12px;
  color: var(--agro-text-muted, #6b6b6b);
  margin: 4px 0 0;
}

/* === 21b. ORGANIZATOR RSVP OVERVIEW + ACTION BAR === */

.agro-event-rsvp-overview {
  align-items: center;
  background: linear-gradient(135deg, var(--agro-primary-bg, #ecf5e9) 0%, var(--agro-surface, #fafafa) 100%);
  border: 1px solid var(--agro-border, #e0e0e0);
  border-radius: var(--agro-radius, 12px);
  display: flex;
  gap: 8px;
  justify-content: space-around;
  margin: 16px 0 12px;
  padding: 16px 12px;
}

.agro-event-rsvp-overview__stat {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.agro-event-rsvp-overview__num {
  color: var(--agro-primary-dark, #1b5e20);
  font-family: var(--agro-font-heading, inherit);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.agro-event-rsvp-overview__label {
  color: var(--agro-text-secondary, var(--agro-text-muted, #6b6b6b));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.agro-event-rsvp-overview__divider {
  background: var(--agro-border, #e0e0e0);
  flex: 0 0 1px;
  height: 36px;
  width: 1px;
}

/* Action bar — Pozovi (primary), Izmeni + Kalendar (secondary), Obriši (danger) */
.agro-event-detail-actions--organizer {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}

.agro-event-action-btn {
  align-items: center;
  border: 1.5px solid transparent;
  border-radius: var(--agro-radius-input, 8px);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--agro-font-body, inherit);
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

.agro-event-action-btn:active {
  transform: scale(0.97);
}

.agro-event-action-btn__icon {
  flex-shrink: 0;
}

.agro-event-action-btn--primary {
  background: var(--agro-primary, #2d7a3d);
  border-color: var(--agro-primary, #2d7a3d);
  color: #fff;
  flex: 1 1 200px;
}

.agro-event-action-btn--primary:hover {
  background: var(--agro-primary-dark, #1b5e20);
  border-color: var(--agro-primary-dark, #1b5e20);
  color: #fff;
  text-decoration: none;
}

.agro-event-action-btn--secondary {
  background: var(--agro-surface-card, #ffffff);
  border-color: var(--agro-border, #e0e0e0);
  color: var(--agro-text, #222);
}

.agro-event-action-btn--secondary:hover {
  background: var(--agro-primary-bg, #ecf5e9);
  border-color: var(--agro-primary, #2d7a3d);
  color: var(--agro-primary-dark, #1b5e20);
  text-decoration: none;
}

.agro-event-action-btn--danger {
  background: var(--agro-surface-card, #ffffff);
  border-color: var(--agro-danger, #c62828);
  color: var(--agro-danger, #c62828);
  margin-left: auto;
}

.agro-event-action-btn--danger:hover {
  background: var(--agro-danger, #c62828);
  border-color: var(--agro-danger, #c62828);
  color: #fff;
}

.agro-event-action-btn--danger:focus-visible {
  outline: 2px solid var(--agro-danger, #c62828);
  outline-offset: 2px;
}

/* ICS dropdown in organizer action bar — match secondary button look */
.agro-event-detail-actions--organizer .agro-event-ics-btn {
  background: var(--agro-surface-card, #ffffff);
  border: 1.5px solid var(--agro-border, #e0e0e0);
  color: var(--agro-text, #222);
  min-height: 44px;
}

.agro-event-detail-actions--organizer .agro-event-ics-btn:hover {
  background: var(--agro-primary-bg, #ecf5e9);
  border-color: var(--agro-primary, #2d7a3d);
  color: var(--agro-primary-dark, #1b5e20);
}

@media (max-width: 560px) {
  .agro-event-rsvp-overview {
    padding: 14px 8px;
  }

  .agro-event-rsvp-overview__num {
    font-size: 22px;
  }

  .agro-event-detail-actions--organizer {
    flex-direction: column;
  }

  .agro-event-detail-actions--organizer .agro-event-action-btn,
  .agro-event-detail-actions--organizer .agro-event-ics-btn {
    width: 100%;
    /* FIX: --primary ima flex: 1 1 200px za desktop (rast horizontalno).
       Kad parent postane column-direction, flex-grow:1 rasteze dugme VERTIKALNO
       da popuni preostalu visinu — rezultat je ogromno "Pozovi prijatelje"
       dugme. Reset na flex:0 0 auto da koristi prirodnu visinu (44px min-height). */
    flex: 0 0 auto;
  }

  .agro-event-action-btn--danger {
    margin-left: 0;
  }
}

/* === Visitor action bar — Idem/Možda + Dodaj u kalendar (inline) ===
   Posetilac (ne-organizator) vidi 3 dugmeta u jednom redu. Trik:
   .agro-event-rsvp (rsvp-buttons.phtml wrapper) koristi display:contents
   da svoja Idem/Možda decu propusti u parent flex; sva 3 dugmeta postaju
   ravnopravna flex deca i dobijaju jednaku širinu. */
.agro-event-detail-actions--visitor {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}

.agro-event-detail-actions--visitor .agro-event-rsvp {
  display: contents;
}

.agro-event-detail-actions--visitor .agro-event-rsvp-btn,
.agro-event-detail-actions--visitor .agro-event-ics-btn {
  flex: 1 1 0;
  font-size: 14px;
  min-height: 44px;
  min-width: 0;
  padding: 10px 14px;
}

@media (max-width: 560px) {
  .agro-event-detail-actions--visitor {
    flex-direction: column;
  }

  .agro-event-detail-actions--visitor .agro-event-rsvp-btn,
  .agro-event-detail-actions--visitor .agro-event-ics-btn {
    width: 100%;
  }
}

/* === 22. ICS EXPORT BUTTON + MAPS EMBED === */

.agro-event-ics-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--agro-surface-card, #ffffff);
  color: var(--agro-primary, #2d7a3d);
  border: 1.5px solid var(--agro-primary, #2d7a3d);
  border-radius: var(--agro-radius-input, 8px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
  min-height: 44px;
}

.agro-event-ics-btn:hover {
  background: var(--agro-primary, #2d7a3d);
  color: #fff;
  text-decoration: none;
}

.agro-event-ics-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Maps embed */

.agro-event-maps {
  margin: 24px 0;
}

.agro-event-maps__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--agro-text-primary, #1a1a1a);
  margin: 0 0 12px;
}

/* Detail page: native google.maps.Map container (replaces iframe) */
.agro-event-maps__container {
  background: var(--agro-surface-muted, #f4f4f4);
  border-radius: var(--agro-radius-card, 12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 320px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.agro-event-maps__canvas {
  height: 100%;
  width: 100%;
}

/* Permanent scroll-lock badge — vidljiv od početka (jasan UX), dva state-a (locked / unlocked) */
.agro-event-maps__scroll-hint {
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border-radius: var(--agro-radius-input, 8px);
  bottom: 12px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  left: 50%;
  opacity: 0;
  padding: 8px 14px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 250ms ease, transform 250ms ease, background 300ms ease;
  white-space: nowrap;
  z-index: 1000; /* iznad Leaflet zoom kontrola (zoom controls = 1000-ish) */
}

.agro-event-maps__scroll-hint--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.agro-event-maps__scroll-hint--unlocked {
  background: var(--agro-primary, #2d7a3d);
}

/* Default: prikaži "locked" state, sakrij "unlocked" state */
.agro-event-maps__scroll-hint-locked,
.agro-event-maps__scroll-hint-unlocked {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.agro-event-maps__scroll-hint-unlocked {
  display: none;
}

/* Toggle: kad je --unlocked klasa aktivna, prikaži unlocked text, sakrij locked */
.agro-event-maps__scroll-hint--unlocked .agro-event-maps__scroll-hint-locked {
  display: none;
}

.agro-event-maps__scroll-hint--unlocked .agro-event-maps__scroll-hint-unlocked {
  display: inline-flex;
}

.agro-event-maps__fallback {
  align-items: center;
  background: var(--agro-surface-muted, #f4f4f4);
  color: var(--agro-text-muted, #6b6b6b);
  display: flex;
  flex-direction: column;
  gap: 8px;
  inset: 0;
  justify-content: center;
  position: absolute;
  text-decoration: none;
  z-index: 0;
}

/* Meta row ispod mape — koord display + akcije (Directions, Streetview) */
.agro-event-maps__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 10px;
}

.agro-event-maps__coords {
  align-items: center;
  color: var(--agro-text-muted, #6b6b6b);
  display: inline-flex;
  font-family: var(--agro-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 12px;
  gap: 6px;
}

.agro-event-maps__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.agro-event-maps__action {
  align-items: center;
  color: var(--agro-primary, #2d7a3d);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  text-decoration: none;
}

.agro-event-maps__action:hover {
  color: var(--agro-primary-dark, #1b5e20);
  text-decoration: underline;
}

/* === LOCATION PICKER (edit/create drawer) === */

/* Wrap oko glavnog Lokacija input-a + mape */
.agro-event-location-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Anchor — input + dropdown share isti offset parent (dropdown se overlay-uje preko mape ispod) */
.agro-event-location-search-anchor {
  position: relative;
}

.agro-event-location-picker__canvas {
  background: var(--agro-surface-muted, #f4f4f4);
  border-radius: var(--agro-radius-input, 8px);
  height: 260px;
  overflow: hidden;
  width: 100%;
}

.agro-event-location-picker__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.agro-event-location-picker__btn {
  align-items: center;
  background: var(--agro-surface-card, #ffffff);
  border: 1px solid var(--agro-border, #e0e0e0);
  border-radius: var(--agro-radius-input, 8px);
  color: var(--agro-text, #222);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.agro-event-location-picker__btn:hover {
  background: var(--agro-primary-bg, #ecf5e9);
  border-color: var(--agro-primary, #2d7a3d);
  color: var(--agro-primary-dark, #1b5e20);
}

.agro-event-location-picker__btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.agro-event-location-picker__coords {
  color: var(--agro-text-muted, #6b6b6b);
  display: none;
  font-family: var(--agro-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 12px;
}

.agro-event-location-picker__coords--visible {
  display: inline;
}

.agro-event-location-picker__hint {
  color: var(--agro-text-muted, #6b6b6b);
  font-size: 12px;
  margin: 0;
}

/* Nominatim autocomplete dropdown — anchored ispod input-a (.agro-event-location-search-anchor parent) */
.agro-event-location-picker__results {
  background: var(--agro-surface-card, #ffffff);
  border: 1px solid var(--agro-border, #e0e0e0);
  border-radius: var(--agro-radius-input, 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: none;
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1100;
}

.agro-event-location-picker__results.is-open {
  display: block;
}

.agro-event-location-picker__result {
  color: var(--agro-text, #222);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 12px;
  transition: background 100ms ease;
}

.agro-event-location-picker__result:hover,
.agro-event-location-picker__result:focus {
  background: var(--agro-primary-bg, #ecf5e9);
  color: var(--agro-primary-dark, #1b5e20);
}

/* Leaflet container override — match platform corner radius i bez tipičnog white border-a */
.agro-event-maps__canvas.leaflet-container,
.agro-event-location-picker__canvas.leaflet-container {
  border-radius: var(--agro-radius-input, 8px);
  font-family: var(--agro-font-body, inherit);
}

.agro-event-maps__container .leaflet-control-attribution {
  font-size: 10px;
}

/* Picker: crosshair kursor da signalizira "klikni za pin" */
.agro-event-location-picker__canvas.leaflet-container {
  cursor: crosshair;
}

.agro-event-location-picker__canvas.leaflet-container .leaflet-marker-icon,
.agro-event-location-picker__canvas.leaflet-container .leaflet-control,
.agro-event-location-picker__canvas.leaflet-container .leaflet-control-zoom a {
  cursor: pointer;
}

/* Draft marker — kad nema initial coords, marker je u centru sa 50% opacity da signalizira
   "ovo je preview, kliknite mapu za pravi pin". Posle prvog click/drag → full opacity. */
.agro-event-location-picker__canvas .leaflet-marker-icon.leaflet-marker-draft,
.agro-event-location-picker__canvas .leaflet-marker-icon.leaflet-marker-draft + .leaflet-marker-shadow {
  filter: grayscale(60%);
  opacity: 0.55;
}

/* Welcome overlay — instrukcija u picker-u kad nema koord */
.agro-event-location-picker__welcome {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--agro-radius-input, 8px);
  color: var(--agro-text, #222);
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  inset: 50% 16px auto 16px;
  padding: 10px 14px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 250ms ease;
  z-index: 800;
}

.agro-event-location-picker__welcome--hidden {
  opacity: 0;
  visibility: hidden;
}

.agro-event-location-picker__canvas {
  position: relative;
}

/* === FAZA B MOBILE OVERRIDES === */

@media (max-width: 575px) {
  .agro-event-invite-drawer {
    width: 100vw;
  }

  .agro-event-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .agro-event-privacy-toggle__options {
    flex-direction: column;
  }

  .agro-event-maps__container {
    height: 240px;
  }

  .agro-event-location-picker__canvas {
    height: 220px;
  }
}

@media (max-width: 360px) {
  /* Touch target enforcement na uskim ekranima (P2-4 polish) */
  .agro-event-qa-item__action,
  .agro-event-invite-drawer__send {
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .agro-event-ics-btn {
    width: 100%;
    justify-content: center;
  }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  .agro-event-invite-drawer,
  .agro-event-gallery__item {
    transition: none;
  }
}

/* ==========================================================================
   "PODELI NA FEED" — share CTA + modal (zamena za publisher-box)
   ========================================================================== */

.agro-event-share-cta {
  align-items: center;
  background: var(--agro-elevated, #fff);
  border: 1px solid var(--agro-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 18px;
}

.agro-event-share-cta__icon {
  align-items: center;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.04) 100%);
  border-radius: 12px;
  color: var(--agro-primary, #2e7d32);
  display: inline-flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.agro-event-share-cta__body {
  flex: 1;
  min-width: 0;
}

.agro-event-share-cta__title {
  color: var(--agro-text, #1f2937);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.agro-event-share-cta__subtitle {
  color: var(--agro-text-muted, #64748b);
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}

.agro-event-share-cta__btn {
  background: var(--agro-primary, #2e7d32);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  transition: filter 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.agro-event-share-cta__btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.agro-event-share-cta__btn:disabled,
.agro-event-share-cta__btn.is-shared {
  background: #94a3b8;
  cursor: default;
}

@media (max-width: 640px) {
  .agro-event-share-cta {
    flex-wrap: wrap;
  }
  .agro-event-share-cta__btn {
    width: 100%;
  }
}

/* ---------- Modal ---------- */

.agro-event-share-modal {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1080;
}

.agro-event-share-modal[hidden] {
  display: none;
}

.agro-event-share-modal__backdrop {
  background: rgba(15, 23, 42, 0.55);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.agro-event-share-modal__dialog {
  background: var(--agro-elevated, #fff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: calc(100vh - 48px);
  max-width: 560px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
}

.agro-event-share-modal__header {
  align-items: center;
  border-bottom: 1px solid var(--agro-border, #e5e7eb);
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding: 16px 20px;
}

.agro-event-share-modal__title {
  color: var(--agro-text, #1f2937);
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.agro-event-share-modal__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--agro-text-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition: background-color 0.15s ease;
  width: 32px;
}

.agro-event-share-modal__close:hover {
  background: var(--agro-surface, #f1f5f9);
  color: var(--agro-text, #1f2937);
}

.agro-event-share-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.agro-event-share-modal__caption-label {
  color: var(--agro-text, #1f2937);
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.agro-event-share-modal__req {
  color: #dc2626;
}

.agro-event-share-modal__caption {
  background: var(--agro-surface, #f8fafc);
  border: 1px solid var(--agro-border, #e5e7eb);
  border-radius: 10px;
  color: var(--agro-text, #1f2937);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.agro-event-share-modal__caption:focus {
  background: #fff;
  border-color: var(--agro-primary, #2e7d32);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
  outline: none;
}

.agro-event-share-modal__caption-meta {
  align-items: center;
  color: var(--agro-text-muted, #64748b);
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  margin-top: 6px;
}

.agro-event-share-modal__hint {
  font-style: italic;
}

.agro-event-share-modal__preview-label {
  color: var(--agro-text-muted, #64748b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 18px 0 8px;
  text-transform: uppercase;
}

/* ---------- Preview kartica u modalu ---------- */

.agro-event-share-preview {
  background: var(--agro-surface, #f8fafc);
  border: 1px solid var(--agro-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}

.agro-event-share-preview__hero {
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  position: relative;
}

.agro-event-share-preview__hero img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.agro-event-share-preview__category {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  left: 10px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  position: absolute;
  text-transform: uppercase;
  top: 10px;
}

.agro-event-share-preview__body {
  padding: 12px 14px;
}

.agro-event-share-preview__title {
  color: var(--agro-text, #1f2937);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}

.agro-event-share-preview__meta {
  align-items: center;
  color: var(--agro-text-muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 10px;
}

.agro-event-share-preview__meta-item {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.agro-event-share-preview__meta-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ---------- Modal footer ---------- */

.agro-event-share-modal__footer {
  align-items: center;
  border-top: 1px solid var(--agro-border, #e5e7eb);
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
}

.agro-event-share-modal__cancel {
  background: transparent;
  border: 1px solid var(--agro-border, #e5e7eb);
  border-radius: 8px;
  color: var(--agro-text-muted, #64748b);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.agro-event-share-modal__cancel:hover {
  background: var(--agro-surface, #f1f5f9);
  color: var(--agro-text, #1f2937);
}

.agro-event-share-modal__submit {
  align-items: center;
  background: var(--agro-primary, #2e7d32);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  padding: 9px 18px;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.agro-event-share-modal__submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.agro-event-share-modal__submit:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .agro-event-share-modal__dialog {
    border-radius: 16px 16px 0 0;
    bottom: 0;
    left: 0;
    max-height: 92vh;
    right: 0;
    top: auto;
    transform: none;
    width: 100%;
  }
}

/* ==========================================================================
   FEED EVENT CARD — render u timeline post-u kad post.event_id > 0
   ========================================================================== */

.agro-feed-event-card {
  background: var(--agro-elevated, #fff);
  border: 1px solid var(--agro-border, #e5e7eb);
  border-radius: 12px;
  color: inherit;
  display: block;
  margin: 10px 0;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.agro-feed-event-card:hover,
.agro-feed-event-card:focus-visible {
  border-color: var(--agro-primary, #2e7d32);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  color: inherit;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Hero */
.agro-feed-event-card__hero {
  aspect-ratio: 16 / 9;
  background: var(--agro-surface, #f1f5f9);
  overflow: hidden;
  position: relative;
}

.agro-feed-event-card__hero img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.agro-feed-event-card__category {
  background: rgba(15, 23, 42, 0.72);
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  left: 12px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  position: absolute;
  text-transform: uppercase;
  top: 12px;
}

/* Dinamički broj dana iznad placeholder kalendara (kad event nema cover).
   Pozicija odgovara centru kalendar ikone iz event-placeholder.svg
   (viewBox 1200×600 → body kalendara centriran na ~50% × 51% container-a
   nakon object-fit: cover). Font-size skalira sa širinom cover-a. */
.agro-feed-event-card__cover-day {
  color: #2e7d32;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 51%;
  transform: translate(-50%, -50%);
}

@media (max-width: 575px) {
  .agro-feed-event-card__cover-day {
    font-size: 20px;
  }
}

/* Date badge — kalendar pinned u gornjem desnom ćošku hero-a */
.agro-feed-event-card__date-badge {
  align-items: center;
  background: #fff;
  border-radius: 10px;
  bottom: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  color: var(--agro-text, #1f2937);
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  left: 12px;
  min-width: 52px;
  padding: 6px 8px;
  position: absolute;
}

.agro-feed-event-card__day {
  color: var(--agro-primary, #2e7d32);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.agro-feed-event-card__month {
  color: var(--agro-text-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Body */
.agro-feed-event-card__body {
  padding: 14px 16px 16px;
}

.agro-feed-event-card__title {
  color: var(--agro-text, #1f2937);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.agro-feed-event-card__meta {
  color: var(--agro-text-muted, #64748b);
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 6px;
}

.agro-feed-event-card__meta-item {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.agro-feed-event-card__meta-item svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* Footer */
.agro-feed-event-card__footer {
  align-items: center;
  border-top: 1px solid var(--agro-border, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
}

.agro-feed-event-card__rsvp {
  color: var(--agro-text-muted, #64748b);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 12px;
}

.agro-feed-event-card__rsvp-item {
  align-items: baseline;
  display: inline-flex;
  gap: 3px;
}

.agro-feed-event-card__rsvp-item--going strong {
  color: var(--agro-primary, #2e7d32);
}

.agro-feed-event-card__rsvp-item strong {
  color: var(--agro-text, #1f2937);
  font-weight: 700;
}

.agro-feed-event-card__rsvp-empty {
  color: var(--agro-text-muted, #94a3b8);
  font-size: 12px;
  font-style: italic;
}

.agro-feed-event-card__cta {
  align-items: center;
  color: var(--agro-primary, #2e7d32);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  transition: gap 0.15s ease;
}

.agro-feed-event-card:hover .agro-feed-event-card__cta {
  gap: 9px;
}