/* ==========================================================================
   Security Waiting Time Widget
   Airport departures level schematic with live checkpoint status.
   Mobile-first: base styles target phones; @media (min-width: 782px) scales up.
   Design reference: "Security waiting times FinalMobile.ai"
   ========================================================================== */

.swt {
	--swt-primary:  var(--primary, rgb(28, 22, 68));
	--swt-green:    #5fa61e;
	--swt-green-bg: #e9f2dd;
	--swt-grey:     #8090a0;
	--swt-grey-bg:  #e1e3e5;
	--swt-red:      #e30613;

	max-width: 960px;
	margin: 0 auto 1.5rem;
	font-family: inherit;
	color: var(--swt-primary);
}

/* ---------- Header ------------------------------------------------------- */

.swt-hd {
	text-align: center;
	padding: 0.9rem 0.5rem 0.5rem;
}

.swt-hd__title {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--swt-primary);
	margin: 0 0 0.2rem;
	letter-spacing: -0.01em;
}

.swt-hd__updated {
	color: var(--swt-red);
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
}

.swt-hd__sub {
	font-size: 1rem;
	font-weight: 800;
	color: var(--swt-primary);
	margin: 0;
}

/* ---------- Body wrapper (map + paths + cards) --------------------------- */

.swt-body {
	position: relative;
	padding: 0.5rem 3% 0;
}

/* ---------- Map schematic ------------------------------------------------ */

/* Two rows — icons (top), info+here (bottom). All four map icons share the
   top row so the gates flank the check-in counter at the same height. */
.swt-map {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.5rem;
	row-gap: 0.4rem;
	align-items: end;
	position: relative;
	z-index: 2;
}

.swt-poi {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	min-width: 0;
	transition: transform .25s ease;
}

/* Clickable POIs (Check-In, Fast Lane) — inherit color, drop underline,
   grow slightly on hover/focus to advertise interactivity. */
.swt-poi--link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transform-origin: center;
}
.swt-poi--link:hover,
.swt-poi--link:focus-visible {
	transform: scale(1.08);
}
.swt-poi--link:focus-visible {
	outline: 2px solid var(--swt-primary);
	outline-offset: 4px;
	border-radius: 6px;
}

.swt-poi__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.swt-poi__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.swt-poi__label {
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--swt-primary);
	line-height: 1.2;
	max-width: 64px;
}

/* Keep the icon row visually level: short one-line labels are padded up to
   the same 3-line height as the gate labels so the grid's bottom-alignment
   lines up every icon on the same baseline. */
.swt-poi--lgate   .swt-poi__label,
.swt-poi--checkin .swt-poi__label,
.swt-poi--fastlane .swt-poi__label,
.swt-poi--rgate   .swt-poi__label { min-height: 3.6em; }

/* -- Portal (metal detector) icon color states -- */
.swt-portal {
	width: 46px;
	height: 46px;
}

.swt-portal .swt-portal__bg       { fill: var(--swt-grey); transition: fill .4s ease; }
.swt-portal .swt-portal__dot      { fill: var(--swt-grey); transition: fill .4s ease; }
.swt-gate[data-status="open"]   .swt-portal__bg,
.swt-gate[data-status="open"]   .swt-portal__dot   { fill: var(--swt-green); }
.swt-gate[data-status="closed"] .swt-portal__bg,
.swt-gate[data-status="closed"] .swt-portal__dot   { fill: var(--swt-grey); }

/* Fast-Lane portal is always navy */
.swt-portal--navy .swt-portal__bg,
.swt-portal--navy .swt-portal__dot { fill: var(--swt-primary); }

/* -- Check-in counter icon (aspect 211.9:80.67) --
   On mobile the check-in icon is 11px taller than the flanking portal
   icons. Grid bottom-alignment keeps bottoms level, so the check-in
   sticks up above the portals. Drop it by half the delta so its
   vertical center lines up with the portal icon centers. Desktop
   keeps the bottom-aligned look per spec. */
.swt-poi__icon--checkin {
	width: 150px;
	max-width: 100%;
	aspect-ratio: 211.9 / 80.67;
	height: auto;
	transform: translateY(5px);
}

/* -- Info / Here / Pin sizes (pin aspect 71.78:113) -- */
.swt-poi__icon--info { width: 42px; height: 42px; }
.swt-poi__icon--pin  { width: 34px; height: 53px; }

/* -- Grid placements --
   Targets: left-gate ~10%, checkin-centre ~48%, fast-lane ~80%,
   right-gate ~90%, info-desk ~33%, you-are-here ~49%.
   Check-in spans wider on mobile so the counter icon has room to breathe. */
.swt-poi--lgate    { grid-column: 1 / span 2;  grid-row: 1; }
.swt-poi--checkin  { grid-column: 3 / span 6;  grid-row: 1; }
.swt-poi--fastlane { grid-column: 9 / span 2;  grid-row: 1; }
.swt-poi--rgate    { grid-column: 11 / span 2; grid-row: 1; }
.swt-poi--info     { grid-column: 4 / span 2;  grid-row: 2; }
.swt-poi--here     { grid-column: 6 / span 2;  grid-row: 2; }

/* You-Are-Here sits higher up than the Info Desk: extra bottom margin
   pushes the pin upward within the shared row while Info Desk stays
   aligned to the row's bottom. */
.swt-poi--here { margin-bottom: 22px; }

/* ---------- Dotted connection paths -------------------------------------- */

.swt-path {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 1;
	color: var(--swt-grey);
	transition: color .4s ease;
}
.swt-path[data-state="open"]   { color: var(--swt-green); }
.swt-path[data-state="closed"],
.swt-path[data-state="na"]     { color: var(--swt-grey); }

.swt-path__svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* Two polylines per path: desktop uses a middle turn; mobile puts the turn
   near the top so the lower vertical segment is much longer. Toggled here
   by default to mobile; desktop @media block flips the visibility. */
.swt-path__line--d { display: none; }
.swt-path__line--m { display: inline; }

.swt-path__arrow {
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 9px solid currentColor;
	transform: translate(-50%, -100%);
	transition: border-bottom-color .4s ease;
}

/* Each variant sets the horizontal anchors; arrow sits on the gate anchor. */
.swt-path--left  .swt-path__arrow { left: 10%; }
.swt-path--right .swt-path__arrow { left: 90%; }

/* Mobile: container starts just below the gate LABELS (so the arrow sits
   under the checkpoint text) and extends down to the card tops. Shorter
   than before so the dotted line doesn't overshoot the label area. */
.swt-path--left,
.swt-path--right {
	top: 130px;
	height: 102px;
}

/* ---------- Status cards ------------------------------------------------- */

.swt-cards {
	display: flex;
	gap: 8px;
	margin-top: 1rem;
	position: relative;
	z-index: 2;
}

.swt-card {
	flex: 1;
	position: relative;
	overflow: visible;
	border-radius: 14px;
	transition: background .4s ease, transform .25s ease;
	transform-origin: center top;
}

/* Paired hover: hovering either the gate icon or its status card scales both
   together, making the map→card relationship explicit. Desktop-only since
   hover isn't meaningful on touch devices. :has() is supported on all
   modern mobile/desktop browsers; unsupported browsers just skip the effect. */
@media (hover: hover) {
	.swt-body:has(.swt-poi--lgate:hover) .swt-poi--lgate,
	.swt-body:has(.swt-card--left:hover) .swt-poi--lgate,
	.swt-body:has(.swt-poi--lgate:hover) .swt-card--left,
	.swt-body:has(.swt-card--left:hover) .swt-card--left {
		transform: scale(1.05);
	}
	.swt-body:has(.swt-poi--rgate:hover) .swt-poi--rgate,
	.swt-body:has(.swt-card--right:hover) .swt-poi--rgate,
	.swt-body:has(.swt-poi--rgate:hover) .swt-card--right,
	.swt-body:has(.swt-card--right:hover) .swt-card--right {
		transform: scale(1.05);
	}
}

.swt-card__hd {
	padding: 0.7rem 0.6rem;
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1.25;
	border-radius: 14px 14px 0 0;
	transition: background .4s ease;
	text-align: center;
}

/* Force "Security Waiting Time" onto two lines on mobile:
   first word on line 1, the rest on line 2. */
.swt-card__hd-rest { display: block; }

.swt-card__bd {
	padding: 1.1rem 0.75rem;
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 0 14px 14px;
	transition: background .4s ease;
}

/* Left card has squared top-left so the tab nests cleanly */
.swt-card--left .swt-card__hd { border-radius: 0 14px 0 0; }
.swt-card--left .swt-card__bd { border-radius: 0 0 14px 14px; }
.swt-card--left               { border-radius: 0 14px 14px 14px; }

/* Right card has squared top-right */
.swt-card--right .swt-card__hd { border-radius: 14px 0 0 0; }
.swt-card--right .swt-card__bd { border-radius: 0 0 14px 14px; }
.swt-card--right               { border-radius: 14px 0 14px 14px; }

/* ---------- Corner tab (u-turn indicator) -------------------------------- */

.swt-card__tab {
	position: absolute;
	width: 42px;
	height: 42px;
	top: -16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background .4s ease;
}

.swt-card__tab svg {
	width: 60%;
	height: 60%;
}

.swt-card__tab--left  { left: -14px; }
.swt-card__tab--right { right: -14px; }

/* ---------- State colours ------------------------------------------------ */

/* Loading */
.swt-card[data-state="loading"] .swt-card__hd  { background: #c9ccd0; }
.swt-card[data-state="loading"] .swt-card__bd  { background: #e6e8ea; }
.swt-card[data-state="loading"] .swt-card__tab { background: #c9ccd0; }

/* Open */
.swt-card[data-state="open"] .swt-card__hd   { background: var(--swt-green); }
.swt-card[data-state="open"] .swt-card__bd   { background: var(--swt-green-bg); }
.swt-card[data-state="open"] .swt-card__tab  { background: var(--swt-green); }

/* Closed / N-A */
.swt-card[data-state="closed"] .swt-card__hd,
.swt-card[data-state="na"]     .swt-card__hd  { background: var(--swt-grey); }
.swt-card[data-state="closed"] .swt-card__bd,
.swt-card[data-state="na"]     .swt-card__bd  { background: var(--swt-grey-bg); }
.swt-card[data-state="closed"] .swt-card__tab,
.swt-card[data-state="na"]     .swt-card__tab { background: var(--swt-grey); }

/* ---------- Card body states --------------------------------------------- */

.swt-card__state--off,
.swt-card__state--on { display: none; width: 100%; }

.swt-card[data-state="open"]   .swt-card__state--on  { display: block; }
.swt-card[data-state="closed"] .swt-card__state--off { display: flex; }
.swt-card[data-state="na"]     .swt-card__state--off { display: flex; }

/* Closed / N-A — mobile stacks the stop-sign icon above the time text.
   Desktop restores the side-by-side layout below. */
.swt-card__state--off {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
}

.swt-card__icon-closed {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
}

.swt-card__state--off .swt-card__time {
	font-size: 1rem;
	font-weight: 800;
	color: var(--swt-primary);
}

/* Open — mobile: stack icon above label, centered. The clock row gets
   extra top spacing so it reads as a separate status line under the
   "All Departures" row. Desktop flips back to a side-by-side row. */
.swt-card__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.3rem;
	margin-bottom: 0;
	padding-left: 0;
}

.swt-card__row + .swt-card__row { margin-top: 0.85rem; }

.swt-card__icon-plane { width: 26px; height: 26px; flex-shrink: 0; }
.swt-card__icon-clock { width: 24px; height: 24px; flex-shrink: 0; }

.swt-card__row strong {
	font-size: 1rem;
	font-weight: 800;
	color: var(--swt-primary);
}

.swt-card__state--on .swt-card__time {
	font-size: 1rem;
	font-weight: 800;
	color: var(--swt-primary);
	white-space: nowrap;
}

/* ==========================================================================
   Desktop (≥ 782px) — single scale-up breakpoint per mobile-first rule.
   ========================================================================== */

@media (min-width: 782px) {
	.swt { margin: 0 auto 2.5rem; }

	.swt-hd         { padding: 1.25rem 1rem 1rem; }
	.swt-hd__title  { font-size: 1.9rem; }
	.swt-hd__updated{ font-size: 1rem; }
	.swt-hd__sub    { font-size: 1.25rem; }

	.swt-body       { padding: 1rem 2% 0; }

	.swt-map {
		column-gap: 1rem;
		row-gap: 0.8rem;
	}

	/* Desktop keeps the 12-col placements but check-in narrows back to 4
	   cols so it doesn't overlap the fast-lane column. */
	.swt-poi--checkin { grid-column: 5 / span 4; }

	.swt-poi--here { margin-bottom: 34px; }

	.swt-portal             { width: 70px;  height: 70px; }
	.swt-poi__icon--checkin { width: 240px; }
	.swt-poi__icon--info    { width: 56px;  height: 56px; }
	.swt-poi__icon--pin     { width: 44px;  height: 70px; }
	.swt-poi__label         { font-size: 0.8rem; max-width: 110px; }

	/* Desktop: path shape uses a middle turn; container spans from just
	   below the gate-icon baseline down to the card top, tightly hugging
	   both ends so the dotted line visibly connects the two. */
	.swt-path__line--d { display: inline; }
	.swt-path__line--m { display: none; }

	.swt-path--left,
	.swt-path--right {
		top: 174px;
		height: 123px;
	}

	/* Arrow tips point at the exact horizontal centre of each gate icon.
	   With the 12-col grid + column-gap, gate centres sit at ~9.3% / 90.7%
	   of the body width, not a flat 10% / 90%. */
	.swt-path--left  .swt-path__arrow { left: 9.3%; }
	.swt-path--right .swt-path__arrow { left: 90.7%; }

	/* Desktop keeps the check-in icon bottom-aligned with the gate icons
	   (per the original design spec). */
	.swt-poi__icon--checkin { transform: none; }

	.swt-cards { gap: 10px; margin-top: 1.25rem; }

	.swt-card__hd { padding: 0.9rem 1.25rem; font-size: 1.15rem; line-height: 1.2; }
	.swt-card__hd-rest { display: inline; }

	.swt-card__bd { padding: 1.5rem 1.25rem; min-height: 120px; }

	.swt-card__tab  { width: 54px; height: 54px; top: -22px; }
	.swt-card__tab--left  { left: -22px; }
	.swt-card__tab--right { right: -22px; }

	.swt-card__state--off {
		flex-direction: row;
		text-align: left;
		gap: 1rem;
	}
	.swt-card__icon-closed { width: 62px; height: 62px; }
	.swt-card__state--off .swt-card__time { font-size: 1.6rem; }

	.swt-card__row {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		gap: 0.8rem;
		padding-left: 1rem;
	}
	.swt-card__row + .swt-card__row { margin-top: 0; }
	.swt-card__icon-plane { width: 34px; height: 34px; }
	.swt-card__icon-clock { width: 30px; height: 30px; }
	.swt-card__row strong,
	.swt-card__state--on .swt-card__time { font-size: 1.35rem; }
}