/* ============================================================
   HKDEV Hero Slider — Style Bangla BD  v4.0
   Supports 1080×1920 portrait images + mobile responsive
   ============================================================ */

/* ── Brand tokens ─────────────────────────────────────────── */
:root {
    --hkdev-green : #006747;
    --hkdev-red   : #DA291C;
    --hkdev-gold  : #D4AF37;
    --hkdev-ease  : cubic-bezier(.25, .46, .45, .94);
}

/* ── Full-width escape ────────────────────────────────────── */
.hkdev-hero-section {
    position      : relative;
    left          : 50%;
    transform     : translateX(-50%);
    width         : 100vw;
    max-width     : 100vw;
    height        : var(--hkdev-height, 90vh);
    min-height    : var(--hkdev-min-height, 500px);
    overflow      : hidden;
    font-family   : 'Poppins', sans-serif;
    display       : block;
    box-sizing    : border-box;
    padding       : 0 !important;
    margin-top    : 0;
    margin-bottom : 0;
}

/* ── Swiper fills section ─────────────────────────────────── */
.hkdev-hero-section .hkdev-swiper,
.hkdev-hero-section .swiper-wrapper,
.hkdev-hero-section .hkdev-slide {
    width  : 100%;
    height : 100%;
}

/* ── Background layers ────────────────────────────────────── */
.hkdev-slide-bg {
    position         : absolute;
    inset            : 0;
    z-index          : 0;
    width            : 100%;
    height           : 100%;
    overflow         : hidden;
    background-color : #1a1009;
}

/* Desktop bg visible by default, mobile hidden */
.hkdev-desk-bg { display: block; }
.hkdev-mob-bg  { display: none;  }

/* ── Image link fills bg ──────────────────────────────────── */
.hkdev-img-link {
    display : block;
    width   : 100%;
    height  : 100%;
}

/* ── Zoom wrapper — scale here, NOT on img ────────────────── */
/* Keeps object-position working correctly during zoom         */
.hkdev-zoom-wrap {
    width      : 100%;
    height     : 100%;
    transform  : scale(1);
    transition : transform 7s var(--hkdev-ease);
    will-change: transform;
    overflow   : hidden;
}
.swiper-slide-active .hkdev-zoom-wrap {
    transform : scale(1.06);
}

/* ── Actual image ─────────────────────────────────────────── */
.hkdev-bg-img {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    /* object-position set inline per-slide from admin */
}

/* ── Dark overlay ─────────────────────────────────────────── */
.hkdev-overlay {
    position   : absolute;
    inset      : 0;
    z-index    : 1;
    background :
        linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.38) 55%, transparent 100%),
        linear-gradient(to top,   rgba(0,0,0,.42) 0%, transparent 55%);
}

/* ── Content layer ────────────────────────────────────────── */
.hkdev-slide-content {
    position    : absolute;
    inset       : 0;
    z-index     : 2;
    display     : flex;
    align-items : center;
}

.hkdev-inner {
    width      : 100%;
    padding    : 0 clamp(20px, 5vw, 60px);
    max-width  : 580px;
    box-sizing : border-box;
}

/* ── Tag line ─────────────────────────────────────────────── */
.hkdev-tag {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    margin-bottom : 18px;
    opacity       : 0;
    transform     : translateY(22px);
    transition    : opacity .65s var(--hkdev-ease) .1s,
                    transform .65s var(--hkdev-ease) .1s;
}
.swiper-slide-active .hkdev-tag {
    opacity   : 1;
    transform : translateY(0);
}
.hkdev-tag-line {
    display     : inline-block;
    width       : 32px;
    height      : 1.5px;
    background  : var(--hkdev-gold);
    flex-shrink : 0;
}
.hkdev-tag-text {
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : .22em;
    text-transform : uppercase;
    color          : var(--hkdev-gold);
}

/* ── Headline ─────────────────────────────────────────────── */
.hkdev-headline {
    font-family : 'Hind Siliguri', 'Poppins', sans-serif;
    font-size   : clamp(1.8rem, 5vw, 3.8rem);
    font-weight : 700;
    line-height : 1.15;
    margin      : 0 0 14px;
    text-shadow : 0 2px 24px rgba(0,0,0,.35);
    opacity     : 0;
    transform   : translateY(28px);
    transition  : opacity .72s var(--hkdev-ease) .22s,
                  transform .72s var(--hkdev-ease) .22s;
}
.swiper-slide-active .hkdev-headline {
    opacity   : 1;
    transform : translateY(0);
}
.hkdev-h-white { color: #ffffff; }
.hkdev-h-gold  { color: var(--hkdev-gold); }

/* ── Sub text ─────────────────────────────────────────────── */
.hkdev-subtext {
    font-size  : clamp(.82rem, 1.4vw, 1rem);
    color      : rgba(255,255,255,.76);
    line-height: 1.75;
    max-width  : 430px;
    margin     : 0 0 28px;
    opacity    : 0;
    transform  : translateY(20px);
    transition : opacity .7s var(--hkdev-ease) .36s,
                 transform .7s var(--hkdev-ease) .36s;
}
.swiper-slide-active .hkdev-subtext {
    opacity   : 1;
    transform : translateY(0);
}

/* ── CTA row ──────────────────────────────────────────────── */
.hkdev-cta-row {
    display   : flex;
    flex-wrap : wrap;
    gap       : 12px;
    opacity   : 0;
    transform : translateY(20px);
    transition: opacity .7s var(--hkdev-ease) .5s,
                transform .7s var(--hkdev-ease) .5s;
}
.swiper-slide-active .hkdev-cta-row {
    opacity   : 1;
    transform : translateY(0);
}

.hkdev-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 13px 28px;
    border-radius  : 50px;
    font-family    : 'Poppins', sans-serif;
    font-size      : 13px;
    font-weight    : 600;
    letter-spacing : .05em;
    text-decoration: none;
    border         : 2px solid transparent;
    cursor         : pointer;
    white-space    : nowrap;
    transition     : transform .22s, box-shadow .22s, background .22s;
}
.hkdev-btn svg  { flex-shrink: 0; }
.hkdev-btn:hover { transform: scale(1.05); text-decoration: none; }

.hkdev-btn-green {
    background : var(--hkdev-green);
    color      : #ffffff;
    box-shadow : 0 6px 22px rgba(0,103,71,.45);
}
.hkdev-btn-green:hover {
    background : #005238;
    box-shadow : 0 10px 30px rgba(0,103,71,.6);
    color      : #ffffff;
}
.hkdev-btn-outline {
    background   : transparent;
    color        : #ffffff;
    border-color : rgba(255,255,255,.55);
}
.hkdev-btn-outline:hover {
    background   : rgba(255,255,255,.12);
    border-color : #ffffff;
    color        : #ffffff;
}

/* ── Nav arrows ───────────────────────────────────────────── */
.hkdev-nav {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    z-index         : 10;
    width           : 46px;
    height          : 46px;
    border-radius   : 50%;
    background      : rgba(255,255,255,.18);
    backdrop-filter : blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border          : 1.5px solid rgba(255,255,255,.25);
    color           : #ffffff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    outline         : none;
    transition      : background .22s, transform .22s;
}
.hkdev-nav:hover {
    background : rgba(255,255,255,.32);
    transform  : translateY(-50%) scale(1.08);
}
.hkdev-prev { left : 18px; }
.hkdev-next { right: 18px; }

/* ── Pagination dots ──────────────────────────────────────── */
.hkdev-pagination {
    position  : absolute;
    bottom    : 22px;
    left      : 50%;
    transform : translateX(-50%);
    z-index   : 10;
    display   : flex;
    gap       : 7px;
    align-items: center;
}
.hkdev-pagination .swiper-pagination-bullet {
    width        : 8px;
    height       : 6px;
    border-radius: 3px;
    background   : rgba(255,255,255,.45);
    opacity      : 1;
    transition   : width .3s, background .3s;
    margin       : 0 !important;
}
.hkdev-pagination .swiper-pagination-bullet-active {
    width      : 28px;
    background : var(--hkdev-gold);
}

/* ── Bangladesh flag strip ────────────────────────────────── */
.hkdev-flag-strip {
    position : absolute;
    top      : 0;
    left     : 0;
    right    : 0;
    height   : 5px;
    display  : flex;
    z-index  : 20;
}
.hkdev-flag-strip span:nth-child(1) { flex:1; background: var(--hkdev-green); }
.hkdev-flag-strip span:nth-child(2) { flex:1; background: var(--hkdev-red);   }
.hkdev-flag-strip span:nth-child(3) { flex:1; background: var(--hkdev-gold);  }

/* ── Empty state ──────────────────────────────────────────── */
.hkdev-empty {
    text-align : center;
    padding    : 40px;
    color      : #999;
    font-family: 'Poppins', sans-serif;
    font-size  : 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .hkdev-inner   { max-width: 480px; }
    .hkdev-nav     { width: 40px; height: 40px; }
}

/* Mobile — switch to portrait layout */
@media (max-width: 768px) {

    /* Height: use mobile var */
    .hkdev-hero-section {
        height     : var(--hkdev-mob-height, 100vw);
        min-height : 320px;
    }

    /* Switch images — hide desktop, show mobile */
    .hkdev-desk-bg { display: none;  }
    .hkdev-mob-bg  { display: block; }

    /* Content: push to bottom so face stays visible */
    .hkdev-slide-content {
        align-items : flex-end;
        padding-bottom: 36px;
    }

    /* Stronger overlay from bottom on mobile */
    .hkdev-overlay {
        background:
            linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 45%, transparent 70%),
            linear-gradient(to right, rgba(0,0,0,.3) 0%, transparent 60%);
    }

    .hkdev-inner {
        max-width : 100%;
        padding   : 0 18px;
    }

    /* Smaller text on mobile */
    .hkdev-tag-text   { font-size: 10px; letter-spacing: .15em; }
    .hkdev-tag        { margin-bottom: 10px; }
    .hkdev-headline   { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 8px; }
    .hkdev-subtext    { font-size: .8rem; margin-bottom: 16px; max-width: 100%; }
    .hkdev-cta-row    { gap: 8px; }
    .hkdev-btn        { padding: 10px 18px; font-size: 12px; }

    /* Smaller arrows */
    .hkdev-nav        { width: 36px; height: 36px; }
    .hkdev-nav svg    { width: 80px; height: 80px; }
    .hkdev-prev       { left:  10px; }
    .hkdev-next       { right: 10px; }
}

/* Small phones */
@media (max-width: 480px) {
    .hkdev-hero-section { min-height: 280px; }
    .hkdev-nav          { display: none; } /* swipe works on small phones */
    .hkdev-btn          { padding: 9px 14px; font-size: 11px; }
}