/* ---------------------------------------------------------------------------
   Space Hero / TDGA Holdings — small-screen corrections
   ---------------------------------------------------------------------------
   The original theme is Divi, which is responsive out of the box, but the
   site's own custom CSS pinned `.three-columns` rows to three-across for every
   width below 980px. On a phone that leaves ~99px cells holding headshots with
   9–10px captions. Everything here is scoped to small viewports, so the
   desktop and tablet design the site shipped with is untouched.
   Loaded last, after all Divi/plugin stylesheets.
--------------------------------------------------------------------------- */

/* --- 1. Nothing may push the page sideways -------------------------------- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

#page-container,
#et-main-area,
#main-content {
	max-width: 100%;
	overflow-x: clip;
}

/* The mission row carries a decorative 1.09x scale from the Divi transform
   settings. There is room for it on a wide screen; below 981px it pushes the
   row past both edges of the viewport, so drop the effect there. */
@media only screen and (max-width: 980px) {
	.et_pb_row_2.et_pb_row {
		transform: none !important;
	}
}

/* Media stays inside its box no matter what width attribute it carries. */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img:not([height]) {
	height: auto;
}

/* Long unbroken strings (URLs in the privacy policy) must not widen the page. */
.et_pb_text_inner,
.entry-content,
.et_pb_blurb_description {
	overflow-wrap: break-word;
}

/* --- 2. Phone: three-across grids become two-across ----------------------- */
/* `.three-columns` carries the partner-logo walls, the Team grid and the
   Heroes grid. Two-up roughly doubles each cell (99px -> ~165px at 375px). */
@media only screen and (max-width: 600px) {
	.three-columns .et_pb_column,
	.three-columns.et_pb_row .et_pb_column,
	.three-columns .et_pb_column.et_pb_column_1_6 {
		width: 47% !important;
		margin-right: 6% !important;
		margin-bottom: 26px !important;
	}

	.three-columns .et_pb_column:nth-of-type(2n) {
		margin-right: 0 !important;
	}

	.three-columns .et_pb_column:nth-of-type(2n + 1) {
		clear: left;
	}

	.three-columns .et_pb_column:last-child {
		margin-bottom: 0 !important;
	}
}

/* Below ~400px even two-up gets tight for the people cards, so give the
   photo grids the full width. Logo walls stay two-up — they read fine small. */
@media only screen and (max-width: 400px) {
	#team .three-columns .et_pb_column,
	#insiders_first_section .three-columns .et_pb_column,
	#more_insiders .three-columns .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
	}
}

/* --- 3. Readable card typography below the desktop breakpoint ------------ */
/* The 9–10px sizes are tuned for six-across desktop cells. Once the grid
   reflows to three- or two-across the cells are much wider, so the captions
   can grow back to a legible scale. */
@media only screen and (max-width: 980px) {
	.et_pb_team_member .et_pb_module_header,
	.et_pb_team_member h4.et_pb_module_header {
		font-size: 14px !important;
		line-height: 1.3em !important;
	}

	.et_pb_team_member .et_pb_member_position {
		font-size: 12px !important;
		line-height: 1.4em !important;
	}
}

@media only screen and (max-width: 600px) {
	.et_pb_team_member .et_pb_module_header,
	.et_pb_team_member h4.et_pb_module_header {
		font-size: 16px !important;
		line-height: 1.3em !important;
	}

	.et_pb_team_member .et_pb_member_position {
		font-size: 13px !important;
		line-height: 1.4em !important;
	}

	.et_pb_team_member .et_pb_team_member_description p,
	.et_pb_team_member_description {
		font-size: 14px !important;
		line-height: 1.6em !important;
	}

	/* Section headings shrink a little so they never wrap mid-word. */
	.et_pb_section h1,
	.et_pb_section h2 {
		font-size: clamp(26px, 8vw, 40px) !important;
		line-height: 1.2em !important;
		overflow-wrap: break-word;
	}

	.et_pb_text_inner p,
	.et_pb_blurb_description p {
		font-size: 16px;
		line-height: 1.65em;
	}
}

/* --- 4. Touch targets ----------------------------------------------------- */
@media only screen and (max-width: 980px) and (pointer: coarse) {
	#mobile_menu li a,
	.et_mobile_menu li a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.et_pb_social_media_follow li a.icon {
		width: 40px !important;
		height: 40px !important;
		line-height: 40px !important;
	}

	.et_pb_social_media_follow li a.icon::before {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 22px;
	}

	/* Give the hamburger a finger-sized hit area without moving it visually. */
	.mobile_menu_bar,
	.mobile_menu_bar_toggle {
		padding: 8px 10px;
		margin: -8px -10px;
	}

	.et_pb_button {
		padding-top: 0.5em !important;
		padding-bottom: 0.5em !important;
	}
}

/* --- 5. Phone: spacing that was sized for a wide viewport ----------------- */
@media only screen and (max-width: 600px) {
	.et_pb_row,
	.et_pb_row.et_pb_gutters1,
	.et_pb_row.et_pb_gutters3,
	.et_pb_row.et_pb_gutters4 {
		width: 90% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.et_pb_section {
		padding-left: 0;
		padding-right: 0;
	}

	/* The header row is pulled left on desktop; that offset is wrong on a
	   phone and was part of the 7px of horizontal overflow. */
	.et_pb_section_0_tb_header.et_pb_section,
	.et_pb_row_0_tb_header.et_pb_row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Full-height hero: use the dynamic viewport unit where supported so mobile
   browser chrome does not crop the bottom of the panel. */
@media only screen and (max-width: 980px) {
	.hero-image {
		min-height: 100svh;
	}
}

/* --- 6. Footer stacks cleanly ------------------------------------------- */
@media only screen and (max-width: 767px) {
	.et_pb_section_0_tb_footer .et_pb_column,
	.et_pb_section_1_tb_footer .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
		text-align: center;
	}

	.et_pb_section_1_tb_footer .et_pb_text_inner {
		text-align: center;
	}

	/* The footer logo is nudged left by -18px for the wide layout; on a phone
	   that hangs it off the edge of the screen. */
	.et_pb_image_0_tb_footer {
		margin-left: 0 !important;
		margin-top: 0 !important;
	}

	.et_pb_image_0_tb_footer .et_pb_image_wrap,
	.et_pb_image_0_tb_footer img {
		margin-left: auto;
		margin-right: auto;
	}
}

/* --- 7. Respect the reader's settings ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}