/* Media styling for rich content (articles/services).
   Goal: stable layout (no jumping sizes), nice posters, and consistent spacing. */

/* Wrapper reserves space immediately -> no CLS */
.vipdez-media {
  position: relative;
  width: 100%;
  max-width: 56rem; /* ~896px */
  margin: 1.25rem auto;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
}

/* Most of your clips are landscape; keep it stable */
.vipdez-media--16x9 { aspect-ratio: 16 / 9; }

/* Video fills wrapper (keeps reserved height) */
.vipdez-media video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Inside Tailwind prose blocks too */
.prose .vipdez-media { max-width: 100%; }

/* Optional: make images inside rich text more consistent */
.prose img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   Accordion (details/summary) support
   - Used inside admin text blocks (sanitized rich HTML)
   - Also prevents the browser default marker from appearing next to our custom icons
-------------------------------------------------------------------*/

/* Remove default triangle/marker in Chrome/Safari/Firefox */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

/* Nice defaults for <details> placed inside rich text blocks */
.prose details {
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background: #fff;
  overflow: hidden;
  margin: 1rem 0;
}

.prose details > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.prose details > summary + * {
  padding: 0 1.25rem 1.25rem;
}

.prose details[open] > summary {
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}