/* Custom overrides for FIT CLINIC — loaded after main.css */

/* Text column width ------------------------------------------------------ */

/* Sections are a "header | content" grid of 50vw + 50vw. The header holds the
   text and is right-aligned into its column, with generous internal padding:
   35rem wide minus 10rem/5rem padding leaves only 20rem of text (17rem in the
   description sub-sections).

   We widen the text by trimming ONLY the left padding, never the right.
   padding-right is load-bearing: it sets the heading's right edge, and the
   dash/dot markers hang off that edge (right: -5rem / -2.5rem) to meet the
   vertical rule, which main.css pins independently at left: calc(50vw - 5rem).
   Changing padding-right desynchronises the two and breaks the line.
   padding-left has no decoration attached — with text-align:right it only ever
   capped the maximum line length — so all the gain comes from there.

   The intro is excluded via :not(.intro). Regular sections pin their vertical
   rule with left: calc(50vw - 5rem), which ignores padding, but the intro
   overrides that with left:auto + margin-left, so its rule falls back to the
   pseudo-element's STATIC position — the header's content-box left edge, which
   padding-left moves. Trimming the intro's padding slides its rule out of line
   with every other section's and splits the continuous vertical line in two. */

/* Step 1: reclaim all of the left padding. Higher specificity than main.css's
   padding shorthand, so this holds at every breakpoint, and below 1152px
   main.css zeroes the padding anyway. */

	#wrapper section:not(.intro) > header {
		padding-left: 0;
	}

/* Step 2: widen the header box itself for the rest of the gain. justify-self:
   end pins the right edge at 50vw, so the box grows leftward only and no
   decoration moves. The vw cap is what keeps it inside its own 50vw column:
   this breakpoint starts at 1281px, where 50vw is just ~37rem, so a flat 38rem
   would overflow off-screen on a 1281–1400px window. min() takes the vw value
   there and the rem value on wider screens.

   Guarded with min-width so it can never leak into the stacked single-column
   layouts below 1152px, where main.css sets these headers to width: 100%. */

	@media screen and (min-width: 1281px) {

		#wrapper > section:not(.intro) > header {
			width: min(38rem, 48vw);
		}

		#wrapper > section > .content > section > header {
			width: min(35rem, 45vw);
		}

	}

/* Logo ------------------------------------------------------------------ */

/* main.css already sizes the logo responsively via a higher-specificity
   selector, and the intro's padding is now left untouched, so the logo needs
   no width pinning — only the height. */

	#wrapper > section.intro > header > .logo {
		height: auto;
	}

/* Intro tagline ---------------------------------------------------------- */

/* main.css pins every intro header child to a fixed 20rem/21rem column,
   which forces the tagline to wrap. Size it to its own content instead so
   it stays on one line when it fits, capped to the logo's width so it never
   breaks out of the intro column. */

	#wrapper > section.intro > header > .tagline {
		width: max-content;
		max-width: 32rem;
		text-wrap: balance;
	}

	@media screen and (max-width: 1280px) {

		#wrapper > section.intro > header > .tagline {
			max-width: 30rem;
		}

	}

/* Below 1152px main.css gives the header children full width; let the
   tagline do the same rather than sitting in a narrow max-content box. */

	@media screen and (max-width: 1152px) {

		#wrapper > section.intro > header > .tagline {
			width: 100%;
			max-width: none;
		}

	}

/* Map -------------------------------------------------------------------- */

/* .map-container had no styles at all, so the iframe fell back to its HTML
   width/height attributes and never scaled with the column. */

	.map-container {
		position: relative;
		width: 100%;
		aspect-ratio: 4 / 3;
		max-height: 32rem;
		overflow: hidden;
		background-color: #f4f4f4;
	}

		.map-container iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}

	@media screen and (max-width: 736px) {

		.map-container {
			aspect-ratio: 1 / 1;
		}

	}

/* Section copy ----------------------------------------------------------- */

/* Justify the descriptive paragraphs. Hyphenation keeps justified text from
   opening up rivers of whitespace in the narrow columns. */

	#wrapper > section > .content > p,
	#wrapper > section > .content > section > header > p {
		text-align: justify;
		hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
	}

/* Below the tablet breakpoint the columns get too narrow for justification
   to look good, so fall back to ragged-right. */

	@media screen and (max-width: 736px) {

		#wrapper > section > .content > p,
		#wrapper > section > .content > section > header > p {
			text-align: left;
		}

	}