/* ==========================================================
   Brokk Spec Images — pulsing dots + modal
   ========================================================== */

.brk-spec {
    --brk-spec-yellow: var(--primary, #ffcd00);
    --brk-spec-ink: var(--brk-ink, #0A0A0A);
    --brk-spec-muted: #6B6B6B;
    position: relative;
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    color: var(--brk-spec-ink);
}

/* ---- Panel: vertical list of dots (default — when 360-viewer is present) ---- */
.brk-spec__panel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ---- Panel: horizontal layout when 360-viewer is empty ---- */
.is-360-empty .brk-spec__panel {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.brk-spec__item { margin: 0; }

/* ---- Dot button ---- */
.brk-spec__dot {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color: inherit;
    font: inherit;
    position: relative;
}

/* Touch (mobilpoleringen 2026-09-14): pricken med etikett är 26 px hög. */
@media (max-width: 991px) {
    .brk-spec__dot {
        min-height: 44px;
    }
}

.brk-spec__dot::before {
    content: "";
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-circle, 50vw);
    background-color: #4A4A4A;
    /* Ikonsetet: Plus (icons/brokk-plus.svg), 16 px → linje 1,75. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 0 3px rgba(10,10,10,0.05);
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, background-color var(--dur-base) ease;
    flex-shrink: 0;
}

.brk-spec__pulse {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-circle, 50vw);
    background: #4A4A4A;
    opacity: 0.3;
    animation: brkSpecPulse 1.8s ease-out infinite;
    pointer-events: none;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.brk-spec__label {
    font-family: var(--font-condensed);
    font-size: var(--h3);
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brk-spec-ink);
    transition: color var(--dur-fast) ease, transform var(--dur-base) ease;
}

.brk-spec__dot:hover::before {
    transform: scale(1.12);
    background-color: var(--brk-spec-ink);
    box-shadow: 0 0 0 5px rgba(10,10,10,0.08);
}

.brk-spec__dot:hover .brk-spec__label {
    transform: translateX(2px);
}

.brk-spec__dot:focus-visible {
    outline: 2px solid var(--brk-spec-ink);
    outline-offset: 8px;
    border-radius: 4px;
}

@keyframes brkSpecPulse {
    0%   { transform: translateY(-50%) scale(1);   opacity: 0.3; }
    70%  { transform: translateY(-50%) scale(2.2); opacity: 0;   }
    100% { transform: translateY(-50%) scale(2.2); opacity: 0;   }
}

/* ---- Modal ---- */
.brk-spec__modal[hidden] { display: none; }

.brk-spec__modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.brk-spec__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.65);
    backdrop-filter: blur(2px);
    animation: brkSpecFade 0.18s ease-out;
}

.brk-spec__dialog {
    position: relative;
    background: var(--white, #fff);
    width: min(1180px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden auto;
    border-radius: 4px;
    padding: 48px 48px 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    animation: brkSpecPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
        "title title"
        "tabs  tabs"
        "media side";
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
}

.brk-spec__tabs   { grid-area: tabs; }
.brk-spec__title  { grid-area: title; }
.brk-spec__media  { grid-area: media; margin-bottom: 0; }
.brk-spec__thumbs,
.brk-spec__specs  { grid-area: side; margin-bottom: 0; }

/* ---- Tabs ---- */
.brk-spec__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 22px;
}

.brk-spec__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 12px 20px;
    cursor: pointer;
    font-family: var(--font-condensed);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--brk-spec-muted);
    position: relative;
    transition: color var(--dur-fast) ease;
}

.brk-spec__tab:first-child { padding-left: 0; }

.brk-spec__tab:hover {
    color: var(--brk-spec-ink);
}

.brk-spec__tab.is-active {
    color: var(--brk-spec-ink);
}

.brk-spec__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--brk-spec-ink);
}

.brk-spec__tab:first-child.is-active::after { left: 0; }

.brk-spec__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-circle, 50vw);
    cursor: pointer;
    color: var(--brk-spec-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) ease;
}
.brk-spec__close:hover { background: rgba(0,0,0,0.06); }

/* ---- Stage: prev | dialog | next layout ---- */
.brk-spec__stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: calc(1180px + 128px);
}

/* ---- Prev/Next navigation (sit just outside dialog) ---- */
.brk-spec__nav {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 0;
    background: rgba(255,255,255,0.95);
    border-radius: var(--radius-circle, 50vw);
    cursor: pointer;
    color: var(--brk-spec-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.brk-spec__nav:hover {
    background: var(--white, #fff);
    transform: scale(1.06);
}

.brk-spec__nav:active {
    transform: scale(0.96);
}

@media (max-width: 720px) {
    .brk-spec__stage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "dialog dialog"
            "prev   next";
        gap: 14px;
        max-width: 100%;
    }
    .brk-spec__dialog   { grid-area: dialog; }
    .brk-spec__nav      { width: 44px; height: 44px; }
    .brk-spec__nav--prev{ grid-area: prev; justify-self: start; }
    .brk-spec__nav--next{ grid-area: next; justify-self: end;   }
}

.brk-spec__title {
    font-family: var(--font-condensed);
    font-size: 40px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin: 0 0 14px;
    line-height: 1;
}

.brk-spec__media {
    position: relative;
    background: var(--white, #fff);
    border-radius: 4px;
    padding: 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    overflow: hidden;
    min-height: 360px;
    max-height: calc(100vh - 220px);
}

.brk-spec__media::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.95);
    border-radius: var(--radius-circle, 50vw);
    /* Ikonsetet: Fullscreen (icons/brokk-fullscreen.svg). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/></svg>");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: transform var(--dur-fast) ease;
}

.brk-spec__media:hover::after {
    transform: scale(1.08);
}

.brk-spec__image {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
}

/* ---- Lightbox (zoomed image) ---- */
.brk-spec__lightbox[hidden] { display: none; }

.brk-spec__lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10,10,10,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
    animation: brkSpecFade 0.18s ease-out;
}

.brk-spec__lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    background: var(--white, #fff);
    border-radius: 4px;
    padding: 24px;
}

.brk-spec__lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: var(--white, #fff);
    border-radius: var(--radius-circle, 50vw);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) ease;
}
.brk-spec__lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ---- Thumbnails (CAD gallery) ---- */
.brk-spec__thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 100%;
    overflow-y: auto;
}
.brk-spec__thumbs[hidden] { display: none; }

.brk-spec__thumb {
    appearance: none;
    border: 1px solid #eee;
    background: var(--white, #fff);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.brk-spec__thumb:hover {
    border-color: var(--brk-spec-yellow);
}

.brk-spec__thumb.is-active {
    border-color: var(--brk-spec-yellow);
    box-shadow: 0 0 0 2px var(--brk-spec-yellow);
}

.brk-spec__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brk-spec__specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid #eee;
    align-self: start;
}
.brk-spec__specs[hidden] { display: none; }

.brk-spec__specs li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.brk-spec__specs .brk-spec__specs__key {
    color: var(--brk-spec-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 600;
}

.brk-spec__specs .brk-spec__specs__val {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--brk-spec-ink);
}

/* ---- Animations ---- */
@keyframes brkSpecFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes brkSpecPop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-spec__pulse { animation: none; opacity: 0; }
    .brk-spec__backdrop, .brk-spec__dialog { animation: none; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .brk-spec__dialog {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "tabs"
            "media"
            "side";
        row-gap: 24px;
    }
    .brk-spec__thumbs {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

@media (max-width: 720px) {
    .brk-spec__dialog { padding: 28px 20px 20px; }
    .brk-spec__title  { font-size: 24px; margin-bottom: 16px; }
}

/* ---- Trigger utanför komponenten ----------------------------------------
   En länklös Bricks-knapp renderas som <span> och ärver därför inte
   pekfingret från <a>. Hovringen (färgskiftet) kommer från ACSS och funkar
   redan — det var bara markören som saknades. */
.js-brk-spec-open,
[data-brk-spec-open] {
    cursor: pointer;
}

/* ---- Tillfälligt dolt: rubrik, CAD-flik och flikpilar --------------------
   Modalen har bara en sektion (CAD) och öppnas numera från knappen
   "Technical Drawings", som redan säger vad man tittar på. Rubriken och den
   ensamma fliken bidrar inget, och pilarna bläddrar mellan flikar som inte
   syns. Markup och JS ligger kvar — ta bort det här blocket för att visa dem
   igen (och lägg tillbaka "title"/"tabs" i rutnätet nedan).

   Rubriken göms visuellt men lämnas i DOM: dialogen pekar på den med
   aria-labelledby och skulle annars bli namnlös för skärmläsare. */
.brk-spec__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.brk-spec__tabs,
.brk-spec__nav {
    display: none;
}

/* Rutnätet får inte lämna tomma rader efter sig — under 860 px har dialogen
   row-gap, så en tom "title"- och "tabs"-rad hade blivit 48 px luft. */
.brk-spec__dialog {
    grid-template-areas: "media side";
}

@media (max-width: 860px) {
    .brk-spec__dialog {
        grid-template-areas:
            "media"
            "side";
    }
}