/* assets/css/organizer.css */
:root {
  --organizer-max-width: 1100px;
}

.organizer-page {
  padding: clamp(20px, 5vw, 48px);
  width: 100%;
  max-width: var(--organizer-max-width);
  margin: 0 auto;
  display: grid;
  gap: 32px;
}

.organizer-hero {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(17, 26, 46, .92), rgba(10, 18, 32, .92));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(7, 12, 24, .45);
}

.organizer-hero h1 {
  margin: 0;
  font-size: 32px
}

.organizer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted)
}

.organizer-meta__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px
}

.organizer-gallery {
  display: grid;
  gap: 12px
}

.organizer-gallery__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.organizer-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 40px rgba(7, 12, 24, .35)
}

.organizer-gallery__item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block
}

.organizer-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 14px;
  font-size: 14px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 12, .8));
}

.organizer-section {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(10, 18, 32, .85);
  box-shadow: 0 20px 50px rgba(7, 12, 24, .3)
}

.organizer-section h2 {
  margin: 0;
  font-size: 24px
}

.organizer-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted)
}

.organizer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.organizer-socials a {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(77, 163, 255, .35);
  color: var(--primary);
  background: rgba(77, 163, 255, .12)
}

.organizer-events__list {
  display: grid;
  gap: 14px
}

.organizer-event-card {
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(11, 19, 35, .85);
  display: grid;
  gap: 10px
}

.organizer-event-card h3 {
  margin: 0;
  font-size: 20px
}

.organizer-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--muted)
}

.organizer-event-meta span {
  display: flex;
  align-items: center;
  gap: 6px
}

.organizer-event-description {
  margin: 0;
  color: var(--muted)
}

.organizer-map {
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 22px 50px rgba(7, 12, 24, .35)
}

/* Lien du titre d'événement */
.organizer-event-card__link {
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: color .2s ease;
}

.organizer-event-card__link:active,
.organizer-event-card__link:focus {
  background: #fff !important;
  color: #061326 !important;
  outline: 2px solid var(--primary-600);
}

.organizer-event-card__link:active h3,
.organizer-event-card__link:focus h3 {
  color: #061326 !important;
}

.organizer-event-card__link:hover {
  color: var(--primary-600);
  text-decoration: none;
}

.organizer-event-card__link h3 {
  color: var(--text);
  transition: color .2s;
}

.organizer-event-card__link:hover h3 {
  color: var(--primary-600);
}

/* Actions des événements */
.organizer-event-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* Bouton primary */
.organizer-event-card .btn-primary {
  background: var(--primary-600);
  color: #fff;
  border: 2px solid var(--primary-600);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.organizer-event-card .btn-primary:hover {
  background: #fff;
  color: var(--primary-600);
  border-color: var(--primary-600);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(77, 163, 255, 0.18);
}

/* Événements passés avec style légèrement atténué */
.organizer-event-card--past {
  opacity: 0.85;
}

.organizer-event-card--past:hover {
  opacity: 1;
}

@media (max-width:720px) {
  .organizer-hero h1 {
    font-size: 26px
  }

  .organizer-gallery__item img {
    height: 180px
  }

  .organizer-map {
    height: 300px
  }
}