/* ==========================================================================
   RESPONSIVE  -  breakpoint refinements
   --------------------------------------------------------------------------
   The layout is mobile-first and mostly fluid (clamp + auto-fit grids), so
   this file only holds the changes that genuinely need a breakpoint - chiefly
   swapping the mobile progress bar for the desktop navigation rail. Chrome
   adjustments for small screens live beside their components in components.css.

   Breakpoints
     Mobile        320  - 575
     Large mobile  576  - 767
     Tablet        768  - 1023
     Desktop       1024 - 1439
     Large desktop 1440+
   ========================================================================== */

/* ==========================================================================
   Mobile first defaults  (320px+)
   ========================================================================== */

.section {
	/* Clears the fixed progress bar when an anchor lands on a section top. */
	scroll-margin-top: 4px;
}

.section__head {
	margin-bottom: var(--space-lg);
}

/* Long unbroken strings (URLs, emails) must never widen the page. */
.section__intro,
.card__text,
.profile-footer__copy {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Large mobile  (576px+)
   ========================================================================== */

@media (min-width: 576px) {
	.section__head {
		margin-bottom: var(--space-xl);
	}
}

/* ==========================================================================
   Tablet  (768px+)
   ========================================================================== */

@media (min-width: 768px) {
	.section__title {
		max-width: 18ch;
	}

	.profile-footer__inner {
		flex-wrap: nowrap;
	}
}

/* ==========================================================================
   Desktop  (1024px+)
   Rail in, mobile indicators out.
   ========================================================================== */

@media (min-width: 1024px) {
	.profile-nav {
		display: flex;
	}

	.profile-progress {
		display: none;
	}

	.section__head {
		margin-bottom: var(--space-2xl);
	}
}

/* ==========================================================================
   Large desktop  (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
	:root {
		--section-padding-y: clamp(5rem, 8vh + 2rem, 9rem);
	}
}

/* ==========================================================================
   Short viewports
   Laptops at 1366x768 and browser zoom must not force a section taller than
   its content needs. Drop the vertical centring and let the page breathe.
   ========================================================================== */

@media (min-width: 1024px) and (max-height: 720px) {
	.section {
		min-height: auto;
		padding-block: var(--space-2xl);
	}

}

/* ==========================================================================
   Landscape phones
   ========================================================================== */

@media (max-width: 900px) and (orientation: landscape) {
	:root {
		--section-padding-y: clamp(2.5rem, 12vh, 4rem);
	}
}

/* ==========================================================================
   Coarse pointers  -  hover styling that would stick on touch
   ========================================================================== */

@media (hover: none) {
	.card--interactive:hover {
		transform: none;
		box-shadow: none;
		border-color: var(--hairline);
	}

	.btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   Print  -  the profile as a leave-behind document
   ========================================================================== */

@media print {
	.profile-header,
	.profile-nav,
	.profile-progress,
	.scroll-cue,
	.skip-link {
		display: none !important;
	}

	.section {
		min-height: auto;
		page-break-inside: avoid;
		break-inside: avoid;
		padding-block: var(--space-lg);
	}

	.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}