/*
 * powertrain_mobile.css
 *
 * Powertrain + Types of Hybrids section styles (responsive/mobile).
 *
 * Intended usage:
 * - Included with an appropriate media query by templates that render the `front/snippets/powertrain_section` snippet.
 */
/* Powertrain Options Section Responsive */
@media screen and (max-width: 1145px) {
	/* Hide the desktop header background stack on mobile widths */
	#powertrain_bg_stack {
		display: none;
	}
	/* Hide the header gradient overlay on mobile widths */
	.powertrain_header::before {
		display: none;
	}
	.powertrain_header_content_bg {
		padding-top: 5rem;
	}
	/* Ensure header background is clean white on mobile */
	.powertrain_header {
		background-color: #fff;
	}
	.powertrain_header_content {
		flex-direction: column;
	}
	.p_h_left_col {
		width: 100%;
		height: auto;
	}
	.powertrain_title h2 {
		text-align: center;
	}
	.powertrain_title_p p {
		text-align: center;
	}
	.powertrain_box_container {
		width: 100%;
	}
	.powertrain_box_wrap {
		width: 90%;
		height: auto;
		margin: 0px auto;
	}
	.p_h_right_col {
		width: 100%;
	}
	/* Hide the vehicle glow ring on mobile for a cleaner layout */
	.pt-veh-glow {
		display: none;
	}
	.pt-veh-img {
		margin-top: 1.5rem;
	}
	.powertrain_options_content_block {
		padding-bottom: 5rem;
	}
	.powertrain_options_flexed {
		flex-direction: column;
	}
	.powertrain_options_left_col {
		width: 100%;
	}
	.powertrain_info_right_col {
		margin-top: 1rem;
		width: 100%;
	}
	.types_of_hybrids_block {
		padding-bottom: 5rem;
	}
	.type_title_bg {
		margin-top: 1rem;
	}
	/* Stack one-liner and CTA vertically so the pill has room */
	.p_content_sec_one_flexed {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	.shop_kba_link {
		width: 100%;
		padding-left: 0;
		margin-left: 0;
		margin-top: 0.25rem;
		border-left: none;
	}
	.type_border_kba a:link, .type_border_kba a:visited {
		padding-left: 1rem;
		padding-right: 1rem;
		box-shadow: none; /* remove desktop outline on mobile */
	}
	.type_border_kba a:hover {
		box-shadow: none;
	}
	.powertrain_selector_bg {
		margin-top: -10.5rem;
	}
}

/* Powertrain Options Section Responsive */

/* Types of Vehicles Section Responsive */
@media screen and (max-width: 1577px) {
	#left_type_thumbnail, #right_type_thumbnail  {
		left: unset;
		right: unset;
		z-index: unset;
		width: 100%;
		height: auto;
		position: relative;
	}
}
@media screen and (max-width: 1113px) {
	.hybrid_types_layered {
		width: 100%;
		height: auto;
		position: relative;
	}
	.hybrid_type_layer_one {
		position: relative;
		top: unset;
		left: unset;
		z-index: unset;
		width: 100%;
		height: auto;
		display: block;
		flex-direction: unset;
	}
	#hybrid_type_left_column, #hybrid_type_right_column {
		width: 100%;
		height: auto;
		display: block;
		align-items: unset;
	}
	#hybrid_type_right_column {
		margin-top: 2rem;
	}
	.hybrid_type_item {
		width: 100%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	}
	.type_thumbnial_small {
		width: 100%;
		height: auto;
		display: block;
		justify-content: unset;
		align-items: unset;
		position: relative;
	}
	#left_type_thumbnail, #right_type_thumbnail  {
		display: block;
		left: unset;
		right: unset;
		width: 100%;
		height: auto;
	}
	.leaf_animation {
		display: none;
	}
	#hybrid_type_middle_column {
		width: 100%;
		height: auto;
		position: relative;
	}
	.middle_hybrid_types_flexed_layer {
		position: relative;
		z-index: unset;
		width: 100%;
		height: auto;
		display: block;
		flex-direction: unset;
		align-items: unset;
		gap: unset;
	}
	.extended_hybrid_type_item {
		margin-top: 2rem;
		width: 100%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	}
	.type_thumbnial_large {
		width: 100%;
		height: auto;
		display: block;
		justify-content: unset;
		align-items: unset;
	}
	.rotate_image_right img {
		transform: none;
	}
	.type_thumbnial_large img {
		width: 100%;
		height: auto;
		max-height: none;
	}
	.type_text li {
		margin-top: .5rem;
	}
	.type_kba a:link, .type_kba a:visited {
		margin-top: 2rem;
	}
}
@media screen and (max-width: 870px) {
	.types_of_hybrids_container {
		padding-top: 0rem;
	}
	.types_of_hybrids_background {
		/* Keep the background instead of removing it */
		background-size: cover;
		background-position: center;
	}
	.news_articles_container {
		padding-top: 5rem;
	}
	.hybrid_types_layered {
		height: auto;
	}
	/* Centered section header mobile styles */
	.section_header {
		/* padding: 2rem 0; */
		text-align: center;
	}
	.section_title h2 {
		font-size: 6vw;
		line-height: 1.2;
		margin-bottom: 1rem;
	}
	.section_title h3 {
		font-size: 5vw;
		margin-bottom: 0.5rem;
	}
	.section_title h4 {
		font-size: 4vw;
		margin-bottom: 1rem;
	}
	.section_title p {
		font-size: 3.5vw;
		line-height: 1.4;
		padding: 0 1rem;
	}

	/* On mobile, remove hover underline from non-selected tabs */
	#powertrain_slider_app .pt-tab:not([aria-selected="true"]):hover {
		text-decoration: none;
	}

	/* Powertrain tabs: slightly larger labels and slimmer pill on mobile */
	#powertrain_slider_app .pt-tab {
		font-size: 1.4rem;
		padding-top: 0.5rem;
		padding-bottom: 0.4rem;
	}
	#powertrain_slider_app .pt-indicator {
		top: 10px;
		bottom: 10px;
	}

	/* Shorten "Plug-in Hybrid" tab label to "PHEV" on mobile only */
	#powertrain_slider_app .pt-tab.track-evlearning-powertrain-pluginhybrid {
		font-size: 0; /* hide original text visually, keep for accessibility */
	}
	#powertrain_slider_app .pt-tab.track-evlearning-powertrain-pluginhybrid::after {
		content: 'PHEV';
		font-size: 1.4rem; /* match other tab size on mobile */
		letter-spacing: .05rem;
	}

	/* Shorten "All-Electric" tab label to "Electric" on mobile only */
	#powertrain_slider_app .pt-tab.track-evlearning-powertrain-electric {
		font-size: 0; /* hide original text visually, keep for accessibility */
	}
	#powertrain_slider_app .pt-tab.track-evlearning-powertrain-electric::after {
		content: 'Electric';
		font-size: 1.4rem; /* match other tab size on mobile */
		letter-spacing: .05rem;
	}
	/* On smaller screens, add spacing above the first two Top Picks blocks as well */
	.top_picks_block:first-of-type,
	.top_picks_block:nth-of-type(2) {
		margin-top: 3rem;
	}
}

@media screen and (max-width: 700px) {
	/* Ensure Tools & Resources section title scales like other mobile headers */
	.tools_resources_container .section_title h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
}

@media screen and (max-width: 550px) {
	.powertrain_slector_wrap {
	width: 100%;
	max-width: 100%;
	height: inherit;
	margin: 0px auto;
	}
	.powertrain_selector {
		border-radius: unset;
	}
	#powertrain_slider_app .pt-tab {
		font-size: .9rem;
	}
	#powertrain_slider_app .pt-tab.track-evlearning-powertrain-pluginhybrid::after {
		font-size: .9rem; /* keep PHEV label in sync with other tabs at smallest sizes */
	}
	#powertrain_slider_app .pt-tab.track-evlearning-powertrain-electric::after {
		font-size: .9rem; /* keep Electric label in sync at smallest sizes */
	}
}
/* Types of Hybrids Section Responsive */