/*
 * BOLESER HERO BANNER WIDGET
 * CSS prefix: blhb-  (Boleser Layout Hero Banner)
 * All values use CSS custom properties from style.css
 *
 * @package boleser
 */

/* =====================================================================
   SECTION SHELL
   ===================================================================== */
.blhb-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0 64px;
    background-color: #FFF8F5;
    background: linear-gradient(135deg, #FFF8F5 0%, #FFF4F0 50%, #FEF9F5 100%);
}

/* Decorative radial glow — pure CSS, no asset needed */
.blhb-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -8%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 90, 40, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.blhb-section::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Inner container sits above decorative glows */
.blhb-container {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   TWO-COLUMN GRID
   ===================================================================== */
.blhb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.blhb-grid.blhb-no-image {
    grid-template-columns: 1fr;
}

/* =====================================================================
   CONTENT COLUMN (left)
   ===================================================================== */
.blhb-content {
    min-width: 0; /* prevent grid blowout */
}

/* =====================================================================
   VISUAL COLUMN (right — hero image)
   ===================================================================== */
.blhb-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.blhb-hero-img {
    width: 100%;
    height: auto;
    border-radius: var(--bl-radius-lg);
    display: block;
    object-fit: cover;
}

.blhb-hero-img--shadow {
    box-shadow: var(--bl-shadow-lg);
}

/* =====================================================================
   BADGE / EYEBROW
   ===================================================================== */
.blhb-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--bl-radius-full);
    font-size: var(--bl-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 20px;
    background: var(--bl-primary-light);
    color: var(--bl-primary);
    border: 1px solid rgba(240, 90, 40, 0.2);
    line-height: 1;
}

.blhb-badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* =====================================================================
   HEADING
   ===================================================================== */
.blhb-title {
    font-size: var(--bl-text-5xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    color: var(--bl-text-primary);
}

.blhb-prefix,
.blhb-post {
    display: block;
    color: var(--bl-text-primary);
}

.blhb-highlight {
    display: block;
    color: var(--bl-primary);
}

/* =====================================================================
   DESCRIPTION
   ===================================================================== */
.blhb-desc {
    font-size: var(--bl-text-lg);
    color: var(--bl-text-secondary);
    line-height: 1.75;
    margin: 0 0 36px;
    max-width: 580px;
}

/* =====================================================================
   POPULAR SEARCHES
   ===================================================================== */
.blhb-popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}

.blhb-popular-label {
    font-size: var(--bl-text-sm);
    font-weight: 600;
    color: var(--bl-text-secondary);
    flex-shrink: 0;
}

.blhb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blhb-tag {
    display: inline-block;
    padding: 5px 14px;
    border: 1.5px solid var(--bl-border);
    border-radius: var(--bl-radius-full);
    font-size: var(--bl-text-sm);
    font-weight: 500;
    color: var(--bl-text-secondary);
    text-decoration: none !important;
    background: var(--bl-white);
    transition: border-color var(--bl-transition-fast),
                color var(--bl-transition-fast),
                background var(--bl-transition-fast),
                transform var(--bl-transition-fast);
    line-height: 1;
}
.blhb-tag:hover {
    border-color: var(--bl-primary);
    color: var(--bl-primary) !important;
    background: var(--bl-primary-light);
    transform: translateY(-1px);
}

/* =====================================================================
   FEATURES
   ===================================================================== */
.blhb-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
}

.blhb-feature {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blhb-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--bl-radius);
    background: var(--bl-primary-light);
    color: var(--bl-primary);
    flex-shrink: 0;
    transition: background var(--bl-transition-fast), color var(--bl-transition-fast);
}

/* FA webfont icon */
.blhb-feature-icon i {
    width: 15px;
    height: 15px;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

/* SVG icon — use fill, not color */
.blhb-feature-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}

.blhb-feature:hover .blhb-feature-icon {
    background: var(--bl-primary);
    color: var(--bl-white);
}
.blhb-feature:hover .blhb-feature-icon i { color: var(--bl-white); }
.blhb-feature:hover .blhb-feature-icon svg { fill: var(--bl-white); }

.blhb-feature-text {
    font-size: var(--bl-text-sm);
    font-weight: 500;
    color: var(--bl-text-primary);
    line-height: 1.3;
}

/* =====================================================================
   ENTRANCE ANIMATIONS
   Elements fade-up into view when .blhb-animated is added by JS
   (or immediately in the Elementor editor)
   ===================================================================== */
.blhb-content > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.blhb-content.blhb-animated > * {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays per child */
.blhb-content.blhb-animated > *:nth-child(1) { transition-delay: 0s;    }
.blhb-content.blhb-animated > *:nth-child(2) { transition-delay: 0.10s; }
.blhb-content.blhb-animated > *:nth-child(3) { transition-delay: 0.18s; }
.blhb-content.blhb-animated > *:nth-child(4) { transition-delay: 0.26s; }
.blhb-content.blhb-animated > *:nth-child(5) { transition-delay: 0.34s; }

/* Skip animation in editor so controls are immediately visible */
.elementor-editor-active .blhb-content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* =====================================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ===================================================================== */
@media (max-width: 1024px) {
    .blhb-section { padding: 64px 0 52px; }
    .blhb-title   { font-size: var(--bl-text-4xl); }
    .blhb-grid    { gap: 36px; }
}

/* =====================================================================
   RESPONSIVE — Mobile (≤ 768px)
   Stack to single column; image moves below content
   ===================================================================== */
@media (max-width: 768px) {
    .blhb-section   { padding: 48px 0 40px; }
    .blhb-title     { font-size: var(--bl-text-3xl); letter-spacing: -0.3px; }
    .blhb-desc      { font-size: var(--bl-text-base); margin-bottom: 28px; }
    .blhb-popular   { margin-bottom: 36px; gap: 8px; }
    .blhb-features  { gap: 14px 20px; }

    .blhb-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .blhb-visual {
        order: -1; /* show image above text on mobile */
        max-height: 320px;
        overflow: hidden;
        border-radius: var(--bl-radius-lg);
    }

    .blhb-hero-img {
        max-height: 320px;
        object-fit: cover;
    }
}

/* =====================================================================
   RESPONSIVE — Small mobile (≤ 480px)
   ===================================================================== */
@media (max-width: 480px) {
    .blhb-section        { padding: 36px 0 32px; }
    .blhb-title          { font-size: var(--bl-text-2xl); }
    .blhb-feature-text   { font-size: var(--bl-text-xs); }
    .blhb-feature-icon   { width: 28px; height: 28px; }
    .blhb-visual         { max-height: 220px; }
    .blhb-hero-img       { max-height: 220px; }
}

/* =====================================================================
   PRINT
   ===================================================================== */
@media print {
    .blhb-section::before,
    .blhb-section::after { display: none; }
    .blhb-content > * { opacity: 1 !important; transform: none !important; }
    .blhb-grid { display: block; }
}