/* ============================================================================
   50-atsl-style-responsive.css — Phase 7 responsive layer
   ============================================================================
   Everything in this file lives inside max-width media queries: desktop
   rendering (> 1024px) is untouched. The template emits stylesheet links in
   raw readdir() order (NOT sorted), so load order is unreliable — rules here
   win by higher specificity (#container.header-new, html body #wrapper) and
   !important, never by position in the cascade.

   Breakpoints:
     1024px — unlock the fixed 1000px frame, un-absolute the header/menu
      768px — stack the float columns, hamburger menu, readable font sizes

   The .js / .menu-open / .open classes are set by js/10-atsl-script-menu.js.
   Without JS the menu renders fully expanded (progressive enhancement) —
   never hide the nav unless the .js class is present.
   ============================================================================ */

/* ------------------------------------------------------------------ */
/* 1024px — fluid frame                                               */
/* ------------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {

	html body {
		background: white;
	}

	html body #wrapper {
		width: auto !important;
		max-width: 1000px;
		padding: 0 10px;
	}

	#wrapper #row {
		width: auto !important;
		max-width: 100%;
	}

	/* the header area: logo + navtop flow normally, menu leaves the
	   absolute slot reserved by #navtop's 240px bottom padding */
	html body #navtop {
		padding-bottom: 10px !important;
	}

	/* the "Time Matters" banner: a 1000px absolutely-positioned div with a
	   background image — the single element that forced horizontal scroll
	   at every mobile width (and painted over the hamburger button) */
	#wrapper #header {
		position: static !important;
		width: auto !important;
		max-width: 100%;
		background-size: cover;
		background-position: left center; /* the "Time Matters" text starts at the artwork's left edge */
	}

	#wrapper #logo {
		position: static !important;
		width: auto !important;
	}

	#container.header-new {
		position: static !important;
		width: auto !important;
		padding: 0 !important;
	}

	/* images never overflow the viewport (HTML width attrs lose to CSS) */
	#wrapper #row img {
		max-width: 100% !important;
		height: auto !important;
	}

	#wrapper #row iframe {
		max-width: 100% !important;
	}

	/* footers */
	#footer #copyright {
		width: auto !important;
	}

	#footer #index #colwrapper {
		width: auto !important;
	}

	/* footer logo block: was pushed right past the viewport edge */
	#index .__footer .col-right {
		margin: 15px auto !important;
		max-width: 100%;
	}

	#footer img {
		max-width: 100%;
		height: auto;
	}
}

/* ------------------------------------------------------------------ */
/* .fluid-col — right-hand column that shrinks with the fluid frame    */
/* ------------------------------------------------------------------ */
/* .singlecol is a fixed 858px float on desktop. Once the frame goes fluid
   (<= 1024px) it was clipped off the left edge / under the .nav between 769
   and 1024px. Opt-in by class because .singlecol is a cross-page container
   (category intros etc. have no .nav beside them). Used by pages/synchro/,
   the category intros, aboutus, library, carrier, register2 and contactus. */
@media only screen and (max-width: 1024px) {

	/* 142px nav column + the 15px of .singlecol side padding */
	#wrapper #row .singlecol.fluid-col {
		width: calc(100% - 157px);
	}

	/* breadcrumb bar (every page's 05-atsl-row-bar.php): fixed 843px + 15px
	   left padding, clipped off the left edge the same way. Generic, not opt-in. */
	#wrapper #row .bar {
		width: calc(100% - 157px);
	}

	/* aboutus: Word-export wrapper with its own fixed 843px */
	#wrapper #row .fluid-col .WordSection1 {
		width: auto;
	}

	/* `#row .singlecol img` adds 40px of side padding on top of max-width:100%,
	   so full-width images overflow by 40px; count the padding inside the
	   100%. Limited to images in paragraphs/cells/the Word wrapper/bare in the column (aboutus, library) — the
	   synchro intro clock is neither and keeps its size. */
	#wrapper #row .fluid-col p img,
	#wrapper #row .fluid-col td img,
	#wrapper #row .fluid-col .WordSection1 img,
	#wrapper #row .singlecol.fluid-col > img {
		box-sizing: border-box;
	}
}

/* ------------------------------------------------------------------ */
/* product pages — nav | text | banner as a grid at 769-1024px         */
/* ------------------------------------------------------------------ */
/* Desktop is three floats: .nav 142px + .productcol 480px + .bannercol 348px
   (843px of columns). .bannercol comes FIRST in the HTML, so once the frame
   shrinks and the pair no longer fits beside the nav, the banner photos took
   the top right and the product text dropped far below them. A grid lets the
   text go before the banner without touching the 31 product pages' HTML:
     921-1024px  nav | text | banner   (text/banner split 58/42, as 480/348)
     769-920px   nav | text, banner underneath the text
   Scoped to rows that contain a .productcol. The template's .clear div and
   the stray <br>s some rows start with get their own full-width rows so they
   can't land in a column. <= 768px is the existing stacked layout. */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#wrapper #row:has(> .productcol) {
		display: grid;
		grid-template-columns: 142px minmax(0, 1fr);
		grid-template-areas:
			"top top"
			"nav text"
			"nav banner"
			"clr clr";
		align-items: start;
	}

	#wrapper #row:has(> .productcol) > br {
		grid-area: top;
	}

	/* .bnav: interlabs' typo for .nav (no CSS of its own) */
	#wrapper #row:has(> .productcol) > .nav,
	#wrapper #row:has(> .productcol) > .bnav {
		grid-area: nav;
		float: none;
		width: auto;
	}

	#wrapper #row:has(> .productcol) > .productcol {
		grid-area: text;
		float: none;
		width: auto;
	}

	#wrapper #row:has(> .productcol) > .bannercol {
		grid-area: banner;
		float: none;
		width: auto;
	}

	#wrapper #row:has(> .productcol) > .clear {
		grid-area: clr;
	}
}

@media only screen and (min-width: 921px) and (max-width: 1024px) {
	#wrapper #row:has(> .productcol) {
		grid-template-columns: 142px minmax(0, 58fr) minmax(0, 42fr);
		grid-template-areas:
			"top top top"
			"nav text banner"
			"clr clr clr";
	}
}

/* ------------------------------------------------------------------ */
/* category teasers (.twocol) — fluid pair / single column             */
/* ------------------------------------------------------------------ */
/* Category pages (emulation, fieldtools, tapcatch, ...) float two 429px
   .twocol teasers side by side, right-aligned past the 142px nav column.
   Below ~1015px the pair no longer fits: it sat under the nav at ~900px and
   stacked as a right-aligned 429px strip at ~769px. Same left offset as
   .fluid-col; two across while each keeps >= ~380px, then one full-width
   teaser per row. The synchro .portfolio-card.twocol rules below win on
   specificity. 429 = (1000 - 142) / 2 including the 15px side padding. */
@media only screen and (max-width: 1024px) {
	#wrapper #row .twocol {
		width: calc(100% - 157px);
	}
}

@media only screen and (min-width: 921px) and (max-width: 1024px) {
	#wrapper #row .twocol {
		width: calc((100% - 142px) / 2 - 15px);
	}
}

/* ------------------------------------------------------------------ */
/* synchro portfolio (pages/synchro/) — card grid                      */
/* ------------------------------------------------------------------ */
/* Cards leave their fixed .twocol / .threecol widths for an auto-fill grid:
   3 across while 3 x 260px fit, then 2, then 1, with the icon above the text
   in every case. */
@media only screen and (max-width: 1024px) {

	#wrapper #row .portfolio-cards {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
		column-gap: 16px;
		align-items: start;
	}

	/* two long cards (emulation): 3 columns would leave the third empty and the
	   cards at ~270px, so two across at ~340px each, one column below that */
	#wrapper #row .portfolio-cards.two-up {
		grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	}

	#wrapper #row .portfolio-card.twocol,
	#wrapper #row .portfolio-card.threecol {
		width: auto;
		padding: 0 0 0 10px; /* lines the text up with the section headings */
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	#wrapper #row .portfolio-card img {
		align-self: center;
		flex: 0 0 auto;
	}}

/* Floated images (HTML align="left"/"right", 220-264px) beside text: below
   ~560px the column is too narrow to share and the text squeezes into a
   one-word sliver. Let them drop out of the float and centre above the text.
   Covers carrier's jobs.jpg, aboutus's product photo/ISO badges, the category
   intro images (emulation, tapcatch) and the .twocol teaser images. Only bare
   images in a .fluid-col and images inside a .twocol are touched. */
@media only screen and (max-width: 560px) {
	#wrapper #row .singlecol.fluid-col > img[align="right"],
	#wrapper #row .singlecol.fluid-col > img[align="left"],
	#wrapper #row .twocol img[align] {
		float: none;
		display: block;
		margin: 0 auto 15px auto;
	}
}

/* the 40px hero word "Synchronization" is ~320px wide, wider than a 320px
   phone's column; scoped to the portfolio page (.hero h1s elsewhere are
   shorter words) */
@media only screen and (max-width: 480px) {
	#wrapper #row .singlecol.fluid-col h1.hero {
		font-size: 32px;
	}
}

/* ------------------------------------------------------------------ */
/* 768px — single column, hamburger menu, readable text               */
/* ------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

	html body {
		font-size: 14px;
		line-height: 1.5;
	}

	html body th,
	html body td {
		font-size: 13px;
	}

	/* --- stack every float column ---------------------------------- */
	#wrapper #row .nav,
	#wrapper #row .twocol,
	#wrapper #row .threecol,
	#wrapper #row .singlecol,
	#wrapper #row .productcol,
	#wrapper #row .bannercol,
	#wrapper #row .news,
	#wrapper #row .bar,
	#wrapper #row .search {
		float: none !important;
		width: auto !important;
		max-width: 100%;
	}

	/* .nav is sticky on desktop (10-atsl-style-corp.css); stacked mobile
	   layout has no "beside long content" relationship for it to stick
	   within, so it must fall back to normal flow here. */
	#wrapper #row .nav {
		position: static !important;
	}

	/* .nav h2 (section titles: Product Kit, Blog Posts, etc.) is fixed at
	   13px on desktop and has no mobile override, so it gets left behind
	   by the 14px html body bump above — section titles end up smaller
	   than their own list items. Bump it back above body text. */
	#wrapper #row .nav h2 {
		font-size: 16px !important;
	}

	/* Product rows put .bannercol (photos/pull-quotes) before .productcol
	   (the actual product description) in the HTML — fine on desktop where
	   both float right side by side, but stacked on mobile it buries the
	   real content below a wall of images. Flex + order fixes the visual
	   order without touching any row HTML; harmless no-op on rows that
	   don't contain these classes (e.g. category/.twocol rows). */
	#wrapper #row {
		display: flex !important;
		flex-direction: column !important;
	}

	#wrapper #row .productcol {
		order: 1;
	}

	#wrapper #row .bannercol {
		order: 2;
	}

	#wrapper #row .singlecol img {
		padding: 0 !important;
	}

	/* synchro portfolio: no nav column to clear any more; the cards stay a grid
	   (see the max-width: 1024px block above) and the clock beside the first
	   paragraph drops to its own line */
	#wrapper #row .portfolio-cards {
		padding-left: 0 !important;
	}

	#wrapper #row .singlecol .intro-lead {
		flex-direction: column;
		align-items: flex-start;
	}

	#wrapper #row .singlecol .portfolio-intro p,
	#wrapper #row .singlecol .intro-lead p {
		text-align: left;
	}

	#wrapper #row .portfolio-card.twocol,
	#wrapper #row .portfolio-card.threecol {
		flex-direction: column !important;
		gap: 12px !important;
	}

	#wrapper #row .singlecol .intro-lead img {
		float: none !important;
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 0 10px 0;
	}

	/* --- tables scroll sideways instead of overflowing ------------- */
	#wrapper #row table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}

	/* --- forms ------------------------------------------------------ */
	fieldset .message {
		width: auto !important;
		max-width: 100%;
	}

	fieldset {
		height: auto !important;
	}

	/* --- menu: hamburger + tap-to-open submenus -------------------- */
	/* the toggle button is injected by 10-atsl-script-menu.js and only
	   shown at this breakpoint */
	#container.header-new .menu-toggle {
		display: block;
		width: 100%;
		padding: 12px 10px;
		border: 1px solid #30468f;
		border-radius: 4px;
		background: white;
		color: #30468f;
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		cursor: pointer;
	}

	/* collapsed by default — but only when JS is present */
	#container.header-new.js nav > ul {
		display: none !important;
	}

	#container.header-new.js.menu-open nav > ul {
		display: block !important;
	}

	#container.header-new nav ul li {
		display: block !important;
		margin: 0 !important;
		border-bottom: 1px solid #e0e0e0;
	}

	#container.header-new nav a {
		line-height: 44px !important;
		padding: 0 10px !important;
	}

	/* submenus: in-flow, opened per-item by the .open class (JS) or
	   left visible when JS is absent */
	#container.header-new nav ul ul {
		position: static !important;
		top: auto !important;
	}

	#container.header-new.js nav ul ul {
		display: none !important;
	}

	#container.header-new.js nav ul li.open > ul {
		display: block !important;
	}

	#container.header-new nav ul ul li {
		border-bottom: none;
	}

	#container.header-new nav ul ul ul li {
		top: auto !important;
		left: auto !important;
	}

	/* --- misc ------------------------------------------------------- */
	/* shorter banner: cover-scaling then shows most of the "Time
	   Matters" artwork instead of a zoomed crop */
	#wrapper #header {
		height: 90px !important;
	}

	#navtop ul {
		float: none !important;
		text-align: left;
	}

	.slideshow-container .text-box {
		max-width: 100%;
	}
}

/* the hamburger button exists in the DOM at every width once JS runs —
   keep it hidden outside the mobile breakpoint */
@media only screen and (min-width: 769px) {
	#container.header-new .menu-toggle {
		display: none;
	}
}