/* ==========================================================
   Image Caption Box Block
   Full-width image + floating title + floating caption box
   Supports preset positions + custom offset positioning
   ========================================================== */

.image-caption-box {
    --icb-ratio: 21/7;
    --icb-box-bg: rgba(50,50,50,0.72);
    --icb-box-width: 38%;
    --icb-box-padding: 28px;
    --icb-box-radius: 12px;
    --icb-title-color: #ffffff;
    --icb-caption-color: #ffffff;
    --icb-title-size: 22px;
    --icb-caption-size: 15px;

    position: relative;
    display: block;
    /* overflow:visible ώστε το box να μπορεί να ξεφεύγει έξω */
    overflow: visible;
    border-radius: 0;
    aspect-ratio: var(--icb-ratio);
    width: 100%;
}

/* Το media (εικόνα) κόβεται με το δικό του border-radius */
.icb__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    border: 4px solid black;
}

.icb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Link ───────────────────────────────────────────────── */
.icb__link {
    display: contents;
    text-decoration: none;
    color: inherit;
}

/* ── Floating Title ─────────────────────────────────────── */
.icb__title-wrap {
    position: absolute;
    z-index: 2;
    padding: 20px 24px;
}

.image-caption-box.title-pos-top-left   .icb__title-wrap { top: 0; left: 0; }
.image-caption-box.title-pos-top-right  .icb__title-wrap { top: 0; right: 0; text-align: right; }
.image-caption-box.title-pos-top-center .icb__title-wrap {
    top: 0; left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.icb__title {
    margin: 0;
    font-size: var(--icb-title-size);
    font-weight: 700;
    color: var(--icb-title-color);
    line-height: normal;
    padding: 20px 0 0 20px;

}

/* ── Floating Caption Box ───────────────────────────────── */
.icb__caption-box {
    position: absolute;
    z-index: 3;
    width: var(--icb-box-width);
    background: var(--icb-box-bg);
    border-radius: var(--icb-box-radius);
    padding: var(--icb-box-padding);
    box-sizing: border-box;
}

/* Blur effect */
.image-caption-box.has-blur .icb__caption-box {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── Preset positions ───────────────────────────────────── */
.image-caption-box.box-pos-bottom-right .icb__caption-box {
    bottom: 20px; right: 20px;
}
.image-caption-box.box-pos-bottom-left .icb__caption-box {
    bottom: 20px; left: 20px;
}
.image-caption-box.box-pos-bottom-center .icb__caption-box {
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
}
.image-caption-box.box-pos-center-right .icb__caption-box {
    top: 50%; right: 20px;
    transform: translateY(-50%);
}
.image-caption-box.box-pos-center-left .icb__caption-box {
    top: 50%; left: 20px;
    transform: translateY(-50%);
}

/* ── Custom position — inline style από PHP ─────────────── */
/* Το .box-pos-custom δεν ορίζει position — το κάνει το inline style */
.image-caption-box.box-pos-custom .icb__caption-box {
    /* intentionally empty — positioning comes from inline style */
}

/* ── Caption Text ───────────────────────────────────────── */
.icb__caption-text {
    color: var(--icb-caption-color);
    font-size: var(--icb-caption-size);
    line-height: 1.65;
    text-align: right;
}

.icb__caption-text p:first-child { margin-top: 0; }
.icb__caption-text p:last-child  { margin-bottom: 0; }
.icb__caption-text a {
    color: inherit;
    text-decoration: underline;
}

.image-caption-box-outer {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.image-caption-box,
.image-caption-box * {
  box-sizing: border-box;
}

.image-caption-box {
  width: 100%;
  max-width: 100%;
}


/* ==========================================================
   TABLET & MOBILE
   Image first — title and description underneath
   ========================================================== */
@media screen and (max-width: 1300px) {
   .icb__caption-box {
    width: 80%;
    }
    .icb__title {font-size:28px;}

}

@media screen and (max-width: 1024px) {

    .image-caption-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;

        /* Αφαιρούμε το σταθερό ύψος του desktop */
        aspect-ratio: auto;
        overflow: hidden;

        border-radius: var(--icb-box-radius);
    }

    /* ── Image ─────────────────────────────────────────── */

    .image-caption-box .icb__media {
        position: relative;
        inset: auto;

        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;

        flex: 0 0 auto;
        overflow: hidden;

        border: 0;
        border-bottom: 0;
        border-radius:
            var(--icb-box-radius)
            var(--icb-box-radius)
            0
            0;
    }

    .image-caption-box .icb__img {
        width: 100%;
        height: 100%;
        display: block;

        object-fit: cover;
        object-position: center;
    }

    /* ── Title underneath image ────────────────────────── */

    .image-caption-box .icb__title-wrap,
    .image-caption-box.title-pos-top-left .icb__title-wrap,
    .image-caption-box.title-pos-top-right .icb__title-wrap,
    .image-caption-box.title-pos-top-center .icb__title-wrap {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100%;
        max-width: none;

        padding: 22px 24px 8px;

        background: rgba(50,50,50,0.72);
        text-align: left;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        order: 2;
    }

    .image-caption-box .icb__title {
        margin: 0;
        padding: 0;

        color: #ffffff;
        font-size: clamp(19px, 2.5vw, 23px);
        line-height: 1.25;
        text-align: left;
        white-space: normal;
    }

    /* ── Description underneath title ──────────────────── */

    .image-caption-box .icb__caption-box,
    .image-caption-box.box-pos-custom .icb__caption-box,
    .image-caption-box.box-pos-bottom-right .icb__caption-box,
    .image-caption-box.box-pos-bottom-left .icb__caption-box,
    .image-caption-box.box-pos-bottom-center .icb__caption-box,
    .image-caption-box.box-pos-center-right .icb__caption-box,
    .image-caption-box.box-pos-center-left .icb__caption-box {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: none;
        max-height: none;

        margin: 0;
        padding: 8px 24px 24px;

        background: rgba(50,50,50,0.72);
        border-radius: 0 0 var(--icb-box-radius) var(--icb-box-radius);

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        overflow: visible;
        order: 3;
    }

    .image-caption-box .icb__caption-text {
        margin: 0;

        color: #ffffff;
        font-size: clamp(14px, 1.8vw, 16px);
        line-height: 1.6;
        text-align: left;
    }

    /*
     * Το blur δεν χρειάζεται κάτω από την εικόνα,
     * αφού το box έχει συμπαγές μαύρο background.
     */
    .image-caption-box.has-blur .icb__caption-box {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 768px) {

    .image-caption-box .icb__media {
        aspect-ratio: 7 / 3;
        border-width: 3px;
    }

    .image-caption-box .icb__title-wrap,
    .image-caption-box.title-pos-top-left .icb__title-wrap,
    .image-caption-box.title-pos-top-right .icb__title-wrap,
    .image-caption-box.title-pos-top-center .icb__title-wrap {
        padding: 20px 20px 7px;
    }

    .image-caption-box .icb__caption-box,
    .image-caption-box.box-pos-custom .icb__caption-box,
    .image-caption-box.box-pos-bottom-right .icb__caption-box,
    .image-caption-box.box-pos-bottom-left .icb__caption-box,
    .image-caption-box.box-pos-bottom-center .icb__caption-box,
    .image-caption-box.box-pos-center-right .icb__caption-box,
    .image-caption-box.box-pos-center-left .icb__caption-box {
        padding: 7px 20px 21px;
    }

    .image-caption-box .icb__title {
        font-size: clamp(18px, 5.5vw, 21px);
    }

    .image-caption-box .icb__caption-text {
        font-size: clamp(14px, 4vw, 15px);
        line-height: 1.55;
    }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media screen and (max-width: 480px) {

    .image-caption-box .icb__media {
        aspect-ratio: 1 / 1;
    }

    .image-caption-box .icb__title-wrap,
    .image-caption-box.title-pos-top-left .icb__title-wrap,
    .image-caption-box.title-pos-top-right .icb__title-wrap,
    .image-caption-box.title-pos-top-center .icb__title-wrap {
        padding: 18px 17px 6px;
    }

    .image-caption-box .icb__caption-box,
    .image-caption-box.box-pos-custom .icb__caption-box,
    .image-caption-box.box-pos-bottom-right .icb__caption-box,
    .image-caption-box.box-pos-bottom-left .icb__caption-box,
    .image-caption-box.box-pos-bottom-center .icb__caption-box,
    .image-caption-box.box-pos-center-right .icb__caption-box,
    .image-caption-box.box-pos-center-left .icb__caption-box {
        padding: 6px 17px 18px;
    }
}