/* Lightbox (assets/js/lightbox.js): the picture morphs from its place on the page to the full view. The trigger shows the zoom-in pointer. */
[data-wttc-lightbox] { cursor: zoom-in; }
[data-wttc-lightbox]:focus-visible { outline: 3px solid var(--wttc-accent); outline-offset: 4px; border-radius: 16px; }

.wttc-lightbox { position: fixed; inset: 0; z-index: 100000; }
.wttc-lightbox[hidden] { display: none; }
.wttc-lightbox__veil { position: absolute; inset: 0; background: rgba(21, 27, 52, .94); }
/* the picture is positioned by the script (fixed, in pixels) so it can grow from the thumbnail */
.wttc-lightbox__img { position: fixed; display: block; max-width: none; margin: 0; background: var(--wttc-white); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.wttc-lightbox__caption { position: absolute; left: 50%; bottom: clamp(12px, 3vh, 28px); transform: translateX(-50%); width: min(70ch, calc(100% - 48px)); margin: 0; color: var(--wttc-white); font: 400 14px/1.5 var(--wttc-font-sans); text-align: center; }
.wttc-lightbox__caption[hidden] { display: none; }

/* Close button: every state is set (the base reset paints buttons on :hover / :focus / :active). */
.wttc-lightbox .wttc-lightbox__close { position: absolute; z-index: 2; top: clamp(12px, 2.5vw, 28px); right: clamp(12px, 2.5vw, 28px); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--wttc-white); color: var(--wttc-navy); box-shadow: none; transition: background-color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.wttc-lightbox .wttc-lightbox__close:hover, .wttc-lightbox .wttc-lightbox__close:active { background: var(--wttc-accent); color: var(--wttc-navy); transform: rotate(90deg); }
.wttc-lightbox .wttc-lightbox__close:focus:not(:focus-visible):not(:hover):not(:active) { background: var(--wttc-white); color: var(--wttc-navy); }
.wttc-lightbox .wttc-lightbox__close:focus-visible { background: var(--wttc-white); color: var(--wttc-navy); outline: 2px solid var(--wttc-accent); outline-offset: 3px; }
html.wttc-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wttc-lightbox .wttc-lightbox__close { transition: none; } .wttc-lightbox .wttc-lightbox__close:hover { transform: none; } }