/* WordPress-only additions to the approved design (site.css stays identical to the prototype). */

/* Top banner can be a picture instead of a video */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-inner > .hero-title { max-width: min(760px, 100%); } /* client title on one line */

/* Repeatable rows follow the number of items the client enters */
@media (min-width: 901px) {
  .stats-row { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
  .vision-row { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .stats-row li:last-child:nth-child(even) { grid-column: auto; }
}

/* Administrators see the WordPress bar; keep the fixed header below it */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* News article + simple lists (opened from the News & Blog cards) */
.kt-article { padding: clamp(48px, 7vw, 96px) 0; max-width: 860px; }
.kt-article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.kt-article-meta .kt-tag { position: static; }
.kt-article-title { font: 500 clamp(26px, 3vw, 40px)/1.2 var(--head); margin: 14px 0 26px; }
.kt-article-pic { margin: 0 0 28px; }
.kt-article-pic img { width: 100%; height: auto; }
.kt-article-body { color: #d3d8de; font-size: 16px; line-height: 1.75; }
.kt-article-body p { margin: 0 0 1.1em; }
.kt-article-body a { color: var(--cyan); }
.kt-back { margin-top: 24px; }
.kt-list { display: grid; gap: 14px; }
.kt-list-item { display: flex; gap: 16px; align-items: center; text-decoration: none; padding: 12px; border: 1px solid var(--line); }
.kt-list-item img { width: 120px; height: 80px; object-fit: cover; }
.kt-list-item b { display: block; font-weight: 500; }
.kt-list-item time { font-size: 12.5px; color: var(--muted); }

/* Panel live preview: show everything at once and outline the section being edited */
.kt-preview .reveal { opacity: 1 !important; transform: none !important; }
.kt-focus { outline: 3px solid #2563eb; outline-offset: -3px; transition: outline-color .6s; }

/* ---------- Picture with labels (client design 21 Oct) ----------
   Everything is placed in the picture's own pixel grid (2400 x 1250): the SVG uses the picture's viewBox and the
   text is sized in container units, so dots, lines, circles and text stay on their marks at every width.
   Measured on the client's "Pictures with Labels.png": text 24px Arial #effefe, line 1.6px #adcad3,
   circle r 10.5 / 2px #e9ffff, dot r 9.5 #c3e4ee. */
.s-hotspots.kt-lb-section { padding: 0; }
.s-hotspots.kt-lb-section:not(.kt-lb-notitle) { padding-top: clamp(64px, 8vw, 120px); }
.kt-lb { position: relative; width: 100%; aspect-ratio: var(--kt-lb-w) / var(--kt-lb-h); container-type: inline-size; overflow: hidden; background: #000; }
.kt-lb-pic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kt-lb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kt-lb-line { fill: none; stroke: #adcad3; stroke-width: 1.6; }
.kt-lb-dot { fill: #c3e4ee; }
.kt-lb-ring { fill: none; stroke: #e9ffff; stroke-width: 2; }
.kt-lb-text { position: absolute; margin: 0; padding: 0; white-space: nowrap; transform: translateY(-0.53em); font: 400 calc(24 / var(--kt-lb-w) * 100cqw) / 1.083 Arial, Helvetica, sans-serif; letter-spacing: -0.02em; color: rgb(239 254 254 / .88); } /* Chrome draws Arial heavier than the design tool: slightly softer to match */
.kt-lb-list { display: none; }

/* all labels slide in together, each from its own side; lines draw from the dot, circles pop in */
.kt-lb-ready .kt-lb-text { opacity: 0; transition: opacity .9s ease, transform 1.2s cubic-bezier(.16, .84, .3, 1); }
.kt-lb-ready .kt-lb-text[data-from="left"] { transform: translate(-14cqw, -0.53em); }
.kt-lb-ready .kt-lb-text[data-from="right"] { transform: translate(14cqw, -0.53em); }
.kt-lb-ready .kt-lb-text[data-from="top"] { transform: translate(0, calc(-0.53em - 9cqw)); }
.kt-lb-ready .kt-lb-text[data-from="bottom"] { transform: translate(0, calc(-0.53em + 9cqw)); }
.kt-lb-ready.is-in .kt-lb-text { opacity: 1; transform: translateY(-0.53em); }
.kt-lb-ready .kt-lb-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1); }
.kt-lb-ready.is-in .kt-lb-line { stroke-dashoffset: 0; }
.kt-lb-ready .kt-lb-dot, .kt-lb-ready .kt-lb-ring { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.kt-lb-ready .kt-lb-ring { transition-delay: .5s; }
.kt-lb-ready.is-in .kt-lb-dot, .kt-lb-ready.is-in .kt-lb-ring { opacity: 1; transform: none; }

/* phones: picture cropped around its middle, labels as a list underneath */
@media (max-width: 900px) {
  .kt-lb { aspect-ratio: 4 / 3; }
  .kt-lb-pic { inset: auto; left: 50%; top: 50%; width: 190%; max-width: none; height: auto; transform: translate(-50%, -50%); }
  .kt-lb-svg, .kt-lb-text { display: none; }
  .kt-lb-list { display: block; list-style: none; margin: 8px 0 0; padding: 0 var(--gutter) 48px; font-size: 14px; color: #d9eef5; }
  .kt-lb-list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid #ffffff1a; }
  .kt-lb-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #e9ffff; }
}

/* client 27 Oct: the News & Blog title opens the Blog & News page; it keeps the look of the title */
.ns-title-link { color: inherit; text-decoration: none; transition: opacity .2s; }
.ns-title-link:hover { opacity: .75; }
.ns-title-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }