/* ===================================================================
   KNMS LANDING — clean rebuild
   -------------------------------------------------------------------
   Built from the approved design rather than patched onto the older
   hero styles. Everything is namespaced `kn-` and scoped inside
   `.kn-hero`, so none of the accumulated overrides in app.css reach it
   and nothing here leaks into the rest of the portal.

   Loaded after app.css on the homepage only.
   =================================================================== */

.kn-hero {
    /* Local tokens. Accent colours inherit the admin-tunable theme
       variables, falling back to the design's values. */
    --kn-gold:        var(--knms-accent, #ffc94a);
    --kn-gold-lt:     #ffe08a;
    --kn-gold-dk:     #ffb61f;
    --kn-cyan:        var(--gloss-cyan, #35dcff);
    --kn-cyan-dk:     #12a6e8;
    --kn-violet:      var(--gloss-purple, #8b3ff5);
    --kn-panel-brd:   rgba(255, 214, 130, 0.95);
    --kn-panel-brd-v: rgba(205, 165, 255, 0.95);
    --kn-panel-bg1:   rgba(84, 40, 168, 0.62);
    --kn-panel-bg2:   rgba(44, 19, 92, 0.76);
    --kn-glow:        var(--theme-glow, 1);
    --kn-radius:      12px;
    --kn-max:         1400px;

    position: relative;
    /* Full-bleed out of the centred .page column. */
    margin: -1.5rem calc(50% - 50vw) 1.6rem;
    padding: 2.2rem max(1rem, calc(50vw - (var(--kn-max) / 2))) 2rem;
    background: #150a2e;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* --- Backdrop ---------------------------------------------------- */
.kn-hero__sky {
    position: absolute;
    /* Bled past the top and bottom edges by --kn-sky-travel so the scroll
       parallax has somewhere to move to. The hero clips (overflow:hidden),
       so the overhang never shows; without it a translated sky would drag a
       hard edge into view. app.js clamps its shift to this same distance. */
    --kn-sky-travel: 60px;
    inset: calc(var(--kn-sky-travel) * -1) 0;
    z-index: 0;
    background: url("../img/hero-backdrop.svg") center 46% / cover no-repeat;
    pointer-events: none;
    will-change: transform;
}
.kn-hero__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 78% 70% at 50% 48%, transparent 40%, rgba(12, 5, 30, 0.5) 84%, rgba(10, 4, 24, 0.85) 100%);
    pointer-events: none;
}

/* --- Layout ------------------------------------------------------ */
.kn-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: center;
    min-height: 48vh;
}

/* --- Left column: figure + copy ---------------------------------- */
.kn-hero__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.kn-figure { position: relative; margin-bottom: 0.4rem; }
/* Warm pool beneath, so the subject stands in the scene. */
.kn-figure::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 74%;
    height: 11%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(18, 7, 38, 0.7) 0%, rgba(18, 7, 38, 0.3) 46%, transparent 72%);
    filter: blur(14px);
    z-index: -1;
}
.kn-figure img {
    display: block;
    width: min(430px, 72vw);
    height: auto;
}
/* A real photograph: portrait crop, feathered base, backlit rim.
   Two masks intersected — an elliptical vignette that dissolves the corners
   and side edges, plus a stronger fade at the base so the subject stands in
   the scene. A single vertical gradient (what this was) leaves the left,
   right and top edges hard, which reads as a photo pasted onto the artwork
   as soon as a real portrait is uploaded. */
.kn-figure--photo img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    /* ONE mask layer on purpose: multiple layers default to mask-composite:add
       (union), which unions straight back to the full rectangle and looks like
       no mask at all.

       The radii are percentages of the BOX, not of the visible edge — they are
       the ellipse's horizontal/vertical radius measured from `at`. Anything
       much above 50%/50% pushes the `transparent` stop outside the element, so
       the visible area never gets past the near-opaque stops and the corners
       stay hard. 58%/68% was picked by rendering 50/62, 58/68, 64/74 and 68/62
       against the real portrait: it dissolves the corners and sides into the
       artwork while keeping the shoulders and hand intact. */
    -webkit-mask-image: radial-gradient(ellipse 58% 68% at 50% 40%, #000 48%, rgba(0,0,0,0.88) 70%, rgba(0,0,0,0.4) 87%, transparent 100%);
    mask-image:         radial-gradient(ellipse 58% 68% at 50% 40%, #000 48%, rgba(0,0,0,0.88) 70%, rgba(0,0,0,0.4) 87%, transparent 100%);
    filter:
        drop-shadow(10px -8px 26px rgba(255, 206, 110, calc(0.8 * var(--kn-glow))))
        drop-shadow(0 0 70px rgba(255, 176, 60, calc(0.5 * var(--kn-glow))))
        drop-shadow(0 18px 44px rgba(0, 0, 0, 0.55));
}
/* The emblem fallback: contained, lit from the sun's side. */
.kn-figure--emblem img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter:
        drop-shadow(-6px 8px 0 rgba(90, 40, 170, 0.32))
        drop-shadow(10px -8px 26px rgba(255, 206, 110, calc(0.85 * var(--kn-glow))))
        drop-shadow(0 0 70px rgba(255, 176, 60, calc(0.55 * var(--kn-glow))))
        drop-shadow(0 20px 48px rgba(0, 0, 0, 0.55));
}
/* Staff prompt when no photograph has been supplied. */
.kn-figure--empty a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: min(320px, 68vw);
    aspect-ratio: 4 / 5;
    padding: 1.4rem 1.2rem;
    border-radius: 16px;
    border: 2px dashed rgba(255, 205, 110, 0.55);
    background: rgba(20, 9, 44, 0.5);
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
}
.kn-figure--empty a:hover { border-color: rgba(255, 205, 110, 0.95); color: #fff; }
.kn-figure--empty .icon { width: 2.4rem; height: 2.4rem; color: var(--kn-gold-lt); }
.kn-figure--empty strong { font-family: 'Baloo 2','Poppins',sans-serif; font-size: 1rem; color: var(--kn-gold-lt); }

/* Copy sits on a soft dark bed — gold on the bright horizon would
   otherwise lose contrast. */
.kn-copy { position: relative; }
.kn-copy::before {
    content: '';
    position: absolute;
    inset: -1.4rem -3rem -1rem;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 48%,
        rgba(10, 4, 26, 0.92) 0%, rgba(10, 4, 26, 0.82) 40%,
        rgba(10, 4, 26, 0.45) 66%, transparent 84%);
}
.kn-title {
    margin: 0 0 0.3rem;
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.7vw, 2.1rem);
    line-height: 1.2;
    color: #ffd45e;
}
/* Gold gradient fill. Guarded like the other clipped headings in app.css so
   an unsupporting browser keeps the flat gold above rather than going
   invisible. The shadow MUST be filter:drop-shadow, not text-shadow — with a
   clipped transparent fill Chrome paints the text-shadow and drops the
   gradient, which rendered this heading as flat grey smudge. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .kn-title {
        background: linear-gradient(92deg, #fff2c4, #ffd45e 45%, #ffb628);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        filter: drop-shadow(0 2px 6px rgba(10, 4, 28, 0.95))
                drop-shadow(0 0 18px rgba(255, 180, 60, calc(0.45 * var(--kn-glow))));
    }
}
.kn-subtitle {
    margin: 0 0 1.1rem;
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    color: #fff3d6;
    text-shadow: 0 1px 10px rgba(10, 4, 28, 0.95);
}
.kn-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 0.78rem 1.7rem;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    transition: transform .15s ease, filter .2s ease;
}
.kn-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.kn-btn--gold {
    background: linear-gradient(135deg, var(--kn-gold-lt), var(--kn-gold-dk));
    color: #3a1a02;
    box-shadow: 0 6px 24px rgba(0,0,0,.4),
                0 0 34px rgba(255,190,60, calc(0.95 * var(--kn-glow))),
                0 0 70px rgba(255,150,30, calc(0.5 * var(--kn-glow)));
}
.kn-btn--gold:hover { color: #3a1a02; }
.kn-btn--cyan {
    background: linear-gradient(135deg, #5fe0ff, var(--kn-cyan-dk));
    color: #032738;
    box-shadow: 0 6px 24px rgba(0,0,0,.4),
                0 0 34px rgba(60,210,255, calc(0.95 * var(--kn-glow))),
                0 0 70px rgba(20,160,240, calc(0.5 * var(--kn-glow)));
}
.kn-btn--cyan:hover { color: #032738; }
.kn-welcome { margin: 0.9rem 0 0; font-size: 0.9rem; color: rgba(255,255,255,.78); }

/* --- Panels ------------------------------------------------------ */
.kn-rail { display: flex; flex-direction: column; gap: 1.1rem; }
.kn-panel {
    position: relative;
    border-radius: var(--kn-radius);
    padding: 1.25rem 1.35rem 1.35rem;
    background: linear-gradient(155deg, var(--kn-panel-bg1), var(--kn-panel-bg2));
    backdrop-filter: blur(9px) saturate(1.25);
    -webkit-backdrop-filter: blur(9px) saturate(1.25);
}
.kn-panel--gold {
    border: 1.5px solid var(--kn-panel-brd);
    box-shadow: 0 0 40px rgba(255,190,70, calc(0.6 * var(--kn-glow))),
                0 0 90px rgba(255,150,40, calc(0.3 * var(--kn-glow))),
                inset 0 0 56px rgba(120,50,210,.4);
}
.kn-panel--violet {
    border: 1.5px solid var(--kn-panel-brd-v);
    box-shadow: 0 0 40px rgba(150,80,255, calc(0.7 * var(--kn-glow))),
                0 0 90px rgba(110,50,230, calc(0.34 * var(--kn-glow))),
                inset 0 0 56px rgba(120,50,210,.4);
}
/* Corner brackets */
.kn-panel::before, .kn-panel::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-style: solid;
    pointer-events: none;
}
.kn-panel--gold::before, .kn-panel--gold::after { border-color: rgba(255,226,150,1); }
.kn-panel--violet::before, .kn-panel--violet::after { border-color: rgba(205,170,255,1); }
.kn-panel::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.kn-panel::after  { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

.kn-panel__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed rgba(232,188,92,.34);
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kn-gold-lt);
    text-shadow: 0 0 22px rgba(255,200,80,.7);
}
.kn-panel__title .icon { width: 1.15rem; height: 1.15rem; color: var(--kn-gold); }
.kn-panel__empty { margin: 0 0 .9rem; text-align: center; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.75); }

/* Row label with its checkbox marker */
.kn-row-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .55rem 0 .5rem;
    padding-top: .55rem;
    border-top: 1px dashed rgba(232,188,92,.3);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.kn-row-label:first-of-type { border-top: none; padding-top: 0; }
.kn-row-label .icon { width: 1.15rem; height: 1.15rem; }

/* Celebrants */
.kn-celebrants { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: .4rem; }
.kn-celebrant { display: inline-flex; align-items: center; gap: .5rem; padding: 0 .85rem; font-size: 1rem; font-weight: 600; }
.kn-celebrant + .kn-celebrant { border-left: 1px solid rgba(255,205,110,.5); }
.kn-celebrant img, .kn-celebrant .avatar {
    width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,214,130,1);
    box-shadow: 0 0 18px rgba(255,196,74, calc(0.9 * var(--kn-glow)));
}
.kn-celebrant span { color: var(--kn-gold-lt); text-shadow: 0 0 12px rgba(255,200,80,.6); }
.kn-more { align-self: center; font-size: .85rem; color: rgba(255,255,255,.75); }

/* Event rows */
.kn-event {
    display: flex; align-items: center; gap: .5rem;
    padding: .62rem 0;
    border-bottom: 1px dashed rgba(255,205,110,.32);
    font-size: .98rem; color: #fff;
}
.kn-event:last-of-type { border-bottom: none; }
.kn-event:hover { color: var(--kn-gold-lt); }
.kn-event .icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.kn-event__name { font-weight: 600; }
.kn-event__when { margin-left: auto; font-size: .84rem; color: #ffcf72; white-space: nowrap; }

/* Panel buttons */
.kn-pbtn {
    display: block;
    width: fit-content;
    margin: 1rem auto 0;
    padding: .58rem 1.4rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: .94rem;
    text-align: center;
    transition: transform .15s ease, filter .2s ease;
}
.kn-pbtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.kn-pbtn--gold { background: linear-gradient(135deg, var(--kn-gold-lt), var(--kn-gold-dk)); color: #3a1a02; box-shadow: 0 0 22px rgba(255,190,60, calc(0.9 * var(--kn-glow))); }
.kn-pbtn--gold:hover { color: #3a1a02; }
.kn-pbtn--cyan { background: linear-gradient(135deg, #5fe0ff, var(--kn-cyan-dk)); color: #032738; box-shadow: 0 0 22px rgba(60,210,255, calc(0.9 * var(--kn-glow))); }
.kn-pbtn--cyan:hover { color: #032738; }
.kn-pbtn--blue { background: linear-gradient(135deg, #7f9bff, #3f52e8); color: #fff; box-shadow: 0 0 22px rgba(110,90,255, calc(0.9 * var(--kn-glow))); }
.kn-pbtn--blue:hover { color: #fff; }
.kn-pbtn--right { margin-left: auto; margin-right: 0; }

/* --- Bottom row -------------------------------------------------- */
.kn-hero__bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr);
    gap: 1.1rem;
    margin-top: 1.5rem;
}
.kn-about { display: flex; flex-direction: column; }
.kn-about .kn-panel__title, .kn-gallery .kn-panel__title { justify-content: flex-start; font-size: 1.34rem; }
.kn-about__body { margin: 0 0 .9rem; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.9); }
.kn-about .kn-pbtn { margin-top: auto; margin-left: auto; margin-right: 0; }

.kn-gallery__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.kn-gallery__item {
    display: block; overflow: hidden; border-radius: 8px;
    border: 1.5px solid rgba(255,205,110,.7);
    box-shadow: 0 0 18px rgba(255,180,60,.35), inset 0 0 24px rgba(120,50,210,.3);
}
.kn-gallery__item img { width: 100%; height: 124px; object-fit: cover; display: block; transition: transform .25s ease; }
.kn-gallery__item:hover img { transform: scale(1.06); }
.kn-gallery__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .9rem; }
.kn-gallery__links .kn-pbtn { width: 100%; margin: 0; padding: .68rem 1rem; font-size: .94rem; border-radius: 10px; }

/* --- Responsive -------------------------------------------------- */
@media (max-width: 900px) {
    .kn-hero__inner { grid-template-columns: 1fr; gap: 1.3rem; min-height: 0; }
    .kn-hero__bottom { grid-template-columns: 1fr; }
    .kn-about .kn-pbtn { margin-top: .6rem; }
}
@media (max-width: 600px) {
    .kn-hero { margin-top: -1rem; padding: 1.6rem 1rem 1.4rem; }
    .kn-figure img { width: min(240px, 62vw); }
    .kn-figure--empty a { width: min(230px, 60vw); }
    .kn-btn { min-width: 0; flex: 1 1 44%; padding: .7rem 1rem; font-size: .95rem; }
    .kn-panel__title, .kn-about .kn-panel__title, .kn-gallery .kn-panel__title { font-size: 1.1rem; }
    .kn-about__body { font-size: .95rem; }
    .kn-gallery__item img { height: 86px; }
    .kn-gallery__links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .kn-btn:hover, .kn-pbtn:hover, .kn-gallery__item:hover img { transform: none; }
}

/* An uploaded backdrop replaces the drawn SVG scene entirely. */
.kn-hero__sky--image {
    background-image: none;           /* overridden inline by the upload */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}