/* =========================================================================
   AMDT -- Congres Tiznit -- Presentation ("A propos") section visual
   refresh, per the approved Claude Design handoff. Scoped entirely to
   #exposition and its own new .pres-*/.k-badge elements -- never touches
   the generic .split/.adv/.k/.photo-carousel rules used by other
   sections (Hebergement reuses .photo-carousel too), and never touches
   the carousel's own track/slide/dot/arrow markup or behavior.
   ========================================================================= */

#amdt-congres #exposition { position: relative; }

/* 2026-09-17b: widen to match the Programme Scientifique section's own
   content envelope (.prog-wrap uses min(1440px, 100% - 48px); the site's
   generic .wrap used everywhere else stays at 1240px, unaffected -- this
   only widens the wrap instance inside #exposition). */
#amdt-congres #exposition .wrap { width: min(1440px, calc(100% - 48px)); }

#amdt-congres .pres-deco-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .12);
  pointer-events: none;
  z-index: 0;
}
#amdt-congres .pres-deco-ring-1 { top: -220px; right: -120px; width: 420px; height: 420px; }
#amdt-congres .pres-deco-ring-2 { top: -150px; right: 40px; width: 260px; height: 260px; border-color: rgba(37, 99, 235, .09); }

#amdt-congres .pres-deco-label {
  position: absolute;
  top: 54px;
  right: 44px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  z-index: 0;
}
#amdt-congres .pres-deco-label span {
  display: block;
  font-family: Montserrat;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #9db6d9;
  text-align: right;
  margin-bottom: 5px;
}
#amdt-congres .pres-deco-label i {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, var(--blue), rgba(37, 99, 235, 0));
}

#amdt-congres #exposition .wrap.split {
  position: relative;
  z-index: 1;
  align-items: stretch;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 64px;
}

/* ---- Carousel frame + overlay (functionality untouched) ---- */
#amdt-congres #exposition .photo-carousel { border-radius: 14px; }
#amdt-congres #exposition .photo-carousel .photo {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#amdt-congres #exposition .photo-carousel-track { height: 100%; }
#amdt-congres #exposition .photo-carousel-dots,
#amdt-congres #exposition .photo-carousel-prev,
#amdt-congres #exposition .photo-carousel-next {
  z-index: 3;
}

/* Decorative overlays sit near the TOP of the frame, deliberately kept
   clear of the dots/arrows at the bottom so carousel controls are never
   visually or functionally obstructed -- all pointer-events:none as a
   second, independent guarantee of that. */
#amdt-congres .pres-carousel-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(10, 24, 48, 0), rgba(10, 24, 48, .72));
  pointer-events: none;
  z-index: 1;
}
#amdt-congres .pres-carousel-quote {
  position: absolute;
  top: 18px; left: 24px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  opacity: .85;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  pointer-events: none;
  z-index: 2;
}
#amdt-congres .pres-carousel-caption {
  position: absolute;
  top: 58px; left: 24px; right: 112px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.32;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 2;
}
#amdt-congres .pres-carousel-tags {
  position: absolute;
  top: 22px; right: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-family: Montserrat;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #dceeff;
  pointer-events: none;
  z-index: 2;
}

/* ---- Heading accent ---- */
#amdt-congres #exposition .pres-accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--blue);
}

/* ---- Pillars: 4-column grid with circular icon badges ---- */
#amdt-congres #exposition .adv {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
#amdt-congres #exposition .adv .k {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
#amdt-congres #exposition .adv .k-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sky);
  margin-bottom: 10px;
}
#amdt-congres #exposition .adv .k-badge svg { margin-top: 0; }
#amdt-congres #exposition .adv h3 { margin: 0; }
#amdt-congres #exposition .adv p { font-size: 13px; }

/* ---- New info bar (location / date / tagline) ---- */
#amdt-congres .pres-infobar {
  margin-top: 24px;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
#amdt-congres .pres-infobar-main {
  flex: 1.7;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 26px;
  background: linear-gradient(100deg, var(--navy), #102A57);
  flex-wrap: wrap;
}
#amdt-congres .pres-infobar-item { display: flex; align-items: center; gap: 12px; }
#amdt-congres .pres-infobar-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
#amdt-congres .pres-infobar-item strong { display: block; font-size: 15px; font-weight: 700; color: #fff; }
#amdt-congres .pres-infobar-item span { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: #bcd4f2; }
#amdt-congres .pres-infobar-sep { width: 1px; height: 32px; background: rgba(255, 255, 255, .25); flex: 0 0 auto; }
#amdt-congres .pres-infobar-tag {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 24px;
  min-width: 180px;
  background: var(--sky);
  clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  color: #102A57;
}

@media (max-width: 1024px) {
  #amdt-congres #exposition .wrap.split { grid-template-columns: 1fr !important; }
  #amdt-congres #exposition .photo-carousel .photo { aspect-ratio: 16/10; height: auto; }
  #amdt-congres .pres-deco-ring,
  #amdt-congres .pres-deco-label { display: none; }
  #amdt-congres #exposition .adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #amdt-congres .pres-infobar-tag { clip-path: none; }
}

@media (max-width: 640px) {
  #amdt-congres .pres-carousel-caption,
  #amdt-congres .pres-carousel-tags { display: none; }
  #amdt-congres .pres-infobar { flex-direction: column; }
  #amdt-congres #exposition .adv { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #amdt-congres #exposition .photo-carousel-track { transition: none; }
}