/*
 * Fixes for narrow screens.
 *
 * The page CSS keeps boxed sections at 1290px but gives them almost no space at
 * the sides, so on a laptop or a tablet the logo, the headings and the footer
 * touch the edge of the screen. This file gives them a gutter and straightens
 * the few blocks that break below 1024px.
 */
:root {
	--site-gutter: clamp(16px, 3vw, 40px);
}

/* Laptops and tablets: a gutter on every boxed section of the page, header and footer. */
@media (min-width: 768px) and (max-width: 1340px) {
	.content-block.top-level > .content-block.container-boxed {
		padding-left: var(--site-gutter);
		padding-right: var(--site-gutter);
	}

	.content-block.right-guidance-section-unlock-future-fourth {
		padding-left: var(--site-gutter);
	}
}

/* Tablets and phones: the first screen. */
@media (max-width: 1024px) {
	/* The "Top Degree Programs" tab stays on one line, so it sits above the list instead of over it. */
	.page-home .content-block.heading-top-degree-programs .heading-title {
		white-space: nowrap;
	}

	.page-home .content-block.unlock-future-section-top-degree-programs-second,
	.page-home .content-block.heading-top-degree-programs {
		width: max-content;
		max-width: none;
	}

	.page-home .content-block.heading-top-degree-programs {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* The degrees list keeps all four degrees in one row. */
	.page-home .content-block.section-mba-mca-bba,
	.page-home .content-block.list-mba-mca-bba {
		width: auto;
		max-width: 100%;
	}

	.page-home .content-block.list-mba-mca-bba .icon-list-items {
		flex-wrap: nowrap;
	}

	.page-home .content-block.list-mba-mca-bba .icon-list-text {
		white-space: nowrap;
	}
}

/* Laptops, tablets and phones: the two hero buttons keep their text on one line and wrap to a second row when they do not fit. */
@media (max-width: 1200px) {
	.page-home .content-block.section-find-college-free {
		flex-wrap: wrap;
		gap: 10px;
	}

	.page-home .content-block.button-find-college .site-button,
	.page-home .content-block.section-find-college-free .site-button {
		padding-left: 24px;
		padding-right: 24px;
		white-space: nowrap;
	}
}

/* Tablets: the hero text gets more of the picture, so the degrees and both buttons fit in a row. */
@media (min-width: 600px) and (max-width: 1024px) {
	.page-home .content-block.right-guidance-section-unlock-future-fourth {
		width: 72%;
	}
}

/* Phones. */
@media (max-width: 767px) {
	/* "Latest Updates" takes the whole row, so the word is not broken in two. */
	.page-home .content-block.section-latest-updates-fourth {
		flex: 1 1 100%;
		width: 100%;
	}

	.page-home .content-block.heading-latest-updates .heading-title {
		text-align: center;
	}

	/* The admission steps bar gets the width of the screen instead of 245px, so no step name is cut off. */
	.page-home .content-block.section-choosing-right-college-first {
		padding-left: 16px;
		padding-right: 16px;
	}

	.page-home .content-block.section-choosing-right-college-second {
		padding-left: 0;
		padding-right: 0;
	}

	/* Lines of text that ran to the very edge of the screen. */
	.page-home .content-block.text-applying-dream-colleges,
	.footer-template .content-block.section-more-explore-first {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/*
 * The "Free Career Counselling" popup is a fixed 500px wide, which is wider than
 * a phone. The popup script writes that width and a left position straight on
 * the popup, so on a phone they are overridden here and the popup is centred.
 */
@media (max-width: 540px) {
	.modal-container.size-custom {
		left: 50% !important;
		width: calc(100% - 24px) !important;
		max-width: 500px;
		margin-left: 0;
		transform: translateX(-50%);
	}
}

/*
 * While a popup is open, the popup CSS pads the whole page by 15px on the right
 * to make up for the scrollbar it hides. A phone has no scrollbar to make up
 * for, so on touch screens that padding only showed as a white strip.
 */
@media (pointer: coarse) {
	html.modal-open.modal-open-overlay.modal-open-scrollable body > :not([aria-modal="true"]) {
		padding-right: 0 !important;
	}
}

/*
 * Two things stuck out of the right edge of a phone screen. The phone and email
 * list in the top bar has a negative margin on both sides, and the side arrows of
 * the "Industry Led Certifications" carousel sit 13px outside it. A page wider
 * than the screen makes the phone zoom out and show a white strip, so both are
 * pulled back inside.
 */
@media (max-width: 767px) {
	.content-block.section-we-re-favourite-first .icon-list-items.inline-items {
		margin-right: 0 !important;
	}

	/* The side arrows of this carousel are placed outside it; the other carousels keep theirs. */
	.page-home .content-block.carousel-industry-led-certifications .site-swiper-button-prev {
		left: 0 !important;
	}

	.page-home .content-block.carousel-industry-led-certifications .site-swiper-button-next {
		right: 0 !important;
	}
}

/*
 * Whatever still reaches past the right edge of the page, such as the hidden
 * desktop menu behind the menu button on a tablet, is cut off there instead of
 * widening the page. "clip" does that without making the page a scroll box, so
 * a sticky header keeps working.
 */
#page {
	overflow-x: clip;
}

/*
 * The affiliations carousel keeps a 73px space at both sides so the next card
 * shows on a desktop. On a phone that left a card only 169px wide, and its long
 * text made every card almost 950px tall. The space is a thin one on a phone, so
 * a card has nearly the whole width and the next card still shows a little.
 */
@media (max-width: 767px) {
	.page-home .content-block.carousel-swami-vivekanand-university {
		--carousel-swiper-offset-size: 24px;
	}
}

/*
 * Two sections of the counseling page have a space on the left only (35px and
 * 50px), which is fine in the middle of a wide screen. On a tablet or a phone it
 * pushed their cards and text to the right, so the space is the same at both sides.
 */
@media (max-width: 1024px) {
	.page-counseling .content-block.section-confused-about-process-first,
	.page-counseling .content-block.section-academic-excellence-first {
		padding-left: 6px;
		padding-right: 6px;
	}
}