/* Giant Modal — cmod- prefix. Shares the brand vars used across the site
   (--orange #f26522, --magenta #e91e8c) with sensible fallbacks. */

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.cmod-trigger { position: relative; cursor: pointer; display: inline-block; }
.cmod-trigger:focus-visible {
    outline: 3px solid var(--orange, #f26522);
    outline-offset: 3px;
    border-radius: 6px;
}
/* Let inner buttons/links inside a trigger stay clickable but never steal the
   accessible role from the wrapper. */
.cmod-trigger a,
.cmod-trigger button { pointer-events: none; }

/* ── Play overlay ────────────────────────────────────────────────────────────
   Emitted on every trigger but hidden; view.js adds .cmod-has-video to the
   trigger when the linked modal contains a video, which reveals it. */
.cmod-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 72px; height: 72px;
    display: none;              /* shown only via .cmod-has-video below */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 6px;          /* optically centre the triangle */
    background: var(--orange, #f26522);
    border-radius: 50%;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    pointer-events: none;       /* clicks pass through to the trigger */
    opacity: 0.95;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease, opacity 0.3s ease;
}
.cmod-trigger.cmod-has-video .cmod-play { display: flex; }
.cmod-play svg { width: 34px; height: 34px; fill: #fff; display: block; }
.cmod-trigger.cmod-has-video:hover .cmod-play,
.cmod-trigger.cmod-has-video:focus-visible .cmod-play {
    transform: translate(-50%, -50%) scale(1);
    background: var(--magenta, #e91e8c);
    opacity: 1;
}

@media (max-width: 600px) {
    .cmod-play { width: 58px; height: 58px; }
    .cmod-play svg { width: 28px; height: 28px; }
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.cmod-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cmod-modal.cmod-modal--open { opacity: 1; }

/* ── Inner box — spring scale-in, matching the video block feel ──────────── */
.cmod-modal-inner {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-overflow-scrolling: touch;
}
.cmod-modal.cmod-modal--open .cmod-modal-inner { transform: scale(1); }

/* Max-width variants (set on the Modal Content block) */
.cmod-max-small  .cmod-modal-inner { max-width: 480px;  }
.cmod-max-medium .cmod-modal-inner { max-width: 720px;  }
.cmod-max-large  .cmod-modal-inner { max-width: 960px;  }
.cmod-max-full   .cmod-modal-inner { max-width: 1200px; }

/* ── Body — native Gutenberg blocks live here ───────────────────────────── */
.cmod-modal-body { padding: 12px; }
.cmod-modal-body > *:first-child { margin-top: 0; }
.cmod-modal-body > *:last-child  { margin-bottom: 0; }
/* Images added as native blocks fill the box cleanly. */
.cmod-modal-body img { max-width: 100%; height: auto; display: block; }

/* ── Close button ───────────────────────────────────────────────────────── */
.cmod-close {
    position: absolute;
    top: 16px; right: 15px;
    z-index: 2;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 30px; line-height: 1;
    color: var(--orange, #f26522);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, color 0.3s ease;
}
.cmod-close:hover  { transform: rotate(180deg); color: var(--magenta, #e91e8c); }
.cmod-close:focus-visible { outline: 2px solid var(--orange, #f26522); outline-offset: 2px; }

/* ── Scroll lock ─────────────────────────────────────────────────────────── */
body.cmod-noscroll { overflow: hidden; }

/* ── Editor-only presentation ────────────────────────────────────────────── */
.cmod-content-edit {
    border: 2px dashed var(--orange, #f26522);
    border-radius: 12px;
    padding: 0 0 14px;
    background: rgba(242, 101, 34, 0.04);
}
.cmod-content-edit-head {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px dashed rgba(242, 101, 34, 0.4);
    margin-bottom: 10px;
}
.cmod-content-edit-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--orange, #f26522);
}
.cmod-content-edit-body { padding: 0 14px; }
.cmod-trigger-edit { display: inline-block; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cmod-modal { padding: 12px; }
    .cmod-modal-body { padding: 22px; }
    .cmod-close { top: 6px; right: 6px; }
}