/*
 * Interactive sub-services (tab list + content panel) on the service pages. Scoped to .sbt.
 * Reuses the .bs-* tokens from service-page.css (navy, gold, Playfair Display, Inter).
 */

.sbt { padding-block: clamp(2.4rem, 5vw, 4.2rem); background: linear-gradient(180deg, #f4f8ff 0%, #fff 100%); }
.sbt__head { max-width: 46rem; margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem); }
.sbt__head .bs-h2 { margin-bottom: 0.7rem; }
.sbt__intro { margin: 0; color: #4a5a78; font-size: 1.02rem; line-height: 1.65; }

.sbt__box { display: grid; grid-template-columns: 30% minmax(0, 70%); border: 1px solid rgba(34, 84, 170, 0.1); border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -36px rgba(7, 27, 64, 0.45); overflow: hidden; }

/* Left: tab list */
.sbt__nav { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(0.9rem, 1.6vw, 1.3rem); background: linear-gradient(180deg, #eaf2ff 0%, #f3f8ff 100%); border-right: 1px solid rgba(34, 84, 170, 0.1); }
.sbt__tab { position: relative; display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.85rem 1rem; border: 0; border-radius: 12px; background: #dbe8fd; color: #17386f; font: 600 0.95rem/1.3 var(--sb-sans, "Inter", sans-serif); text-align: left; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.sbt__tab:hover { background: #cddffb; transform: translateX(2px); }
.sbt__tab:focus-visible { outline: 3px solid #b88635; outline-offset: 2px; }
.sbt__tab[aria-selected="true"] { background: #071b40; color: #fff; box-shadow: 0 14px 26px -16px rgba(7, 27, 64, 0.9); transform: none; }
.sbt__tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: #d5ac62; }
.sbt__tab-ico { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: #2e6bd8; transition: background-color 0.25s ease, color 0.25s ease; }
.sbt__tab[aria-selected="true"] .sbt__tab-ico { background: rgba(213, 172, 98, 0.18); color: #d5ac62; }
.sbt__tab-ico .icon { width: 1.05rem; height: 1.05rem; stroke-width: 1.7; }

/* Right: panel */
.sbt__panels { min-width: 0; padding: clamp(1.3rem, 2.8vw, 2.4rem); }
.sbt__panel[hidden] { display: none; }
.sbt__panel { animation: sbt-in 0.35s ease both; }
.sbt__panel:focus-visible { outline: 3px solid #b88635; outline-offset: 4px; border-radius: 8px; }
@keyframes sbt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sbt__photo { margin: 0 0 1.3rem; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 5.5; background: #dbe8fd; box-shadow: 0 18px 34px -26px rgba(7, 27, 64, 0.6); }
.sbt__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sbt__title { margin: 0 0 0.7rem; font-family: "Playfair Display", var(--sb-serif, serif); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 600; line-height: 1.2; color: #071b40; }
.sbt__title::after { content: ""; display: block; width: 2.6rem; height: 2px; margin-top: 0.7rem; background: #d5ac62; }
.sbt__lead { margin: 0 0 1.4rem; color: #3f5070; font-size: 1rem; line-height: 1.7; }

.sbt__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.sbt__list { padding: 1.1rem 1.2rem; border: 1px solid rgba(34, 84, 170, 0.1); border-radius: 14px; background: #f7faff; }
.sbt__list:only-child, .sbt__list:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sbt__list h4 { margin: 0 0 0.7rem; color: #071b40; font-size: 0.82rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.sbt__list ul, .sbt__list ol { margin: 0; padding: 0; list-style: none; }
.sbt__list li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.55rem; color: #3f5070; font-size: 0.95rem; line-height: 1.5; }
.sbt__list li:last-child { margin-bottom: 0; }
.sbt__list li .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; padding: 0.15rem; border-radius: 50%; background: #fbefd6; color: #a8782e; stroke-width: 2.4; }
.sbt__list--steps ol { counter-reset: sbt-step; }
.sbt__list--steps li::before { counter-increment: sbt-step; content: counter(sbt-step); display: grid; place-items: center; flex: none; width: 1.45rem; height: 1.45rem; margin-top: 0.05rem; border-radius: 50%; background: #071b40; color: #d5ac62; font-size: 0.75rem; font-weight: 700; }

.sbt__note { margin: 1.1rem 0 0; padding-left: 0.9rem; border-left: 3px solid #d5ac62; color: #5a6a86; font-size: 0.88rem; line-height: 1.6; }

/* Tablet and mobile: tabs on top as a compact two-column grid, content below */
@media (max-width: 899px) {
	.sbt__box { grid-template-columns: minmax(0, 1fr); }
	.sbt__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid rgba(34, 84, 170, 0.1); }
	.sbt__tab { padding: 0.7rem 0.75rem; font-size: 0.88rem; min-height: 3.2rem; }
	.sbt__tab:hover { transform: none; }
	.sbt__tab-ico { width: 1.9rem; height: 1.9rem; }
	.sbt__nav .sbt__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
	.sbt__lists { grid-template-columns: minmax(0, 1fr); }
	.sbt__tab-ico { display: none; }
	.sbt__tab-label { overflow-wrap: anywhere; }
	.sbt__photo { aspect-ratio: 16 / 7; }
	.sbt .bs-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.sbt__tab, .sbt__tab-ico { transition: none; }
	.sbt__panel { animation: none; }
	.sbt__tab:hover { transform: none; }
}