/* ==========================================================================
   Course-success verse — home popup (dialog) + profile band
   Velvet burgundy field, gold-leaf double rule, a gold seal breaking the frame.
   ========================================================================== */

.smab-verse {
    --cv-gold-light: #E6CB8F;
    --cv-field: radial-gradient(120% 90% at 50% 0%, var(--smab-burgundy) 0%, var(--smab-burgundy-deep) 55%, var(--smab-burgundy-dark) 100%);
}

.smab-verse__card {
    position: relative;
    margin: 0;
    background: var(--cv-field);
    color: var(--smab-cream-soft);
    border: 1px solid var(--smab-gold-leaf);
    box-shadow: var(--smab-shadow-xl);
    text-align: center;
}

/* Inner gold rule, inset from the outer one */
.smab-verse__card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(230, 203, 143, 0.55);
    pointer-events: none;
}

/* The seal — the one bold element */
.smab-verse__seal {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F1DDAA 0%, var(--cv-gold-light) 30%, var(--smab-gold-leaf) 75%, #94733A 100%);
    color: var(--smab-burgundy-dark);
    box-shadow:
        0 0 0 4px var(--smab-burgundy-deep),
        0 0 0 5px var(--smab-gold-leaf),
        0 10px 24px rgba(20, 5, 8, 0.45);
}

.smab-verse__seal svg { filter: drop-shadow(0 1px 0 rgba(255, 240, 210, 0.5)); }

.smab-verse__title {
    margin: 0 0 var(--smab-s-4);
    font-family: var(--smab-font-body);
    font-size: var(--smab-fs-md);
    font-weight: 600;
    color: var(--cv-gold-light);
}

.smab-verse__quote {
    margin: 0 auto;
    padding: 0;
    border: 0;
    max-width: 30ch;
}

.smab-verse__quote p {
    margin: 0;
    font-family: var(--smab-font-display-ar);
    font-size: clamp(26px, 4.4vw, 38px);
    line-height: 1.85;
    font-weight: 700;
    color: var(--smab-cream-soft);
    text-shadow: 0 2px 12px rgba(20, 5, 8, 0.35);
}

.smab-verse__quote cite {
    display: inline-flex;
    align-items: center;
    gap: var(--smab-s-3);
    margin-top: var(--smab-s-3);
    font-family: var(--smab-font-body-ar);
    font-style: normal;
    font-size: var(--smab-fs-sm);
    color: var(--cv-gold-light);
}

.smab-verse__quote cite::before,
.smab-verse__quote cite::after {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--smab-gold-leaf);
}

.smab-verse__translation {
    margin: var(--smab-s-4) auto 0;
    max-width: 52ch;
    font-family: var(--smab-font-display-en);
    font-style: italic;
    font-size: var(--smab-fs-md);
    line-height: 1.6;
    color: rgba(250, 246, 239, 0.82);
}

.smab-verse__translation span {
    display: block;
    margin-top: var(--smab-s-1);
    font-family: var(--smab-font-body-en);
    font-style: normal;
    font-size: var(--smab-fs-xs);
    color: var(--cv-gold-light);
}

/* ---------- Home popup (centered) ---------- */
.smab-verse--dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(560px, calc(100vw - 32px));
    height: fit-content;
    max-height: calc(100vh - 32px);
    padding: 58px 0 0;          /* room for the seal breaking the frame */
    border: 0;
    background: transparent;
    overflow: visible;
}

.smab-verse--dialog::backdrop {
    background: rgba(28, 8, 12, 0.72);
    backdrop-filter: blur(3px);
}

.smab-verse--dialog .smab-verse__card {
    padding: 64px var(--smab-s-6) var(--smab-s-6);
}

.smab-verse--dialog .smab-verse__seal {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.smab-verse__x {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cv-gold-light);
    cursor: pointer;
    transition: background-color 160ms ease;
}

.smab-verse__x:hover { background: rgba(230, 203, 143, 0.14); }

.smab-verse__amen {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: var(--smab-s-5);
    min-width: 150px;
    padding: 12px 32px;
    border: 1px solid #F1DDAA;
    border-radius: var(--smab-radius);
    background: linear-gradient(180deg, var(--cv-gold-light), var(--smab-gold-leaf));
    color: var(--smab-burgundy-dark);
    font-family: var(--smab-font-body);
    font-size: var(--smab-fs-md);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(20, 5, 8, 0.35);
    transition: filter 160ms ease, transform 160ms ease;
}

.smab-verse__amen:hover { filter: brightness(1.06); transform: translateY(-1px); }

.smab-verse__x:focus-visible,
.smab-verse__amen:focus-visible {
    outline: 2px solid var(--cv-gold-light);
    outline-offset: 3px;
}

/* One orchestrated reveal: the card settles, the seal presses in, then the verse. */
.smab-verse--dialog[open] .smab-verse__card { animation: smab-verse-settle 520ms var(--smab-ease) both; }
.smab-verse--dialog[open] .smab-verse__seal { animation: smab-verse-seal 560ms var(--smab-ease) 260ms both; }
.smab-verse--dialog[open] .smab-verse__quote { animation: smab-verse-fade 700ms var(--smab-ease) 420ms both; }
.smab-verse--dialog[open]::backdrop { animation: smab-verse-fade 400ms ease both; }

@keyframes smab-verse-settle {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes smab-verse-seal {
    from { opacity: 0; transform: translateX(-50%) scale(1.35); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes smab-verse-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Profile band (always visible) ---------- */
.smab-verse--band {
    max-width: 880px;
    margin: var(--smab-s-7) auto var(--smab-s-7);
    padding: 0 var(--smab-s-4);
}

.smab-verse--band .smab-verse__card {
    display: flex;
    align-items: center;
    gap: var(--smab-s-6);
    padding: var(--smab-s-6) var(--smab-s-7);
    text-align: start;
}

.smab-verse--band .smab-verse__seal { flex: none; width: 96px; height: 96px; }
.smab-verse--band .smab-verse__body { flex: 1; min-width: 0; }
.smab-verse--band .smab-verse__quote { margin: 0; max-width: none; }
.smab-verse--band .smab-verse__quote p { font-size: clamp(24px, 3.2vw, 32px); }
.smab-verse--band .smab-verse__translation { margin-inline: 0; }

@media (prefers-reduced-motion: reduce) {
    .smab-verse--dialog[open] .smab-verse__card,
    .smab-verse--dialog[open] .smab-verse__seal,
    .smab-verse--dialog[open] .smab-verse__quote,
    .smab-verse--dialog[open]::backdrop { animation: none; }
}

@media (max-width: 767px) {
    .smab-verse--dialog .smab-verse__card { padding: 58px var(--smab-s-4) var(--smab-s-5); }

    .smab-verse--band { margin: var(--smab-s-6) auto; }
    .smab-verse--band .smab-verse__card {
        flex-direction: column;
        gap: var(--smab-s-4);
        padding: var(--smab-s-6) var(--smab-s-4);
        text-align: center;
    }
    .smab-verse--band .smab-verse__seal { width: 76px; height: 76px; }
    .smab-verse--band .smab-verse__quote { margin: 0 auto; }
    .smab-verse--band .smab-verse__translation { margin-inline: auto; }
}