/* Webcam Widget — kabdalis2 design system.
   view.js adds .wc to wrapper at runtime + manages layout class
   (.webcam-layout-single / -grid / -carousel). */

.kabdalis-webcam-widget.wc{ width:100%; margin:0; }

.webcam-grid{ display:grid; gap:12px; }
.webcam-grid.webcam-layout-single{ grid-template-columns:1fr; }
.webcam-grid.webcam-layout-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.webcam-grid.webcam-layout-carousel{ grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }

.webcam-item, .webcam-single{ min-width:0; }
.webcam-image-wrapper{
    position:relative; border-radius:var(--radius); overflow:hidden;
    aspect-ratio:16 / 9; background:var(--surface2);
    cursor:pointer;
}
.webcam-image{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.webcam-image-wrapper:hover .webcam-image{ transform:scale(1.04); }
.webcam-placeholder{
    position:absolute; inset:0;
    display:grid; place-items:center;
    color:var(--muted); font-family:var(--font-mono); font-size:.8rem;
}

/* "Live" / "Direkt" pill — uses --no for live-red */
.webcam-live{
    position:absolute; top:11px; left:11px;
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:999px;
    font-family:var(--font-mono); font-size:.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:#fff; background:color-mix(in srgb, var(--no) 88%, #000);
}
.webcam-live__dot{
    width:7px; height:7px; border-radius:50%; background:#fff;
}

/* Location label */
.webcam-loc{
    position:absolute; bottom:11px; left:11px;
    padding:4px 10px; border-radius:999px;
    font-size:.74rem; font-weight:600; color:#fff;
    background:color-mix(in srgb, #0c141a 55%, transparent);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

/* Caption overlay — view.js renders .webcam-overlay > .webcam-label over each
   image. The overlay pins to the bottom of the frame; the label is the same
   translucent dark pill as .webcam-loc so the camera name stays legible on any
   webcam frame (without it the name rendered as bare text over the image). */
.webcam-overlay{
    position:absolute; inset:0;
    display:flex; align-items:flex-end; justify-content:flex-start;
    padding:11px; pointer-events:none;
}
.webcam-label{
    padding:4px 10px; border-radius:999px;
    font-size:.74rem; font-weight:600; color:#fff;
    background:color-mix(in srgb, #0c141a 55%, transparent);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

/* Empty state — view.js renders .no-webcams-message when no cameras are chosen. */
.no-webcams-message{
    padding:clamp(24px,5vw,40px) 20px;
    text-align:center;
    color:var(--muted);
    border:1px dashed var(--line);
    border-radius:var(--radius);
    background:var(--surface2);
    font-size:.92rem;
}

.webcam-foot{
    display:flex; justify-content:flex-end; margin-top:10px;
}
.webcam-upd{
    font-family:var(--font-mono); font-size:.66rem;
    text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}

/* Carousel — wrapper clips the over-sized track, container constrains width.
   view.js sets track.style.width = (N*100)% and slide.style.width = (100/N)%
   then translates the track by (-100/N * currentIndex)%. For the math to
   land cleanly on a single slide, the wrapper/container MUST be exactly the
   viewport width with overflow:hidden, AND the track must have NO gap (a
   gap would push subsequent slides past the planned translate distance,
   showing the right edge of slide 1 when navigating to slide 2). */
.webcam-carousel-wrapper{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
}
.webcam-carousel-container{
    width: 100%;
    overflow: hidden;
}
.webcam-carousel-track{
    display: flex;
    /* no gap — carousel math depends on slides packing without spacing */
}
.webcam-carousel-slide{
    /* No flex-basis — view.js sets style.width = (100/N)% inline and a
       fixed flex-basis would override it. Just lock flex-shrink. */
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
}
.webcam-carousel-prev,
.webcam-carousel-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--ink) 30%, transparent);
    color: var(--ink);
    cursor: pointer;
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease;
    border: none;
}
.webcam-carousel-prev{ left: 10px; }
.webcam-carousel-next{ right: 10px; }
.webcam-carousel-prev:hover,
.webcam-carousel-next:hover{ transform: translateY(-50%) scale(1.05); }
.webcam-carousel-prev i,
.webcam-carousel-next i{
    font-size: .9rem;
    line-height: 1;
    display: block;
    width: 1em;
    height: 1em;
    text-align: center;
}
/* Dots — overlaid bottom-center ON the image. Without absolute positioning
   the container drops into normal flow (below the frame, dots bunched left).
   Translucent dark pill (matches .webcam-loc) keeps dots legible over any
   webcam frame. */
.webcam-carousel-dots{
    position:absolute; left:50%; bottom:12px;
    transform:translateX(-50%);
    z-index:2;
    display:flex; align-items:center; gap:7px;
    padding:6px 9px; border-radius:999px;
    background:color-mix(in srgb, #0c141a 55%, transparent);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.webcam-carousel-dot{
    width:8px; height:8px; border-radius:50%;
    background:color-mix(in srgb, #fff 50%, transparent);
    cursor:pointer; border:none; padding:0;
    transition:background .15s ease, transform .15s ease;
}
/* view.js toggles `active` (not `is-active`); match both so the dot for the
   currently shown cam actually highlights. */
.webcam-carousel-dot.active,
.webcam-carousel-dot.is-active{ background:#fff; transform:scale(1.15); }

/* Modal */
.webcam-modal{
    position:fixed; inset:0; z-index:1000;
    display:none;
    align-items:center; justify-content:center; padding:24px;
}
.webcam-modal.is-open{ display:flex; }
.webcam-modal-overlay{
    position:absolute; inset:0;
    background:color-mix(in srgb, var(--ink) 70%, transparent);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.webcam-modal-content{
    position:relative; z-index:1;
    max-width:1100px; width:100%;
}
.webcam-modal-image{
    width:100%; height:auto;
    border-radius:var(--radius); display:block;
}
.webcam-modal-close{
    position:absolute; top:-14px; right:-14px;
    display:grid; place-items:center;
    width:40px; height:40px; border-radius:999px;
    background:var(--surface);
    box-shadow:0 8px 18px -6px color-mix(in srgb, var(--ink) 40%, transparent);
    color:var(--ink); cursor:pointer; border:none;
}

@media (max-width:560px){
    .webcam-grid.webcam-layout-grid{ grid-template-columns:1fr; }
}