/*
 * JobTarget Spotlights panel on the employer login page: a full-height blue
 * panel on the left, the existing login form on the right.
 *
 * The split only engages once /js/spotlight.js adds .has-spotlight. Without that
 * class this file is inert and the page renders as it did before the panel existed.
 */

:root {
    --spotlight-bg: #4a8fe7;
    --spotlight-radius: 16px;
    --spotlight-content-width: 600px;
    --spotlight-stack-gap: 1.5rem;
    --spotlight-controls-gap: 2.5rem;
    --spotlight-headline-size: 40px;
    --spotlight-headline-line-height: 1.2;
    --spotlight-body-size: 16px;
    --spotlight-body-line-height: 1.6;
    --spotlight-body-lines: 6;
    /* How long each slide holds before the carousel advances. This is the only
       place the interval is defined — the script takes its cue from the progress
       animation ending rather than keeping a duration of its own. */
    --spotlight-interval: 6s;
    --spotlight-max-width: 1440px;
}

/* The UI kit reserves a fixed min-height on the navbar (62px, 107px from 768px up)
   that its content doesn't use, leaving a gap above the panel. Collapsing it to the
   natural height closes that gap. Scoped to the state where the panel is actually
   showing, so the no-spotlight fallback keeps the navbar exactly as it is elsewhere. */
body:has(.login-layout.has-spotlight) jt-navbar {
    min-height: 0;
}

/* The UI kit gives the footer a small top margin. Against a full-bleed panel that
   reads as a white strip between the blue band and the footer, so it's collapsed
   here. Scoped to the split, like the navbar rule above. */
body:has(.login-layout.has-spotlight) jt-footer {
    margin-top: 0;
}

/* Below the desktop split the panel still spans the full width, so the container's
   bottom margin shows as that same white strip. The top margin stays — the card
   needs it once the panel is stacked underneath. */
@media (max-width: 1023.98px) {
    #login-container:has(.login-layout.has-spotlight) {
        margin-bottom: 0 !important;
    }
}

.login-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* The panel and its controls start hidden; [hidden] has to beat the display
   rules below, which are more specific than the UA stylesheet's. */
.spotlight-panel[hidden],
.spotlight-panel__controls[hidden],
.spotlight-slide[hidden] {
    display: none !important;
}

.spotlight-panel {
    display: flex;
    flex-direction: column;
    /* Centres the content column horizontally; auto margins don't do it here
       because stretched flex items keep their own cross-axis sizing. */
    align-items: center;
    width: 100%;
    background-color: var(--spotlight-bg);
    color: #fff;
    padding: 2.5rem 2rem;
}

/* Panel content sits in a readable column centred in the blue field. Without this
   a wide viewport stretches the image box into a huge, mostly-empty slab. */
.spotlight-panel > * {
    width: 100%;
    max-width: var(--spotlight-content-width);
    margin-left: auto;
    margin-right: auto;
}

.spotlight-panel__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 var(--spotlight-stack-gap);
}

/* The design's megaphone opens to the left; the icon is drawn opening right. */
.spotlight-panel__megaphone {
    width: 32px;
    height: 32px;
    flex: none;
    transform: scaleX(-1);
}

/* Deliberately not flex-grow: letting the track absorb the spare height would
   pin the content to the top and leave the panel's centring with nothing to
   distribute — which is what happens with a single spotlight and no controls. */
.spotlight-panel__track {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spotlight-slide {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Load-in and carousel motion.

   The panel's blue band and its skeleton are in the server-rendered HTML, so the
   split is laid out on first paint and nothing reflows when the feed lands — only
   the slide content fades in over the skeleton.

   Slides animate via `animation` rather than `transition` on purpose: hiding a
   slide sets [hidden] -> display:none, and a CSS animation replays by itself when
   the element is displayed again. That gives the carousel its transition for free,
   with no animationend bookkeeping in the script.
   --------------------------------------------------------------------------- */

.spotlight-slide {
    animation: spotlight-fade-up 380ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Direction-aware carousel motion. Classes rather than data-* attributes: the
   data-* surface on this element is the GTM contract and is left untouched. */
.spotlight-panel.is-anim-next .spotlight-slide {
    animation-name: spotlight-in-from-right;
}

.spotlight-panel.is-anim-prev .spotlight-slide {
    animation-name: spotlight-in-from-left;
}

.spotlight-panel__controls {
    animation: spotlight-fade-up 380ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes spotlight-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes spotlight-in-from-right {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes spotlight-in-from-left {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Placeholder shown while the feed is in flight. Same box metrics as a real slide
   so swapping one for the other doesn't move anything. */
.spotlight-panel:not(.is-loading) .spotlight-skeleton {
    display: none;
}

.spotlight-skeleton__media {
    aspect-ratio: 22 / 10;
    border-radius: var(--spotlight-radius);
    margin-bottom: var(--spotlight-stack-gap);
}

.spotlight-skeleton__line {
    font-size: var(--spotlight-body-size);
    height: 14px;
    border-radius: 999px;
    margin-bottom: calc(var(--spotlight-body-line-height) * 1em - 14px);
}

.spotlight-skeleton__line--title {
    font-size: var(--spotlight-headline-size);
    height: 1em;
    width: 65%;
    margin-bottom: calc(var(--spotlight-headline-line-height) * 2em - 1em + var(--spotlight-stack-gap));
}

.spotlight-skeleton__line--short {
    width: 45%;
    margin-bottom: calc(var(--spotlight-body-line-height) * 1em - 14px
            + (var(--spotlight-body-lines) - 3) * var(--spotlight-body-line-height) * 1em);
}

.spotlight-skeleton__media,
.spotlight-skeleton__line {
    background-color: rgba(255, 255, 255, 0.18);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
    background-size: 220px 100%;
    animation: spotlight-shimmer 1.4s ease-in-out infinite;
}

/* Static stand-in when the feed is empty or unreachable. Sized to roughly the
   height a real slide occupies so the panel doesn't visibly shrink when it
   replaces the skeleton, and muted so it reads as an absence of news rather than
   as a message competing with the login form. */
.spotlight-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    padding: 1.5rem 0;
}

.spotlight-placeholder[hidden] {
    display: none;
}

.spotlight-placeholder__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.spotlight-placeholder__text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.78);
}

@keyframes spotlight-shimmer {
    from {
        background-position: -220px 0;
    }

    to {
        background-position: calc(100% + 220px) 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .spotlight-slide,
    .spotlight-panel__controls,
    .spotlight-skeleton__media,
    .spotlight-skeleton__line {
        animation: none;
    }

    .spotlight-panel__dot {
        transition: none;
    }

    /* Killing the progress animation also switches autoplay off, since the script
       advances on its animationend and it now never ends. The fill is shown filled
       rather than mid-sweep so the active dot still reads as the current slide. */
    .spotlight-panel__dot--active .spotlight-panel__dot-fill {
        animation: none;
        transform: scaleX(1);
    }
}

/* Announcement images are product screenshots of wildly varying shape (the current
   one is 3.9:1, against a 2.2:1 box). The fixed box is what keeps the panel from
   reflowing between slides; the image fills it edge to edge and is cropped to fit,
   rather than being letterboxed inside it.

   The image fills the whole box: `cover` scales it until both axes are covered and
   crops the overflow, so no fill colour is ever visible behind it. No background is
   set for that reason — anything here would only show for the moment before the
   image decodes, or if it fails to load outright. */
.spotlight-slide__media {
    aspect-ratio: 22 / 10;
    border: 1px solid #e2e8f0;
    border-radius: var(--spotlight-radius);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.spotlight-slide__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The slide is pinned to the tallest shape its copy is allowed to take (2-line
   headline, 6-line description). Announcement copy is authored in Admin at any
   length, and without reserved space every slide would be a different height — which
   walks the carousel arrows up and down the panel as the user cycles. The space is
   reserved on the slide rather than on each text block, so shorter copy stays
   tightly stacked and the slack collects below the description. */
.spotlight-panel__track {
    container-type: inline-size;
}

.spotlight-slide {
    min-height: calc(100cqw * 10 / 22 + 2 * var(--spotlight-stack-gap)
            + 2 * var(--spotlight-headline-line-height) * var(--spotlight-headline-size)
            + var(--spotlight-body-lines) * var(--spotlight-body-line-height) * var(--spotlight-body-size));
}

.spotlight-slide__headline {
    margin: var(--spotlight-stack-gap) 0 calc(var(--spotlight-stack-gap) - 0.1em);
    padding-bottom: 0.1em;
    font-size: var(--spotlight-headline-size);
    font-weight: 700;
    line-height: var(--spotlight-headline-line-height);
    letter-spacing: normal;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spotlight copy is authored in Admin with no enforced length — clamp it so a
   long description can't overflow the panel. */
.spotlight-slide__description {
    margin: 0;
    font-size: var(--spotlight-body-size);
    font-weight: 400;
    line-height: var(--spotlight-body-line-height);
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: var(--spotlight-body-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Arrows sit at the outer edges with the dots centred between them. */
.spotlight-panel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spotlight-controls-gap);
}

.spotlight-nav {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: #fff;
    line-height: 1;
    padding: 0.25rem;
    cursor: pointer;
    opacity: 0.9;
}

.spotlight-nav:hover {
    opacity: 1;
}

.spotlight-nav svg {
    width: 22px;
    height: 22px;
    /* Keeps the button itself as the click target, so GTM reads its data attributes. */
    pointer-events: none;
}

.spotlight-panel__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The active dot stretches into a track and its fill sweeps across as the slide
   plays out. That fill's animation is also the carousel's clock: spotlight.js
   advances on its animationend, so the two can't drift apart, and pausing the
   animation below genuinely pauses the carousel rather than just its indicator. */
.spotlight-panel__dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 999px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.45);
    transition: width 320ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 200ms ease;
}

.spotlight-panel__dot--active {
    width: 34px;
    /* Dimmed to read as the track the white fill travels along. */
    background-color: rgba(255, 255, 255, 0.35);
}

.spotlight-panel__dot-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

.spotlight-panel__dot--active .spotlight-panel__dot-fill {
    animation: spotlight-progress var(--spotlight-interval) linear forwards;
}

/* Hover or keyboard focus anywhere in the panel freezes the fill mid-sweep, which
   holds the slide until the pointer leaves; it then resumes from where it stopped. */
.spotlight-panel:hover .spotlight-panel__dot--active .spotlight-panel__dot-fill,
.spotlight-panel:focus-within .spotlight-panel__dot--active .spotlight-panel__dot-fill {
    animation-play-state: paused;
}

@keyframes spotlight-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* Desktop: full-height split, panel left. 1024px is the breakpoint named in the
   ticket, which is why these are hand-written rather than Bootstrap's lg (992px). */
@media (min-width: 1024px) {
    /* The container is a centred flex row with vertical margins from the theme's
       utility classes. For the split it has to become a full-width, full-height
       band, so those utilities are overridden — but only while the panel shows. */
    #login-container:has(.login-layout.has-spotlight) {
        margin: 0 !important;
        padding: 0;
        align-items: stretch !important;
        width: 100%;
    }

    .login-layout.has-spotlight {
        display: grid;
        grid-template-columns: minmax(0, 787fr) minmax(0, 653fr);
        align-items: center;
        width: 100%;
        max-width: var(--spotlight-max-width);
        margin-inline: auto;
    }

    /* Panel is second in the DOM so the login form stays first for screen readers
       and keyboard order; CSS moves it to the left visually, as the design shows. */
    .login-layout.has-spotlight .spotlight-panel {
        order: -1;
        justify-content: center;
        padding: clamp(2rem, 3.5vw, 3.5rem) clamp(2rem, 4vw, 4rem);
        height: 100%;
    }

    /* The card carries wp-* viewport-width utilities and a shadow from the shared
       theme bundle. Inside the split it becomes a plain form on white, per design. */
    .login-layout.has-spotlight > .card {
        width: 100% !important;
        max-width: 500px;
        margin: 0 auto !important;
        box-shadow: none !important;
    }

    /* The theme sizes this form for a narrow centred card. In the split it has a
       whole column to itself, so the controls are scaled up to match the panel
       opposite rather than sitting small in the middle of it. */
    .login-layout.has-spotlight > .card .form-control,
    .login-layout.has-spotlight > .card .btn {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 15px;
    }
}