/*
 * WooCommerce — Product Category
 * Hero Immersiva (Immersive)
 */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     HERO IMMERSIVA                            ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bpc-category-hero-immersive {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bspc-bg-light);

    height: 320px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 32px;

    transform: translateZ(0);
    padding-top: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    .bpc-category-hero-immersive {
        /* Full-bleed nativo: il template colloca la hero fuori da .bpc-section. */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        height: 300px;
        border-radius: 0;
    }

    .bpc-hero-img {
        object-position: center top;
    }

    /* [Audit v6.0 #4] Mobile overlay — usa stessa variabile RGB per dark mode */
    .bpc-hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0) 0%,
            rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0.1) 35%,
            rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0.80) 65%,
            rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 1.00) 92%
        );
    }
}

@media (min-width: 768px) {
    .bpc-category-hero-immersive {
        height: 420px;
        margin-bottom: 40px;
    }
}

.bpc-hero-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

/* Fallback se non esiste un'immagine di hero. */
.bpc-hero-bg-wrapper.bpc-hero-fallback-gradient {
    background: radial-gradient(circle at 20% 10%, rgba(0,102,204,0.10), rgba(245,245,247,1) 70%);
}

/* Above-the-fold image stays visible from the first paint. */
.bpc-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 1;
    display: block;
}

/* Optional background video (MP4 loop). Poster uses the hero image.
   The overlay remains above the video for readability. */
.bpc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 1;
    pointer-events: none;
}

/* [Audit v6.0 #4] Overlay sfuma verso --bspc-bg-light — usa variabili per dark mode */
.bpc-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    --_overlay-color: var(--bspc-bg-light, 245, 245, 247);
    background: linear-gradient(
        to bottom,
        rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0.05) 0%,
        rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0.15) 30%,
        rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0.50) 55%,
        rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 0.85) 75%,
        rgba(var(--bspc-hero-overlay-rgb, 245, 245, 247), 1.00) 95%
    );
    pointer-events: none;
}

.bpc-hero-inner {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    text-align: center;
    padding: 0 20px;
    margin-top: -20px;

    text-shadow: 0 2px 10px rgba(255,255,255,0.8);

    animation: bpcHeroFadeUp 0.8s var(--bspc-ease-apple) forwards;
}

.bpc-hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 5px 0 0;
    color: var(--bspc-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .bpc-hero-title {
        font-size: 3.5rem;
        margin-top: 10px;
    }
}

/* Animazioni */
/* [Theme Architect] Prefisso keyframes per evitare collisioni cross-template. */
@keyframes bpcHeroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* [v6.0.2] Parallax: trasforma Y controllata da JS via custom property */
/* [v6.0.2] Overlay shimmer su desktop: gradiente che si muove lentamente */
@media (min-width: 768px) {
    .bpc-hero-overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.08) 40%,
            rgba(255,255,255,0) 60%,
            rgba(255,255,255,0.05) 100%
        );
        background-size: 200% 200%;
        animation: bpcHeroShimmer 8s ease-in-out infinite;
        pointer-events: none;
    }
}

@keyframes bpcHeroShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .bpc-hero-img {
        animation: none;
        opacity: 1;
        filter: none;
    }
    .bpc-hero-overlay::after {
        animation: none;
    }
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     BADGES (SEO/UX)                           ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bpc-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.bpc-hero-badge-item {
    margin: 0;
    padding: 0;
}

.bpc-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--bspc-border-subtle);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: var(--bspc-shadow-sm);
    font-size: var(--bspc-font-xs);
    line-height: 1.4;
    font-weight: 600;
    color: var(--bspc-text-primary);
}

/* [Audit] Badge uniformi — rimossa differenziazione per colore */
.bpc-hero-badge.is-brand { border-color: var(--bspc-border-light); }
.bpc-hero-badge.is-category { border-color: var(--bspc-border-light); }
.bpc-hero-badge.is-segment { border-color: var(--bspc-border-light); }


/* Gradient overlay sottile in alto per garantire leggibilità del breadcrumb su qualunque hero */
@media (min-width:961px){
  body.tax-product_cat:has(.bpc-category-hero-immersive) .bpc-breadcrumb-shell{margin-bottom:0}
}

/* === v6.3.13 — Brand page hero padding-top più compatto === */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                     HERO CTA BUTTON                        ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* [Audit v6.0 #brand-4] Hero CTA button styling */
.bpc-hero-cta {
    text-shadow: none;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 20px;
    animation: bpcHeroFadeUp 0.8s var(--bspc-ease-apple) forwards 0.2s;
    animation-fill-mode: both;
}

@media (max-width: 600px) {
    .bpc-hero-cta {
        margin-top: 18px;
        font-size: 0.95rem;
    }
}

/* ===========================================
   v4-macro (2026-05-29) - Trust strip badges
   sotto Hero CTA per role=macro|brand
   =========================================== */
.bpc-hero-trust{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:22px auto 0;
    max-width:760px;
}
.bpc-hero-trust__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.6);
    border-radius:14px;
    padding:12px 8px;
    color:#1d1d1f;
    box-shadow:0 4px 16px rgba(20,30,60,.10);
    transition:transform .2s ease, box-shadow .2s ease;
}
.bpc-hero-trust__item:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(20,30,60,.14);
}
.bpc-hero-trust__item svg{
    width:22px;
    height:22px;
    color:#0066cc;
    margin-bottom:6px;
}
.bpc-hero-trust__item b{
    display:block;
    font-size:12.5px;
    font-weight:600;
    line-height:1.2;
    color:#1d1d1f;
    margin-bottom:1px;
}
.bpc-hero-trust__item span{
    font-size:10.5px;
    color:#6e6e73;
    line-height:1.3;
}

@media(max-width:720px){
    .bpc-hero-trust{
        grid-template-columns:repeat(2,1fr);
        max-width:420px;
        gap:8px;
    }
}
@media(max-width:380px){
    .bpc-hero-trust__item{padding:10px 6px;}
    .bpc-hero-trust__item b{font-size:11.5px;}
    .bpc-hero-trust__item span{font-size:10px;}
}

/* === [v7.6.0 · 6D] Hero con striscia fiducia: cresce invece di schiacciare ===
   L'altezza fissa (300/420px) con align-items:flex-end spingeva il titolo
   sotto il breadcrumb quando la striscia (4 card) era presente. Con has-trust
   la hero diventa min-height + padding respirabile. Vale per macro, brand e
   categorie col Controller Tester. */
.bpc-category-hero-immersive.has-trust {
    height: auto;
    min-height: 320px;
    align-items: center;
    padding: 84px 0 26px !important;
}
@media (min-width: 768px) {
    .bpc-category-hero-immersive.has-trust {
        min-height: 420px;
        padding: 96px 0 34px !important;
    }
}
.bpc-category-hero-immersive.has-trust .bpc-hero-inner { margin-top: 0; }

/* === [v7.6.0 · 6D] Striscia fiducia: controparti DARK (mancavano da sempre:
   le card restavano vetro chiaro anche in scuro su macro/brand) === */
.bpc-hero-trust__item{ text-shadow:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bpc-hero-trust__item{
    background:rgba(28,28,30,.86);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 6px 20px rgba(0,0,0,.45);
    color:#f2f2f4;
  }
  :root:not([data-theme="light"]) .bpc-hero-trust__item b{ color:#f2f2f4; }
  :root:not([data-theme="light"]) .bpc-hero-trust__item span{ color:#a1a1a6; }
  :root:not([data-theme="light"]) .bpc-hero-trust__item svg{ color:#2997ff; }
}
[data-theme="dark"] .bpc-hero-trust__item{
  background:rgba(28,28,30,.86);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  color:#f2f2f4;
}
[data-theme="dark"] .bpc-hero-trust__item b{ color:#f2f2f4; }
[data-theme="dark"] .bpc-hero-trust__item span{ color:#a1a1a6; }
[data-theme="dark"] .bpc-hero-trust__item svg{ color:#2997ff; }

/* ==========================================================
   Archive hero statico: una sola geometria, senza parallax
   ========================================================== */
.bpc-category-hero-immersive,
.bpc-category-hero-immersive.has-trust {
    height: auto;
    min-height: 440px;
    margin-bottom: clamp(28px, 4vw, 44px);
    padding: 72px 0 32px !important;
    align-items: flex-end;
}

.bpc-category-hero-immersive .bpc-hero-bg-wrapper {
    transform: none !important;
    will-change: auto;
}

.bpc-category-hero-immersive .bpc-hero-inner,
.bpc-category-hero-immersive.has-trust .bpc-hero-inner {
    margin-top: 0;
    padding-inline: clamp(16px, 4vw, 28px);
    text-shadow: 0 1px 10px rgba(255,255,255,.72);
}

.bpc-category-hero-immersive .bpc-hero-title {
    max-width: 880px;
    margin: 0 auto;
    font-size: clamp(2.3rem, 5vw, 3.7rem);
    text-wrap: balance;
}

.bpc-category-hero-immersive .bpc-hero-cta {
    min-height: 44px;
    margin-top: 18px;
}

@media (max-width: 767.98px) {
    .bpc-category-hero-immersive,
    .bpc-category-hero-immersive.has-trust {
        min-height: 340px;
        margin-bottom: 28px;
        padding: 148px 0 24px !important;
    }

    .bpc-category-hero-immersive.has-trust {
        min-height: 420px;
    }

    .bpc-category-hero-immersive .bpc-hero-title {
        font-size: clamp(2rem, 9.5vw, 2.7rem);
        line-height: 1.02;
    }

    .bpc-category-hero-immersive .bpc-hero-badges {
        margin-top: 9px;
    }

    .bpc-category-hero-immersive .bpc-hero-cta {
        width: min(100%, 340px);
        margin-top: 16px;
    }

    .bpc-category-hero-immersive .bpc-hero-trust {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(142px, 46%);
        grid-template-columns: none;
        justify-content: start;
        max-width: 100%;
        margin-top: 16px;
        padding: 2px 2px 7px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bpc-category-hero-immersive .bpc-hero-trust::-webkit-scrollbar {
        display: none;
    }

    .bpc-category-hero-immersive .bpc-hero-trust__item {
        min-height: 74px;
        padding: 10px 8px;
        scroll-snap-align: start;
    }
}

@media (max-width: 380px) {
    .bpc-category-hero-immersive,
    .bpc-category-hero-immersive.has-trust {
        padding-top: 132px !important;
    }

    .bpc-category-hero-immersive .bpc-hero-trust {
        grid-auto-columns: minmax(136px, 78%);
    }
}

/* ==========================================================
   Category journey refinement - compact and complete on phones
   ========================================================== */
.bpc-hero-help {
    display: block;
    width: fit-content;
    margin: 11px auto 0;
    color: var(--bspc-blue-primary);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

.bpc-hero-help:hover,
.bpc-hero-help:focus-visible { text-decoration: underline; }

#bpc-category-chooser { scroll-margin-top: calc(var(--bspc-header-offset, 82px) + 18px); }

@media (max-width: 767.98px) {
    .bpc-category-hero-immersive,
    .bpc-category-hero-immersive.has-trust {
        min-height: 0;
        padding: 102px 0 22px !important;
    }

    .bpc-category-hero-immersive .bpc-hero-title {
        font-size: clamp(1.9rem, 9vw, 2.35rem);
        line-height: 1.04;
    }

    .bpc-category-hero-immersive .bpc-hero-cta {
        margin-top: 14px;
    }

    .bpc-category-hero-immersive .bpc-hero-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 7px;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    .bpc-category-hero-immersive .bpc-hero-trust__item {
        min-height: 64px;
        padding: 8px 6px;
    }

    .bpc-category-hero-immersive .bpc-hero-trust__item svg {
        width: 18px;
        height: 18px;
        margin-bottom: 4px;
    }
}

@media (max-width: 380px) {
    .bpc-category-hero-immersive,
    .bpc-category-hero-immersive.has-trust {
        padding-top: 92px !important;
    }

    .bpc-category-hero-immersive .bpc-hero-trust__item b { font-size: 10.8px; }
    .bpc-category-hero-immersive .bpc-hero-trust__item span { font-size: 9.5px; }
}