/* Who We Support (post 7). Generated layout lives in build/who_we_support.py;
   only what Elementor cannot express is here. Prefix: bw-wws-. */

/* Icon discs: keep them circles whatever the flex context. */
.bw-wws-disc.e-con { flex: 0 0 auto !important; aspect-ratio: 1; align-self: center; }
.bw-wws-disc .elementor-widget-image { width: auto; }

/* --- values band ---------------------------------------------------------- */
.bw-wws-values__left { flex: 1 1 auto !important; min-width: 0; }
.bw-wws-values__lists { flex: 0 0 auto !important; width: auto !important; }
.bw-wws-values__copy { min-width: 0; }
.bw-wws-values__list .elementor-icon-list-item { white-space: nowrap; }

/* --- category cards ------------------------------------------------------- */
.bw-wws-card.e-con { flex: 1 1 0 !important; min-width: 0; }
/* Description absorbs the slack so checklists and buttons line up across cards. */
.bw-wws-card__desc { flex-grow: 1; }
.bw-wws-card__list { align-self: stretch; }
.bw-wws-card__btn .elementor-button { width: 100%; justify-content: center; }
.bw-wws-card__icon img { width: 48px !important; }

/* --- panels --------------------------------------------------------------- */
.bw-wws-partner.e-con { min-width: 0; }
.bw-wws-partner__icon { flex: 0 0 auto; }
.bw-wws-partner__icon img { width: 36px !important; }
.bw-wws-partner__words.e-con { flex: 1 1 auto; min-width: 0; }
.bw-wws-panel__btn .elementor-button { min-width: 360px; justify-content: center; }
.bw-wws-panel--model .bw-wws-panel__btn .elementor-button { min-width: 284px; }
@media (min-width: 1025px) { .bw-wws-panel--partners .bw-wws-panel__btn { margin-top: auto !important; } }

/* Support-model diagram: dashed arrow from each step's disc to the next. */
.bw-wws-step { position: relative; }
/* Steps are 22% wide, spaced evenly, so centre-to-centre is 118.2% of a step. */
.bw-wws-step:not(.bw-wws-step--last)::after {
	content: ""; position: absolute; top: 47px; left: calc(50% + 60px);
	width: calc(118.2% - 122px); border-top: 1.5px dashed var(--wws-c); pointer-events: none;
}
.bw-wws-step:not(.bw-wws-step--last)::before {
	content: ""; position: absolute; top: 43.5px; left: calc(50% + 60px + 118.2% - 122px - 8px);
	width: 7px; height: 7px; transform: rotate(45deg);
	border-top: 1.5px solid var(--wws-c); border-right: 1.5px solid var(--wws-c);
	pointer-events: none;
}
.bw-wws-step--teal   { --wws-c: var(--e-global-color-teal, #2A8A8C); }
.bw-wws-step--blue   { --wws-c: var(--e-global-color-blue, #3F6FB8); }
.bw-wws-step--purple { --wws-c: var(--e-global-color-purple, #7A5CB2); }
.bw-wws-step--gold   { --wws-c: var(--e-global-color-accent, #D38A12); }
.bw-wws-step__logo img { width: 58px !important; }

/* --- tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.bw-wws-values__left, .bw-wws-values__lists { flex: 1 1 100% !important; }
	.bw-wws-values__lists { padding-left: 0 !important; border-left: 0 !important; justify-content: flex-start !important; }
	.bw-wws-card.e-con { flex: 0 1 calc(50% - 10px) !important; }
	.bw-wws-panel.e-con { flex: 1 1 100% !important; }
}

/* --- phone ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.bw-wws-values__left { flex-direction: column !important; align-items: flex-start !important; }
	.bw-wws-values__list .elementor-icon-list-item { white-space: normal; }
	.bw-wws-values__lists { flex-direction: column !important; gap: 17px !important; }
	.bw-wws-card.e-con { flex: 1 1 100% !important; }
	.bw-wws-panel__btn .elementor-button,
	.bw-wws-panel--model .bw-wws-panel__btn .elementor-button { min-width: 0; width: 100%; }
	.bw-wws-partner__note .elementor-heading-title,
	.bw-wws-step__desc .elementor-heading-title { font-size: 14px !important; }
	/* Diagram stacks: arrows point down between steps. */
	.bw-wws-steps.e-con { flex-direction: column !important; align-items: center !important; }
	.bw-wws-step.e-con { width: 100% !important; }
	.bw-wws-step:not(.bw-wws-step--last)::after { display: none; }
	.bw-wws-step:not(.bw-wws-step--last)::before {
		top: auto; bottom: -24px; left: 50%; transform: translateX(-50%) rotate(135deg);
		width: 10px; height: 10px;
	}
}

/* --- band heights measured against the mockup ------------------------------ */
/* CTA box: mockup is 151px tall at 1440 (component default pads to 178). */
.bw-wws-main .e-con.bw-cta { --padding-top: 24px; --padding-bottom: 24px; }
@media (max-width: 1024px) {
	.bw-wws-main .e-con.bw-cta { --padding-top: 30px; --padding-bottom: 30px; }
	.bw-wws-panel__intro { --container-widget-width: 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* Forced line breaks from the design only make sense at desktop measure. */
@media (max-width: 767px) {
	.bw-hero__sub br, .bw-wws-main .bw-cta br { display: none; }
}

/* CTA banner on phones: the shared component keeps icon and words side by side,
   which squeezes the heading to a few characters a line. Stack them. */
@media (max-width: 767px) {
	.bw-wws-main .bw-cta > .e-con:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
	.bw-wws-main .bw-cta .e-con.bw-cta__icon { flex: 0 0 80px !important; width: 80px !important; height: 80px !important; }
	.bw-wws-main .bw-cta .bw-cta__icon img { width: 42px !important; }
	.bw-wws-main .bw-cta .e-con.bw-cta__words { flex: 1 1 auto !important; width: 100% !important; }
	.bw-wws-values__icon.e-con { align-self: flex-start; }
}

/* Between the tablet breakpoint and container width + gutters, theme.section()
   has no side padding, so content would run to the viewport edge. Match the
   hero's 40px gutter. */
@media (min-width: 1025px) and (max-width: 1339px) {
	.e-con.bw-wws-values-band, .e-con.bw-wws-main, .e-con.bw-group-band {
		padding-left: 40px !important; padding-right: 40px !important;
	}
}
/* Below 1200 the two panels are too narrow side by side; stack them. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.bw-wws-panels.e-con { flex-wrap: wrap !important; }
	.bw-wws-panel.e-con { flex: 1 1 100% !important; }
	.bw-wws-panel--partners .bw-wws-panel__btn { margin-top: 14px !important; }
}

/* 1025–1199: four cards in one row get cramped — two by two instead. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.bw-wws-cards.e-con { flex-wrap: wrap !important; }
	.bw-wws-card.e-con { flex: 1 1 calc(50% - 20px) !important; }
}
