/* ============================================================
   Scoped CSS — one-off pages context (order-a-sample, become-a-dealer)
   Enqueued conditionally in functions.php (handle: tc-pages)
   ============================================================ */

#tc-page-hero {
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

#tc-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(31deg, #4b5c67, #49596500);
}

/* Opt-out for heroes whose masthead is already a designed composition carrying
   its own copy panel (order-a-sample). The scrim above exists to wash a plain
   photo for legibility; over designed art it greys the white diagonal band and
   double-darkens the panel. Modifier mirrors .tc-cs-hero in case-studies.css. */
#tc-page-hero.tc-hero-plain::before {
	content: none;
}

/* White type in the designed mastheads. With no scrim to sit on, the headline
   crosses the crop's white diagonal band and the lighter parts of the photo,
   where the shared diffuse shadow above spreads into a haze and stops holding an
   edge. Tighter blur and offset so it pops against white. Same value as
   #tc-bhs-hero .tc-color-hero-title in tandostone.css. */
#tc-page-hero.tc-hero-plain h1,
#tc-page-hero.tc-hero-plain .tc-page-hero-copy {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* --- News post masthead (single.php) ---
   The shared news-hero.jpg collage is kept purely as a neutral ground, so it takes
   the same flat wash as the case-study singles (--tc-secondary #495965) in place of
   the old 31deg gradient. Pushed to 0.90 rather than their 0.82: the collage is far
   busier than a project photo -- dozens of high-contrast magazine mastheads -- and
   at 0.82 the headline still competed with them (operator, 2026-08-26).
   Opacity is the one dial here. */
#tc-page-hero.tc-news-post-hero::before {
	background: rgba(73, 89, 101, 0.9);
}

/* Headline measure, midway between the original col-lg-9 and a col-lg-6 (operator,
   2026-08-26). Some titles run to 166 characters; col-lg-9 (68% of the band) let
   them run too far, col-lg-6 (46%) broke them too early. The midpoint is 57% of the
   band, which falls between Bootstrap's col-lg-7 (53%) and col-lg-8 (61%) -- hence a
   percentage cap instead of a column change. 83.33% of the col-lg-9 the h1 sits in
   is 62.5% of the container, i.e. exactly halfway between 75% (col-9) and 50%
   (col-6), so it tracks the midpoint at every container width rather than only at
   1440. Capped from lg up only; below that the title takes the full column. */
@media (min-width: 992px) {
	#tc-page-hero.tc-news-post-hero h1 {
		max-width: 83.33%;
	}
}

/* --- News post featured image (tc-news-single) ---
   Sized to the Case Study lead image (534x416, the col-lg-6 figure in
   case-study-intro.php) and floated left at the top of the body so the copy wraps
   around it from the first line down (operator, 2026-08-26).

   max-height rather than a fixed height because the 126 posts carry a very mixed
   set: ~66 between 1:1 and 2:1, 15 portrait, 14 very wide banners (nine are
   824x90 press strips). Portraits crop at the cap; wide banners simply render
   short instead of being cropped to a slice. */
#tc-news-single .tc-news-featured {
	float: left;
	width: 100%;
	max-width: 534px;
	margin: 0 2rem 1.5rem 0;
}

#tc-news-single .tc-news-featured img {
	width: 100%;
	height: auto;
	max-height: 416px;
	object-fit: cover;
	object-position: center;
}

/* The back link must drop below the image when a post's copy is shorter than the
   float, otherwise it tucks into the wrap. */
#tc-news-single .tc-news-back {
	clear: both;
}

/* --- News index pagination (tc-news-loop) ---
   Two fixes. First, layout: the BCB parent's js/scripts.js adds Bootstrap's
   .page-link class to every `.pagination a, .pagination span` on load. Bootstrap
   expects ul.pagination > li.page-item > a.page-link, but WordPress emits
   nav.pagination > div.nav-links > a.page-numbers -- so nav.pagination picks up
   Bootstrap's `display: flex` while its only in-flow child is the block
   div.nav-links, and the anchors inside inherit .page-link's `display: block` and
   stack vertically (8 links = 304px tall). Making .nav-links the flex row puts them
   back on one line. The parent theme is shared, so this is corrected here.

   Second, position: the cell lives inside the post grid row and grows into the
   cells left empty after the last post, instead of opening a new full-width row
   underneath (operator, 2026-08-26). flex/width override beats the
   `.row-cols-lg-3 > *` 33.33% via the id in the selector. If the last row is full
   it simply wraps and spans the width. */
#tc-news-loop .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

#tc-news-loop .tc-news-pagination-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 992px) {
	#tc-news-loop .tc-news-pagination-cell {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Below lg the column is too narrow to wrap around a 534px float. */
@media (max-width: 992px) {
	#tc-news-single .tc-news-featured {
		float: none;
		max-width: 100%;
		margin: 0 0 1.5rem 0;
	}
}

#tc-page-hero .container {
	position: relative;
}

#tc-page-hero h1 {
	font-size: 3.2rem;
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

#tc-page-hero .tc-page-hero-copy {
	max-width: 560px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 992px) {
	#tc-page-hero h1 {
		font-size: 2.2rem;
	}
}

/* --- Project Gallery only: separator rules on the dealer-locator section ---
   That section is the one place the map sits in unbroken white, so it gets a pair
   of horizontal hairlines as a light separator (operator, 2026-09-02): cyan running
   in from the left along the top, primary running in from the right along the
   bottom, each stopping at 75% -- the same reach as the corner brackets on the
   "Two Exterior Product Lines" cards, but with the vertical arms dropped.

   Scoped by body.page-id-262 on purpose. common-dealers.php is a shared part used
   by 11 templates, so styling it directly would put these rules on all of them. */
body.page-id-262 #tc-common-dealers {
	position: relative;
}

body.page-id-262 #tc-common-dealers:before,
body.page-id-262 #tc-common-dealers:after {
	content: "";
	display: block;
	position: absolute;
	width: 75%;
	height: 0;
	pointer-events: none;
}

body.page-id-262 #tc-common-dealers:before {
	top: 0;
	left: 0;
	border-top: 2px solid var(--tc-accent);
}

body.page-id-262 #tc-common-dealers:after {
	bottom: 0;
	right: 0;
	border-bottom: 2px solid var(--tc-primary);
}

/* --- Visualizer section separator rules (order-a-sample) ---
   Same hairline treatment as the Project Gallery dealer section: cyan in from the
   left along the top, primary in from the right along the bottom, each stopping at
   75% (operator, 2026-09-02). No body-class scope needed here -- #tc-visualizer is
   unique and page-order-sample-visualizer.php is used by one template only. */
#tc-visualizer {
	position: relative;
}

#tc-visualizer:before,
#tc-visualizer:after {
	content: "";
	display: block;
	position: absolute;
	width: 75%;
	height: 0;
	pointer-events: none;
}

#tc-visualizer:before {
	top: 0;
	left: 0;
	border-top: 2px solid var(--tc-accent);
}

#tc-visualizer:after {
	bottom: 0;
	right: 0;
	border-bottom: 2px solid var(--tc-primary);
}