/* =====================================================================
   GUL RIBBON DESIGN LANGUAGE  (shared)
   ---------------------------------------------------------------------
   One consistent set of ribbon decorations used across sections:
     .gul-ribbon-tag        header ribbon that overhangs the LEFT edge of a
                            card, with a dark folded tail underneath
     .gul-ribbon-tag--right mirror: overhangs the RIGHT edge
     .gul-ribbon-corner     diagonal banner across a corner (bl / br / tl / tr)
     .gul-ribbon-fold       decorative triangular corner fold (no text)
     .gul-ribbon-slant      slanted end-cap strip (used L/R on carousels)
   Color is driven by --gul-ribbon-bg / --gul-ribbon-fg (default brand blue).
   All decorations are aria-hidden / pointer-events:none where decorative.
   ===================================================================== */

:root {
    --gul-ribbon-bg: #0093fe;
    --gul-ribbon-bg2: #007bda;
    --gul-ribbon-fg: #ffffff;
    --gul-ribbon-dark: #0b1220;
}

/* ---------------------------------------------------------------------
   HEADER TAG RIBBON — overhangs the left edge of a card/header
   Put on a positioned element; the ribbon sticks out to the left with a
   folded shadow tail below it.
   --------------------------------------------------------------------- */
.gul-ribbon-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: -2.5rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background: linear-gradient(135deg, var(--gul-ribbon-bg), var(--gul-ribbon-bg2));
    color: var(--gul-ribbon-fg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 0 8px 18px -8px rgba(0, 147, 254, 0.5);
}
/* Folded dark tail tucked under the ribbon's overhang (shows on every card). */
.gul-ribbon-tag::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    border-width: 0.5rem 0.85rem 0 0;
    border-style: solid;
    border-color: #0b1220 transparent transparent transparent;
}
.gul-ribbon-tag--accent  { --gul-ribbon-bg: #fcb900; --gul-ribbon-bg2: #ff9800; --gul-ribbon-fg: #0b1220; }
.gul-ribbon-tag--dark    { --gul-ribbon-bg: #12213f; --gul-ribbon-bg2: #0b1220; }

/* Mirror: overhang the right edge */
.gul-ribbon-tag--right {
    margin-left: 0;
    margin-right: -2.5rem;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border-radius: 0.5rem 0 0 0.5rem;
}
.gul-ribbon-tag--right::before {
    left: auto;
    right: 0;
    border-width: 0.5rem 0 0 0.85rem;
    border-color: transparent transparent transparent #0b1220;
}

/* ---------------------------------------------------------------------
   CORNER BANNER — diagonal ribbon across a corner (optional label)
   Parent must be position:relative; overflow:hidden.
   --------------------------------------------------------------------- */
.gul-ribbon-corner {
    position: absolute;
    width: 9rem;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gul-ribbon-fg);
    background: linear-gradient(135deg, var(--gul-ribbon-bg), var(--gul-ribbon-bg2));
    padding: 0.3rem 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 3;
}
.gul-ribbon-corner--dark { --gul-ribbon-bg: #12213f; --gul-ribbon-bg2: #0b1220; }
.gul-ribbon-corner--tr { top: 1.4rem; right: -2.6rem; transform: rotate(45deg); }
.gul-ribbon-corner--tl { top: 1.4rem; left: -2.6rem; transform: rotate(-45deg); }
.gul-ribbon-corner--br { bottom: 1.4rem; right: -2.6rem; transform: rotate(-45deg); }
.gul-ribbon-corner--bl { bottom: 1.4rem; left: -2.6rem; transform: rotate(45deg); }

/* ---------------------------------------------------------------------
   DECORATIVE FOLD — a solid triangular corner (no text), e.g. black hero
   accents at the bottom-left / bottom-right.
   --------------------------------------------------------------------- */
.gul-ribbon-fold {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--gul-ribbon-dark);
    z-index: 3;
    pointer-events: none;
}
.gul-ribbon-fold--black { background: #000000; }
/* Clean, symmetric corner triangles (right angle in each corner). */
.gul-ribbon-fold--bl { left: 0;  bottom: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.gul-ribbon-fold--br { right: 0; bottom: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.gul-ribbon-fold--tl { left: 0;  top: 0;    clip-path: polygon(0 0, 100% 0, 0 100%); }
.gul-ribbon-fold--tr { right: 0; top: 0;    clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ---------------------------------------------------------------------
   SLANTED END-CAP — angled ribbon strip used at the left/right of a
   carousel band; opposite slant on each side.
   --------------------------------------------------------------------- */
.gul-ribbon-slant {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.75rem;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, var(--gul-ribbon-bg), var(--gul-ribbon-bg2));
    opacity: 0.9;
}
.gul-ribbon-slant--left  { left: 0;  clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); }
.gul-ribbon-slant--right { right: 0; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.gul-ribbon-slant--accent { --gul-ribbon-bg: #fcb900; --gul-ribbon-bg2: #ff9800; }
.gul-ribbon-slant--dark   { --gul-ribbon-bg: #12213f; --gul-ribbon-bg2: #0b1220; }

@media (max-width: 767px) {
    .gul-ribbon-slant { width: 1.5rem; }
    .gul-ribbon-tag { margin-left: -1.75rem; padding-left: 1.75rem; }
    .gul-ribbon-tag--right { margin-left: 0; margin-right: -1.75rem; padding-right: 1.75rem; padding-left: 1rem; }
}