/*
 * Layout: sections, content width, stacks, grids, splits. Class names are the vocabulary a designer types into
 * Elementor's "CSS Classes" field (see docs/ELEMENTOR.md). Every rule that must beat Elementor's container defaults is written
 * as `.elementor .x.e-con` (three classes of specificity) rather than with !important.
 */

/* ---- section: vertical rhythm. Optical padding: a little more below than above.
   The padding is carried by two custom properties (--_pt, --_pb). On plain HTML they feed `padding-block`; on Elementor containers they feed
   Elementor's own --padding-top / --padding-bottom, so the result is the same whichever rule wins the cascade. ---- */
.tg-section { --_pt: var(--tg-section); --_pb: calc(var(--tg-section) * 1.05); position: relative; padding-block: var(--_pt) var(--_pb); background: transparent; color: var(--tg-text); }
.tg-section--tight { --_pt: clamp(3rem, 2rem + 4vw, 6rem); --_pb: clamp(3rem, 2rem + 4vw, 6rem); }
.tg-section--raised, .tg-section--paper-2, .tg-section--white { background: var(--tg-bg-raised); border-block: 1px solid var(--tg-line); }
/* Elementor gives every container 10px padding; ours opt out unless a component sets its own */
.elementor .e-con[class*="tg-"] { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
.elementor .tg-section.e-con { --padding-top: var(--_pt); --padding-bottom: var(--_pb); }
.tg-section > .e-con-inner, .tg-section > .elementor-container { max-width: none; width: 100%; padding: 0; }

/* two plain sections in a row share one gap (a banded section keeps its own padding top and bottom) */
.tg-section:not(.tg-hero):not(.tg-section--raised):not(.tg-section--paper-2):not(.tg-section--white) + .tg-section:not(.tg-section--raised):not(.tg-section--paper-2):not(.tg-section--white) { --_pt: 0px; }

/* ---- content width ---- */
.tg-wrap { width: 100%; max-width: calc(var(--tg-wrap) + 2 * var(--tg-gutter)); margin-inline: auto; padding-inline: var(--tg-gutter); }
.tg-wrap--narrow { max-width: calc(var(--tg-wrap-narrow) + 2 * var(--tg-gutter)); }
.elementor .tg-wrap.e-con { padding-inline: var(--tg-gutter); max-width: calc(var(--tg-wrap) + 2 * var(--tg-gutter)); margin-inline: auto; width: 100%; }
.elementor .tg-wrap--narrow.e-con { max-width: calc(var(--tg-wrap-narrow) + 2 * var(--tg-gutter)); }
.elementor .tg-wrap > .e-con-inner { max-width: none; padding: 0; }
.tg-narrow { max-width: var(--tg-wrap-narrow); margin-inline: auto; }

/* ---- vertical flow ---- */
.tg-stack, .elementor .tg-stack.e-con { display: flex; flex-direction: column; gap: var(--tg-s-7); }
.tg-flow-y, .elementor .tg-flow-y.e-con { display: flex; flex-direction: column; gap: var(--tg-s-4); }
.elementor .tg-stack > .elementor-widget, .elementor .tg-flow-y > .elementor-widget { margin: 0; width: 100%; }

/* section head: one focused message, stacked, never split left/right */
.tg-head, .elementor .tg-head.e-con { display: flex; flex-direction: column; gap: var(--tg-s-4); max-width: 44rem; }
.tg-head--center { margin-inline: auto; align-items: center; text-align: center; }
.tg-center { text-align: center; margin-inline: auto; }

/* ---- grids ---- */
.tg-cols, .elementor .tg-cols.e-con { display: grid; gap: var(--tg-s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tg-cols-2, .elementor .tg-cols-2.e-con { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
@media (min-width: 62rem) {
  .tg-cols-2, .elementor .tg-cols-2.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-cols-3, .elementor .tg-cols-3.e-con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tg-cols-4, .elementor .tg-cols-4.e-con { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* asymmetric pair: a feature cell and a lighter one (2 items -> 2 cells) */
.tg-bento, .elementor .tg-bento.e-con { display: grid; gap: var(--tg-s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .tg-bento, .elementor .tg-bento.e-con { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }

/* split: copy beside media. Stacks below 62rem, copy first. */
.tg-split, .elementor .tg-split.e-con { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tg-s-7); align-items: center; }
@media (min-width: 62rem) {
  .tg-split, .elementor .tg-split.e-con { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(var(--tg-s-7), 6vw, var(--tg-s-9)); }
  .tg-split--reverse > :first-child { order: 2; }
}
.tg-split__copy, .elementor .tg-split__copy.e-con { display: flex; flex-direction: column; gap: var(--tg-s-4); align-items: flex-start; }
.tg-split__copy p { margin: 0; color: var(--tg-text-muted); max-width: var(--tg-measure); }

/* ---- actions row ---- */
.tg-actions, .elementor .tg-actions.e-con { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--tg-s-3) var(--tg-s-4); align-items: center; }
.tg-center .tg-actions, .tg-head--center .tg-actions, .elementor .tg-center .tg-actions.e-con, .elementor .tg-head--center .tg-actions.e-con { justify-content: center; }
.elementor .tg-actions > .elementor-widget { width: auto; margin: 0; }
@media (max-width: 30rem) {
  .tg-actions .tg-btn, .tg-actions a.tg-btn, .tg-actions .tg-btn .elementor-button { width: 100%; }
  .elementor .tg-actions.e-con { flex-direction: column; align-items: stretch; }
  .elementor .tg-actions > .elementor-widget { width: 100%; }
}

/* ---- two-up utility: stack at tablet ---- */
.tg-hide-mobile { display: initial; }
@media (max-width: 47.99rem) { .tg-hide-mobile { display: none; } }