/* ==========================================================
   Brokk Hotspot Enhance — overlay for BricksExtras Image Hotspots
   Activate by adding `brk-hotspot-fx` to a wrapper container.
   Per-marker label position is configured via Custom Attributes:
     data-label-x="5%"  data-label-y="12%"  data-label-align="left"
   ========================================================== */

.brk-hotspot-fx {
    --brk-hl-color:   var(--brk-yellow, #FFC600);
    --brk-hl-line:    var(--brk-yellow, #FFC600);
    --brk-hl-text:    #FFFFFF;
    --brk-hl-bg:      rgba(0, 0, 0, 0.0);
}

/* Hotspots container becomes positioning context */
.brk-hotspot-fx .brxe-ximagehotspots {
    position: relative;
}

/* Hide default popovers (only on frontend, after JS has initialized) */
.brk-hotspot-fx.is-ready .x-marker_popover {
    display: none !important;
}

/* Hide everything BricksExtras renders inside the marker —
 * pin icon, title text, etc. We show our own + via ::after. */
.brk-hotspot-fx .x-marker_marker-icon,
.brk-hotspot-fx .x-marker_marker-title,
.brk-hotspot-fx .x-marker_marker-inner > * {
    display: none !important;
}
.brk-hotspot-fx .x-marker_marker-inner {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* ── Markers ────────────────────────────────────────────── */
.brk-hotspot-fx .x-marker_marker {
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    background: var(--brk-hl-color) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 3;
    isolation: isolate;
}

/* Initial state — invisible until .is-active.
 * Only applies AFTER JS has set up the overlay (.is-ready), so the
 * Bricks editor (where JS is skipped) still shows markers normally. */
.brk-hotspot-fx.is-ready .x-marker {
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.6s);
}
.brk-hotspot-fx.is-ready.is-active .x-marker {
    opacity: 1;
}

/* Disable BricksExtras' built-in pulse (it uses ::before AND ::after on
 * .x-marker_marker — we need ::after for the number, and their animation
 * would otherwise fade the digit in and out). */
.brk-hotspot-fx .x-marker_marker::before {
    content: none !important;
}

/* Marker number (1-9 etc) — set via data-num on the button.
 * Override BricksExtras animation/background/opacity that would otherwise
 * be inherited via lower-specificity rules. */
.brk-hotspot-fx .x-marker_marker::after {
    content: attr(data-num);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Saira Semi Condensed", "Geist", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    animation: none !important;
    background: transparent !important;
    opacity: 1 !important;
    width: 100%;
    height: 100%;
}

/* Pulse via box-shadow on the marker itself.
 * Box-shadow paints outside the element's bounds and can NEVER cover
 * the marker's content (number ::after), so the digit stays crisp. */
.brk-hotspot-fx.is-active .x-marker_marker {
    animation: brkHlPulse 1.8s ease-out infinite;
    animation-delay: calc(var(--i, 0) * 0.08s + 1.2s);
}

.brk-hotspot-fx .x-marker_marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 0 5px rgba(0,0,0,0.15);
}


/* ── SVG line overlay ────────────────────────────────────── */
.brk-hotspot-fx__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.brk-hotspot-fx__line {
    stroke: var(--brk-hl-line);
    stroke-width: 0.18;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s ease-out;
    transition-delay: calc(var(--i, 0) * 0.08s);
}
.brk-hotspot-fx.is-active .brk-hotspot-fx__line {
    stroke-dashoffset: 0;
}

/* ── Cap (half target icon at line endpoint) ────────────── */
.brk-hl-cap {
    --brk-cap-size: clamp(32px, 1.5vw + 12px, 46px);
    --brk-cap-shift: calc(var(--brk-cap-size) / 4);
    position: absolute;
    left: var(--x, 0);
    top:  var(--y, 0);
    width:  var(--brk-cap-size);
    height: var(--brk-cap-size);
    transform: translate(-50%, -50%);     /* centered on anchor */
    pointer-events: none;
    color: var(--brk-hl-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.85s);
    z-index: 3;
}

.brk-hotspot-fx.is-active .brk-hl-cap { opacity: 1; }

.brk-hl-cap svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Clip half away — round side faces toward the machine.
 * Cap is shifted so the LINE endpoint (lx, ly) sits at the geometric
 * centre of the visible half — i.e. inside the bullseye. */

/* Clip half away — round side faces the machine.
 * Cap shifted so the line endpoint (lx, ly) sits at the geometric
 * centre of the VISIBLE half (i.e. inside the bullseye). */

/* Label on LEFT side of image — cap shows RIGHT half (toward machine on right) */
.brk-hl-cap--left   {
    clip-path: inset(0 0 0 50%);
    transform: translate(calc(-50% - var(--brk-cap-shift)), -50%);
}
/* Label on RIGHT side — cap shows LEFT half (toward machine on left) */
.brk-hl-cap--right  {
    clip-path: inset(0 50% 0 0);
    transform: translate(calc(-50% + var(--brk-cap-shift)), -50%);
}
/* Label ABOVE marker — cap shows BOTTOM half (toward machine below) */
.brk-hl-cap--top    {
    clip-path: inset(50% 0 0 0);
    transform: translate(-50%, calc(-50% - var(--brk-cap-shift)));
}
/* Label BELOW marker — cap shows TOP half (toward machine above) */
.brk-hl-cap--bottom {
    clip-path: inset(0 0 50% 0);
    transform: translate(-50%, calc(-50% + var(--brk-cap-shift)));
}
.brk-hl-cap--center { clip-path: none; }

/* ── Labels (perimeter) ─────────────────────────────────── */
.brk-hotspot-fx__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.brk-hl {
    position: absolute;
    left: var(--x, 0);
    top:  var(--y, 0);
    pointer-events: auto;
    color: var(--brk-hl-text);
    text-align: left;
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.9s);
    background: rgba(0, 0, 0, 0.35);
    /* Padding scales with viewport between 1280px and 2400px */
    padding: clamp(8px, 0.6vw + 2px, 14px) clamp(10px, 0.7vw + 2px, 16px);
    border-radius: 2px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.brk-hotspot-fx.is-active .brk-hl {
    opacity: 1;
}

/* Position the BLOCK relative to (lx, ly). Text width is clamped to
 * the available horizontal space so it never overflows the image. */
.brk-hl--left {
    transform: translate(calc(-100% - 28px), -50%);
    max-width: calc(var(--x) - 50px);
}
.brk-hl--right {
    transform: translate(28px, -50%);
    max-width: calc(100% - var(--x) - 50px);
}
.brk-hl--top {
    transform: translate(-50%, calc(-100% - 28px));
    text-align: center;
    max-width: 280px;
}
.brk-hl--bottom {
    transform: translate(-50%, 28px);
    text-align: center;
    max-width: 280px;
}
.brk-hl--center {
    transform: translate(-50%, 28px);
    text-align: center;
    max-width: 280px;
}

.brk-hl__title {
    display: block;
    margin: 0 0 clamp(4px, 0.3vw + 2px, 8px);
    padding: 0;
    font-family: "Saira Semi Condensed", "Geist", sans-serif;
    /* Fluid scale between 1280px and 2400px viewport */
    font-size: clamp(1.3rem, 0.45vw + 0.9rem, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: inherit;
    background: none;
    border: 0;
    text-align: inherit;
}

.brk-hl__desc {
    margin: 0;
    padding: 0;
    font-family: "Geist", -apple-system, sans-serif;
    font-size: clamp(1.05rem, 0.35vw + 0.75rem, 1.5rem);
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}

/* ── Stacked list (responsive fallback below 1280px) ─────── */
.brk-hotspot-fx__stacked-wrap {
    display: none;                       /* shown via @media below */
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-l, 48px) var(--gutter, 24px);
    box-sizing: border-box;
}

.brk-hotspot-fx__stacked {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m, 24px) var(--space-l, 48px);
}

.brk-hotspot-fx__stacked li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    align-items: start;
}

.brk-hotspot-fx__stacked .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brk-hl-color);
    color: var(--text-dark);
    font-family: "Saira Semi Condensed", "Geist", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.brk-hotspot-fx__stacked h3 {
    margin: 0 0 6px;
    padding: 0;
    font-family: "Saira Semi Condensed", "Geist", sans-serif;
    font-size: var(--h4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--text-dark);
}

.brk-hotspot-fx__stacked p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--text-dark-muted);
}

/* ── Per-marker dismiss (reverse order: label → cap → line) ──
 * Triggered by clicking a marker. Each affected element gets
 * .is-dismissed and fades out in sequence. Click again to restore. */

/* Reverse order: label → cap → line */

/* Label fades first */
.brk-hl.is-dismissed {
    opacity: 0 !important;
    transition-delay: 0s !important;
}

/* Cap fades second */
.brk-hl-cap.is-dismissed {
    opacity: 0 !important;
    transition-delay: 0.25s !important;
}

/* Line retracts last */
.brk-hotspot-fx__line.is-dismissed {
    stroke-dashoffset: 100 !important;
    transition-delay: 0.5s !important;
}

/* Marker itself stays visible & clickable so the user can re-open it */

/* ── Pulse keyframes ─────────────────────────────────────────
 * The marker has transform: translate(-50%, -50%) for positioning, so
 * keep that constant and animate only the box-shadow (outer glow ring).
 * Base shadow (3px dark) is preserved in all keyframes. */
@keyframes brkHlPulse {
    0% {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10),
                    0 0 0 0   rgba(255, 198, 0, 0.55);
    }
    70% {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10),
                    0 0 0 18px rgba(255, 198, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10),
                    0 0 0 18px rgba(255, 198, 0, 0);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .brk-hotspot-fx .x-marker,
    .brk-hotspot-fx .brk-hl,
    .brk-hotspot-fx__line {
        transition: none !important;
        opacity: 1;
        stroke-dashoffset: 0;
    }
    .brk-hotspot-fx .x-marker_marker {
        animation: none !important;
    }
}

/* ── Bricks Builder editor ─────────────────────────────────
 * In the editor we want default behaviour so markers can be
 * placed visually. Disable our effects, keep markers visible.
 * ─────────────────────────────────────────────────────────── */
body.bricks-is-builder .brk-hotspot-fx .x-marker,
body.bricks-is-frontend.bricks-is-builder .brk-hotspot-fx .x-marker {
    opacity: 1 !important;
    transition: none !important;
}
body.bricks-is-builder .brk-hotspot-fx .x-marker_popover,
body.bricks-is-builder .brk-hotspot-fx .x-marker_marker-icon {
    display: revert !important;
}
body.bricks-is-builder .brk-hotspot-fx__lines,
body.bricks-is-builder .brk-hotspot-fx__labels {
    display: none !important;
}
body.bricks-is-builder .brk-hotspot-fx .x-marker_marker::after,
body.bricks-is-builder .brk-hotspot-fx .x-marker_marker::before {
    display: none !important;
}

/* ── Responsive: below 1280px → stacked list under image ─── */
@media (max-width: 1279px) {
    .brk-hotspot-fx__labels,
    .brk-hotspot-fx__lines {
        display: none !important;
    }
    .brk-hotspot-fx__stacked-wrap {
        display: block;
    }
    .brk-hotspot-fx .x-marker {
        opacity: 1 !important;
    }
}

@media (max-width: 600px) {
    .brk-hotspot-fx__stacked {
        grid-template-columns: 1fr;
    }
}