/**
 * Theme Shortcodes — bespoke block styles.
 *
 * Self-contained and theme-agnostic: scoped/prefixed classes, design tokens via
 * custom properties, fluid sizing, and font-family left to inherit so each block
 * adopts the host theme's typography. Targeted !important is used only on the few
 * properties themes routinely override (heading colour/size/weight/margins).
 *
 * Blocks rebuilt from scratch live here; legacy ported styles remain in
 * theme-shortcodes.css until each block is replaced.
 */

/* Brand palette — defaults live here so a site can override them globally
   (Theme Shortcodes settings output an inline :root block after this file). */
:root {
  --tsc-c-bg: #14274d;
  --tsc-c-fg: #ffffff;
  --tsc-c-accent: #b0864a;
  --tsc-c-accent-ink: #ffffff;
  --tsc-c-footer: #102142;
  --tsc-c-icon: #b0864a;
}

/* ===========================================================================
 * Shared action buttons (.tsc-btn) — used by multiple blocks
 * ======================================================================== */
.tsc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  margin-top: 28px;
}
.tsc-actions--start { justify-content: flex-start; }
.tsc-actions--stack { flex-direction: column; align-items: stretch; }
.tsc-actions--stack .tsc-btn { width: 100%; }
/* Side by side, each button flexing to fill the row equally. */
.tsc-actions--fill { flex-wrap: nowrap; }
.tsc-actions--fill .tsc-btn { flex: 1 1 0; min-width: 0; }

.tsc-btn {
  --tsc-btn-bg: #b0864a;
  --tsc-btn-fg: #ffffff;
  --tsc-btn-border: transparent;
  --tsc-btn-radius: 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 30px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tsc-btn-fg);
  background: var(--tsc-btn-bg);
  border: 2px solid var(--tsc-btn-border);
  border-radius: var(--tsc-btn-radius);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
.tsc-btn:hover, .tsc-btn:focus { color: var(--tsc-btn-fg); text-decoration: none; }
.tsc-btn:hover { filter: brightness(0.93); transform: translateY(-1px); }
.tsc-btn:focus-visible { outline: 3px solid #fbd36b; outline-offset: 3px; }

.tsc-btn--primary {
  --tsc-btn-bg: var(--tsc-c-accent, #b0864a);
  --tsc-btn-fg: var(--tsc-c-accent-ink, #ffffff);
}

.tsc-btn--call {
  --tsc-btn-bg: #ffffff;
  --tsc-btn-fg: var(--tsc-c-bg, #14274d);
  --tsc-btn-border: #ffffff;
}
.tsc-btn--call:hover {
  filter: none;
  background: var(--tsc-c-bg, #14274d);
  color: #ffffff;
}
.tsc-btn--call .tsc-icon-phone {
  width: 1.55em;
  height: 1.55em;
  flex: 0 0 auto;
  color: var(--tsc-c-icon, #b0864a);
}

.tsc-btn__label { display: inline-block; }

/* ===========================================================================
 * Contact Us  ([contact-us])
 * ======================================================================== */
.tsc-contact {
  box-sizing: border-box;
  container-type: inline-size;
  margin: 40px 0;
  padding: 44px 40px;
  background: var(--tsc-c-bg);
  color: var(--tsc-c-fg);
  border-radius: 6px;
  text-align: center;
}
.tsc-contact * { box-sizing: border-box; }

.tsc-contact__inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* The heading is a plain-text field rendered as <h2>. Control its size, weight,
   colour and spacing; leave font-family to inherit so it matches the host theme. */
.tsc-contact .tsc-contact__heading {
  margin: 0 !important;
  padding: 0;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(1.5rem, 1.1rem + 2.4cqi, 35px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

@container (max-width: 480px) {
  .tsc-contact { padding: 30px 22px; }
  .tsc-contact .tsc-actions { flex-direction: column; align-items: stretch; }
  .tsc-contact .tsc-btn { width: 100%; }
}

/* ===========================================================================
 * Get In Touch  ([get-in-touch])
 * Lays out from its own width (container query), so it sits heading-left /
 * CTA-right at ~782px and stacks cleanly as the container shrinks.
 * ======================================================================== */
.tsc-git {
  box-sizing: border-box;
  container-type: inline-size;
  margin: 40px 0;
  padding: 30px 40px;
  background: var(--tsc-c-bg);
  color: var(--tsc-c-fg);
  border-radius: 6px;
}
.tsc-git * { box-sizing: border-box; }

.tsc-git__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
}

.tsc-git .tsc-git__heading {
  margin: 0 !important;
  padding: 0;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(1.4rem, 0.9rem + 2.2cqi, 1.875rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.tsc-git__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--tsc-c-fg);
}
.tsc-git__cta:hover, .tsc-git__cta:focus { text-decoration: none; color: var(--tsc-c-fg); }
.tsc-git__cta:focus-visible { outline: 3px solid #fbd36b; outline-offset: 4px; border-radius: 4px; }

.tsc-git__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--tsc-c-accent);
  color: var(--tsc-c-icon);
  border-radius: 4px;
  transition: filter 0.18s ease;
}
.tsc-git__icon .tsc-icon-phone { width: 30px; height: 30px; }
.tsc-git__cta:hover .tsc-git__icon { filter: brightness(1.08); }

.tsc-git__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.tsc-git__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tsc-git__phone {
  font-size: clamp(1.5rem, 1rem + 2.6cqi, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  transition: color 0.18s ease;
}
.tsc-git__cta:hover .tsc-git__phone { color: var(--tsc-c-accent); }

/* Stack when the block's own width gets tight (independent of viewport).
   The query measures the content-box; at a 782px container that's ~702px, so
   it stays side-by-side there and stacks only as the container shrinks. */
@container (max-width: 680px) {
  .tsc-git { padding: 26px 24px; }
  .tsc-git__inner { flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .tsc-git__text { text-align: center; }
}
@container (max-width: 420px) {
  .tsc-git__phone { font-size: 1.75rem; }
}

/* ===========================================================================
 * User Profile  ([user-profile])
 * Portrait (locked 380:450 aspect, scales down) vertically centered beside a
 * WYSIWYG bio + buttons. Centering keeps negative space balanced for any bio
 * length — short or long. Stacks as the block narrows.
 * ======================================================================== */
.tsc-profile {
  box-sizing: border-box;
  container-type: inline-size;
  margin: 40px 0;
  padding: 40px;
  background: var(--tsc-c-bg);
  color: var(--tsc-c-fg);
  border-radius: 6px;
}
.tsc-profile * { box-sizing: border-box; }

.tsc-profile__inner {
  display: flow-root;
}

.tsc-profile__media {
  float: left;
  width: clamp(200px, 40cqi, 250px);
  aspect-ratio: 380 / 450;
  margin: 0 clamp(20px, 3cqi, 32px) 10px 0;
  background: #0f1d3a;
  border-radius: 4px;
  overflow: hidden;
}
.tsc-profile__img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: top center;
}

.tsc-profile .tsc-profile__bio :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 14px !important;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(1.6rem, 1rem + 2.4cqi, 2.125rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}
.tsc-profile .tsc-profile__bio p {
  margin: 0 0 1em !important;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(15px, 14px + 0.3cqi, 17px) !important;
  line-height: 1.6 !important;
}
.tsc-profile .tsc-profile__bio p:last-child { margin-bottom: 0 !important; }
.tsc-profile .tsc-profile__bio strong { font-weight: 700; color: var(--tsc-c-fg); }
.tsc-profile .tsc-profile__bio em { font-style: italic; }
.tsc-profile .tsc-profile__bio ul,
.tsc-profile .tsc-profile__bio ol { margin: 0 0 1em; padding-left: 1.2em; color: var(--tsc-c-fg); }
.tsc-profile .tsc-profile__bio a { color: var(--tsc-c-accent); text-decoration: underline; }
.tsc-profile .tsc-profile__bio a:hover { color: #fbd36b; }

.tsc-profile .tsc-actions { clear: left; margin-top: 24px; }

@container (max-width: 560px) {
  .tsc-profile { padding: 28px 22px; }
  .tsc-profile__media { float: none; width: 100%; margin: 0 0 20px; }
  .tsc-profile .tsc-actions { clear: none; flex-direction: column; }
}

/* ===========================================================================
 * User Quote  ([user-quote])
 * Photo left (contained, locked 380:450), quote + name right, buttons in a
 * darker footer bar. Stacks (photo on top) as the block narrows.
 * ======================================================================== */
.tsc-quote {
  box-sizing: border-box;
  container-type: inline-size;
  margin: 40px 0;
  background: var(--tsc-c-bg);
  color: var(--tsc-c-fg);
  border-radius: 6px;
  overflow: hidden;
}
.tsc-quote * { box-sizing: border-box; }

.tsc-quote__main {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4cqi, 48px);
  padding: clamp(28px, 4cqi, 48px);
}

.tsc-quote__media {
  flex: 0 0 clamp(200px, 34cqi, 360px);
  aspect-ratio: 380 / 450;
  border-radius: 4px;
  overflow: hidden;
  background: #0f1d3a;
}
.tsc-quote__img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: top center;
}

.tsc-quote__content { flex: 1 1 0; min-width: 0; }

.tsc-quote__mark { display: block; color: var(--tsc-c-icon); line-height: 0; margin-bottom: 14px; }
.tsc-quote__mark .tsc-icon-quote { width: 45px; height: auto; }

.tsc-quote .tsc-quote__text p {
  margin: 0 0 1em !important;
  color: var(--tsc-c-fg) !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
.tsc-quote .tsc-quote__text p:last-child { margin-bottom: 0 !important; }
/* A bold line inside the quote is treated as the attribution name: larger and upright. */
.tsc-quote .tsc-quote__text p:has(strong),
.tsc-quote .tsc-quote__text p:has(b) {
  margin-top: 24px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
}

.tsc-quote__footer { background: var(--tsc-c-footer); padding: 22px clamp(28px, 4cqi, 48px); }
.tsc-quote__footer .tsc-actions { margin-top: 0; }

@container (max-width: 640px) {
  .tsc-quote__main { flex-direction: column; gap: 24px; }
  .tsc-quote__media { flex-basis: auto; width: 100%; align-self: center; }
}
@container (max-width: 520px) {
  .tsc-quote__footer .tsc-actions { flex-direction: column; align-items: stretch; }
  .tsc-quote__footer .tsc-btn { width: 100%; }
}

/* ===========================================================================
 * Carousel mechanics — shared by Case Results and Client Reviews.
 * Structural + arrows + dots. Block files provide colours, padding and cards.
 * ======================================================================== */
.tsc-carousel__viewport { position: relative; touch-action: pan-y; }
.tsc-carousel__clip { overflow: hidden; }
.tsc-carousel__track { display: flex; gap: 0; will-change: transform; cursor: grab; }
.tsc-carousel__track:active { cursor: grabbing; }

/* Adaptive height: each slide keeps its natural height and the clip animates to the
   current slide's height (so a short testimonial doesn't leave a tall gap). */
.tsc-carousel--adaptive .tsc-carousel__track { align-items: flex-start; }
.tsc-carousel--adaptive .tsc-carousel__clip { transition: height 0.4s ease; }

.tsc-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.tsc-carousel__nav svg { display: block; width: 16px; height: 16px; }
.tsc-carousel__nav:hover { background: var(--tsc-c-accent, #b0864a); }
.tsc-carousel__nav:focus-visible { outline: 3px solid #fbd36b; outline-offset: 2px; }
.tsc-carousel__nav:disabled { opacity: 0.3; cursor: default; }
.tsc-carousel__nav:disabled:hover { background: rgba(255, 255, 255, 0.12); }
.tsc-carousel__prev { left: 8px; }
.tsc-carousel__next { right: 8px; }
.tsc-carousel.is-static .tsc-carousel__nav { display: none; }

.tsc-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 24px clamp(20px, 3cqi, 30px);
}
.tsc-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.tsc-carousel__dot:hover { background: rgba(255, 255, 255, 0.55); }
.tsc-carousel__dot.is-active { background: var(--tsc-c-accent, #b0864a); transform: scale(1.15); }
.tsc-carousel__dot:focus-visible { outline: 2px solid #fbd36b; outline-offset: 2px; }
.tsc-carousel.is-static .tsc-carousel__dots { display: none; }

/* ===========================================================================
 * Case Results  ([case-results])
 * Paged carousel (2 per view desktop, 1 mobile) + button footer bar.
 * ======================================================================== */
.tsc-cases {
  box-sizing: border-box;
  container-type: inline-size;
  margin: 40px 0;
  background: var(--tsc-c-bg);
  color: var(--tsc-c-fg);
  border-radius: 6px;
  overflow: hidden;
}
.tsc-cases * { box-sizing: border-box; }

.tsc-cases__heading {
  margin: 0 !important;
  padding: clamp(36px, 5cqi, 56px) 24px clamp(16px, 2cqi, 24px);
  text-align: center;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(1.1rem, 0.9rem + 0.6cqi, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.tsc-cases__viewport {
  padding: clamp(20px, 3cqi, 34px) clamp(52px, 6cqi, 72px) clamp(28px, 4cqi, 44px);
}
.tsc-cases__slide { flex: 0 0 50%; max-width: 50%; }

.tsc-cases__card {
  padding: 0 clamp(16px, 3cqi, 40px);
  text-align: center;
}

/* Separator between the two cards of a page. It lives on the card, so it moves
   with the slide and only ever appears between cards — never at the edges. */
.tsc-cases__slide:nth-child(odd):not(:last-child) .tsc-cases__card {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.tsc-cases__type {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: var(--tsc-c-footer);
  color: var(--tsc-c-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.tsc-cases__amount {
  font-size: clamp(1.9rem, 1.1rem + 2.6cqi, 2.85rem);
  font-weight: 700;
  line-height: 1;
}
.tsc-cases__divider { display: block; width: 48px; height: 3px; margin: 18px auto; background: var(--tsc-c-accent); }
.tsc-cases__category {
  margin-bottom: 14px;
  font-size: clamp(0.95rem, 0.85rem + 0.4cqi, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.25;
}
.tsc-cases__desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tsc-c-fg); }

.tsc-cases__footer { background: var(--tsc-c-footer); padding: 22px clamp(24px, 4cqi, 48px); }
.tsc-cases__footer .tsc-actions { margin-top: 0; }

@container (max-width: 680px) {
  .tsc-cases__slide { flex-basis: 100%; max-width: 100%; }
  .tsc-cases__slide:nth-child(odd):not(:last-child) .tsc-cases__card { border-right: 0; }
}
@container (max-width: 520px) {
  .tsc-cases__footer .tsc-actions { flex-direction: column; align-items: stretch; }
  .tsc-cases__footer .tsc-btn { width: 100%; }
}

/* ===========================================================================
 * Client Reviews  ([client-reviews])
 * One review per slide (stars, testimonial, name), paged carousel + footer bar.
 * ======================================================================== */
.tsc-reviews {
  box-sizing: border-box;
  container-type: inline-size;
  margin: 40px 0;
  background: var(--tsc-c-bg);
  color: var(--tsc-c-fg);
  border-radius: 6px;
  overflow: hidden;
}
.tsc-reviews * { box-sizing: border-box; }

.tsc-reviews__heading {
  margin: 0 !important;
  padding: clamp(36px, 5cqi, 56px) 24px clamp(16px, 2cqi, 24px);
  text-align: center;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(1.1rem, 0.9rem + 0.6cqi, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.tsc-reviews__viewport { padding: clamp(24px, 3cqi, 38px) clamp(52px, 6cqi, 72px) clamp(28px, 4cqi, 40px); }
.tsc-reviews__slide { flex: 0 0 100%; max-width: 100%; }
.tsc-reviews__card { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 clamp(8px, 2cqi, 24px); }

.tsc-reviews__stars { color: var(--tsc-c-icon); margin-bottom: 18px; line-height: 0; }
.tsc-reviews__stars .tsc-icon-stars { width: auto; height: 26px; display: inline-block; }

.tsc-reviews .tsc-reviews__quote :is(p) {
  margin: 0 0 1em !important;
  color: var(--tsc-c-fg) !important;
  font-size: clamp(1.05rem, 0.95rem + 0.6cqi, 1.35rem) !important;
  line-height: 1.7 !important;
}
.tsc-reviews .tsc-reviews__quote :is(p):last-child { margin-bottom: 0 !important; }

.tsc-reviews__name {
  margin-top: 20px;
  color: var(--tsc-c-fg);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.4cqi, 1.25rem);
  line-height: 1.2;
}

.tsc-reviews__footer { background: var(--tsc-c-footer); padding: 22px clamp(24px, 4cqi, 48px); }
.tsc-reviews__footer .tsc-actions { margin-top: 0; }

@container (max-width: 520px) {
  .tsc-reviews__footer .tsc-actions { flex-direction: column; align-items: stretch; }
  .tsc-reviews__footer .tsc-btn { width: 100%; }
}