/* Catalog structure (category + product detail pages), study branch.
   Built only from tokens already defined site-wide in astra-main.min.css's
   inline custom properties -- no new palette/type system:
     --ast-global-color-0  red    #d94948  (accent / primary CTA)
     --ast-global-color-2  navy   #011627  (headings, dark surfaces)
     --ast-global-color-4  off-white #f9f8f8 (page background)
     --ast-global-color-1  white  #ffffff  (card surfaces)
   Loaded on the /products/** pages, and also on projects.html for the
   "Featured Cases" section (its header + card grid reuse .catalog-header /
   .catalog-eyebrow / .catalog-grid / .catalog-card directly). */

/* Type scale for headings on these pages. The site's global h1 is 70px
   (4.6667rem) -- sized for a hero banner overlaid on a photo (Home, About),
   not a plain content-page title, and every heading below h1 inherits
   similarly hero-scaled defaults (h2 34-40px, h3 23px depending on which
   override wins). Un-set that inheritance explicitly here with a
   conventional content-page scale instead (~1.25 ratio):
     h1  36px desktop / 28px mobile  -- page title (category or product name)
     h2  24px                        -- section heading ("Related products")
     h3  18px                        -- card title (product name in a grid)
   font-weight/text-transform/color are left inherited (700 / uppercase /
   navy already match brand voice used elsewhere on the site). */

/* The site's shared header is styled ast-theme-transparent-header:
   `.ast-theme-transparent-header #masthead{position:absolute;...}` inside
   BOTH a min-width:921px and a max-width:921px media query (i.e. applies at
   every viewport), with white nav text, meant to overlay a tall hero photo
   -- every existing page (Home, About, etc.) has one directly beneath the
   header, which is what makes the white-on-transparent nav text readable.
   These catalog/product pages have no hero, so without this override the
   header floats over a plain white/off-white background with white text on
   it -- illegible on desktop, and on mobile the header's shorter computed
   height caused it to visibly overlap the H1 below it (position:absolute
   removes an element from normal flow, so the next element no longer
   reserves space for it).

   A bare `#masthead` selector LOSES this specificity fight -- their
   selector is class+id (0,1,1,0), a bare id is only (0,1,0,0) -- so the
   fix must match `.ast-theme-transparent-header #masthead` exactly (source
   order then wins, since catalog.css loads last). This was caught by
   screenshotting at both desktop and mobile viewports: the desktop shot
   looked fine by coincidence (position:absolute with no top/bottom offset
   renders at its static position, so it visually didn't move on wide
   viewports where the header's in-flow and out-of-flow heights matched
   closely enough), but mobile made the underlying bug obvious.

   Scoped to body.catalog-no-hero (set only by build.py's generated pages)
   rather than bare .ast-theme-transparent-header -- this file is also
   loaded on projects.html for the Featured Cases section, and
   projects.html DOES have a real hero photo, so this rule was overriding
   its correct transparent-overlay header with a solid navy bar until
   scoped. */
body.catalog-no-hero.ast-theme-transparent-header #masthead {
	position: relative;
	background-color: var(--ast-global-color-2, #011627);
}

.catalog-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

/* Breadcrumb */
.catalog-breadcrumb {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 24px;
}
.catalog-breadcrumb a {
	color: #6b7280;
	text-decoration: none;
}
.catalog-breadcrumb a:hover {
	color: var(--ast-global-color-2, #011627);
	text-decoration: underline;
}
.catalog-breadcrumb [aria-current="page"] {
	color: var(--ast-global-color-2, #011627);
	font-weight: 500;
}
.catalog-breadcrumb .crumb-sep {
	margin: 0 8px;
	color: #d1d5db;
}

/* Category header */
.catalog-header {
	margin-bottom: 32px;
}
.catalog-header h1 {
	color: var(--ast-global-color-2, #011627);
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
}
.catalog-header-blurb {
	color: #4b5563;
	font-size: 17px;
	max-width: 720px;
	margin: 0;
}

/* projects.html's "Featured Cases" section sits inside the site's own
   flex-row container (.uagb-container-inner-blocks-wrap, from the original
   WP export) rather than a block-flow wrapper -- without an explicit width,
   this single child would shrink-to-fit instead of filling the row, and
   header + grid would end up side-by-side as separate flex items instead
   of stacking. */
.project-section {
	width: 100%;
}

/* Sibling category pills -- cross-navigation between the 5 category pages,
   shown below the header/blurb, above the product grid. All 5 are real
   links (including the current one) for a consistent full picture of the
   catalog structure; the current category is just styled differently. */
.catalog-category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}
.catalog-category-pill {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #d1d5db;
	color: #4b5563;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.catalog-category-pill:hover {
	border-color: var(--ast-global-color-2, #011627);
	color: var(--ast-global-color-2, #011627);
}
.catalog-category-pill.is-active {
	background: var(--ast-global-color-2, #011627);
	border-color: var(--ast-global-color-2, #011627);
	color: #ffffff;
}
.catalog-category-pill.is-active:hover {
	color: #ffffff;
}

/* Product card grid */
.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}
.catalog-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.catalog-card:hover {
	box-shadow: 0 6px 20px rgba(1, 22, 39, 0.1);
	transform: translateY(-2px);
}
.catalog-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ast-global-color-4, #f9f8f8);
}
.catalog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.catalog-card-body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.catalog-card-body h3 {
	margin: 0;
	font-size: 18px;
}
.catalog-card-body h3 a {
	color: var(--ast-global-color-2, #011627);
	text-decoration: none;
}
.catalog-card-body h3 a:hover {
	color: var(--ast-global-color-0, #d94948);
}
.catalog-card-body p {
	color: #6b7280;
	font-size: 14px;
	margin: 0 0 8px;
	line-height: 1.5;
}

.catalog-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
	font-weight: 700;
	color: var(--ast-global-color-0, #d94948);
}

/* Buttons -- combined with the site's existing .wp-block-button__link base.
   That base class sets height:100% (assumes WordPress's own .wp-block-button
   wrapper/grid context) -- inside our .product-detail CSS grid, whose items
   stretch to match the tallest by default, that inherited height:100%
   turned the "Contact us about this product" button into a full-height
   block matching the product image's height. Reset explicitly. */
.catalog-btn {
	display: inline-block;
	height: auto;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid var(--ast-global-color-2, #011627);
	color: var(--ast-global-color-2, #011627);
	background: transparent;
	align-self: flex-start;
	width: auto;
}
.catalog-btn:hover {
	background: var(--ast-global-color-2, #011627);
	color: #ffffff;
}
.catalog-btn-primary {
	background: var(--ast-global-color-0, #d94948);
	border-color: var(--ast-global-color-0, #d94948);
	color: #ffffff;
}
.catalog-btn-primary:hover {
	background: #b93a3a;
	border-color: #b93a3a;
	color: #ffffff;
}

/* Supplementary Google Drive link -- the on-site product grid above is a
   placeholder (1-3 photographed products per category), not the real,
   complete catalog, which still lives in the category's original Drive
   folder. Not a replacement for the grid, just an honest "there's more"
   pointer until the real catalog is supplied. */
.catalog-drive-note {
	font-size: 14px;
	color: #6b7280;
	margin: -8px 0 32px;
}
.catalog-drive-note a {
	color: var(--ast-global-color-2, #011627);
	font-weight: 600;
	text-decoration: underline;
}
.catalog-drive-note a:hover {
	color: var(--ast-global-color-0, #d94948);
}

/* CTA band */
.catalog-cta-band {
	background: var(--ast-global-color-2, #011627);
	color: #ffffff;
	border-radius: 6px;
	padding: 28px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.catalog-cta-band p {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}
.catalog-cta-band .catalog-btn-primary {
	border-color: #ffffff;
}

/* Product detail */
.product-detail {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px;
	margin-bottom: 48px;
}
@media (max-width: 800px) {
	.product-detail {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.catalog-header h1,
	.product-detail-body h1 {
		font-size: 28px;
	}
}
.product-detail-media img {
	width: 100%;
	border-radius: 6px;
	background: var(--ast-global-color-4, #f9f8f8);
	object-fit: cover;
}
.product-detail-body h1 {
	color: var(--ast-global-color-2, #011627);
	margin: 6px 0 12px;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
}
.product-detail-desc {
	color: #4b5563;
	font-size: 16px;
	margin: 0 0 20px;
}
.product-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}
.product-spec-table th,
.product-spec-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 14px;
}
.product-spec-table th {
	color: #6b7280;
	font-weight: 500;
	width: 35%;
}
.product-spec-table td {
	color: var(--ast-global-color-2, #011627);
	font-weight: 500;
}

.catalog-related h2 {
	color: var(--ast-global-color-2, #011627);
	font-size: 24px;
	margin-bottom: 16px;
}

/* Project cards (projects.html "Featured Cases") -- reuses the .catalog-card
   shell as-is (image + body), adds a subtitle line and a Scope/Impact/Date
   definition list in place of the product card's one-line description and
   "View details" button (these aren't links to a detail page). */
.project-subtitle {
	color: #6b7280;
	font-size: 14px;
	margin: 0 0 12px;
}
.project-meta div {
	margin-bottom: 10px;
}
.project-meta div:last-child {
	margin-bottom: 0;
}
.project-meta dt {
	color: var(--ast-global-color-0, #d94948);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 2px;
}
.project-meta dd {
	color: #4b5563;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}