/* ============================================================
   HKDEV Hero Slider — Style Bangla BD
   Version: 3.0
   ============================================================ */

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

/* ── Break out of theme container — full width ────────────── */
.hkdev-hero-section {
    position      : relative;
    /* pull out of any parent padding/container */
    width         : 100vw;
    max-width     : var(--hkdev-max-width, 100vw);
    margin-left   : calc(50% - 50vw);
    margin-right  : calc(50% - 50vw);
    left          : 0;
    right         : 0;

    height        : var(--hkdev-height, 90vh);
    min-height    : var(--hkdev-min-height, 480px);
    overflow      : hidden;
    font-family   : 'Poppins', sans-serif;
    display       : block;
    box-sizing    : border-box;
}

/* safety — remove any padding the theme might add to section */
.hkdev-hero-section,
.hkdev-hero-section * {
    box-sizing: border-box;
}
.hkdev-hero-section > * {
    padding-left : 0;
    padding-right: 0;
}

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

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

/* image link wrapper — must fill the bg */
.hkdev-img-link {
    display : block;
    width   : 100%;
    height  : 100%;
}

/* ── The actual image — covers container ─────────────────── */
.hkdev-bg-img {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;           /* fills box, crops edges */
    /* object-position set inline from admin (per-slide) */
    transition : transform 7s var(--hkdev-ease);
    will-change: transform;
}

/* slow-zoom on active slide */
.swiper-slide-active .hkdev-bg-img {
    transform : scale(1.06);
}

/* ── Dark gradient 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%);
}

/* ── Slide 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;
}

/* ── 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.9rem, 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 buttons 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);
}

/* base button */
.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;
    transition     : transform .22s, box-shadow .22s, background .22s, border-color .22s;
    white-space    : nowrap;
}
.hkdev-btn svg { flex-shrink: 0; }
.hkdev-btn:hover { transform: scale(1.05); text-decoration: none; }

/* green primary */
.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;
}

/* outline ghost */
.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;
}

/* ── Navigation 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;
    transition       : background .22s, transform .22s;
    outline          : none;
}
.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 color strip (top) ───────────────────── */
.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 ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .hkdev-hero-section {
        height     : var(--hkdev-mobile-height, 60vh);
        min-height : 360px;
    }
    .hkdev-inner   { max-width: 100%; }
    .hkdev-nav     { width: 38px; height: 38px; }
    .hkdev-nav svg { width: 16px; height: 16px; }
    .hkdev-prev    { left:  10px; }
    .hkdev-next    { right: 10px; }
    .hkdev-btn     { padding: 11px 20px; font-size: 12px; }
}

@media (max-width: 480px) {
    .hkdev-hero-section { min-height: 300px; }
    .hkdev-cta-row      { gap: 8px; }
    .hkdev-btn          { padding: 10px 16px; font-size: 11px; }
    .hkdev-nav          { display: none; } /* hide on very small — swipe works */
}