/* Small Group Journeys: Frequently Asked Questions (Figma 244:889, mobile 229:537).
 *
 * Reuses the live .ot-section.text-media pattern with the live accordion
 * (details.collapsible-item, its +/- toggle and its slide animation all come
 * from assets/css/live/sections.css). Native <details>, so it needs no
 * JavaScript. Port this file to astra-child with the section markup. */

.ot-section.text-media.g--sgj-faq .ot-section__media picture {
	display: block;
	height: 100%;
}

/* Desktop: the copy and the photo both start at the top; the photo is a fixed
 * 1070px tall (the live pattern centres them and makes photos 3:4). */
@media (min-width: 990px) {
	.ot-section.text-media.g--sgj-faq .ot-section__container {
		align-items: start;
	}

	.ot-section.text-media.g--sgj-faq .ot-section__media {
		width: 100%;
		height: 1070px;
		max-height: none;
		aspect-ratio: auto;
	}
}

/* Mobile: no photo, as designed; left-aligned copy with 20px between the
 * heading, the button and the questions, 20px from the testimonials card. */
@media (max-width: 989px) {
	.ot-section.text-media.g--sgj-faq .ot-section__media {
		display: none;
	}

	.ot-section.text-media.g--sgj-faq .ot-section__container {
		align-items: stretch;
		padding-top: 20px;
	}

	.ot-section.text-media.g--sgj-faq .js-text-media-content-wrapper {
		align-items: flex-start;
		margin-top: 0;
	}

	.ot-section.text-media.g--sgj-faq .ot-section__content {
		margin-top: 0;
		text-align: left;
	}

	.ot-section.text-media.g--sgj-faq .ot-section__buttons,
	.ot-section.text-media.g--sgj-faq .collapsible-items {
		margin-top: 20px;
	}
}