/*
 * Tangerine Builder — Frontend block styles.
 * Theme-agnostic defaults. Override per-theme via the standard CSS cascade
 * or by dequeuing 'tdb-frontend' and shipping your own.
 */

.tdb-builder { width: 100%; }
.tdb-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tdb-block { padding: 64px 0; }
.tdb-block:first-child { padding-top: 0; }

.tdb-eyebrow {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .6;
	margin: 0 0 .5em;
}
.tdb-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 .75em; }
.tdb-lede    { font-size: 1.125rem; opacity: .8; margin: 0 0 2em; max-width: 64ch; }

.tdb-align-left   { text-align: left; }
.tdb-align-center { text-align: center; }
.tdb-align-right  { text-align: right; }
.tdb-align-center .tdb-lede,
.tdb-align-center .tdb-text__body { margin-left: auto; margin-right: auto; }

/* Buttons — NEUTRAL fallback only.
   The builder is theme-agnostic: it emits .tdb-btn + a variant class and
   provides this minimal styling so buttons are functional on a bare theme.
   The active theme is expected to fully restyle .tdb-builder .tdb-btn* to
   match its own button system (corner radius, colours, etc.) via a bridge —
   see the Tangerine theme's "Tangerine Builder bridge" section.
   No `currentColor` backgrounds: they're fragile and have caused invisible
   buttons in the past. Always explicit colours here. */
.tdb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-weight: 600; font-size: 14px;
	text-decoration: none; cursor: pointer;
	transition: background .15s, border-color .15s, transform .05s;
}
.tdb-btn:active { transform: translateY(1px); }
.tdb-builder .tdb-btn--primary,
.tdb-builder .tdb-btn--dark    { background: #1d2327; color: #ffffff; border-color: #1d2327; }
.tdb-builder .tdb-btn--primary:hover,
.tdb-builder .tdb-btn--dark:hover { background: #333a40; border-color: #333a40; }
.tdb-builder .tdb-btn--accent  { background: #ea580c; color: #ffffff; border-color: #ea580c; }
.tdb-builder .tdb-btn--accent:hover { background: #c2410c; border-color: #c2410c; }
.tdb-builder .tdb-btn--ghost,
.tdb-builder .tdb-btn--outline { background: transparent; color: inherit; border-color: #c9c9c9; }
.tdb-builder .tdb-btn--ghost:hover,
.tdb-builder .tdb-btn--outline:hover { border-color: #1d2327; }

/* Hero */
.tdb-hero { padding: 96px 0; position: relative; }
.tdb-hero.has-bg { background-size: cover; background-position: center; color: #fff; }
.tdb-hero.has-bg::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));
	pointer-events: none;
}
.tdb-hero > .tdb-container { position: relative; }
.tdb-hero__title { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 .5em; }
.tdb-hero__subtitle { font-size: 1.125rem; opacity: .85; margin: 0 0 1.5em; max-width: 60ch; }
.tdb-align-center .tdb-hero__subtitle { margin-left: auto; margin-right: auto; }
.tdb-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.tdb-align-center .tdb-hero__ctas { justify-content: center; }
.tdb-align-right  .tdb-hero__ctas { justify-content: flex-end; }

/* Text block widths
   - narrow: short reading column (~56ch) — pick this for prose pages
   - normal / wide: flow with the container (full container width)
   The 72ch constraint that used to be on "normal" was confusing and made body
   text look like it was floating on the left half of the page. */
.tdb-width-narrow .tdb-text__body,
.tdb-width-narrow .tdb-heading { max-width: 56ch; }
.tdb-width-normal .tdb-text__body,
.tdb-width-normal .tdb-heading,
.tdb-width-wide   .tdb-text__body,
.tdb-width-wide   .tdb-heading   { max-width: none; }
.tdb-align-center.tdb-width-narrow .tdb-text__body { margin-left: auto; margin-right: auto; }

/* Columns */
.tdb-columns__grid { display: grid; gap: 24px; }
.tdb-cols-2 .tdb-columns__grid { grid-template-columns: repeat(2, 1fr); }
.tdb-cols-3 .tdb-columns__grid { grid-template-columns: repeat(3, 1fr); }
.tdb-cols-4 .tdb-columns__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
	.tdb-columns__grid { grid-template-columns: 1fr !important; }
}
.tdb-column { display: flex; flex-direction: column; gap: 12px; }
.tdb-column__media img { width: 100%; height: auto; border-radius: 6px; display: block; }
.tdb-column__title { font-size: 1.25rem; margin: 0; }
.tdb-column__text  { margin: 0; opacity: .85; }
.tdb-column__link  { align-self: flex-start; text-decoration: none; font-weight: 600; }
.tdb-column__link::after { content: ' →'; }

/* CTA */
.tdb-cta { padding: 72px 0; }
.tdb-cta__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 24px; padding: 40px; border-radius: 12px;
	background: #f3f4f6; color: #0a0a0a;
}
.tdb-cta--primary .tdb-cta__inner { background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; }
.tdb-cta--dark .tdb-cta__inner    { background: #0a0a0a; color: #fff; }
.tdb-cta__heading { font-size: 1.5rem; margin: 0 0 .25em; }
.tdb-cta__text { margin: 0; opacity: .85; }
.tdb-align-center .tdb-cta__inner { flex-direction: column; text-align: center; }

/* Image */
.tdb-image figure { margin: 0; }
.tdb-image img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.tdb-image .tdb-image__caption { margin-top: 8px; font-size: .875rem; opacity: .7; }
.tdb-align-center.tdb-image figure { display: flex; flex-direction: column; align-items: center; }
.tdb-align-right.tdb-image  figure { display: flex; flex-direction: column; align-items: flex-end; }

/* Gallery */
.tdb-gallery__grid { display: grid; gap: 12px; }
.tdb-gallery--gap-none   .tdb-gallery__grid { gap: 0; }
.tdb-gallery--gap-small  .tdb-gallery__grid { gap: 6px; }
.tdb-gallery--gap-large  .tdb-gallery__grid { gap: 24px; }
.tdb-gallery--cols-2 .tdb-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.tdb-gallery--cols-3 .tdb-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.tdb-gallery--cols-4 .tdb-gallery__grid { grid-template-columns: repeat(4, 1fr); }
.tdb-gallery--cols-5 .tdb-gallery__grid { grid-template-columns: repeat(5, 1fr); }
.tdb-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
@media (max-width: 768px) {
	.tdb-gallery__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Accordion */
.tdb-accordion__list { display: flex; flex-direction: column; gap: 8px; }
.tdb-accordion__item {
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;
	padding: 0;
	background: rgba(0,0,0,.02);
}
.tdb-accordion__title {
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
}
.tdb-accordion__title::after {
	content: '+';
	position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	font-size: 1.5em; line-height: 1;
}
.tdb-accordion__item[open] .tdb-accordion__title::after { content: '−'; }
.tdb-accordion__body { padding: 0 20px 16px; }

/* Form */
.tdb-form__embed { margin-top: 16px; }
.tdb-form__form { margin-top: 20px; }
.tdb-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.tdb-form__field--full { grid-column: 1 / -1; }
.tdb-form__field { display: flex; flex-direction: column; gap: 6px; }
.tdb-form__field label {
	font-size: 13px;
	font-weight: 600;
}
.tdb-form__field input,
.tdb-form__field textarea,
.tdb-form__field select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	font: inherit;
	background: #fff;
	color: #1d2327;
	box-sizing: border-box;
}
.tdb-form__field input:focus,
.tdb-form__field textarea:focus,
.tdb-form__field select:focus {
	outline: none;
	border-color: #1d2327;
}
.tdb-form__field textarea { resize: vertical; min-height: 110px; }
.tdb-form__check {
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
}
.tdb-form__check input { width: auto; margin-top: 2px; }
.tdb-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tdb-form__submit { margin-top: 18px; }
.tdb-form__success {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: 8px;
	background: rgba(22,163,74,0.10);
	border: 1px solid rgba(22,163,74,0.35);
	font-weight: 500;
}
.tdb-form__error {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	background: rgba(220,38,38,0.08);
	border: 1px solid rgba(220,38,38,0.30);
	font-size: 14px;
}
.tdb-form__empty { margin-top: 12px; opacity: .6; font-size: 14px; }
@media (max-width: 600px) {
	.tdb-form__grid { grid-template-columns: 1fr; }
}

/* Spacer is inline-styled. */

/* HTML block: untouched container so author CSS can apply. */

/* ============================================================
   Tangerine Builder — per-section animations.
   The PHP renderer wraps each animated section in:
     <div class="tdb-anim tdb-anim--TYPE" data-tdb-anim="1"
          style="--tdb-anim-delay:Xms;--tdb-anim-duration:Yms;">...</div>
   The frontend anim.js adds `.is-in` when the wrap enters the viewport.
   ============================================================ */
.tdb-anim {
	--tdb-anim-delay: 0ms;
	--tdb-anim-duration: 700ms;
	opacity: 0;
	transition:
		opacity var(--tdb-anim-duration) cubic-bezier(.2, .65, .25, 1) var(--tdb-anim-delay),
		transform var(--tdb-anim-duration) cubic-bezier(.2, .65, .25, 1) var(--tdb-anim-delay);
	will-change: opacity, transform;
}
.tdb-anim.is-in { opacity: 1; transform: none; }

.tdb-anim--fade-up      { transform: translateY(28px); }
.tdb-anim--fade-in      { transform: none; }
.tdb-anim--slide-left   { transform: translateX(-40px); }
.tdb-anim--slide-right  { transform: translateX(40px); }
.tdb-anim--scale-up     { transform: scale(0.94); }
.tdb-anim--zoom-in      { transform: scale(1.08); }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.tdb-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* No-JS / very old browsers fallback: ensure content is visible even if the
   IntersectionObserver never runs. */
.no-js .tdb-anim { opacity: 1; transform: none; }

/* ============================================================
   Features grid / Media row / Comparison table — NEUTRAL fallback.
   The active theme is expected to restyle .tdb-builder .tdb-features,
   .tdb-media-row and .tdb-compare to match its own visual system
   (see the Tangerine theme's builder bridge).
   ============================================================ */

/* ---------- Feature grid ---------- */
.tdb-features__grid {
	display: grid;
	gap: 1px;
	background: #e3e3e3;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 24px;
}
.tdb-features--cols-2 .tdb-features__grid { grid-template-columns: repeat(2, 1fr); }
.tdb-features--cols-3 .tdb-features__grid { grid-template-columns: repeat(3, 1fr); }
.tdb-features--cols-4 .tdb-features__grid { grid-template-columns: repeat(4, 1fr); }
.tdb-feature {
	background: #fff;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tdb-feature__num  { font-size: 12px; color: #9a9a9a; font-family: ui-monospace, Menlo, monospace; }
.tdb-feature__icon {
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9px;
	background: rgba(0,0,0,0.05);
	color: #1d2327;
}
.tdb-feature__title { font-size: 17px; margin: 4px 0 0; }
.tdb-feature__desc  { font-size: 14px; line-height: 1.6; color: #555; margin: 0; }

/* ---------- Media row ---------- */
.tdb-media-row__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-top: 8px;
}
.tdb-media-row--left .tdb-media-row__text   { order: 2; }
.tdb-media-row--left .tdb-media-row__visual { order: 1; }
.tdb-media-row__desc { font-size: 15px; line-height: 1.65; color: #555; margin: 12px 0 18px; }
.tdb-checklist { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tdb-checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; }
.tdb-checklist__icon {
	flex-shrink: 0; margin-top: 2px;
	color: #fff; background: #16a34a;
	border-radius: 50%; padding: 3px;
	box-sizing: content-box; width: 13px; height: 13px;
}
.tdb-media-row__img {
	width: 100%; height: auto; display: block;
	border-radius: 8px; border: 1px solid #e3e3e3;
}
.tdb-media-row__ph {
	aspect-ratio: 4 / 3;
	border: 2px dashed #cfcfcf;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	color: #999; font-size: 13px; text-align: center; padding: 24px;
}

/* ---------- Comparison table ---------- */
.tdb-compare__table {
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 24px;
}
.tdb-compare__row {
	display: grid;
	grid-template-columns: 1fr 1.3fr 1.3fr;
	border-bottom: 1px solid #e3e3e3;
}
.tdb-compare--2col .tdb-compare__row { grid-template-columns: 1fr 1fr; }
.tdb-compare__row:last-child { border-bottom: none; }
.tdb-compare__cat,
.tdb-compare__them,
.tdb-compare__us {
	padding: 16px 20px;
	font-size: 14.5px;
	line-height: 1.5;
}
.tdb-compare__cat  { font-weight: 600; background: #f6f6f6; border-right: 1px solid #e3e3e3; }
.tdb-compare__them { color: #777; border-right: 1px solid #e3e3e3; }
.tdb-compare__us   { background: rgba(0,0,0,0.03); }
.tdb-compare__row--head .tdb-compare__cat,
.tdb-compare__row--head .tdb-compare__them,
.tdb-compare__row--head .tdb-compare__us {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

@media (max-width: 860px) {
	.tdb-features--cols-3 .tdb-features__grid,
	.tdb-features--cols-4 .tdb-features__grid { grid-template-columns: repeat(2, 1fr); }
	.tdb-media-row__grid { grid-template-columns: 1fr; gap: 28px; }
	.tdb-media-row--left .tdb-media-row__text,
	.tdb-media-row--left .tdb-media-row__visual { order: 0; }
}
@media (max-width: 560px) {
	.tdb-features__grid { grid-template-columns: 1fr !important; }
	.tdb-compare__row { grid-template-columns: 1fr !important; }
	.tdb-compare__cat, .tdb-compare__them { border-right: none; }
	.tdb-compare__row--head { display: none; }
}