/* Advanced Editor — hero carousel (scoped classes, no .item / .content) */



.az-hero-carousel {

    --az-hero-height: 400px;

    --az-carousel-fit: cover;

    margin: var(--az-theme-outer-margin-y, 1.5rem) auto;

    max-width: 100%;

    clear: both;

}



.az-hero-carousel .az-hero-stage {

    position: relative;

    width: 100%;

    max-width: var(--az-theme-stage-max-width, 920px);

    margin: 0 auto;

    border-radius: var(--az-theme-stage-radius, 16px);

    overflow: hidden;

    box-shadow: var(--az-theme-stage-shadow, 0 12px 40px rgba(0, 0, 0, 0.2));

    background: var(--az-theme-stage-bg, #111);

}

/* Ensure theme variables override inline legacy styles */
.az-hero-carousel .az-hero-stage {
    max-width: var(--az-theme-stage-max-width, 920px) !important;
    border-radius: var(--az-theme-stage-radius, 16px) !important;
    box-shadow: var(--az-theme-stage-shadow, 0 12px 40px rgba(0, 0, 0, 0.2)) !important;
    background: var(--az-theme-stage-bg, #111) !important;
}

.az-hero-carousel .az-hero-main {
    min-height: var(--az-theme-main-min-height, 240px) !important;
}

.az-hero-carousel .az-hero-footer {
    background: var(--az-theme-footer-bg, rgba(0, 0, 0, 0.55)) !important;
    border-top-color: var(--az-theme-footer-border, rgba(255, 255, 255, 0.08)) !important;
}

.az-hero-carousel .az-hero-thumb {
    width: var(--az-theme-thumb-w, 72px) !important;
    height: var(--az-theme-thumb-h, 52px) !important;
    border-radius: var(--az-theme-thumb-radius, 8px) !important;
    background-color: var(--az-theme-thumb-track-bg, #333) !important;
}



.az-hero-carousel .az-hero-main {

    position: relative;

    width: 100%;

    height: var(--az-hero-height);

    min-height: var(--az-theme-main-min-height, 240px);

    overflow: hidden;

}



.az-hero-carousel .az-hero-frame {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: var(--az-carousel-fit);

    background-repeat: no-repeat;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.45s ease, visibility 0.45s ease;

    z-index: 1;

}



.az-hero-carousel .az-hero-frame.is-active {

    opacity: 1;

    visibility: visible;

    z-index: 2;

}



.az-hero-carousel .az-hero-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 1.5rem 1.75rem;

    background: linear-gradient(transparent, var(--az-theme-overlay-bottom, rgba(0, 0, 0, 0.75)));

    color: #fff;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    text-align: left;

    z-index: 3;

    pointer-events: none;

}



.az-hero-carousel .az-hero-overlay a {

    pointer-events: auto;

}



.az-hero-carousel .az-hero-heading {

    margin: 0 0 0.5rem;

    font-size: clamp(1.25rem, 3.5vw, 2rem);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;

    color: #fff !important;

}



.az-hero-carousel .az-hero-text {

    margin: 0 0 1rem;

    font-size: 0.95rem;

    line-height: 1.45;

    color: rgba(255, 255, 255, 0.92) !important;

    max-width: 36rem;

}



.az-hero-carousel .az-hero-link {

    display: inline-block;

    text-decoration: none !important;

}



.az-hero-carousel .az-hero-link-btn {

    padding: 0.5rem 1.1rem;

    border: none;

    border-radius: 8px;

    background: var(--az-theme-link-btn-bg, rgba(255, 255, 255, 0.85));

    color: var(--az-theme-link-btn-color, #111) !important;

    font-size: 0.9rem;

    cursor: pointer;

    transition: background 0.2s;

}



.az-hero-carousel .az-hero-link-btn:hover {

    background: #fff;

}



.az-hero-carousel .az-hero-footer {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.65rem 0.75rem;

    background: var(--az-theme-footer-bg, rgba(0, 0, 0, 0.55));

    border-top: 1px solid var(--az-theme-footer-border, rgba(255, 255, 255, 0.08));

}



.az-hero-carousel .az-hero-thumbs {

    display: flex;

    flex: 1;

    gap: 0.5rem;

    overflow-x: auto;

    padding: 2px 0;

    scrollbar-width: thin;

}



.az-hero-carousel .az-hero-thumb {

    flex: 0 0 auto;

    width: var(--az-theme-thumb-w, 72px);

    height: var(--az-theme-thumb-h, 52px);

    padding: 0;

    border: 2px solid transparent;

    border-radius: var(--az-theme-thumb-radius, 8px);

    background-size: cover;

    background-position: center;

    background-color: var(--az-theme-thumb-track-bg, #333);

    cursor: pointer;

    opacity: 0.65;

    transition: opacity 0.2s, border-color 0.2s, transform 0.2s;

}



.az-hero-carousel .az-hero-thumb:hover {

    opacity: 0.9;

    transform: translateY(-1px);

}



.az-hero-carousel .az-hero-thumb.is-active {

    opacity: 1;

    border-color: var(--az-theme-thumb-active-border, #fff);

}



.az-hero-carousel .az-hero-arrow {

    flex: 0 0 auto;

    width: 36px;

    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

    font-size: 1rem;

    line-height: 1;

    cursor: pointer;

    transition: background 0.2s, transform 0.2s;

}



.az-hero-carousel .az-hero-arrow:hover {

    background: rgba(255, 255, 255, 0.25);

    transform: scale(1.05);

}



.az-hero-carousel[data-az-height="0"] .az-hero-main {

    height: auto;

    aspect-ratio: 16 / 9;

    min-height: 220px;

}



.post-content .az-hero-carousel,

.content .az-hero-carousel,

.card-body .az-hero-carousel {

    max-width: 100%;

}



/* Legacy markup (v1): side cards — minimal fix if migration did not run */

.az-hero-carousel[data-az-variant="hero"]:not(:has(.az-hero-main)) .az-hero-slide > .item {

    display: none !important;

}



.az-hero-carousel[data-az-variant="hero"]:not(:has(.az-hero-main)) .az-hero-slide > .item:nth-child(2) {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: var(--az-hero-height, 400px) !important;

    min-height: 240px !important;

    background-size: cover !important;

    border-radius: 16px !important;

}



.az-hero-carousel[data-az-variant="hero"]:not(:has(.az-hero-main)) .item .content {

    display: block !important;

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    top: auto !important;

    transform: none !important;

    width: auto !important;

    padding: 1.5rem !important;

    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) !important;

}



/* Bootstrap legacy */

.az-post-carousel:not(.az-hero-carousel) {

    --az-carousel-height: 420px;

    --az-carousel-fit: cover;

    margin: 1.5rem 0;

    border-radius: 0.5rem;

    overflow: hidden;

    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);

}



.az-post-carousel:not(.az-hero-carousel) .carousel-inner {

    background: #111;

}



.az-post-carousel:not(.az-hero-carousel) .carousel-item {

    height: var(--az-carousel-height);

    min-height: var(--az-carousel-height);

}



.az-post-carousel:not(.az-hero-carousel) .carousel-item img {

    width: 100%;

    height: 100%;

    object-fit: var(--az-carousel-fit);

}



/* v3: side navigation, click zones, lightbox */

.az-hero-carousel .az-hero-frame.is-active {

    cursor: zoom-in;

}



.az-hero-carousel .az-hero-nav {

    position: absolute;

    top: 50%;

    z-index: 8;

    width: 44px;

    height: 44px;

    margin: 0;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: var(--az-theme-nav-bg, rgba(0, 0, 0, 0.45));

    color: var(--az-theme-nav-color, #fff);

    font-size: 1.75rem;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    transform: translateY(-50%) scale(0.92);

    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;

    pointer-events: none;

}



.az-hero-carousel .az-hero-nav span {

    display: block;

    margin-top: -2px;

}



.az-hero-carousel .az-hero-nav-prev {

    left: 12px;

}



.az-hero-carousel .az-hero-nav-next {

    right: 12px;

}



.az-hero-carousel .az-hero-zone {

    position: absolute;

    top: 0;

    bottom: 0;

    width: 28%;

    z-index: 6;

    cursor: pointer;

}



.az-hero-carousel .az-hero-zone-prev {

    left: 0;

}



.az-hero-carousel .az-hero-zone-next {

    right: 0;

}



.az-hero-carousel .az-hero-main:hover .az-hero-nav,

.az-hero-carousel .az-hero-main:focus-within .az-hero-nav {

    opacity: 1;

    transform: translateY(-50%) scale(1);

    pointer-events: auto;

}



.az-hero-carousel .az-hero-zone-prev:hover ~ .az-hero-nav-prev,

.az-hero-carousel .az-hero-zone-next:hover ~ .az-hero-nav-next,

.az-hero-carousel .az-hero-nav-prev:hover,

.az-hero-carousel .az-hero-nav-next:hover {

    opacity: 1;

    transform: translateY(-50%) scale(1);

    pointer-events: auto;

    background: var(--az-theme-nav-bg-hover, rgba(0, 0, 0, 0.65));

}



.az-hero-carousel .az-hero-nav:hover {

    background: var(--az-theme-nav-bg-hover, rgba(0, 0, 0, 0.72));

}



.az-hero-lightbox {

    position: fixed;

    inset: 0;

    z-index: 10050;

    display: flex;

    align-items: center;

    justify-content: center;

}



.az-hero-lightbox[hidden] {

    display: none !important;

}



.az-hero-lightbox-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.88);

    cursor: zoom-out;

}



.az-hero-lightbox-body {

    position: relative;

    z-index: 2;

    max-width: min(96vw, 1200px);

    max-height: 90vh;

    text-align: center;

}



.az-hero-lightbox-img {

    display: block;

    max-width: 100%;

    max-height: calc(90vh - 48px);

    margin: 0 auto;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);

}



.az-hero-lightbox-counter {

    margin: 0.75rem 0 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.95rem;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

}



.az-hero-lightbox-close {

    position: absolute;

    top: 16px;

    right: 20px;

    z-index: 3;

    width: 44px;

    height: 44px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    font-size: 1.75rem;

    line-height: 1;

    cursor: pointer;

}



.az-hero-lightbox-close:hover {

    background: rgba(255, 255, 255, 0.28);

}



.az-hero-lightbox-nav {

    position: absolute;

    top: 50%;

    z-index: 3;

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

}



.az-hero-lightbox-nav:hover {

    background: rgba(255, 255, 255, 0.25);

}



.az-hero-lightbox-prev {

    left: 20px;

}



.az-hero-lightbox-next {

    right: 20px;

}



body.az-hero-lightbox-open {

    overflow: hidden;

}