/* ===========================================================
   Uncode Post Badges – Frontend Styles
   =========================================================== */

/* Wrapper injected by post_thumbnail_html filter fallback */
.upb-image-wrap {
    position: relative;
    display: block;
    overflow: hidden; /* keep badges inside rounded images */
    line-height: 0;
}

/* Overlay container (one per corner) */
.upb-overlay {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    padding: 8px;
}

/* Corner positions */
.upb-pos-top-left     { top: 0;    left: 0;    align-items: flex-start; }
.upb-pos-top-right    { top: 0;    right: 0;   align-items: flex-end;   }
.upb-pos-bottom-left  { bottom: 0; left: 0;    align-items: flex-start; }
.upb-pos-bottom-right { bottom: 0; right: 0;   align-items: flex-end;   }

/* ── Diagonal positions ──────────────────────────────────────────────────
   The overlay spans the full image width; the badge is centred on the
   diagonal ribbon axis using negative translate + rotate.
   overflow:hidden on .upb-image-wrap / .uncode-media clips the corners.
   ──────────────────────────────────────────────────────────────────────── */
.upb-pos-diagonal-left,
.upb-pos-diagonal-right {
    /* reset padding – we position via transform */
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    pointer-events: none;
}

/* Διαγώνια Αριστερά: ribbon από top-left προς bottom-right, κεντραρισμένο top-left */
.upb-pos-diagonal-left .upb-badge {
    position: absolute;
    top: 14%;
    left: -28%;
    width: 80%;
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: center center;
    pointer-events: auto;
    border-radius: 0 !important; /* ribbon looks better without radius */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Διαγώνια Δεξιά: ribbon από top-right προς bottom-left */
.upb-pos-diagonal-right .upb-badge {
    position: absolute;
    top: 14%;
    right: -28%;
    width: 80%;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: center center;
    pointer-events: auto;
    border-radius: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Individual badge */
.upb-badge {
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Subtle hover lift – corner badges */
.upb-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

/* Diagonal ribbons: keep rotation, only lift slightly */
.upb-pos-diagonal-left  .upb-badge:hover {
    transform: rotate(-45deg) translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}
.upb-pos-diagonal-right .upb-badge:hover {
    transform: rotate(45deg) translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

/* JS-injected absolute wrapper */
.upb-image-wrap > [class*="upb-injected-"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ===========================================================
   Uncode-specific helpers
   (Uncode wraps images in .uncode-media which is already
    position:relative most of the time – we make sure)
   =========================================================== */
.uncode-media {
    position: relative;
}

/* When Uncode uses a figure tag */
figure.wp-block-post-featured-image,
.isotope-item figure,
.owl-item figure {
    position: relative;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .upb-badge { transition: none; }
}