/*
  Login page news carousel (report viewer copy of ControlCenter.MVC's Content/login-carousel.css).
  The page background and layout live in the shared signin.css (.rv-login-stage).
*/
.lc {
    --lc-teal: #00A1E4;            /* FYIsoft product blue: highlights, links, progress */
    --lc-green: #00A1E4;
    --lc-button: #00A1E4;
    --lc-button-hover: #0088C2;
    --lc-text: #ffffff;
    --lc-text-soft: #dbe5ee;
    --lc-text-mute: #9fb2c4;
    --lc-interval: 5s;
    position: absolute;
    left: 4.6vw;
    top: 50%;
    transform: translateY(-50%);
    width: min(40vw, 640px);
    text-align: left;              /* Base.css centers everything inside .sign-in */
    color: var(--lc-text);
    font-family: var(--font-family, "Segoe UI", Arial, sans-serif);
    z-index: 1;
}

/* all slides share one grid cell, so the box is as tall as the tallest slide */
.lc-slides { display: grid; }
.lc-slide {
    grid-area: 1 / 1;
    align-self: end;               /* shorter slides sit just above the controls */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    /* outgoing slide fades out first... */
    transition: opacity .7s ease-in, transform .7s ease-in, visibility 0s linear .7s;
}
.lc-slide.lc-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* ...then the incoming slide fades in, so the two never overlap */
    transition: opacity 1.05s ease-out .65s, transform 1.05s ease-out .65s, visibility 0s;
}

.lc-media { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 30px; }
.lc-media .lc-img-avatar { width: 170px; height: 170px; object-fit: contain; }
.lc-media .lc-img-photo { width: min(100%, 440px); height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.lc-media .lc-img-product { width: min(100%, 420px); height: auto; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .55)); }
.lc-caption b { display: block; font-size: 15px; }
.lc-caption span { font-size: 12px; color: var(--lc-text-mute); }

.lc-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lc-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lc-green); }
.lc-date { font-size: 13px; color: var(--lc-text-mute); }
.lc-tag {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; color: var(--lc-teal);
    background: rgba(0, 161, 228, .16); border: 1px solid rgba(0, 161, 228, .5);
}
.lc .lc-title { margin: 14px 0 0; padding: 0; font-size: clamp(30px, 3vw, 46px); line-height: 1.12; font-weight: 800; color: var(--lc-text); background: none; height: auto; }
.lc .lc-title em { font-style: normal; color: var(--lc-teal); }
.lc .lc-body { margin: 20px 0 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.65; color: var(--lc-text-soft); }
/* !important kept from the ControlCenter copy, where FYIbase.css forces .sign-in link colours */
.lc .lc-cta { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin-top: 18px; font-size: 16px; font-weight: 700; color: var(--lc-teal) !important; text-decoration: none; }
.lc .lc-cta:hover { text-decoration: underline; }
.lc .lc-cta-button { padding: 11px 22px; border-radius: 6px; background: var(--lc-button); color: #fff !important; }
.lc .lc-cta-button:hover { background: var(--lc-button-hover); text-decoration: none; }

/* controls */
.lc-controls { margin-top: 36px; display: flex; align-items: center; gap: 14px; }
.lc-controls[hidden] { display: none; }
.lc-dots { display: flex; gap: 8px; }
.lc .lc-dot {
    position: relative; width: 34px; height: 4px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 2px;
    background: rgba(255, 255, 255, .25); cursor: pointer; overflow: hidden;
}
.lc .lc-dot::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--lc-teal); }
.lc .lc-dot.lc-active::after { animation: lc-fill var(--lc-interval) linear forwards; }
.lc.lc-paused .lc-dot.lc-active::after { animation-play-state: paused; }
@keyframes lc-fill { to { width: 100%; } }
.lc .lc-arrow {
    width: 32px; height: 32px; min-width: 0; padding: 0; margin: 0; border-radius: 50%;
    border: 1px solid var(--lc-teal); background: rgba(0, 161, 228, .10);
    color: var(--lc-teal); font-size: 16px; line-height: 1; cursor: pointer;
}
.lc .lc-arrow:hover { background: rgba(0, 161, 228, .25); }
.lc .lc-dot:focus-visible, .lc .lc-arrow:focus-visible, .lc .lc-cta:focus-visible { outline: 2px solid var(--lc-teal); outline-offset: 3px; }

/* template slide (authoring guide) */
.lc-ph { display: inline-block; padding: 0 6px; border-radius: 4px; outline: 1px dashed rgba(255, 214, 102, .85); outline-offset: 2px; }
.lc-ph-label { display: block; margin: 0 0 4px; font-family: Consolas, monospace; font-size: 11px; color: #ffd666; font-weight: 400; letter-spacing: .04em; text-transform: none; }
.lc-ph-box {
    display: grid; place-items: center; width: 260px; height: 150px; border-radius: 12px;
    border: 2px dashed rgba(255, 214, 102, .85); background: rgba(255, 255, 255, .04);
    font-family: Consolas, monospace; font-size: 13px; color: #ffd666; text-align: center;
}

/* below this width there is no room beside the sign-in card */
@media (max-width: 1100px) {
    .lc { display: none; }
}

/* Windows "Show animations" off (common on VDI) reports reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
    .lc-slide, .lc-slide.lc-active { transform: none; }
}