/* ==========================================================================
   GV Search Results Hero — gv-search-hero.css
   Location: Pages/Search Results Page/css/gv-search-hero.css
   Shortcode: [gv_search_results_hero]
   ========================================================================== */

/* ── Custom properties (scoped to the section) ───────────────────────────── */
.gv-sr-hero {
    --gv-sr-bg:           #0d0e1a;
    --gv-sr-surface:      rgba(255, 255, 255, 0.03);
    --gv-sr-border:       rgba(255, 255, 255, 0.07);
    --gv-sr-accent:       #a855f7;          /* violet */
    --gv-sr-accent-warm:  #f97316;          /* orange for "UC" style badge */
    --gv-sr-accent-glow:  rgba(168, 85, 247, 0.35);
    --gv-sr-text-primary: #f0f0f5;
    --gv-sr-text-muted:   rgba(220, 220, 240, 0.55);
    --gv-sr-text-crumb:   rgba(200, 200, 220, 0.50);
    --gv-sr-chip-bg:      rgba(168, 85, 247, 0.10);
    --gv-sr-chip-border:  rgba(168, 85, 247, 0.28);
    --gv-sr-chip-hover:   rgba(168, 85, 247, 0.22);
    --gv-sr-radius:       1rem;
    --gv-sr-art-size:     22rem;
    --gv-sr-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.gv-sr-hero {
    position:        relative;
    width:           100%;
    overflow:        hidden;
    background:      var(--gv-sr-bg);
    border-bottom:   0.0625rem solid var(--gv-sr-border);
    isolation:       isolate;
    /* reduced from 3rem/2.5rem */
}

/* ── Background decorations ──────────────────────────────────────────────── */
.gv-sr-hero__glow {
    position:         absolute;
    top:              -4rem;
    width:            28rem;
    height:           28rem;
    border-radius:    50%;
    pointer-events:   none;
    filter:           blur(5rem);
    opacity:          0.18;
    will-change:      transform;
    animation:        gv-sr-glow-pulse 6s ease-in-out infinite alternate;
}

.gv-sr-hero__glow--left {
    left:       -8rem;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    animation-delay: 0s;
}

.gv-sr-hero__glow--right {
    right:      -6rem;
    top:        -2rem;
    background: radial-gradient(circle, #a855f7 0%, transparent 70%);
    animation-delay: -3s;
    opacity: 0.22;
}

@keyframes gv-sr-glow-pulse {
    from { transform: scale(1)   translateY(0);      opacity: 0.16; }
    to   { transform: scale(1.1) translateY(-0.5rem); opacity: 0.24; }
}

/* Subtle grid-line overlay */
.gv-sr-hero__grid-lines {
    position:           absolute;
    inset:              0;
    pointer-events:     none;
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
    background-size:    3rem 3rem;
    mask-image:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}

/* ── Inner layout ────────────────────────────────────────────────────────── */
.gv-sr-hero__inner {
    position:       relative;
    z-index:        1;
    max-width:      75rem;
    margin:         0 auto;
    padding:        0 1.5rem;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            2rem;
}

/* ── Left content column ─────────────────────────────────────────────────── */
.gv-sr-hero__content {
    flex:       1 1 0;
    padding: 1.5em 0;
    min-width:  0;
    display:    flex;
    flex-direction: column;
    gap:        0.85rem;

    /* Entrance animation */
    animation: gv-sr-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gv-sr-slide-up {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.gv-sr-hero__breadcrumb {
    margin-bottom: 1.25rem;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.gv-sr-hero__heading {
    margin:        0;
    font-family:   'Inter', 'Outfit', system-ui, sans-serif;
    font-size:     clamp(0.9rem, 3.2vw, 1.5rem);
    font-weight:   800;
    line-height:   1.2;
    color:         var(--gv-sr-text-primary);
    letter-spacing: -0.02em;
    display:       flex;
    flex-wrap:     wrap;
    align-items:   baseline;
    gap:           0.4em;
}

/* The highlighted query string */
.gv-sr-hero__query-wrap {
    display:   inline-flex;
    align-items: baseline;
    gap:       0;
    position:  relative;
}

.gv-sr-hero__query {
    color:             var(--gv-sr-accent);
    position:          relative;
    /* subtle text glow */
    text-shadow:       0 0 1.5rem rgba(168, 85, 247, 0.45);
    transition:        text-shadow var(--gv-sr-transition);
}

/* Opening / closing quotes rendered via pseudo-elements */
.gv-sr-hero__query::before { content: '\201C'; }
.gv-sr-hero__query::after  { content: '\201D'; }

/* ── Subtitle / result count ─────────────────────────────────────────────── */
.gv-sr-hero__subtitle {
    margin:      0;
    font-size:   clamp(0.85rem, 1.4vw, 0.9375rem);
    color:       var(--gv-sr-text-muted);
    line-height: 1.6;
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.4em;
}

/* Numeric count badge */
.gv-sr-hero__count-badge {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.15em 0.55em;
    border-radius:    2em;
    background:       linear-gradient(135deg, rgba(168,85,247,0.25), rgba(168,85,247,0.10));
    border:           0.0625rem solid rgba(168, 85, 247, 0.35);
    color:            var(--gv-sr-accent);
    font-size:        0.8125em;
    font-weight:      700;
    letter-spacing:   0.02em;
    animation:        gv-sr-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
    margin-right:     0;
}

@keyframes gv-sr-badge-pop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Quick-filter chips ──────────────────────────────────────────────────── */
.gv-sr-hero__chips {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
    margin-top: 0.25rem;

    animation: gv-sr-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.gv-sr-chip {
    display:          inline-flex;
    align-items:      center;
    gap:              0.4em;
    padding:          0.4em 0.9em;
    border-radius:    2em;
    background:       var(--gv-sr-chip-bg);
    border:           0.0625rem solid var(--gv-sr-chip-border);
    color:            rgba(220, 200, 255, 0.80);
    font-size:        0.78125rem;
    font-weight:      500;
    text-decoration:  none;
    cursor:           pointer;
    transition:
        background    var(--gv-sr-transition),
        border-color  var(--gv-sr-transition),
        color         var(--gv-sr-transition),
        transform     var(--gv-sr-transition),
        box-shadow    var(--gv-sr-transition);
    white-space:      nowrap;
}

.gv-sr-chip i {
    font-size: 0.72em;
    opacity:   0.8;
}

.gv-sr-chip:hover,
.gv-sr-chip:focus-visible {
    background:    var(--gv-sr-chip-hover);
    border-color:  rgba(168, 85, 247, 0.55);
    color:         #e9d5ff;
    transform:     translateY(-0.1rem);
    box-shadow:    0 0.25rem 0.75rem rgba(168, 85, 247, 0.18);
    outline:       none;
}

/* ── Right art panel ─────────────────────────────────────────────────────── */
.gv-sr-hero__art-panel {
    position:       relative;
    flex-shrink:    0;
    width:          var(--gv-sr-art-size);
    height:         var(--gv-sr-art-size);
    display:        flex;
    align-items:    center;
    justify-content: center;

    animation: gv-sr-art-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@keyframes gv-sr-art-enter {
    from { opacity: 0; transform: translateX(2rem) scale(0.96); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/* ── Product Image Hero Panel ─────────────────────────────────────── */
.gv-sr-hero__art-panel--product {
    position:    absolute;
    top:         0;
    right:       0;
    bottom:      0;
    width:       50%;
    height:      100%;
    overflow:    hidden;
    animation:   gv-sr-art-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    flex-shrink: 0;
}

.gv-sr-hero__product-img-wrap {
    position: relative;
    width:    100%;
    height:   100%;
}

.gv-sr-hero__product-img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
    opacity:         0.85;
}

/* Left side fade mask — blends into hero background */
.gv-sr-hero__product-img-mask {
    position:   absolute;
    top:        0;
    left:       0;
    width:      70%;
    height:     100%;
    background: linear-gradient(
        to right,
        var(--gv-sr-bg) 0%,
        var(--gv-sr-bg) 10%,
        transparent 100%
    );
    z-index:        2;
    pointer-events: none;
}

/* Top fade */
.gv-sr-hero__product-img-wrap::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     35%;
    background: linear-gradient(
        to bottom,
        var(--gv-sr-bg) 0%,
        transparent 100%
    );
    z-index:        2;
    pointer-events: none;
}

/* Bottom fade */
.gv-sr-hero__product-img-wrap::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     35%;
    background: linear-gradient(
        to top,
        var(--gv-sr-bg) 0%,
        transparent 100%
    );
    z-index:        2;
    pointer-events: none;
}

/* Radial ambient glow */
.gv-sr-hero__art-glow {
    position:      absolute;
    inset:         -2rem;
    border-radius: 50%;
    background:    radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.28) 0%, transparent 65%);
    pointer-events: none;
    animation:     gv-sr-glow-pulse 5s ease-in-out infinite alternate;
}

/* Spinning rings */
.gv-sr-hero__art-ring {
    position:         absolute;
    border-radius:    50%;
    pointer-events:   none;
    animation:        gv-sr-ring-spin linear infinite;
}

.gv-sr-hero__art-ring--outer {
    inset:            -1.75rem;
    border:           0.0625rem solid rgba(168, 85, 247, 0.14);
    animation-duration: 24s;
}

.gv-sr-hero__art-ring--mid {
    inset:            -0.5rem;
    border:           0.0625rem dashed rgba(168, 85, 247, 0.22);
    animation-duration: 16s;
    animation-direction: reverse;
}

.gv-sr-hero__art-ring--inner {
    inset:            1.5rem;
    border:           0.0625rem solid rgba(168, 85, 247, 0.10);
    animation-duration: 10s;
}

@keyframes gv-sr-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Central orb ─────────────────────────────────────────────────────────── */
.gv-sr-hero__orb {
    position:        relative;
    width:           7rem;
    height:          7rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    animation:       gv-sr-orb-float 4s ease-in-out infinite alternate;
    will-change:     transform;
}

@keyframes gv-sr-orb-float {
    from { transform: translateY(0);        }
    to   { transform: translateY(-0.6rem); }
}

.gv-sr-hero__orb-core {
    width:            7rem;
    height:           7rem;
    border-radius:    50%;
    background:       radial-gradient(circle at 38% 38%,
                          rgba(192, 132, 252, 0.28) 0%,
                          rgba(124, 58, 237, 0.18) 50%,
                          rgba(15, 10, 30, 0.40) 100%);
    border:           0.125rem solid rgba(168, 85, 247, 0.45);
    box-shadow:
        0 0 1.5rem 0.25rem rgba(168, 85, 247, 0.28),
        inset 0 0 1.5rem rgba(168, 85, 247, 0.12);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    position:         relative;
    z-index:          2;
    backdrop-filter:  blur(0.25rem);
    animation:        gv-sr-orb-pulse 3s ease-in-out infinite alternate;
}

@keyframes gv-sr-orb-pulse {
    from {
        box-shadow:
            0 0 1.5rem 0.25rem rgba(168, 85, 247, 0.28),
            inset 0 0 1.5rem rgba(168, 85, 247, 0.12);
    }
    to {
        box-shadow:
            0 0 2.5rem 0.5rem rgba(168, 85, 247, 0.45),
            inset 0 0 2rem rgba(168, 85, 247, 0.20);
    }
}

/* SVG search icon inside orb */
.gv-sr-hero__orb-icon {
    width:   2.5rem;
    height:  2.5rem;
    color:   rgba(216, 180, 254, 0.90);
    filter:  drop-shadow(0 0 0.5rem rgba(168, 85, 247, 0.70));
}

/* ── Orbiting dots ───────────────────────────────────────────────────────── */
.gv-sr-hero__orbit {
    position:       absolute;
    inset:          0;
    border-radius:  50%;
    animation:      gv-sr-ring-spin linear infinite;
}

.gv-sr-hero__orbit--a { animation-duration: 5s;  }
.gv-sr-hero__orbit--b { animation-duration: 8s;  animation-direction: reverse; }
.gv-sr-hero__orbit--c { animation-duration: 12s; }

.gv-sr-hero__dot {
    position:      absolute;
    top:           -0.3rem;
    left:          50%;
    transform:     translateX(-50%);
    width:         0.5rem;
    height:        0.5rem;
    border-radius: 50%;
    background:    var(--gv-sr-accent);
    box-shadow:    0 0 0.4rem 0.1rem rgba(168, 85, 247, 0.70);
}

.gv-sr-hero__orbit--b .gv-sr-hero__dot {
    background:  rgba(249, 115, 22, 0.90); /* orange accent */
    box-shadow:  0 0 0.4rem 0.1rem rgba(249, 115, 22, 0.60);
    top:         auto;
    bottom:      -0.3rem;
}

.gv-sr-hero__orbit--c .gv-sr-hero__dot {
    width:       0.35rem;
    height:      0.35rem;
    background:  rgba(167, 139, 250, 0.75);
    box-shadow:  0 0 0.3rem rgba(167, 139, 250, 0.60);
    left:        -0.3rem;
    top:         50%;
    transform:   translateY(-50%);
}

/* ── Floating particles ──────────────────────────────────────────────────── */
.gv-sr-hero__particle {
    position:      absolute;
    border-radius: 50%;
    pointer-events: none;
    animation:     gv-sr-particle-drift linear infinite;
    opacity:       0;
}

.gv-sr-hero__particle--1 {
    width: 0.4rem; height: 0.4rem;
    background: rgba(168, 85, 247, 0.70);
    top: 20%; left: 15%;
    animation-duration: 6s;
    animation-delay: 0s;
}
.gv-sr-hero__particle--2 {
    width: 0.3rem; height: 0.3rem;
    background: rgba(249, 115, 22, 0.65);
    top: 65%; left: 80%;
    animation-duration: 7.5s;
    animation-delay: -2s;
}
.gv-sr-hero__particle--3 {
    width: 0.5rem; height: 0.5rem;
    background: rgba(192, 132, 252, 0.55);
    top: 80%; left: 25%;
    animation-duration: 9s;
    animation-delay: -4s;
}
.gv-sr-hero__particle--4 {
    width: 0.25rem; height: 0.25rem;
    background: rgba(248, 200, 100, 0.60);
    top: 30%; left: 75%;
    animation-duration: 5.5s;
    animation-delay: -1.5s;
}
.gv-sr-hero__particle--5 {
    width: 0.35rem; height: 0.35rem;
    background: rgba(167, 139, 250, 0.65);
    top: 50%; left: 10%;
    animation-duration: 8s;
    animation-delay: -3s;
}

@keyframes gv-sr-particle-drift {
    0%   { opacity: 0;    transform: translateY(0)      scale(1); }
    20%  { opacity: 0.9; }
    80%  { opacity: 0.7; }
    100% { opacity: 0;    transform: translateY(-2.5rem) scale(0.6); }
}

/* ── Responsive breakpoints ──────────────────────────────────────────────── */

/* Tablet: shrink art panel */
@media (max-width: 64em) {
    .gv-sr-hero {
        --gv-sr-art-size: 17rem;
    }

    .gv-sr-hero__inner {
        gap: 1.5rem;
    }
}

/* Mobile: stack vertically */
@media (max-width: 48em) {
    .gv-sr-hero {
        padding: 2rem 0 1.75rem;
        --gv-sr-art-size: 13rem;
    }

    .gv-sr-hero__inner {
        flex-direction: column-reverse;
        align-items:    flex-start;
        gap:            1rem;
    }

    .gv-sr-hero__content {
        width: 100%;
    }

    .gv-sr-hero__art-panel {
        align-self:  flex-end;
        margin-top:  -1.5rem;
    }

    .gv-sr-hero__heading {
        font-size: clamp(1.35rem, 5.5vw, 1.7rem);
    }
}

/* Very small screens */
@media (max-width: 30em) {
    .gv-sr-hero {
        --gv-sr-art-size: 10rem;
    }

    .gv-sr-hero__art-ring {
        display: none;
    }

    .gv-sr-chip {
        font-size: 0.71875rem;
        padding:   0.35em 0.75em;
    }
}

/* ── No Results State ─────────────────────────────────────────────── */
.gv-sr-hero--no-results {
    
}

@media (min-width: 900px) {
    .gv-sr-hero--no-results {
        
    }
}

@media (min-width: 1200px) {
    .gv-sr-hero--no-results {
        
    }
}

/* Tighten content gap in no-results state */
.gv-sr-hero--no-results .gv-sr-hero__content {
    gap: 0.6rem;
    justify-content: center;
}

/* Remove bottom margin from heading in no-results */
.gv-sr-hero--no-results .gv-sr-hero__heading {
    margin-bottom: 0;
}

/* Suggestions inline with no extra margin */
.gv-sr-hero--no-results .gv-sr-suggestions {
    margin-top: 0;
}

/* Hide empty children in no-results hero */
.gv-sr-hero--no-results .gv-sr-hero__chips,
.gv-sr-hero--no-results .gv-sr-hero__subtitle:empty,
.gv-sr-hero--no-results p:empty {
    display: none;
}