/* Blue Wolf — video frame, service modules, cookie notice, modal, chat.
   Loaded after theme.css so it can rely on the same custom properties. */

/* ---------------------------------------------------------- video frame */

.vframe {
	position: relative;
	aspect-ratio: 16 / 9;              /* holds 16:9 at every width */
	background: var(--ink-2);
	border: 0;
	box-shadow: 0 0 0 1px rgba(156,192,204,.10), 0 30px 70px -30px rgba(0,0,0,.85);
	overflow: hidden;
}
.vframe__media { width: 100%; height: 100%; object-fit: cover; display: block; }

.vframe__badge {
	position: absolute; left: 0; bottom: 0;
	background: rgba(5,10,22,.86);
	border-top: 1px solid var(--line); border-right: 1px solid var(--line);
	padding: 9px 14px;
	font-size: 12px; color: var(--muted);
}
.vframe__badge code { color: var(--orange); font-size: 11.5px; }

@supports not (aspect-ratio: 16 / 9) {
	.vframe { height: 0; padding-bottom: 56.25%; }
	.vframe__media { position: absolute; inset: 0; }
}
@media (max-width: 620px) { .vframe__badge { font-size: 11px; padding: 7px 10px; } }

/* ------------------------------------------------------ service modules */

/* Not cards. The rule sits at the TOP of each module, which means it aligns
   across every column regardless of how long the copy runs - the previous
   translateY stagger made variable-height text read as broken alignment. */

.mods {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}
@media (min-width: 700px)  { .mods { grid-template-columns: repeat(2, 1fr); column-gap: 46px; } }
@media (min-width: 1060px) { .mods { grid-template-columns: repeat(3, 1fr); column-gap: 54px; } }

.mod {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;   /* locks the internal baseline */
	gap: 10px;
	padding: 28px 0 30px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--line);
	overflow: visible;
}

/* Orange bar that grows along the top rule on hover. */
.mod::before {
	content: ""; position: absolute; top: -1px; left: 0;
	width: 0; height: 1px; background: var(--orange);
	transition: width .55s cubic-bezier(.22,1,.36,1);
	z-index: 1;
}
.mod:hover::before { width: 100%; }

.mod__ico { color: var(--steel); transition: color .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.mod__ico .ico { width: 32px; height: 32px; stroke-width: 1.3; }
.mod:hover .mod__ico { color: var(--orange); transform: translateX(4px); }

.mod__n {
	position: static;
	font-family: var(--display); font-weight: 200; font-size: 10.5px;
	letter-spacing: .32em; color: var(--steel); opacity: .55;
}

.mod__t {
	font-size: clamp(1.2rem, 1.8vw, 1.44rem);
	line-height: 1.16; letter-spacing: -.02em;
	transition: color .3s ease;
	min-height: 2.3em;              /* two lines max - keeps rows level */
}
.mod:hover .mod__t { color: var(--orange-hot); }

.mod__d { margin: 0; color: var(--muted); font-size: 14.6px; line-height: 1.62; max-width: 36ch; }

.mod__go {
	font-family: var(--display); font-size: 11px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--steel);
	transition: color .3s ease;
	align-self: end;
}
.mod:hover .mod__go { color: var(--orange); }
.mod__go span { display: inline-block; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.mod:hover .mod__go span { transform: translateX(6px); }

@media (max-width: 699px) {
	.mod__t { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mod::before, .mod__ico, .mod__go span { transition: none; }
}

/* --------------------------------------------------------- cookie notice */

.btn--sm { padding: 10px 18px; font-size: 11px; }

.ckie {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
	background: rgba(8,18,42,.97);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	transform: translateY(100%);
	transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.ckie.is-in { transform: none; }
.ckie__in {
	max-width: var(--wrap); margin-inline: auto; padding: 18px var(--gut);
	display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.ckie__txt { margin: 0; font-size: 14px; color: var(--muted); max-width: 68ch; }
.ckie__txt a { color: var(--orange-hot); text-decoration: underline; text-underline-offset: 3px; }
.ckie__btns { display: flex; gap: 10px; flex: none; }

/* ------------------------------------------------------------------ modal */

.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }

/* CRITICAL: an author `display` rule beats the UA stylesheet's [hidden]
   { display:none }, so without this the modal renders over the whole page -
   invisible but swallowing every click. Any fixed overlay given a display
   value needs its own [hidden] guard. */
.modal[hidden] { display: none !important; }
.ckie[hidden],
.chatpanel[hidden] { display: none !important; }
.modal__scrim { position: absolute; inset: 0; background: rgba(2,5,12,.78); backdrop-filter: blur(3px); }

.modal__box {
	position: relative; z-index: 1;
	width: min(520px, 100%);
	background: var(--ink-2);
	border: 1px solid var(--line);
	padding: clamp(26px, 4vw, 40px);
	opacity: 0; transform: translateY(14px) scale(.985);
	transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.modal.is-in .modal__box { opacity: 1; transform: none; }

.modal__x {
	position: absolute; top: 12px; right: 14px;
	background: none; border: 0; color: var(--muted);
	font-size: 26px; line-height: 1; cursor: pointer; padding: 6px;
}
.modal__x:hover { color: var(--orange); }

.modal__title { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-bottom: 10px; }
.modal__txt { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.modal__form { display: flex; flex-direction: column; gap: 10px; }
.modal__form input {
	padding: 13px 15px; font: inherit; color: var(--text);
	background: var(--ink); border: 1px solid var(--line);
}
.modal__form input:focus { outline: none; border-color: var(--orange); }
.modal__status { margin: 4px 0 0; font-size: 13.5px; min-height: 18px; color: var(--muted); }
.modal__status.is-ok { color: #6ee7a8; }
.modal__status.is-error { color: #ffb4b4; }

/* honeypot shared with the plugin */
.bwgt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .ckie, .modal__box { transition: none; } }

/* ---------------------------------------------------------- floating chat */

.chatfab {
	position: fixed; right: 22px; bottom: 22px; z-index: 190;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 20px 13px 16px;
	background: var(--orange); color: #fff; border: 0; cursor: pointer;
	font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	box-shadow: 0 10px 30px rgba(0,0,0,.45);
	transition: background .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.chatfab:hover { background: var(--orange-hot); transform: translateY(-2px); }
.chatfab__ico svg { width: 19px; height: 19px; display: block; }
.chatfab[hidden] { display: none; }

.chatpanel {
	position: fixed; right: 22px; bottom: 22px; z-index: 195;
	width: min(400px, calc(100vw - 32px));
	background: var(--ink-2);
	border: 1px solid var(--line);
	box-shadow: 0 24px 60px rgba(0,0,0,.55);
	opacity: 0; transform: translateY(12px);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.chatpanel.is-in { opacity: 1; transform: none; }

.chatpanel__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 16px; border-bottom: 1px solid var(--line);
	font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.chatpanel__head button { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.chatpanel__head button:hover { color: var(--orange); }
.chatpanel__body .bwgt-chat { border: 0; max-width: none; }
.chatpanel__body .bwgt-chat__head { display: none; }

/* Cookie bar and chat launcher must not overlap. */
.ckie.is-in ~ .chatfab,
.ckie.is-in ~ .chatpanel { bottom: 108px; }

@media (max-width: 560px) {
	.chatfab__txt { display: none; }
	.chatfab { padding: 15px; border-radius: 50%; }
	.chatpanel { right: 8px; left: 8px; bottom: 8px; width: auto; }
}