/* AudioSpillage — responsive layer
   =====================================================================
   Loaded LAST, so every rule here overrides the desktop cascade without
   editing it. Delete this one <link> and the site reverts to the fixed
   1000px layout exactly as it was.

   Approach: fluid first, breakpoints only where something genuinely breaks.
   The single root cause of the old mobile failure was
   `.row { width: 1000px }` in audiospillage.css — the document measured
   1030px wide at every viewport. Making .row fluid fixes the bulk; the
   breakpoint below only handles what fluidity alone cannot (columns that
   are percentages of a row too narrow to hold them).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fluid page container — the core fix, no media query needed.
   --------------------------------------------------------------------- */
.row {
	width: 100%;
	max-width: 1000px;
}

/* Images already carry max-width:100% from the base; these are the fixed-px
   stragglers that would otherwise force horizontal scroll. */
.testimonials .tstMacUpdate,
.currencySelect {
	max-width: 100%;
}

/* ---------------------------------------------------------------------
   2. Below 1060px: stack.

   Why 1060 and not the usual 768: the header logo needs 215px of content
   (an 83px background-SVG inset plus the wordmark) inside a column that is
   only 170px wide at the 1000px design width. It has ALWAYS overflowed --
   the original fixed-width site does it too -- but the overflow lands in the
   page margin either side of the centred row, so it is invisible.

   Solving for when that overflow stops fitting in the margin:
       (vw - 1000)/2 + 1030  >  vw   =>   vw < 1060
   so below 1060px it becomes real horizontal scroll. Stacking there also
   resolves the 768px cases (cramped columns, elecktroid's inline 570px
   jPlayer widths) with a single breakpoint rather than three.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 1059px) {

	/* --- grid: one column, no offsets, no floats --- */
	.column,
	.columns {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	[class*="column"] + [class*="column"]:last-child {
		float: none !important;
	}
	.row .row {
		margin-left: 0;
		margin-right: 0;
	}

	/* Stacked columns butt together with zero separation — the desktop grid
	   relied entirely on horizontal gutters for spacing. */
	.row > .column,
	.row > .columns {
		margin-bottom: 1.75rem;
	}
	/* `large-1 columns` holds just &nbsp; on every page that uses it (verified:
	   9 occurrences, all empty). It exists purely to create horizontal offset
	   in the 10-column grid; stacked, it is an empty row.
	   Targeted by class rather than :not(:has(> *)) so this works on Safari
	   below 15.4 — the site advertises macOS 10.9+ support. */
	.row > .large-1.columns {
		display: none;
	}
	header .row > .columns,
	footer .row > .columns {
		margin-bottom: 0;
	}

	/* --- header: logo first, then one condensed row of links --- */
	header {
		margin-bottom: 2rem;
	}
	header .row:first-child {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}
	header .row:first-child > .columns {
		width: auto !important;
		padding-right: 1em;
	}
	header .row:first-child > .columns:last-child {
		order: -1;                 /* logo + tagline above the links */
		width: 100% !important;
		padding-right: 0.9375em;
	}
	header .nav,
	header .instruments {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0;
		margin-bottom: 0.5rem;
		font-size: 1rem;           /* condensed from 1.125rem */
	}
	/* Spacing via margin rather than flex `gap`: gap in flexbox needs
	   Safari 14.1+, and this site advertises macOS 10.9+ support. */
	header .nav li,
	header .nav > a,
	header .instruments {
		margin-right: 1em;
	}
	/* The logo art hangs 85px into the left gutter via `left: -85px`, which
	   only works while the row is centred in a wider viewport. Neutralise the
	   hang here ONLY -- doing it globally shifts the desktop logo 83px right. */
	header .logo a {
		left: 0;
	}
	.columns h1.logo {
		margin: 0 0 0.25rem 0;
	}
	.tagline {
		margin-bottom: 1rem;
	}
	/* The dashed rules under the header are decorative and read as clutter
	   once the nav wraps. */
	header .row:nth-child(2) {
		display: none;
	}

	/* --- typography: ease the display sizes down --- */
	h1 {
		font-size: 2rem;
		line-height: 2.125rem;
		margin-top: 2rem;
	}
	h2 {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.shopPrice {
		font-size: 2rem;
	}
	.homeMoreLink {
		font-size: 1.5rem;
	}

	/* --- testimonials: the pull-quotes are sized for a 1000px grid --- */
	.tstResAdvisor,
	.tstCompMusic {
		font-size: 1.75rem;
		line-height: 1.9rem;
	}
	.resAdvisorRating {
		left: 0;                   /* was 18rem — 288px of displacement */
		width: auto;
	}
	.tstResAdvisorCredit {
		margin-left: 0;            /* hanging indent overflows when narrow */
		padding-left: 0;
	}
	.hangTst,
	.tstCompMusic .hangTst {
		left: 0;
	}

	/* --- synth model list: each entry plays a sound on click, but the play
	       icon only appears on :hover, which never fires on touch. Show it
	       permanently so the models read as playable. --- */
	.synthModels a dt span {
		padding-right: 1rem;
		background-image: url(../img/sound-play.svg);
		background-repeat: no-repeat;
		background-position: right 0.1875rem;
	}

	/* --- product feature panels: the art is absolutely positioned and
	       collapses to zero height once its column stacks --- */
	.featureImage {
		position: relative;
		height: 120px;
		background-size: contain;
		background-position: left center;
	}
	/* Source order puts the art ABOVE the text in panels 1 and 3 and below it
	   in panel 2. Force it below the copy consistently. The art always lives in
	   a `large-4` column and the copy in a `large-5` one (verified across all
	   three product pages), so this needs no :has(). */
	.productFeature .row {
		display: flex;
		flex-direction: column;
	}
	.productFeature .row > .large-4.columns {
		order: 2;
		margin-bottom: 0;
	}
	.productFeature .large-5.columns[style] {
		text-align: left !important;   /* undo the desktop right-alignment */
	}
	.featureArrow {
		display: none;
	}

	/* --- DAW compatibility panel --- */
	.compatCol1,
	.compatCol2,
	.compatCol3 {
		width: 100%;
	}
	.compatabilityPanel {
		padding: 1.5rem;
	}

	/* --- other-instruments teasers: reserve space for the icon art --- */
	.otherInst a {
		padding-top: 8rem;
		background-size: contain;
	}

	/* --- demo popup: 40% + 50px padding leaves ~150px of text at 375px --- */
	.popup {
		width: 90%;
		max-width: 90%;
		padding: 1.5rem;
		box-sizing: border-box;
	}

	/* --- FAQ back-to-top sits over the content once the page narrows --- */
	.faqTopLink {
		width: 48px;
		height: 48px;
		margin-top: 12px;
		margin-left: 12px;
		background-size: 48px;
	}

	/* --- audio players: jplayer is a fixed 265px sprite widget, and
	       elecktroid.html hard-codes 570px/530px as INLINE styles, so these
	       need !important to win. --- */
	div.jp-audio,
	div.jp-audio div.jp-type-single,
	div.jp-interface {
		max-width: 100% !important;
		width: 100% !important;
	}
	div.jp-audio ul.jp-controls {
		width: 100% !important;
	}
	.jp-title {
		min-width: 0 !important;
		width: auto !important;
		padding-left: 8px !important;
		margin-left: 8px !important;
	}

	/* --- footer --- */
	.footerDashes {
		display: none;
	}
	.copyright {
		margin-bottom: 1.25rem;
	}
}