/* THE BEFORE / AFTER SLIDER, BESIDE THE PRICE CARD.
   It lives in the hero of the Go Glow page, on the paper, next to the licence. Wide enough (1200px and up) the card is on the left
   and the slider takes the rest of the row, as tall as the card. Narrower, the card stays on top and the slider comes below it, so
   nothing the visitor came to do (buy) is pushed down.
   It carries its own colours and font stack on purpose (same reason as bars.css): the product pages load go-atlas/styles.css and
   nothing here may depend on it. Everything is namespaced .cmp-* / .hero-row, so it cannot restyle anything around it. */

.cmp {
    --cmp-ink: #161513;
    --cmp-muted: #6b675e;
    --cmp-line: #f3ecdc;
    --cmp-accent: #c9683a;
    position: relative;
    width: 100%;
    color: var(--cmp-ink);
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.cmp *, .cmp *::before, .cmp *::after { box-sizing: border-box; }

/* THE ROW. The card comes first, always: on the left when there is room for two columns, on top when there is not, with the slider
   after it. The markup is in the same order, so the keyboard and a screen reader meet things as they are laid out. */
.hero-row { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-row > .pricing-grid--one { width: 100%; }
.hero-row > .cmp { max-width: 740px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 1080px) { .hero-row > .cmp { max-width: 520px; } }
/* On a phone the card scrolls sideways in a strip that starts on the left (the two-card layout it was made for); one card is
   centred instead. The slider brings the same side padding as the strip, since the hero has none there. */
@media (max-width: 560px) {
    .hero-row > .pricing-grid--one { justify-content: center; }
    .hero-row > .cmp { padding-inline: var(--page-pad, 18px); }
}

@media (min-width: 1200px) {
    .hero-row {
        display: grid;
        /* The width of one card, as product-page.css sets it: half of the pair, less half of its gap. */
        grid-template-columns: calc((740px - 22px) / 2) minmax(0, 1fr);
        column-gap: clamp(24px, 2.6vw, 44px);
        align-items: center;
        /* 1260 = the card (359) + the widest gap (44) + a picture as wide as the card is tall in 16:9 (about 857px), so on a big
           screen the picture is 16:9 or very nearly. The row stays centred, so the margins stay equal. */
        max-width: 1260px;
        margin: 0 auto;
    }
    /* THE PICTURE IS EXACTLY AS TALL AS THE CARD. The column is stretched to the row, whose height is the card's, and the picture
       fills it instead of keeping a 16:9 box of its own; the photograph is cropped to fit (object-fit: cover). It therefore adds
       no height of its own, and the card does not move. */
    /* THE BLOCK IS CENTRED ON WHAT IS REALLY THERE. The hero centres "name + card" from a card height of 26.5625rem (425px); the card
       of this page, with the launch offer said in two lines under the price, is 27rem (432px), and the hero knows nothing of
       the tabs hung under the picture (2.75rem with their gap): both are put right here. The row itself follows the card whatever
       its height (the picture with it); only the centring of the whole block would be a little off if the card changed, for example
       when the offer ends and the two lines go. The space under the name is a little more generous than the hero's own. */
    .hero--compare {
        --title-margin: clamp(40px, 6vh, 64px);
        --block-height: calc(var(--name-size) * 1.02 + var(--title-gap) + var(--sub-size) * 1.55 + var(--title-margin) + 27rem + 2.75rem);
    }
    .hero-row > .cmp { max-width: none; margin-top: 0; align-self: stretch; }
    .hero-row > .cmp .cmp-panel { height: 100%; }
    .hero-row > .cmp .cmp-stage { height: 100%; aspect-ratio: auto; }
}

/* On a phone or a narrow window the slider sits below the fold, where the paper scratches of the Go Atlas stylesheet (main::before,
   z-index 20) would be drawn over the photographs. The hero rises above them. */
.hero--compare { z-index: 30; }

/* The choice of shot: plain words, the current one underlined in the copper of the "Go". Hidden until the script that makes them
   work has run; without it the first shot is shown and the divider sits in the middle. */
.cmp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; margin-top: 12px; }
/* BESIDE THE CARD THE TABS LEAVE THE FLOW. Counted in the height of the column, they made it the block "picture + tabs" that was
   aligned with the card. Hung under the picture, they take no height: the picture alone is the height of the card, and the tabs
   are centred under it. */
@media (min-width: 1200px) {
    .cmp-tabs { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin-top: 0; }
}
.cmp-tabs[hidden] { display: none; }
.cmp-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 6px 0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--cmp-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cmp-tab:hover { color: var(--cmp-ink); }
.cmp-tab[aria-selected="true"] { color: var(--cmp-ink); border-bottom-color: var(--cmp-accent); }
.cmp-tab:focus-visible { outline: 2px solid var(--cmp-ink); outline-offset: 4px; }

.cmp-panel[hidden] { display: none; }

/* THE STAGE. The two images are stacked, the one WITHOUT the glow on top, cut off at the divider. --pos is one number set on the
   whole block, so every shot keeps the same position when the viewer changes shot. touch-action lets a finger scroll the page
   vertically and keeps the horizontal drag for the divider. Same corner and shadow as the licence cards beside it. */
.cmp-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(22, 21, 19, 0.08), 0 22px 44px -22px rgba(22, 21, 19, 0.45);
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    isolation: isolate;
}
.cmp-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.cmp-img--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

/* THE MOVING SHOT (shared/js/compare-video.js). The two versions travel side by side inside ONE file, so the divider can never show two
   different instants; a canvas draws the half that belongs on each side of it. The video is kept rendered but invisible - a display:none
   video is a video a browser may stop decoding - and the still under it is what a visitor sees before the first frame arrives, and all they
   see if the script never runs. */
.cmp-video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cmp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* THE STILL THAT IS THE "BEFORE" OF A SHOT WITH NO FILM OF ITS OWN: kept decoded but never shown; the canvas draws it (compare-video.js). */
.cmp-still { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* WHEN THE PICTURE IS NARROWER THAN 16:9 (beside the cards, on a laptop) THE PHOTOGRAPH IS CROPPED, so each shot says what to keep.
   The titles are white-on-black and must never lose a column: they are shown whole, the black of the stage filling the bars. The
   portrait keeps the girl, who stands in the left third. */
/* The glow around the titles does not reach zero at the picture's edge, so on the black bars it would end in a visible line. A
   mask as tall as the picture (same 16:9, same "contain") fades the top and the bottom into the black of the stage. */
#cmp-panel-text .cmp-img,
#cmp-panel-text .cmp-canvas {
    object-fit: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='0.14' stop-color='%23000'/%3E%3Cstop offset='0.86' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='16' height='9' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='0.14' stop-color='%23000'/%3E%3Cstop offset='0.86' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='16' height='9' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The moving portrait keeps the same part of the picture: its focus is data-focus on the stage (shared/js/compare-video.js). */

/* THE DIVIDER: a hairline and a small round knob, quiet until the pointer is on the picture. The element itself stays wide
   (44px) so that it is easy to grab, and it is the slider for the keyboard and for screen readers. */
.cmp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 44px;
    margin-left: -22px;
    outline: none;
}
.cmp-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: rgba(243, 236, 220, 0.9);
    /* The faint dark edge keeps the hairline visible on a white sky. */
    box-shadow: 0 0 0 1px rgba(22, 21, 19, 0.2);
}
.cmp-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    background: var(--cmp-line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23161513' d='M15 14l-6 6 6 6zM25 14l6 6-6 6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    opacity: 0.72;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cmp-stage:hover .cmp-handle::after,
.cmp-handle:focus-visible::after,
.cmp.is-dragging .cmp-handle::after { opacity: 1; }
.cmp.is-dragging .cmp-handle::after { transform: scale(1.08); }
.cmp-handle:focus-visible::after { outline: 2px solid var(--cmp-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .cmp-handle::after, .cmp-tab { transition: none; }
}