.mie-video-chapters { padding-block: clamp(40px, 5vw, 90px); color: #fff; }
/* Match the surrounding section canvas in both the frontend and editor. */
:is(.site-content, .editor-styles-wrapper) .mie-video-chapters {
 width: calc(100% - var(--mie-gutter) * 2);
 max-width: 1760px;
 margin-inline: auto;
}
.editor-styles-wrapper .wp-block[data-type="acf/mie-video-chapters"] {
 width: 100%;
 max-width: none;
 min-width: 0;
 margin-inline: 0;
}
.mie-video-chapters [hidden] { display: none !important; }
/* ACF preview sanitization may remove hidden attributes; keep one panel visible. */
.mie-video-chapters [data-chapter-panel]:not(.is-active) { display:none !important; }
.mie-video-chapters__layout { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 2.5vw, 48px); }
.mie-video-chapters__panels { min-width: 0; }
.mie-video-chapters__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--mie-ink, #17304d); }
.mie-video-chapters__poster, .mie-video-chapters__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.mie-video-chapters__poster { position: absolute; inset: 0; padding: 0; background: transparent; cursor: pointer; }
.mie-video-chapters__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mie-video-chapters__play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(64px, 7vw, 120px); aspect-ratio: 1; border-radius: 50%; background: #fff; }
.mie-video-chapters__play-icon::after { content: ''; margin-left: 10%; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 34px solid var(--mie-red, #cf2030); }
.mie-video-chapters__poster:hover img { filter: brightness(.8); }
.mie-video-chapters__poster:focus-visible { outline-offset: -5px; }
.mie-video-chapters__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-block: 24px 18px; color: var(--mie-cyan, #00d9ff); }
.mie-video-chapters__meta > span, .mie-video-chapters__meta > strong { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.mie-video-chapters__description > :first-child { margin-top: 0; }
.mie-video-chapters__description > :last-child { margin-bottom: 0; }
.mie-video-chapters__list { list-style: none; padding: 0; margin: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--mie-deep-navy, #051323); }
.mie-video-chapters__list li { margin: 0; padding: 0; }
.mie-video-chapters__list button { width: 100%; display: grid; grid-template-columns: minmax(65px, 24%) minmax(0, 1fr); align-items: center; gap: 20px; padding: 22px 18px; border: 0; border-left: 5px solid transparent; color: inherit; background: transparent; font: inherit; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.mie-video-chapters__list button[aria-pressed="true"] { background: #ffffff30; border-left-color: var(--mie-cyan, #00d9ff); }
.mie-video-chapters__list button:hover { background: #ffffff20; }
.mie-video-chapters__list button:focus-visible { outline-offset: -5px; }
.mie-video-chapters__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: var(--mie-ink, #17304d); }
.mie-video-chapters__thumb img { position: absolute; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.mie-video-chapters__thumb > span { position: relative; font-size: 1.35em; }
@media (max-width: 900px) { .mie-video-chapters__layout { grid-template-columns: 1fr; } }