/* The One Box - mobile deviations only, behind max-width queries. Base/desktop rules live in custom.css. */

/*
Footer below Salient's 1000px breakpoint: drop the desktop 109px inset so
Salient's own mobile .container sizing sets the side margins (same as the
rest of the site); columns two-up on tablet, stacked on phone; legal bar
items stack with Back to top underneath.
*/
@media only screen and (max-width: 999px) {
	#footer-outer #footer-widgets > .container,
	#footer-outer #copyright > .container {
		padding-left: 0;
		padding-right: 0;
	}
	#footer-outer #footer-widgets .tob-footer-row {
		flex-wrap: wrap;
		row-gap: 32px;
	}
	#footer-outer #copyright > .container:first-child {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	#footer-outer #copyright .tob-legal-left p {
		column-gap: 24px;
		row-gap: 8px;
	}
}
@media only screen and (max-width: 690px) {
	#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col,
	#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-2,
	#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-3,
	#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-4,
	#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-5 {
		flex-basis: 100%;
	}
}

/*
Header below Salient's 1000px header breakpoint: Salient's responsive.css
resets the full-width header container padding to 0, and the logo shrinks
to the 50px Mobile Logo Height (Theme Options). Keep the yellow block
proportional to the logo (Figma ratio 139 : 78 logo width).
*/
@media only screen and (max-width: 999px) {
	body #header-outer[data-full-width=true] header > .container {
		padding-left: 0;
		padding-right: 18px;
	}
	#header-outer header#top .row > .col.span_3 {
		width: 104px;
	}
	#header-outer,
	#header-space {
		background-image: linear-gradient(to right, #FEBC00 0, #FEBC00 104px, transparent 104px);
	}
}

/* Card / stat / testimonial rows: wrap to 2 columns on tablet, 1 on phone. */
@media only screen and (max-width: 999px) {
	.row_col_wrap_12:has(> .tob-card),
	.row_col_wrap_12:has(> .tob-testimonial) {
		flex-wrap: wrap;
		gap: 40px 28px;
	}
	.row_col_wrap_12 > .tob-card,
	.row_col_wrap_12 > .tob-testimonial {
		flex: 1 1 calc(50% - 14px);
	}
	.row_col_wrap_12 > .tob-stat {
		flex-basis: calc(50% - 32px);
	}
}
@media only screen and (max-width: 690px) {
	.row_col_wrap_12 > .tob-card,
	.row_col_wrap_12 > .tob-testimonial,
	.row_col_wrap_12 > .tob-stat {
		flex-basis: 100%;
	}
}

/*
Image + text splits below Salient's 1000px breakpoint: columns stack, so
the desktop 48px half-gaps go and the image leaves its absolute "fill the
text column" mode (a stacked column has no height to fill) for a 4:3 crop.
*/
@media only screen and (max-width: 999px) {
	/* :first-child / :last-child to match the desktop rules' specificity. */
	.row_col_wrap_12 > .tob-split-media:first-child > .vc_column-inner,
	.row_col_wrap_12 > .tob-split-media:last-child > .vc_column-inner,
	.row_col_wrap_12 > .tob-split-text:first-child > .vc_column-inner,
	.row_col_wrap_12 > .tob-split-text:last-child > .vc_column-inner {
		padding-left: 0;
		padding-right: 0;
	}
	.tob-split-media > .vc_column-inner > .wpb_wrapper,
	.row_col_wrap_12 > .tob-split-media:first-child > .vc_column-inner > .wpb_wrapper,
	.row_col_wrap_12 > .tob-split-media:last-child > .vc_column-inner > .wpb_wrapper {
		position: static;
	}
	.tob-split-media .img-with-aniamtion-wrap img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.tob-split-media--fixed > .vc_column-inner {
		min-height: 0;
	}
	/* Beats Salient's `.vc_row-fluid.vc_row[data-column-margin="none"] .col {margin-bottom:0}`.
	   Image stacks first via the row's Column Direction (Tablet/Phone) = Column Reverse. */
	.vc_row-fluid.vc_row[data-column-margin] .row_col_wrap_12 > .tob-split-media.col {
		margin-bottom: 32px;
	}
}
/* Section intro lead (Feature Text 24/32) on phone. */
@media only screen and (max-width: 690px) {
	.tob-section-intro .tob-text__lead--large {
		font-size: 18px;
		line-height: 26px;
	}
}

/* Interior hero, numbered + link cards: stack below 1000px; hero photo first. */
@media only screen and (max-width: 999px) {
	.row_col_wrap_12:has(> .tob-page-hero__media) {
		flex-direction: column-reverse;
	}
	.row_col_wrap_12 > .tob-page-hero__media {
		flex-basis: auto;
		width: 100%;
	}
	.row_col_wrap_12 > .tob-page-hero__media > .vc_column-inner {
		height: 360px; /* desktop's 500px floor + text-height stretch don't apply when stacked */
		min-height: 0;
	}
	.row .col .tob-page-hero__media img {
		height: 360px;
		border-bottom-left-radius: 60px;
	}
	.row_col_wrap_12 > .tob-page-hero__text > .vc_column-inner {
		/* Contained hero: the container already provides the side gutters. */
		padding: 24px 0 48px 0;
	}
	.tob-breadcrumb {
		margin-bottom: 24px;
	}
	.row_col_wrap_12:has(> .tob-number-card),
	.row_col_wrap_12:has(> .tob-link-card) {
		flex-direction: column;
		gap: 28px;
	}
	.tob-number-card > .vc_column-inner {
		min-height: 0;
	}
	.row .col .tob-number-card--top :is(h3, h4) {
		min-height: 0;
	}
	.row_col_wrap_12 > .tob-number-card--grid {
		flex-basis: auto;
	}
	html body .vc_row-fluid > .row_col_wrap_12:has(> .tob-number-card--grid) {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 28px;
	}
	.row_col_wrap_12:has(> .tob-donate-copy--page) {
		flex-direction: column;
		gap: 40px;
	}
	.row_col_wrap_12 > .tob-donate-copy--page,
	.row_col_wrap_12 > .tob-donate-form--tint {
		flex-basis: auto;
		width: 100%;
	}
	.row_col_wrap_12:has(> .tob-feature-card) {
		flex-direction: column;
	}
	.tob-feature-card > .vc_column-inner {
		min-height: 0;
	}
	.tob-statement .tob-text__body {
		font-size: 24px;
		line-height: 32px;
	}
	.row .col .tob-link-card img {
		height: 280px;
	}
	.row_col_wrap_12:has(> .tob-profile__media) {
		flex-direction: column;
		gap: 24px;
	}
	.row_col_wrap_12 > .tob-profile__text {
		flex-basis: auto;
		width: 100%;
	}
	.tob-profile__text p.tob-profile__role {
		padding-bottom: 24px;
		font-size: 20px;
		line-height: 26px;
	}
	.tob-profile__media--empty > .vc_column-inner {
		height: 320px;
	}
}

/* Donate page ACNC badge: back in the flow once the columns stack. */
@media only screen and (max-width: 999px) {
	.tob-donate-copy--page .img-with-aniamtion-wrap:has(.tob-charity-badge) {
		position: static;
		margin-top: 32px;
	}
}

/* Home story section stacks: photo above the copy. */
@media only screen and (max-width: 999px) {
	.row_col_wrap_12:has(> .tob-story-media) {
		flex-direction: column;
		gap: 32px;
	}
	.row_col_wrap_12 > .tob-story-media {
		flex-basis: auto;
	}
	.tob-story-media .tob-media-placeholder {
		min-height: 280px;
	}
}

/* Home Donate: columns stack, badge back under the copy. */
@media only screen and (max-width: 999px) {
	.row_col_wrap_12:has(> .tob-donate-copy:not(.tob-donate-copy--page)) {
		flex-direction: column;
	}
	.tob-donate-copy:not(.tob-donate-copy--page) .img-with-aniamtion-wrap:has(.tob-charity-badge) {
		margin-top: 32px;
		margin-bottom: 40px;
	}
}

/* Other ways to give: smaller $600 figure on phone. */
@media only screen and (max-width: 690px) {
	.tob-split-text.tob-ow-text p.tob-ow-amount {
		font-size: 48px;
		line-height: 56px;
	}
}
/* Other ways to give panels: the photo stacks in flow (the desktop centring is undone). */
@media only screen and (max-width: 999px) {
	.tob-split-media.tob-ow-media > .vc_column-inner > .wpb_wrapper {
		height: auto;
		transform: none;
	}
	.tob-split-media.tob-ow-media > .vc_column-inner {
		min-height: 0;
	}
}
/* Two hero buttons (Our story) stack on phone. */
@media only screen and (max-width: 690px) {
	.tob-page-hero__text .nectar-button + .nectar-button {
		margin-left: 0;
		margin-top: 12px;
	}
}
/*
Multi button pill on phone (client 2026-10-21, iPhone): at 24px side padding the labels wrap
below ~350px and the 68px-tall buttons poke out of the white pill's round ends.
16px keeps both labels on one 48px line down to 300px.
*/
@media only screen and (max-width: 690px) {
	body[data-button-style] .tob-multi-button .nectar-button.medium.medium:not(.see-through):not(.see-through-2):not(.see-through-3) {
		padding-left: 16px;
		padding-right: 16px;
		white-space: nowrap;
	}
}