/**
 * Zamaa theme — tablet/mobile responsive corrections.
 * Loads after site.min.css. Desktop (min-width: 1025px) is unchanged.
 */

/* -------------------------------------------------------------------------
 * Single service detail — tablet (768px–1024px)
 * Root cause: site.min.css uses min-width:992px for sidebar row, 4-col grids,
 * and side-by-side hero while tablet viewports are 768–1024px.
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.service-detail-page .service-detail-hero .flex-h-title.is-left {
		flex-flow: column;
		align-items: flex-start;
		grid-row-gap: 1.5rem;
		grid-column-gap: 1.5rem;
	}

	.service-detail-page .service-detail-hero .flex-v-title,
	.service-detail-page .service-detail-hero .heading-4,
	.service-detail-page .service-detail-hero .div-length.is-13 {
		max-width: 100%;
		width: 100%;
	}

	.service-detail-page .service-detail-hero .hero_photo-card-wrapper {
		flex: none;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.service-detail-page .service-detail-hero .hero_photo-bg-wrapper {
		width: 100%;
		height: clamp(18rem, 42vw, 24rem);
	}

	.service-detail-page .service-detail-hero_btns {
		flex-wrap: wrap;
		width: 100%;
	}

	.service-detail-page .service-detail-hero_btns .btn {
		white-space: normal;
		min-width: 0;
	}

	.service-detail-page .service-detail-layout {
		flex-flow: column;
		align-items: stretch;
	}

	.service-detail-page .service-detail-sidebar {
		flex: none;
		width: 100%;
		max-width: 100%;
		order: 1;
	}

	.service-detail-page .service-detail-content {
		order: 2;
		width: 100%;
		min-width: 0;
	}

	.service-detail-page .service-detail-features-grid,
	.service-detail-page .service-detail-process-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-detail-page .service-detail-faq .faq_content-wrapper {
		display: flex;
		flex-flow: column;
		grid-template-columns: minmax(0, 1fr);
		justify-content: flex-start;
		align-items: stretch;
		grid-row-gap: 1.75rem;
		grid-column-gap: 1.75rem;
	}

	.service-detail-page .service-detail-faq-intro,
	.service-detail-page .service-detail-faq-intro .flex-v-1-5.is-centred {
		text-align: center;
		align-items: center;
		width: 100%;
		max-width: 100%;
	}

	.service-detail-page .service-detail-faq .faq_questions-list,
	.service-detail-page .service-detail-faq-list {
		width: 100%;
		max-width: 100%;
	}

	.service-detail-page .section_faq .faq-heading-line {
		white-space: normal;
	}

	.service-detail-page .service-detail-cta.final-cta .heading-style-h2 {
		white-space: normal;
		text-wrap: balance;
	}
}

@media screen and (max-width: 767px) {
	.service-detail-page .service-detail-hero .hero_photo-bg-wrapper {
		height: 20rem;
	}

	.service-detail-page .service-detail-hero_btns {
		flex-direction: column;
		align-items: stretch;
	}

	.service-detail-page .service-detail-hero_btns .btn {
		width: 100%;
		justify-content: center;
	}

	.service-detail-page .service-detail-features-grid,
	.service-detail-page .service-detail-process-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Main Services page — tablet
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.services-page .services-hero .flex-h-title.is-left {
		flex-flow: column;
		align-items: flex-start;
		grid-row-gap: 1.5rem;
		grid-column-gap: 1.5rem;
	}

	.services-page .services-hero .flex-v-title,
	.services-page .services-hero .heading-4,
	.services-page .services-hero .div-length.is-13 {
		max-width: 100%;
	}

	.services-page .services-hero .hero_photo-card-wrapper {
		flex: none;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.services-page .services-hero .hero_photo-bg-wrapper {
		width: 100%;
		height: clamp(18rem, 42vw, 24rem);
	}

	.services-page .services-hero_btns .btn,
	.services-page .services-hero_btns .btn > div {
		white-space: normal;
	}

	.services-page .services-process.services-process-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.services-page .services-final-cta.final-cta .heading-style-h2 {
		white-space: normal;
		text-wrap: balance;
	}
}

@media screen and (max-width: 767px) {
	.services-page .services-hero .hero_photo-bg-wrapper {
		height: 20rem;
	}

	.services-page .services-hero_btns {
		flex-direction: column;
		align-items: stretch;
	}

	.services-page .services-hero_btns .btn {
		width: 100%;
		min-width: 0;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * Blog listing — tablet 2 columns (992–1024 gap in site.min.css)
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.blog-page .news_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-post-page .section_single-related .news_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * FAQ page — tablet stack (extends site.min.css max-width:991px rules)
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.faqs-page .faqs-hero .flex-h-title.is-left {
		flex-flow: column;
		align-items: stretch;
	}

	.faqs-page .faqs-hero .hero_photo-card-wrapper {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.faqs-page .faqs-hero .hero_photo-bg-wrapper {
		height: auto;
	}

	.faqs-page .faqs-hero .flex-v-title,
	.faqs-page .faqs-hero .heading-4,
	.faqs-page .faqs-hero .div-length.is-13 {
		max-width: 100%;
	}

	.faqs-page .faqs-layout.faq_content-wrapper {
		grid-template-columns: minmax(0, 1fr);
		flex-flow: column;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		grid-row-gap: 1.75rem;
		grid-column-gap: 1.75rem;
	}

	.faqs-page .faqs-support-left {
		max-width: 100%;
		justify-self: center;
	}

	.faqs-page .faqs-support-left .flex-v-1-5.is-centred,
	.faqs-page .faqs-support-left .text-style-p4 {
		align-items: center;
		text-align: center;
		max-width: 100%;
	}

	.faqs-page .faqs-support-btn-wrap {
		justify-content: center;
		width: 100%;
	}

	.faqs-page .faqs-support-right.faq_questions-list {
		max-width: 100%;
		margin-left: 0;
		justify-self: stretch;
		width: 100%;
	}

	.faqs-page .faqs-cta.services-final-cta .heading-style-h2 {
		white-space: normal;
		text-wrap: balance;
	}
}

/* -------------------------------------------------------------------------
 * Contact page — tablet stack form/image and info columns
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.contact-page .form-contact_container {
		flex-flow: column;
		height: auto;
	}

	.contact-page .form-contact_left,
	.contact-page .form-contact_text-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.contact-page .form-contact_cards {
		flex-flow: column;
		width: 100%;
	}

	.contact-page .section_hero-form .padding-vertical-form {
		display: flex;
		flex-flow: column;
		grid-row-gap: 1.75rem;
		grid-column-gap: 1.75rem;
	}

	.contact-page .section_hero-form .form-hero_container {
		width: 100%;
		max-width: 100%;
		height: auto;
		display: flex;
		flex-flow: column;
	}

	.contact-page .section_hero-form .form-hero_text-wrapper,
	.contact-page .section_hero-form .form-hero,
	.contact-page .contact_image-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.contact-page .section_hero-form .hero-form_image {
		width: 100%;
		height: auto;
		max-height: 28rem;
		object-fit: cover;
	}

	.contact-page .contact_image-wrapper {
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * About page — split layouts and fixed-width cards on tablet
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.main-wrapper .section_difference .flex-h-title.is-left {
		flex-flow: column;
		align-items: flex-start;
	}

	.main-wrapper .path_cards-wrapper {
		flex-flow: column;
		width: 100%;
	}

	.main-wrapper .path_card {
		width: 100%;
		max-width: 100%;
	}

	.main-wrapper .path_image {
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: cover;
	}

	.main-wrapper .difference_cards {
		flex-flow: column;
		grid-row-gap: 1.75rem;
		grid-column-gap: 1.75rem;
		width: 100%;
	}

	.main-wrapper .difference_card {
		width: 100%;
		max-width: 100%;
	}

	.main-wrapper .difference_line {
		width: 100%;
		height: 0.0625rem;
	}

	.main-wrapper .empowering_container {
		flex-flow: column;
		align-items: stretch;
	}

	.main-wrapper .empowering_image {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 28rem;
		object-fit: cover;
	}
}