/* pages/solution-details.css — the solution template: only what is unique to this page */

.detail-block {
    display: grid;
    gap: var(--space-lg);
}
.detail-block__title {
    position: relative;
    padding-block-start: var(--space-lg);
    border-block-start: var(--hairline) solid var(--color-border-subtle);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
}
/* gold kicker on the rule, as on the home page's "Why ETQAN" items */
.detail-block__title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--hairline) * -1);
    inline-size: var(--kicker-width);
    block-size: var(--rule);
    background: var(--gradient-gold);
}
.detail-block__text {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

.rail-cta .btn { inline-size: 100%; }

/* R01 note 1 — the compact hero band itself now lives in components-content.css
   (R02 reuses it on solutions.html). What stays here is this photograph’s focal
   point: at half height the two cameras sit just below the middle of the frame. */
.page-hero--compact .page-hero__image { object-position: 50% 53%; }

/* =====================================================================
   R01 note 3 + 6 — description beside the image slider. One column by
   default; two only when a gallery is actually rendered, so an empty
   solution.gallery[] falls back to full-width text with no empty frame.
   ===================================================================== */
.solution-intro {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

@media (min-width: 768px) {
    .solution-intro:has(.solution-slider) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    /* roughly 5/12 text, 7/12 slider */
    .solution-intro:has(.solution-slider) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --- the slider ------------------------------------------------------ */
.solution-slider {
    display: grid;
    gap: var(--space-md);
}
/* the gold-hairline frame of the image cards elsewhere, at a fixed 16:10 */
.solution-slider__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border: var(--hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
/* .photo paints its gold duotone and vignette from ::before/::after at z-index 1;
   the active slide is raised to 1 as well, so the overlays move above it */
.solution-slider__frame.photo::before,
.solution-slider__frame.photo::after { z-index: 2; }

.solution-slider__track {
    display: grid;
    block-size: 100%;
}
/* Dissolve, not a photo-over-photo crossfade. The home hero cross-dissolves two dark,
   full-bleed, heavily scrimmed slides, so the overlap reads as a soft blend. In this small
   frame two bright photographs at 50% each read as a double exposure — a rendering fault,
   not a transition. The outgoing slide therefore clears first and the incoming one follows,
   through the frame's own surface: same total duration, same easing, no superimposition. */
.solution-slider__slide {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity calc(var(--duration-slide-fade) * 0.55) var(--ease-in-out),
                visibility 0s calc(var(--duration-slide-fade) * 0.55);
}
.solution-slider__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity calc(var(--duration-slide-fade) * 0.55) var(--ease-in-out) calc(var(--duration-slide-fade) * 0.45),
                visibility 0s;
}
.solution-slider__open {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    border-radius: inherit;
}
.solution-slider__open:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }
.solution-slider__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
/* the supplied control-room photo is ~1.93:1, wider than the frame: hold the video
   wall and the operators in shot instead of centring on the empty desk */
.solution-slider__image--wide { object-position: 50% 38%; }

.solution-slider__zoom {
    position: absolute;
    inset-block-end: var(--space-sm);
    inset-inline-end: var(--space-sm);
    z-index: 3;
    display: grid;
    place-items: center;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    background-color: var(--color-scrim-badge);
    border: var(--hairline) solid var(--color-border);
    color: var(--color-accent);
}
.solution-slider__zoom-icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* --- progress: the slim gold bar that also clocks the rotation -------- */
.solution-slider__progress {
    block-size: var(--rule);
    background-color: var(--color-border-subtle);
}
.solution-slider__progress-bar {
    display: block;
    block-size: 100%;
    background: var(--gradient-gold);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
[dir="rtl"] .solution-slider__progress-bar { transform-origin: 100% 50%; }
.solution-slider__progress-bar.is-running { animation: solution-slider-progress var(--slider-interval) var(--ease-timer) forwards; }
.solution-slider.is-paused .solution-slider__progress-bar { animation-play-state: paused; }

@keyframes solution-slider-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- controls: framed icon buttons (framed buttons stay framed) ------- */
.solution-slider__controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.solution-slider__control {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-accent);
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.solution-slider__control-icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
.solution-slider__dots { display: flex; }
.solution-slider__dot {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
}
.solution-slider__dot::before {
    content: "";
    inline-size: var(--space-sm);
    block-size: var(--space-sm);
    border: var(--hairline) solid var(--color-accent);
    transform: rotate(45deg);
    transition: background-color var(--transition-base), transform var(--transition-base);
}
.solution-slider__dot[aria-current="true"]::before {
    background-color: var(--color-accent);
    transform: rotate(45deg) scale(1.25);
}

/* a single-image gallery is a static framed picture: no clock, no controls */
.solution-slider:not(:has(.solution-slider__slide + .solution-slider__slide)) .solution-slider__progress,
.solution-slider:not(:has(.solution-slider__slide + .solution-slider__slide)) .solution-slider__controls { display: none; }

@media (hover: hover) {
    .solution-slider__frame:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-ring-gold); }
    .solution-slider__open:hover .solution-slider__image { transform: scale(1.05); }
    .solution-slider__control:hover { border-color: var(--color-border-strong); color: var(--color-accent-highlight); background-color: var(--color-surface-2); }
    .solution-slider__dot:hover::before { background-color: var(--color-accent-deep); }
}