/* =============================================================================
   Diakonis — Post Banner (single Blog / Actualité posts)
   The single-post banner is either a plain image or a swipeable carousel of the
   featured image + gallery images. Design system: brand purple #350F79 controls,
   magenta #C434C9 hover, 15px radius, #page-container-scoped to beat Divi, real px
   (site renders at zoom:0.8).
   ============================================================================= */

/* --- shared: full-width, 15px rounded ------------------------------------- */
#page-container .dkBanner { position:relative; width:100%; margin:0; }
#page-container .dkBanner__img { display:block; width:100%; }

/* single (plain banner): natural aspect, just rounded ---------------------- */
#page-container .dkBanner--single .dkBanner__img {
	height:auto; border-radius:15px;
}

/* --- carousel ------------------------------------------------------------- */
#page-container .dkBanner__viewport {
	position:relative; overflow:hidden; border-radius:15px;
	background:#F0ECF5; /* placeholder tint while images load */
}
#page-container .dkBanner__track {
	display:flex; height:100%;
	transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform;
}
#page-container .dkBanner__slide { position:relative; flex:0 0 100%; height:100%; }
#page-container .dkBanner--carousel .dkBanner__img {
	width:100%; height:100%; object-fit:cover; border-radius:0;
}

/* bottom scrim so purple arrows + dots stay legible on any photo, without a
   "container" behind the arrows */
#page-container .dkBanner__scrim {
	position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
	background:linear-gradient(to top, rgba(23,11,58,.28), rgba(23,11,58,0));
	z-index:1;
}

/* arrows — bare brand-purple icons, NO circular container ------------------ */
#page-container .dkBanner__arrow {
	position:absolute; top:50%; transform:translateY(-50%); z-index:3;
	appearance:none; -webkit-appearance:none; background:none; border:0; padding:4px;
	margin:0; cursor:pointer; color:#350F79; line-height:0;
	filter:drop-shadow(0 2px 6px rgba(23,11,58,.45)); /* legibility, not a box */
	transition:color .2s ease, transform .2s ease, opacity .2s ease;
}
#page-container .dkBanner__arrow svg { display:block; }
#page-container .dkBanner__arrow--prev { left:10px; }
#page-container .dkBanner__arrow--next { right:10px; }
#page-container .dkBanner__arrow:hover  { color:#C434C9; }
#page-container .dkBanner__arrow--prev:hover { transform:translateY(-50%) translateX(-2px); }
#page-container .dkBanner__arrow--next:hover { transform:translateY(-50%) translateX(2px); }
#page-container .dkBanner__arrow:focus-visible {
	outline:3px solid #85CBC6; outline-offset:3px; border-radius:6px; color:#C434C9;
}

/* dots — bottom center ----------------------------------------------------- */
#page-container .dkBanner__dots {
	position:absolute; left:0; right:0; bottom:16px; z-index:3;
	display:flex; justify-content:center; align-items:center; gap:9px;
}
#page-container .dkBanner__dot {
	appearance:none; -webkit-appearance:none; padding:0; margin:0; cursor:pointer;
	width:9px; height:9px; border-radius:50%; border:0;
	background:rgba(255,255,255,.65); box-shadow:0 1px 3px rgba(23,11,58,.4);
	transition:background-color .2s ease, transform .2s ease, width .2s ease;
}
#page-container .dkBanner__dot:hover { background:#FFFFFF; }
#page-container .dkBanner__dot.is-active {
	background:#350F79; width:22px; border-radius:6px; /* active = brand-purple pill */
}
#page-container .dkBanner__dot:focus-visible { outline:2px solid #85CBC6; outline-offset:2px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
	#page-container .dkBanner__arrow svg { width:36px; height:36px; }
	#page-container .dkBanner__arrow--prev { left:4px; }
	#page-container .dkBanner__arrow--next { right:4px; }
	#page-container .dkBanner__dots { bottom:12px; }
}

/* reduced motion: no slide animation */
@media (prefers-reduced-motion: reduce) {
	#page-container .dkBanner__track { transition:none; }
}