/* ==========================================================================
   "Tell us what you need." (inc/jgg-request-tabs.php)
   Built from the design mockup (box 1864 × 1096, ratio 1.70): the box keeps that ratio and every size is a share of the
   box width (--u = 1/1864 of it), so it looks the same at any desktop width. Photo 47.6% | text column 52.4%.
   The form scrolls inside the locked box when a form is longer than the mockup's. Below 960px it stacks.
   ========================================================================== */
.jgg-rt {
	--rt-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--rt-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--rt-yellow: #f7ec46;
	--u: 0.66px; /* fallback without container units */
	clear: both;
	box-sizing: border-box;
	max-width: calc(var(--jgg-site-w, 1240px) + 48px);
	margin: 28px auto 48px;
	padding: 0 24px;
	font-family: var(--rt-font);
	color: #111;
	container-type: inline-size;
}
@supports (width: 1cqw) { .jgg-rt { --u: calc(100cqw / 1864); } }
.jgg-rt *, .jgg-rt *::before, .jgg-rt *::after { box-sizing: border-box; border-radius: 0 !important; }
html.jgg-site-fit .jgg-rt { margin-left: max(0px, calc(var(--jgg-site-l) - 24px)); margin-right: 0; }

.jgg-rt__box { display: grid; grid-template-columns: 887fr 977fr; aspect-ratio: 1864 / 1096; overflow: hidden; background: #fff; border: 2px solid #000; }
.jgg-rt__box--plain { grid-template-columns: 1fr; }
.jgg-rt__photo { position: relative; min-height: 0; background: #222; }
.jgg-rt__photo img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.jgg-rt__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: calc(var(--u) * 50) calc(var(--u) * 55) 0 calc(var(--u) * 59); }

.jgg-rt .jgg-rt__kicker { margin: 0 0 calc(var(--u) * 20); font-family: var(--rt-mono); font-size: max(11px, calc(var(--u) * 19)); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: #333; }
.jgg-rt .jgg-rt__title { margin: 0 0 calc(var(--u) * 20); padding: 0; font-family: inherit; font-size: max(26px, calc(var(--u) * 58)); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: #000; }
.jgg-rt .jgg-rt__text { margin: 0 0 calc(var(--u) * 26); font-size: max(14px, calc(var(--u) * 22)); line-height: 1.6; color: #333; }

/* Tabs: 64u high, 10u apart; the selected one is bold with a 2px black frame (no layout shift) */
.jgg-rt__tabs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin: 0 0 calc(var(--u) * 26); }
.jgg-rt .jgg-rt__tab { margin: 0; min-height: max(40px, calc(var(--u) * 64)); padding: 0 calc(var(--u) * 24); font-family: inherit; font-size: max(14px, calc(var(--u) * 22)); font-weight: 400; line-height: 1.2; color: #333; background: #fff; border: 1px solid #ddd; cursor: pointer; transition: border-color .15s; }
.jgg-rt .jgg-rt__tab:hover { border-color: #000; }
.jgg-rt .jgg-rt__tab[aria-selected="true"] { font-weight: 700; color: #000; border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.jgg-rt .jgg-rt__tab:focus-visible { outline: 3px solid var(--rt-yellow); outline-offset: 1px; }

.jgg-rt__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 calc(var(--u) * 8) calc(var(--u) * 28) 0; scrollbar-width: thin; scrollbar-color: #000 #eee; }
.jgg-rt__panel[hidden] { display: none; }
.jgg-rt__panel::-webkit-scrollbar { width: 6px; }
.jgg-rt__panel::-webkit-scrollbar-thumb { background: #000; }
.jgg-rt__panel::-webkit-scrollbar-track { background: #eee; }

/* Fluent Form inside: labels 20u / 600, fields 70u high, submit 76u high */
.jgg-rt .fluentform .ff-el-group { margin-bottom: calc(var(--u) * 18); }
.jgg-rt .fluentform .ff-el-input--label { margin-bottom: calc(var(--u) * 2); } /* + Fluent Forms' own label spacing = the design's 33u */
.jgg-rt .fluentform .ff-el-input--label label, .jgg-rt .fluentform label { font-family: inherit !important; font-size: max(13px, calc(var(--u) * 20)) !important; font-weight: 600 !important; line-height: 1.3 !important; color: #000 !important; }
.jgg-rt .fluentform .ff-el-is-required.asterisk-right label::after { color: #d0213f !important; }
.jgg-rt .fluentform .ff-el-form-control, .jgg-rt .fluentform input[type="text"], .jgg-rt .fluentform input[type="email"], .jgg-rt .fluentform input[type="tel"],
.jgg-rt .fluentform input[type="number"], .jgg-rt .fluentform input[type="date"], .jgg-rt .fluentform select, .jgg-rt .fluentform .choices__inner {
	width: 100%; min-height: max(42px, calc(var(--u) * 70)); padding: 0 calc(var(--u) * 24) !important; font-family: inherit !important; font-size: max(15px, calc(var(--u) * 22)) !important;
	color: #111 !important; background-color: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important;
}
.jgg-rt .fluentform textarea, .jgg-rt .fluentform textarea.ff-el-form-control { width: 100%; min-height: max(96px, calc(var(--u) * 141)); padding: calc(var(--u) * 18) calc(var(--u) * 24) !important; font-family: inherit !important; font-size: max(15px, calc(var(--u) * 22)) !important; color: #111 !important; background-color: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important; }
.jgg-rt .fluentform .ff-el-form-control::placeholder { color: #777; opacity: 1; }
.jgg-rt .fluentform .ff-el-form-control:focus, .jgg-rt .fluentform select:focus, .jgg-rt .fluentform textarea:focus { outline: 2px solid var(--rt-yellow) !important; border-color: #000 !important; }
.jgg-rt .fluentform .ff-t-container { display: flex; gap: calc(var(--u) * 22); }
.jgg-rt .fluentform .ff-t-container .ff-t-cell { flex: 1 1 0; min-width: 0; }
.jgg-rt .fluentform .ff-t-container { margin-bottom: calc(var(--u) * 18) !important; }
.jgg-rt .fluentform .ff-t-container .ff-el-group { margin-bottom: 0 !important; } /* the row keeps one gap, not two */
.jgg-rt .fluentform .ff_submit_btn_wrapper, .jgg-rt .fluentform .ff-el-group.ff_submit_btn_wrapper { margin: 0 !important; }
.jgg-rt .fluentform select { -webkit-appearance: none !important; appearance: none !important; padding-right: calc(var(--u) * 48) !important; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right calc(var(--u) * 18) center !important; }
.jgg-rt .fluentform .ff-t-container .ff-t-cell { padding: 0 !important; }
.jgg-rt .fluentform .ff-el-form-check-label, .jgg-rt .fluentform .ff-el-form-check label { font-size: max(14px, calc(var(--u) * 20)) !important; font-weight: 400 !important; }
.jgg-rt .fluentform .error, .jgg-rt .fluentform .text-danger { color: #d0213f !important; }
.jgg-rt .fluentform .ff-btn-submit, .jgg-rt .fluentform button[type="submit"] {
	min-height: max(46px, calc(var(--u) * 76)); padding: 0 calc(var(--u) * 42) !important; font-family: inherit !important; font-size: max(15px, calc(var(--u) * 24)) !important; font-weight: 700 !important;
	color: var(--rt-yellow) !important; background: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; transition: opacity .2s;
}
.jgg-rt .fluentform .ff-btn-submit:hover { opacity: .85; }
.jgg-rt .ff-message-success { color: #111 !important; background: #f5f5f5 !important; border: 1px solid #000 !important; box-shadow: none !important; }

/* Stacked (tablet / phone): fixed sizes instead of shares of the width */
@media (max-width: 960px) {
	.jgg-rt { --u: 0.7px; }
	.jgg-rt__box { grid-template-columns: 1fr; aspect-ratio: auto; }
	.jgg-rt__photo { aspect-ratio: 16 / 8; }
	.jgg-rt__main { padding: 26px 24px 0; }
	.jgg-rt__panel { flex: none; max-height: 460px; padding-bottom: 28px; }
}
@media (max-width: 640px) {
	.jgg-rt { padding: 0 20px; margin: 24px auto 36px; --u: 0.62px; } /* same 20px side margin as the tour list */
	.jgg-rt__main { padding: 22px 18px 0; }
	.jgg-rt .fluentform .ff-t-container { flex-direction: column; gap: 0; }
	.jgg-rt .fluentform .ff-btn-submit { width: 100%; }
	.jgg-rt__tabs { flex-wrap: nowrap; gap: 6px; }
	.jgg-rt .jgg-rt__tab { flex: 1 1 auto; padding: 0 8px; font-size: 14px; white-space: nowrap; } /* the three tabs stay on one row */
}