/* The first section of the home page (.k-hero) becomes a slideshow when adverts are switched on in the control panel.
   Everything here is prefixed .kp and only applies to a hero that has the .kp class, so no other section is touched. */

.k-hero.kp {
    padding: clamp(1.25rem, 2.4vw, 2.25rem) 0 calc(clamp(46px, 7vw, 110px) + 1rem);
    --kp-ms: 7000ms;
}
.kp .kp-stage { display: grid; }
.kp .kp-slide {
    grid-area: 1 / 1;
    position: relative;
    z-index: 3;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.kp .kp-slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.kp .kp-welcome { align-self: center; }

/* Ambient light: the poster itself, blurred and drifting slowly, so every slide takes its colours from its own picture. */
.kp .kp-backdrop {
    position: absolute;
    inset: -70px -40px;
    background-size: cover;
    background-position: center;
    filter: blur(46px) saturate(1.7) brightness(1.18);
    opacity: 1;
    z-index: -2;
    will-change: transform;
}
.kp .kp-slide.is-active .kp-backdrop { animation: kp-drift calc(var(--kp-ms) * 2) ease-out both; }
@keyframes kp-drift { from { transform: scale(1.05); } to { transform: scale(1.22) translateX(-1.5%); } }
.kp article.kp-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 76% 42%, rgba(255, 255, 255, .14) 0%, transparent 70%),
        linear-gradient(90deg, rgba(3, 13, 34, .74) 0%, rgba(6, 38, 90, .22) 56%, rgba(3, 13, 34, .34) 100%);
}

.kp .kp-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(20px, 5vw, 72px);
    align-items: center;
    min-height: clamp(440px, calc(100vh - 300px), 720px);
}
.kp .kp-copy { max-width: 610px; justify-self: end; width: 100%; padding-bottom: 6.5rem; }

/* ------------------------------------------------------------ the poster */
.kp .kp-poster {
    margin: 0;
    justify-self: start;
    max-width: 100%;
    rotate: 1.6deg;
    perspective: 1200px;
}
.kp .kp-tilt {
    position: relative;
    padding: 9px;
    background: #fff;
    border-radius: 22px;
    box-shadow:
        0 8px 0 var(--k-gold-2, #ffb800),
        0 24px 40px rgba(0, 0, 0, .35),
        0 50px 90px rgba(0, 0, 0, .45);
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}
.kp .kp-tilt::after {   /* a soft highlight that follows the pointer */
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 14px;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .32), transparent 55%);
    opacity: var(--glare, 0);
    transition: opacity .3s ease;
}
.kp .kp-poster img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(420px, calc(100vh - 260px), 760px);
    border-radius: 14px;
    filter: saturate(1.12) contrast(1.05) brightness(1.03);
}
.kp .kp-slide.is-active .kp-poster { animation: kp-pin .95s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes kp-pin {
    from { translate: 44px 14px; rotate: 6deg; opacity: 0; }
    to   { translate: 0 0; rotate: 1.6deg; opacity: 1; }
}
.kp .kp-slide.kp-wide .kp-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.kp .kp-slide.kp-wide .kp-poster img { max-height: clamp(300px, calc(100vh - 380px), 560px); }

/* ------------------------------------------------------------ the words */
.kp .kp-slide.is-active .kp-copy > * { animation: kp-rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 85ms + 140ms); }
.kp .kp-copy > :nth-child(1) { --d: 0; } .kp .kp-copy > :nth-child(2) { --d: 1; } .kp .kp-copy > :nth-child(3) { --d: 2; }
.kp .kp-copy > :nth-child(4) { --d: 3; } .kp .kp-copy > :nth-child(5) { --d: 4; } .kp .kp-copy > :nth-child(6) { --d: 5; }
@keyframes kp-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

.kp .kp-when {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .38rem .9rem .38rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
    font-weight: 700;
    font-size: .95rem;
}
.kp .kp-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--k-sky, #4db6e8); }
.kp .kp-when.is-live { background: rgba(255, 212, 0, .18); border-color: rgba(255, 212, 0, .55); }
.kp .kp-when.is-live .kp-pulse { background: var(--k-gold, #ffd400); box-shadow: 0 0 0 0 rgba(255, 212, 0, .7); animation: kp-ping 1.8s ease-out infinite; }
@keyframes kp-ping { to { box-shadow: 0 0 0 11px rgba(255, 212, 0, 0); } }

.kp .kp-title {
    margin: 0 0 .65rem;
    font-family: var(--font-display, inherit);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.015em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(3, 13, 34, .45);
    text-wrap: balance;
}
.kp .kp-sub { margin: 0 0 1rem; font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-style: italic; color: var(--k-gold, #ffd400); }
.kp .kp-desc { margin: 0 0 1.4rem; max-width: 54ch; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .92); }

.kp .kp-info { display: flex; align-items: stretch; gap: 1rem; margin: 0 0 1.6rem; }
.kp .kp-cal {
    flex: 0 0 auto;
    min-width: 84px;
    padding: .55rem .9rem .5rem;
    border-radius: 16px;
    text-align: center;
    color: var(--k-night, #030d22);
    background: var(--k-grad-gold, linear-gradient(135deg, #ffe45c, #ffb800));
    box-shadow: var(--k-shadow-gold, 0 10px 28px rgba(255, 184, 0, .38));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kp .kp-cal b { display: block; font-family: var(--font-display, inherit); font-size: 1.9rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.kp .kp-cal span { display: block; margin-top: .2rem; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.kp .kp-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: .45rem; }
.kp .kp-lines li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; line-height: 1.35; }
.kp .kp-lines i { color: var(--k-gold, #ffd400); margin-top: .12rem; }
.kp .kp-cta { font-weight: 700; }

/* ------------------------------------------------------------ controls: arrows, a strip of thumbnails, pause */
.kp .kp-controls { position: absolute; left: 0; right: 0; bottom: calc(clamp(46px, 7vw, 110px) + 12px); z-index: 6; pointer-events: none; }
.kp .kp-controls-in { display: flex; align-items: center; gap: .6rem; }
.kp .kp-controls-in > * { pointer-events: auto; }
.kp .kp-btn {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    color: #fff;
    background: rgba(3, 13, 34, .55);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.kp .kp-btn:hover { background: var(--k-gold, #ffd400); color: var(--k-night, #030d22); }
.kp .kp-btn:active { transform: scale(.94); }
.kp .kp-dots { display: flex; align-items: flex-end; gap: .5rem; }
.kp .kp-dot { display: block; border: 0; padding: 0; background: transparent; cursor: pointer; width: 56px; text-align: left; }
.kp .kp-thumb {
    display: block;
    width: 56px; height: 74px;
    margin-bottom: 7px;
    border-radius: 11px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    border: 2px solid rgba(255, 255, 255, .25);
    opacity: .62;
    transition: opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.kp .kp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kp .kp-thumb.is-crest { display: grid; place-items: center; background: linear-gradient(160deg, #0b4ba3, #06265a); }
.kp .kp-thumb.is-crest img { width: 34px; height: 34px; object-fit: contain; }
.kp .kp-dot:hover .kp-thumb { opacity: .95; transform: translateY(-3px); }
.kp .kp-dot.is-active .kp-thumb { opacity: 1; border-color: var(--k-gold, #ffd400); transform: translateY(-5px); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.kp .kp-bar { display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.kp .kp-bar i { display: block; height: 100%; background: var(--k-gold, #ffd400); transform: scaleX(0); transform-origin: left; }
.kp .kp-dot.is-active .kp-bar i { transform: scaleX(1); }
.kp[data-kp-running] .kp-dot.is-active .kp-bar i { transform: scaleX(0); animation: kp-fill var(--kp-ms) linear forwards; }
@keyframes kp-fill { to { transform: scaleX(1); } }
.kp .kp-count { margin-left: .4rem; align-self: center; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); font-weight: 600; }
.kp :focus-visible { outline: 3px solid var(--k-gold, #ffd400); outline-offset: 3px; }

/* ------------------------------------------------------------ tablets and phones */
@media (max-width: 991.98px) {
    .k-hero.kp { padding-bottom: calc(clamp(46px, 7vw, 110px) + 4.6rem); }
    .kp .kp-inner,
    .kp .kp-slide.kp-wide .kp-inner { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
    .kp .kp-poster { order: -1; justify-self: center; }
    .kp .kp-copy { justify-self: stretch; max-width: none; padding-bottom: 0; }
    .kp .kp-poster img { max-height: min(60vh, 540px); }
    .kp .kp-slide.kp-wide .kp-poster img { max-height: min(44vh, 360px); }
    /* the thumbnails become small progress bars */
    .kp .kp-dots { align-items: center; gap: .3rem; }
    .kp .kp-dot { width: 38px; padding: 14px 0; }
    .kp .kp-thumb { display: none; }
    .kp .kp-bar { height: 6px; }
}
@media (max-width: 420px) {
    .kp .kp-controls-in { gap: .4rem; }
    .kp .kp-btn { width: 38px; height: 38px; }
    .kp .kp-dot { width: 22px; }
    .kp .kp-count { display: none; }
    .kp .kp-info { flex-direction: column; }
    .kp .kp-cal { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    /* Only a gentle fade remains; the pause button is always there. */
    .kp .kp-slide.is-active .kp-backdrop,
    .kp .kp-slide.is-active .kp-poster,
    .kp .kp-slide.is-active .kp-copy > *,
    .kp .kp-when.is-live .kp-pulse { animation: none; }
    .kp[data-kp-running] .kp-dot.is-active .kp-bar i { animation: none; transform: scaleX(1); }
    .kp .kp-tilt { transition: none; }
}

/* ------------------------------------------------------------------ Spotlight news pages (a slide's own page) */
.sp-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #06265a; padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(2rem, 5vw, 4rem); }
.sp-backdrop { position: absolute; inset: -60px; z-index: -2; background-size: cover; background-position: center; filter: blur(46px) saturate(1.4) brightness(1.05); opacity: .95; }
.sp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 13, 34, .82), rgba(6, 38, 90, .35) 60%, rgba(3, 13, 34, .5)); }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: center; }
.sp-text h1 { font-family: var(--font-display, inherit); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; font-size: clamp(2rem, 4.4vw, 3.6rem); margin: .6rem 0 .9rem; text-wrap: balance; }
.sp-summary { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 56ch; color: rgba(255, 255, 255, .94); }
.sp-text .article-meta { opacity: .9; margin: 1rem 0 1.4rem; }
.sp-poster { margin: 0; justify-self: center; padding: 9px; background: #fff; border-radius: 22px; rotate: 1.4deg; box-shadow: 0 8px 0 var(--k-gold-2, #ffb800), 0 30px 60px rgba(0, 0, 0, .45); max-width: 100%; }
.sp-poster img { display: block; max-width: 100%; max-height: min(74vh, 680px); width: auto; height: auto; border-radius: 14px; }
@media (max-width: 860px) { .sp-grid { grid-template-columns: 1fr; } .sp-poster { order: -1; } .sp-poster img { max-height: 62vh; } }

.sp-body .sp-lead { font-size: 1.3rem; line-height: 1.6; font-weight: 600; color: var(--k-royal, #0b4ba3); }
.sp-body > p:first-of-type::first-letter { all: unset; }
.sp-body h3 { font-family: var(--font-display, inherit); font-weight: 800; margin: 2rem 0 1rem; }
.sp-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sp-facts li { padding: 1rem 1.15rem; border-radius: 18px; background: linear-gradient(135deg, #fff8d6, #fff); border: 1px solid #f1dc85; box-shadow: 0 6px 18px rgba(255, 184, 0, .14); line-height: 1.4; }
.sp-facts strong { display: block; font-size: .85rem; color: #8a6200; margin-bottom: .15rem; }
.sp-facts span { font-weight: 700; font-size: 1.05rem; }
.sp-poster img { filter: saturate(1.1) contrast(1.04); }
.sp-text .cat-tag { position: static; display: inline-block; font-size: .85rem; }

/* ------------------------------------------------------------------ v42: the picture fills the right half, no frame, fading into the left */
@media (min-width: 992px) {
    .k-hero.kp { position: relative; }
    .kp .kp-slide, .kp .kp-inner { position: static; }
    .kp .kp-inner,
    .kp .kp-slide.kp-wide .kp-inner { grid-template-columns: minmax(0, 1fr); min-height: clamp(460px, calc(100vh - 280px), 720px); }
    .kp .kp-copy { justify-self: start; max-width: min(600px, calc(50vw - 24px)); padding-bottom: 6.5rem; }
    .kp .kp-poster {
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 52%;
        justify-self: end;
        margin: 0;
        rotate: none;
        perspective: none;
        overflow: hidden;
        z-index: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 14%, #000 40%);
                mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 14%, #000 40%);
    }
    .kp .kp-tilt { position: static; display: block; height: 100%; padding: 0; background: none; border-radius: 0; box-shadow: none; transform: none !important; }
    .kp .kp-tilt::after { display: none; }
    .kp .kp-poster img {
        width: 100%; height: 100%; max-width: none; max-height: none;
        object-fit: cover;
        object-position: center 28%;
        border-radius: 0;
        filter: saturate(1.12) contrast(1.05) brightness(1.04);
        transform-origin: 60% 40%;
    }
    .kp .kp-slide.kp-wide .kp-poster img { max-height: none; }
    .kp .kp-slide.is-active .kp-poster { animation: kp-fadein 1s ease-out .05s both; }
    .kp .kp-slide.is-active .kp-poster img { animation: kp-settle 7s ease-out both; }
    .kp .kp-copy { position: relative; z-index: 2; }
}
@keyframes kp-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes kp-settle { from { transform: scale(1.12); } to { transform: scale(1.02); } }

@media (max-width: 991.98px) {
    .k-hero.kp { position: relative; --kp-h: clamp(240px, 62vw, 440px); }
    .kp .kp-slide, .kp .kp-inner { position: static; }
    .kp .kp-poster {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: var(--kp-h);
        width: auto;
        justify-self: stretch;
        margin: 0;
        rotate: none;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .kp .kp-copy { padding-top: calc(var(--kp-h) - 2.2rem); position: relative; z-index: 2; }
    .kp .kp-tilt { display: block; height: 100%; padding: 0; background: none; border-radius: 0; box-shadow: none; transform: none !important; }
    .kp .kp-tilt::after { display: none; }
    .kp .kp-poster img, .kp .kp-slide.kp-wide .kp-poster img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center 25%; border-radius: 0; }
    .kp .kp-slide.kp-wide .kp-poster img { object-position: 85% center; }
    .kp .kp-slide.is-active .kp-poster { animation: kp-fadein 1s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
    .kp .kp-slide.is-active .kp-poster img { animation: none; }
}
.kp .kp-slide.kp-wide .kp-poster img { object-position: 85% center; }

/* ------------------------------------------------------------------ v43: a more compact first section, easier to take in without scrolling */
@media (min-width: 992px) {
    .k-hero.kp { padding-top: clamp(.6rem, 1.4vw, 1.25rem); }
    .kp .kp-inner,
    .kp .kp-slide.kp-wide .kp-inner { min-height: clamp(340px, calc(100vh - 440px), 470px); }
    .kp .kp-copy { padding-bottom: 5rem; }
    .kp .kp-title { font-size: clamp(1.75rem, 3vw, 2.7rem); margin-bottom: .45rem; }
    .kp .kp-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); margin-bottom: .7rem; }
    .kp .kp-desc { font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.5; margin-bottom: 1rem;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .kp .kp-when { margin-bottom: .7rem; padding-block: .3rem; font-size: .9rem; }
    .kp .kp-info { margin-bottom: 1rem; gap: .8rem; }
    .kp .kp-cal { min-width: 74px; padding: .4rem .7rem; }
    .kp .kp-cal b { font-size: 1.55rem; }
    .kp .kp-cta { padding: .55rem 1.2rem; font-size: 1rem; }
    /* the welcome slide, a little tighter too (same content) */
    .kp .kp-welcome .k-collage { min-height: clamp(290px, 32vw, 400px); }
    .kp .kp-welcome .k-hero-title { font-size: clamp(2rem, 3.6vw, 3.1rem); margin: .6rem 0 .7rem; }
    .kp .kp-welcome .k-hero-lead { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55; }
    .kp .kp-welcome .k-hero-actions { margin-top: 1rem; }
    .kp .kp-welcome .row { --bs-gutter-y: 1rem; }
}
@media (max-width: 991.98px) {
    .k-hero.kp { --kp-h: clamp(190px, 50vw, 320px); padding-bottom: calc(clamp(46px, 7vw, 110px) + 3.8rem); }
    .kp .kp-title { font-size: clamp(1.55rem, 6vw, 2.1rem); }
    .kp .kp-desc { font-size: .98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .kp .kp-info { margin-bottom: 1rem; }
    .kp .kp-welcome .k-collage { min-height: 300px; margin-top: .5rem; }
}
@media (min-width: 992px) {
    .kp .kp-inner,
    .kp .kp-slide.kp-wide .kp-inner { min-height: clamp(380px, calc(100vh - 420px), 490px); }
    .kp .kp-copy { padding-bottom: 6rem; }
    .kp .kp-dot { width: 48px; }
    .kp .kp-thumb { width: 48px; height: 62px; margin-bottom: 5px; }
    .kp .kp-thumb.is-crest img { width: 28px; height: 28px; }
}