/* ==========================================================
   ribbon-title — عنوان بشكل شريط (Ribbon) مأخوذ من تصميم الخدمات
   ========================================================== */

:root {
    --ebmnt1-ribbon-background: var(--ebmnt1-color-white);
    --ebmnt1-ribbon-text-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-ribbon-ornament-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-ribbon-tail-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-ribbon-fold-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-ribbon-border-color: var(--ebmnt1-color-helper-pink-soft);
    --ebmnt1-ribbon-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-ribbon-font-size: clamp(1.1rem, 0.9rem + 1.4vw, 1.9rem);
}

.ebmnt1-ribbon {
    position: relative;
    isolation: isolate;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    min-height: 3.4rem;
    border-radius: 0.5rem;
    background-color: var(--ebmnt1-ribbon-background);
    border: 1px solid var(--ebmnt1-ribbon-border-color);
    box-shadow: 0 0.4em 1em -0.5em var(--ebmnt1-ribbon-shadow-color);
    color: var(--ebmnt1-ribbon-text-color);
    font-size: var(--ebmnt1-ribbon-font-size);
    font-weight: 700;
}

/* .ebmnt1-ribbon::before,
.ebmnt1-ribbon::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    z-index: -1;
    width: 1.5rem;
    height: 100%;
    background-color: var(--ebmnt1-ribbon-tail-color);
    background-repeat: no-repeat;
} */

/* ذيل سمكة ضحل + مثلث طيّة داكن (كما في المرجع) */
.ebmnt1-ribbon::before {
    right: -1rem;
    background-image: linear-gradient(to top right, var(--ebmnt1-ribbon-fold-color) 50%, transparent 50%);
    background-size: 0.5rem 0.5rem;
    background-position: left bottom;
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
}

.ebmnt1-ribbon::after {
    left: -1rem;
    background-image: linear-gradient(to top left, var(--ebmnt1-ribbon-fold-color) 50%, transparent 50%);
    background-size: 0.5rem 0.5rem;
    background-position: right bottom;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20% 50%);
}

.ebmnt1-ribbon__title {
    color: var(--ebmnt1-ribbon-text-color);
    font-size: inherit;
}

.ebmnt1-ribbon__ornament {
    color: var(--ebmnt1-ribbon-ornament-color);
    font-size: 0.8em;
    opacity: 0.85;
}