/* Multiple Content Type Section
 * Mobile (<768): every group stacked, mobile fonts.
 * Tablet (768–1023): stacked, desktop fonts.
 * 1024+: image/content side by side, boxes side by side, cards in 3 columns, buttons in a row.
 */
.multiple-content-type-section {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 20px;
	background-color: #FFFFFF;
}

.multiple-content-type-section .mct-group {
	width: 100%;
}

/* Shared text */
.multiple-content-type-section .mct-ic-title,
.multiple-content-type-section .mct-tb-title,
.multiple-content-type-section .mct-cg-title,
.multiple-content-type-section .mct-lg-title {
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-weight: 800;
	text-align: center;
	text-transform: capitalize;
}

/* 1. Two column image & content */
.multiple-content-type-section .mct-image-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.multiple-content-type-section .mct-ic-media {
	overflow: hidden;
	border-radius: 24px;
}

.multiple-content-type-section .mct-ic-media img {
	display: block;
}

.multiple-content-type-section .mct-ic-media .mct-ic-desktop-image {
	display: none;
}

/* Full-row mobile image: complete, uncropped (rule #7). */
.multiple-content-type-section .mct-ic-mobile-image {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.multiple-content-type-section .mct-ic-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.multiple-content-type-section .mct-ic-title {
	color: #000000;
	font-size: 32px;
	line-height: 40px;
}

.multiple-content-type-section .mct-ic-text,
.multiple-content-type-section .mct-ic-text p {
	margin: 0;
	color: #404040;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.multiple-content-type-section .mct-ic-text p + p {
	margin-top: 24px;
}

.multiple-content-type-section .mct-ic-text a,
.multiple-content-type-section .mct-ic-text a:visited {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: underline;
}

.multiple-content-type-section .mct-ic-text a:hover {
	text-decoration: none;
}

/* 2. Two boxed content */
.multiple-content-type-section .mct-two-boxed {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.multiple-content-type-section .mct-tb-title {
	color: #3089BC;
	font-size: 26px;
	line-height: 34px;
}

.multiple-content-type-section .mct-tb-boxes {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.multiple-content-type-section .mct-tb-box {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	filter: drop-shadow(12px 12px 20px rgba(64, 114, 145, 0.2));
}

.multiple-content-type-section .mct-tb-head,
.multiple-content-type-section .mct-tb-cell {
	padding: 16px 24px;
	font-family: 'Lato', sans-serif;
}

.multiple-content-type-section .mct-tb-head {
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
	text-transform: capitalize;
}

.multiple-content-type-section .mct-tb-box-left .mct-tb-head {
	background: #6BBC9F;
}

.multiple-content-type-section .mct-tb-box-right .mct-tb-head {
	background: #317088;
}

.multiple-content-type-section .mct-tb-cell {
	background: #FFFFFF;
	font-size: 16px;
	line-height: 24px;
}

.multiple-content-type-section .mct-tb-cell:nth-child(even) {
	background: #F4F4F4;
}

.multiple-content-type-section .mct-tb-box-left .mct-tb-cell {
	color: #000000;
	font-weight: 700;
}

.multiple-content-type-section .mct-tb-box-right .mct-tb-cell {
	color: #404040;
	font-weight: 400;
}

/* 3. Three column card grid */
.multiple-content-type-section .mct-card-grid {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.multiple-content-type-section .mct-cg-header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
}

.multiple-content-type-section .mct-cg-title {
	color: #000000;
	font-size: 26px;
	line-height: 34px;
}

.multiple-content-type-section .mct-cg-description {
	margin: 0;
	color: #404040;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.multiple-content-type-section .mct-cg-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.multiple-content-type-section .mct-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 12px 12px 40px 0 rgba(64, 114, 145, 0.2);
}

.multiple-content-type-section .mct-card-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.multiple-content-type-section .mct-card-icon {
	display: block;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
}

.multiple-content-type-section .mct-card-title {
	margin: 0;
	color: #000000;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	text-align: left;
	text-transform: none;
}

.multiple-content-type-section .mct-card-text {
	margin: 0;
	color: #404040;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

/* 4. Logo gallery: every logo in the same box (rule #23). */
.multiple-content-type-section .mct-logo-gallery {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.multiple-content-type-section .mct-lg-title {
	color: #000000;
	font-size: 24px;
	line-height: 34px;
	text-transform: none;
}

.multiple-content-type-section .mct-lg-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.multiple-content-type-section .mct-lg-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 105px;
	width: 105px;
	height: 90px;
	margin: 0;
	padding: 0;
}

.multiple-content-type-section .mct-lg-logo::before {
	display: none;
}

.multiple-content-type-section .mct-lg-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: contain;
}

/* 5. Buttons */
.multiple-content-type-section .mct-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.multiple-content-type-section .mct-btn,
.multiple-content-type-section .mct-btn:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 66px;
	box-sizing: border-box;
	padding: 16px 20px;
	border-radius: 200px;
	color: #FFFFFF;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0.36px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 200ms ease;
}

.multiple-content-type-section .mct-btn-book,
.multiple-content-type-section .mct-btn-book:visited {
	background: #317088;
}

.multiple-content-type-section .mct-btn-book:hover,
.multiple-content-type-section .mct-btn-book:focus-visible {
	background: #6BBC9F;
	color: #FFFFFF;
}

.multiple-content-type-section .mct-btn-whatsapp,
.multiple-content-type-section .mct-btn-whatsapp:visited {
	background: linear-gradient(0deg, #25B43C 0%, #25D366 100%);
}

.multiple-content-type-section .mct-btn-whatsapp:hover,
.multiple-content-type-section .mct-btn-whatsapp:focus-visible {
	background: #1C9230;
	color: #FFFFFF;
}

.multiple-content-type-section .mct-btn:focus-visible {
	outline: 2px solid #317088;
	outline-offset: 2px;
}

.multiple-content-type-section .mct-btn-icon {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
}

/* Tablet and up: desktop fonts. */
@media screen and (min-width: 768px) {
	.multiple-content-type-section {
		gap: 60px;
		padding: 60px 40px;
	}

	.multiple-content-type-section .mct-ic-media {
		border-radius: 40px;
	}

	.multiple-content-type-section .mct-ic-title {
		font-size: 46px;
		line-height: 54px;
	}

	.multiple-content-type-section .mct-ic-text,
	.multiple-content-type-section .mct-ic-text p,
	.multiple-content-type-section .mct-cg-description,
	.multiple-content-type-section .mct-card-text {
		font-size: 18px;
		line-height: 26px;
	}

	.multiple-content-type-section .mct-ic-text p + p {
		margin-top: 26px;
	}

	.multiple-content-type-section .mct-tb-title {
		color: #317088;
		font-size: 38px;
		line-height: 46px;
	}

	.multiple-content-type-section .mct-tb-head,
	.multiple-content-type-section .mct-tb-cell {
		padding: 24px 32px;
	}

	.multiple-content-type-section .mct-tb-head {
		font-size: 20px;
		line-height: 28px;
	}

	.multiple-content-type-section .mct-tb-cell {
		font-size: 18px;
		line-height: 26px;
	}

	.multiple-content-type-section .mct-card-grid,
	.multiple-content-type-section .mct-logo-gallery {
		gap: 50px;
	}

	.multiple-content-type-section .mct-cg-title {
		font-size: 38px;
		line-height: 46px;
	}

	.multiple-content-type-section .mct-card-title {
		font-size: 20px;
		line-height: 28px;
	}

	.multiple-content-type-section .mct-lg-title {
		font-size: 32px;
		line-height: 40px;
	}

	.multiple-content-type-section .mct-lg-logos {
		gap: 30px;
	}

	.multiple-content-type-section .mct-lg-logo {
		flex-basis: 140px;
		width: 140px;
		height: 120px;
	}
}

/* Desktop layouts */
@media screen and (min-width: 1024px) {
	/* 1. Image beside content; image follows the content height, 350–600px, top-aligned when capped (rule #1). */
	.multiple-content-type-section .mct-image-content {
		flex-direction: row;
		align-items: stretch;
		gap: 60px;
	}

	.multiple-content-type-section .mct-image-content.img-right {
		flex-direction: row-reverse;
	}

	.multiple-content-type-section .mct-ic-media,
	.multiple-content-type-section .mct-ic-content {
		flex: 1 1 0;
		min-width: 0;
	}

	.multiple-content-type-section .mct-ic-media {
		position: relative;
		min-height: 350px;
		max-height: 600px;
	}

	.multiple-content-type-section .mct-ic-media .mct-ic-desktop-image {
		position: absolute;
		inset: 0;
		display: block;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover;
	}

	.multiple-content-type-section .mct-ic-media .mct-ic-mobile-image {
		display: none;
	}

	.multiple-content-type-section .mct-ic-content {
		justify-content: center;
		padding: 20px 0;
	}

	.multiple-content-type-section .mct-ic-title,
	.multiple-content-type-section .mct-ic-text,
	.multiple-content-type-section .mct-ic-text p {
		text-align: left;
	}

	/* 2. Boxes side by side; rows line up across both boxes. */
	.multiple-content-type-section .mct-tb-boxes {
		display: grid;
		grid-template-columns: 38.846% minmax(0, 1fr);
		column-gap: 20px;
		row-gap: 0;
		padding: 0 6.667%;
	}

	.multiple-content-type-section .mct-tb-box {
		display: grid;
		grid-template-rows: subgrid;
	}

	/* 3. Three columns. */
	.multiple-content-type-section .mct-cg-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0 4.167%;
	}

	.multiple-content-type-section .mct-card {
		gap: 6px;
	}

	.multiple-content-type-section .mct-card-head {
		flex-direction: column;
		gap: 24px;
	}

	.multiple-content-type-section .mct-card-title {
		text-align: center;
		text-transform: capitalize;
	}

	/* 5. Buttons in a row. */
	.multiple-content-type-section .mct-buttons {
		flex-direction: row;
		justify-content: center;
	}

	.multiple-content-type-section .mct-btn,
	.multiple-content-type-section .mct-btn:visited {
		/* Figma: 420px each; never grows with the screen, can shrink on narrower desktops. */
		flex: 0 1 420px;
		min-height: 74px;
		white-space: nowrap;
	}
}

@media screen and (min-width: 1280px) {
	.multiple-content-type-section {
		padding: 100px 8.333%;
	}
}

/* Tablet: buttons keep their Figma size (not full width), side by side and centered. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.multiple-content-type-section .mct-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.multiple-content-type-section .mct-btn,
	.multiple-content-type-section .mct-btn:visited {
		flex: 0 0 auto;
		min-height: 74px;
		padding: 24px 32px;
		white-space: nowrap;
	}

	.multiple-content-type-section .mct-btn-whatsapp,
	.multiple-content-type-section .mct-btn-whatsapp:visited {
		padding: 20px 32px 20px 24px;
	}
}

/* Mobile logos: Figma rows of 2 / 3 / 2. Two full-width line breaks (after logo 2 and logo 5)
 * force the wraps and act as the 16px row spacing. */
@media screen and (max-width: 767px) {
	.multiple-content-type-section .mct-lg-logos {
		row-gap: 0;
	}

	.multiple-content-type-section .mct-lg-logos::before,
	.multiple-content-type-section .mct-lg-logos::after {
		content: '';
		flex-basis: 100%;
		height: 16px;
	}

	/* Three logos always fit the middle row: boxes scale with the screen, up to Figma's 105 x 90. */
	.multiple-content-type-section .mct-lg-logo {
		flex: 0 0 calc((100% - 20px) / 3);
		width: auto;
		max-width: 105px;
		height: auto;
		aspect-ratio: 105 / 90;
	}

	.multiple-content-type-section .mct-lg-logo:nth-child(-n+2) {
		order: 1;
	}

	.multiple-content-type-section .mct-lg-logos::before {
		order: 2;
	}

	.multiple-content-type-section .mct-lg-logo:nth-child(n+3):nth-child(-n+5) {
		order: 3;
	}

	.multiple-content-type-section .mct-lg-logos::after {
		order: 4;
	}

	.multiple-content-type-section .mct-lg-logo:nth-child(n+6) {
		order: 5;
	}
}