/**
 * Homepage About — #home_about responsive system.
 * Desktop base (1281px+): style.css — unchanged.
 * Stats overlay: home-about-stats.css
 *
 * @package dreamtime
 */

/* ==========================================================================
   1280px — three-column grid, balanced proportions
   ========================================================================== */
@media (max-width: 1280px) {
	#home_about {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.22fr) minmax(0, 0.72fr);
		column-gap: var(--dt-grid-gap, clamp(18px, 2.4vw, 26px));
		row-gap: 0;
		align-items: stretch;
		margin-top: var(--dt-section-gap, clamp(48px, 5vw, 58px));
		width: 100%;
	}

	#home_about_l,
	#home_about_c,
	#home_about_r {
		float: none;
		width: auto;
		margin-right: 0;
		margin-left: 0;
	}

	/* ---- left column: typography + canada card ---- */
	#home_about_l {
		margin-top: 0;
		align-self: center;
		display: flex;
		flex-direction: column;
		gap: var(--dt-stack-gap, clamp(20px, 2.5vw, 28px));
	}

	#home_about_l_one {
		margin-bottom: 0;
	}

	#home_about_l_one h3 {
		margin-bottom: 6px;
		font-size: clamp(14px, 1.15vw, 16px);
		line-height: 1.4;
	}

	#home_about_l_one h1 {
		margin-bottom: 12px;
		font-size: clamp(24px, 2.2vw, 27px);
		line-height: 1.28;
		letter-spacing: -0.02em;
	}

	#home_about_l_one p {
		margin-bottom: 0;
		font-size: clamp(15px, 1.2vw, 16px);
		line-height: 1.65;
		text-align: left;
	}

	#home_about_l_two {
		width: 100%;
		box-sizing: border-box;
		padding: 14px 18px 18px;
	}

	#home_about_l_two img {
		width: auto;
		max-width: min(205px, 100%);
		height: auto;
		margin: 0 auto;
		display: block;
	}

	#home_about_l_two h3 {
		margin-bottom: 8px;
		font-size: clamp(19px, 1.8vw, 22px);
		line-height: 1.3;
	}

	#home_about_l_two p {
		font-size: clamp(13px, 1.1vw, 14px);
		line-height: 1.6;
		text-align: left;
	}

	/* ---- center column: hero image ---- */
	#home_about_c {
		position: relative;
		margin-right: 0;
		border-radius: 14px;
		overflow: hidden;
		min-height: 360px;
		display: flex;
		flex-direction: column;
	}

	#home_about_c img {
		width: 100%;
		height: 100%;
		min-height: 360px;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	/* ---- right column: paired images ---- */
	#home_about_r {
		display: flex;
		flex-direction: column;
		gap: clamp(10px, 1.2vw, 14px);
		min-height: 360px;
	}

	#home_about_r1,
	#home_about_r2 {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		float: none;
		overflow: hidden;
		border-radius: 12px;
	}

	#home_about_r1 img,
	#home_about_r2 img {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
		object-position: center;
		margin-bottom: 0;
		display: block;
	}
}

/* ==========================================================================
   1200px — tighter grid, refined type scale
   ========================================================================== */
@media (max-width: 1200px) {
	#home_about {
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.2fr) minmax(0, 0.68fr);
		column-gap: 20px;
		margin-top: var(--dt-section-gap, 50px);
	}

	#home_about_l {
		gap: 22px;
	}

	#home_about_l_one h1 {
		font-size: clamp(23px, 2.4vw, 26px);
	}

	#home_about_c {
		min-height: 340px;
	}

	#home_about_c img {
		min-height: 340px;
	}

	#home_about_r {
		min-height: 340px;
		gap: 12px;
	}
}

/* ==========================================================================
   991px — stacked tablet layout
   ========================================================================== */
@media (max-width: 991px) {
	#home_about {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: var(--dt-section-gap, 44px);
	}

	#home_about::after {
		content: '';
		display: table;
		clear: both;
	}

	#home_about_l,
	#home_about_c,
	#home_about_r {
		width: 100%;
		float: none;
		min-height: 0;
	}

	#home_about_l {
		order: 1;
		margin-bottom: clamp(24px, 4vw, 32px);
		gap: 24px;
	}

	#home_about_l_one h3 {
		font-size: 15px;
		margin-bottom: 8px;
	}

	#home_about_l_one h1 {
		font-size: clamp(26px, 4.5vw, 30px);
		margin-bottom: 14px;
		line-height: 1.25;
	}

	#home_about_l_one p {
		font-size: 16px;
		line-height: 1.65;
	}

	#home_about_l_two {
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 18px 22px;
		text-align: left;
	}

	#home_about_l_two img {
		flex: 0 0 auto;
		width: 96px;
		max-width: 26%;
		margin: 0;
	}

	#home_about_l_two_r {
		flex: 1;
		min-width: 0;
	}

	#home_about_l_two h3 {
		font-size: 20px;
		margin-bottom: 8px;
	}

	#home_about_l_two p {
		font-size: 14px;
		line-height: 1.6;
	}

	#home_about_c {
		order: 2;
		margin-bottom: 0;
		min-height: 0;
		border-radius: 14px;
	}

	#home_about_c img {
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: min(440px, 58vw);
		aspect-ratio: 16 / 10;
		object-fit: cover;
		border-radius: 14px;
	}

	#home_about_r {
		order: 3;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: clamp(20px, 3vw, 28px);
	}

	#home_about_r1,
	#home_about_r2 {
		flex: none;
		border-radius: 12px;
	}

	#home_about_r1 img,
	#home_about_r2 img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		max-height: min(320px, 42vw);
		object-fit: cover;
		border-radius: 12px;
	}
}

/* ==========================================================================
   768px — compact tablet / large phone
   ========================================================================== */
@media (max-width: 768px) {
	#home_about {
		margin-top: var(--dt-section-gap, 38px);
	}

	#home_about_l {
		margin-bottom: 26px;
		gap: 20px;
	}

	#home_about_l_one h1 {
		font-size: 26px;
	}

	#home_about_l_one p {
		font-size: 15px;
		line-height: 1.62;
	}

	#home_about_l_two {
		padding: 16px 18px;
		gap: 16px;
	}

	#home_about_l_two img {
		width: 84px;
	}

	#home_about_l_two h3 {
		font-size: 19px;
	}

	#home_about_c img {
		max-height: min(380px, 62vw);
		aspect-ratio: 4 / 3;
	}

	#home_about_r {
		gap: 14px;
		margin-top: 22px;
	}

	#home_about_r1 img,
	#home_about_r2 img {
		max-height: min(280px, 48vw);
		aspect-ratio: 5 / 6;
	}
}

/* ==========================================================================
   576px — mobile
   ========================================================================== */
@media (max-width: 576px) {
	#home_about {
		margin-top: var(--dt-section-gap, 32px);
	}

	#home_about_l {
		margin-bottom: 22px;
		gap: 18px;
	}

	#home_about_l_one h1 {
		font-size: 24px;
		margin-bottom: 12px;
	}

	#home_about_l_one p {
		font-size: 15px;
		line-height: 1.6;
	}

	#home_about_l_two {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 16px 18px 18px;
		gap: 12px;
	}

	#home_about_l_two img {
		width: auto;
		max-width: 120px;
	}

	#home_about_l_two p {
		text-align: center;
	}

	#home_about_c img {
		max-height: none;
		aspect-ratio: 4 / 3;
		border-radius: 12px;
	}

	#home_about_r {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 18px;
	}

	#home_about_r1 img,
	#home_about_r2 img {
		aspect-ratio: 16 / 10;
		max-height: none;
		border-radius: 10px;
	}
}

/* ==========================================================================
   480px — small mobile
   ========================================================================== */
@media (max-width: 480px) {
	#home_about {
		margin-top: var(--dt-section-gap, 28px);
	}

	#home_about_l_one h1 {
		font-size: 22px;
	}

	#home_about_l_one h3 {
		font-size: 14px;
	}

	#home_about_l_two h3 {
		font-size: 18px;
	}

	#home_about_l_two p {
		font-size: 13px;
	}

	#home_about_c img {
		aspect-ratio: 3 / 2;
	}

	#home_about_r {
		margin-top: 16px;
	}
}