/* kx-pillars-spotlight: port of platform/Pillars.tsx. Colour is set once per row and inherited,
   so the whole list dims as one; .is-lit on the section and .is-on on the active row drive it. */
.kx.kx-spot { isolation: isolate; overflow: clip; --spot-t: var(--kx-duration-base) var(--kx-ease-soft); }
.kx.kx-spot > .kx-shell { position: relative; }

.kx.kx-spot .kx-spot__grounds { position: absolute; inset: 0; pointer-events: none; }
.kx.kx-spot .kx-spot__ground { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.kx.kx-spot .kx-spot__ground img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kx.kx-spot .kx-spot__veil { position: absolute; inset: 0; background: rgb(4 49 75 / 0.55); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); }
.kx.kx-spot .kx-spot__feather { position: absolute; inset-inline: 0; height: 20rem; }
.kx.kx-spot .kx-spot__feather--top { top: 0; background: linear-gradient(to bottom, var(--kx-paper), transparent); }
.kx.kx-spot .kx-spot__feather--bottom { bottom: 0; background: linear-gradient(to top, var(--kx-paper), transparent); }
/* Below 1024px a tapped row lights the section on plain navy instead of its photograph (client
   feedback 7 Oct: no text over photos on mobile). */
@media (max-width: 1023.98px) {
  .kx.kx-spot .kx-spot__ground { background: var(--kx-navy); }
  .kx.kx-spot .kx-spot__ground img, .kx.kx-spot .kx-spot__veil, .kx.kx-spot .kx-spot__feather { display: none; }
}

/* Intro in the current pros.com style (client feedback 7 Oct), the same values as kx-statement light:
   compact heavy navy heading in a one-third column, the first paragraph as a 24px navy lead, the rest
   16px navy body, the lead line under the heading in muted ink instead of blue. */
.kx.kx-spot .kx-spot__head { display: grid; row-gap: 2rem; }
@media (min-width: 1024px) { .kx.kx-spot .kx-spot__head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2.5rem, 4vw, 4rem); } .kx.kx-spot .kx-spot__body { padding-top: 0.25rem; } }
.kx.kx-spot .kx-spot__heading { max-width: 18ch; color: var(--kx-navy); transition: color var(--spot-t); font-size: clamp(2.375rem, 3.47vw, 3.125rem); line-height: 1; letter-spacing: -0.025em; font-weight: 800 !important; }
.kx.kx-spot .kx-spot__lead { margin-top: 1.25rem; max-width: 32ch; font-size: 1.125rem; line-height: 1.5; color: var(--kx-ink-muted); transition: color var(--spot-t); }
.kx.kx-spot .kx-spot__body { color: var(--kx-ink); transition: color var(--spot-t); }
.kx.kx-spot .kx-spot__p { max-width: 60ch; font-size: 1rem; line-height: 1.55; }
.kx.kx-spot .kx-spot__p:first-child { max-width: 34em; font-size: clamp(1.3125rem, 1.67vw, 1.5rem); line-height: 1.45; letter-spacing: -0.018em; }
.kx.kx-spot .kx-spot__p + .kx-spot__p { margin-top: 1.5rem; }
.kx.kx-spot.is-lit .kx-spot__heading { color: #fff; }
.kx.kx-spot.is-lit .kx-spot__lead { color: rgb(255 255 255 / 0.7); }
.kx.kx-spot.is-lit .kx-spot__body { color: rgb(255 255 255 / 0.85); }

.kx.kx-spot .kx-spot__list { margin-top: 4rem; border-top: 1px solid var(--kx-line); transition: border-color var(--spot-t); }
@media (min-width: 1024px) { .kx.kx-spot .kx-spot__list { margin-top: 5rem; } }
.kx.kx-spot.is-lit .kx-spot__list { border-top-color: rgb(255 255 255 / 0.2); }
.kx.kx-spot .kx-spot__row { position: relative; display: grid; align-items: center; column-gap: 2.5rem; row-gap: 1.25rem; padding-block: 2rem; border-bottom: 1px solid var(--kx-line); cursor: pointer; color: var(--kx-navy); transition: color var(--spot-t), border-color var(--spot-t); }
/* Desktop rows are three tracks: the title at its own width, the slot the hover image sits in, and
   the description. The slot is whatever space the title leaves, so the image never covers either. */
@media (min-width: 1024px) {
  .kx.kx-spot .kx-spot__row { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: 2.5rem; }
  .kx.kx-spot .kx-spot__title { grid-column: 1; grid-row: 1; }
  .kx.kx-spot .kx-spot__detail { grid-column: 3; grid-row: 1; }
}
.kx.kx-spot.is-lit .kx-spot__row { border-bottom-color: rgb(255 255 255 / 0.2); color: rgb(255 255 255 / 0.35); }
.kx.kx-spot.is-lit .kx-spot__row.is-on { color: #fff; }
.kx.kx-spot .kx-spot__title { display: grid; grid-template-columns: 3rem 1fr; align-items: center; column-gap: 1.25rem; }
@media (min-width: 1024px) { .kx.kx-spot .kx-spot__title { grid-template-columns: 5rem 1fr; } }
.kx.kx-spot .kx-spot__n { font-size: var(--kx-text-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kx.kx-spot .kx-spot__name { font-size: var(--kx-text-pillar); line-height: 0.96; letter-spacing: -0.028em; font-weight: 700 !important; font-stretch: 100%; color: inherit; } /* text-pillar utility */
.kx.kx-spot .kx-spot__detail { max-width: 21rem; }
@media (min-width: 1024px) { .kx.kx-spot .kx-spot__detail { justify-self: end; } }
.kx.kx-spot .kx-spot__rowlead { margin-bottom: 0.75rem; font-size: 1rem; line-height: 1.375; font-weight: 600; }
.kx.kx-spot .kx-spot__rowbody { font-size: 0.9375rem; line-height: 1.625; opacity: 0.8; }
.kx.kx-spot .kx-spot__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; row-gap: 0.5rem; margin-top: 1.25rem; font-size: 0.875rem; font-weight: 600; opacity: 0; transition: opacity var(--spot-t); }
.kx.kx-spot .kx-spot__row.is-on .kx-spot__links { opacity: 1; }
.kx.kx-spot .kx-spot__links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.kx.kx-spot .kx-spot__links a:hover { text-decoration: underline; }
.kx.kx-spot .kx-spot__row:focus-within .kx-spot__links { opacity: 1; }
.kx.kx-spot .kx-spot__links svg { width: 0.875rem; height: 0.5rem; transition: transform var(--kx-duration-base) var(--kx-ease-kairos); }
.kx.kx-spot .kx-spot__links a:hover svg { transform: translateX(0.25rem); } /* same arrow nudge as the pill buttons */

/* Hover image (client feedback 7 Oct: it was too large, covered the title and was rotated). It is
   absolutely positioned in the middle grid track, so its box is exactly the gap between the title
   and the description, between the row's padding. The picture fills that box up to 20.75rem a side
   and no wider than 1.25x its height; when the gap is too narrow to show a picture (a long title at
   ~1024px) it is not shown at all rather than overlapping. No rotation; JS only fades and scales it. */
/* Below 1024px there is no hover, so each row shows its picture in the flow, between the title and the
   description, always visible (QA 8 Oct, Teamwork #27696148). It never sits behind text, which keeps
   the 7 Oct "no text over photos on mobile" rule. !important beats the hover tween's inline styles. */
@media (max-width: 1023.98px) {
  .kx.kx-spot .kx-spot__title { order: 1; }
  .kx.kx-spot .kx-spot__card { order: 2; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .kx.kx-spot .kx-spot__detail { order: 3; }
  .kx.kx-spot .kx-spot__card img { display: block; width: 100%; max-width: 32rem; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 1rem; }
}
@media (min-width: 1024px) {
  .kx.kx-spot .kx-spot__card { display: grid; place-items: center; position: absolute; grid-column: 2 / 3; grid-row: 1 / 2; inset: 0; z-index: 10; container-type: size; pointer-events: none; visibility: hidden; opacity: 0; }
  .kx.kx-spot .kx-spot__card img { display: block; width: min(100cqw, 20.75rem, 125cqh); height: min(100cqh, 20.75rem, 120cqw); max-width: none; object-fit: cover; border-radius: 1.5rem; box-shadow: 0 30px 70px -30px rgb(2 38 56 / 0.7); }
  @container (max-width: 8rem) { .kx.kx-spot .kx-spot__card img { display: none; } }
}

.kx.kx-spot .kx-spot__close { margin-top: 3rem; max-width: 34ch; color: var(--kx-navy); transition: color var(--spot-t); }
@media (min-width: 1024px) { .kx.kx-spot .kx-spot__close { margin-top: 4rem; } }
.kx.kx-spot.is-lit .kx-spot__close { color: #fff; }