/**
 * Styles for the PHP replacements of the Astra Custom Layout hook sections
 * (inc/ts-hooks*.php). Section spacing/gray heading bars live in
 * spectra-replacements.css; this file only covers what Loops & Logic used to
 * ship itself.
 */

/* --- Rules the Astra Pro Custom Layouts module used to emit ------------------
   Kept verbatim now that the module is off: hook wrappers span the full width
   and the flex content container wraps, so a wrapper placed at ts_content_top
   (the breadcrumbs, 59577) sits on its own row above sidebar + content instead
   of becoming a third column. */
[class^="ts-hook-"],
[class*="ts-hook-"] {
	width: 100%;
}
.site-content .ts-container {
	flex-wrap: wrap;
}
[class^="ts-hook-"] .wp-block-query .wp-block-post-template .wp-block-post {
	width: 100%;
}

/* --- .ts-company-nav: hub page of a long company (inc/ts-hooks-company.php) --
   One card per section, linking to /company/<slug>/<section>/. */
.ts-company-nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin: 1.5em 0 2em;
}
.ts-company-nav__card {
	background: var(--ast-global-color-8, #545454);
	border-radius: 4px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.ts-company-nav__title {
	font-size: 27px;
	margin: 0 0 .25em;
}
.ts-company-nav__title a {
	color: inherit;
	text-decoration: none;
}
.ts-company-nav__count {
	margin: 0 0 1em;
	opacity: .85;
}
.ts-company-nav__cta {
	margin-top: auto;
	text-decoration: none;
}
.ts-company-nav__cta button {
	width: 100%;
}
/* Company sub-pages: the H1 is the company name linking back to the hub.
   (A site rule `header.entry-header * { font-size: 3em }` would otherwise
   scale the anchor to 3× the H1.) */
.single-company .entry-title a {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-decoration: none;
	background: none;
	box-shadow: none;
	border: 0;
}
.single-company .entry-title a:hover {
	text-decoration: underline;
}

/* --- .ts-glider: replaces the L&L <Glider> image strip ---------------------
   A horizontally scrolling, snap-aligned row of thumbnails; each links to the
   full-size image. */
.ts-glider {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	margin: 0 0 1em;
}
.ts-glider > a {
	flex: 0 0 auto;
	scroll-snap-align: start;
	line-height: 0;
}
.ts-glider img {
	max-height: 300px;
	width: auto;
	display: block;
	border-radius: 3px;
}