/**
 * Layout for the "Companies shelf" home constructor section
 * (template-parts/sections/companies-shelf.php). Header/title come from the
 * constructor's shared .section-block__header/.section-block__title styles
 * (style.css) -- only the shelf's own list layout (horizontal-scroll row
 * vs. vertical stack) and the "view all" link live here.
 *
 * Card styling: the horizontal-scroll row uses .company-card from the
 * catalog plugin's catalog.css (pulled in as a dependency by this file's
 * own enqueue); the vertical stack uses post-card--horizontal instead
 * (template-parts/company-card-horizontal.php in the catalog plugin),
 * styled entirely by the theme's own post-card CSS -- nothing company-
 * specific to maintain here for that layout.
 */

.section-companies-shelf__all-link {
	flex: 0 0 auto;
	color: var(--js-accent, #e85d3f);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.section-companies-shelf__all-link:hover {
	color: var(--js-accent-dark, #cc472d);
}

.section-companies-shelf__list {
	display: flex;
	gap: 16px;
}

/* Horizontal: a scrollable row of fixed-width cards -- the same
   overflow-x:auto + hidden-scrollbar pattern already used for the
   catalog map sidebar's category chips and the mobile top-menu row. */
.section-companies-shelf__list--horizontal {
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.section-companies-shelf__list--horizontal::-webkit-scrollbar {
	display: none;
}

.section-companies-shelf__list--horizontal .company-card {
	flex: 0 0 280px;
}

/* Vertical: a plain stacked column of full-width rows -- each row is a
   post-card--horizontal (template-parts/company-card-horizontal.php), so
   it's already styled by the theme's own post-card CSS. The one thing that
   needs overriding: post-card thumbnails are real article photos, styled
   object-fit:cover (!important, in style.css) so they fill the frame and
   crop to it -- fine for a landscape photo, but a company logo can be any
   shape (square, a circle on transparent/white background, etc.), and
   cover would zoom in and slice its edges off. .post-card--company-logo
   (added on the wrapper by that template) switches it to contain, so the
   whole logo is always visible, letterboxed on a plain background instead
   of cropped.
   Selector matches style.css's own class-count + !important to reliably
   win regardless of which of that file's several breakpoint-scoped
   object-fit:cover rules would otherwise apply here. */
.section-companies-shelf__list--vertical {
	flex-direction: column;
}

.post-card--company-logo .post-card__thumbnail {
	background: #fff !important;
}

.post-card--company-logo .post-card__thumbnail img {
	object-fit: contain !important;
	padding: 16px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.section-companies-shelf__list--horizontal .company-card {
		flex: 0 0 240px;
	}

	/* The header's title + "view all" link sit in one flex row
	   (.section-block__header, shared sitewide) with no wrap handling --
	   on narrow screens the fixed-width link squeezes the title into a
	   sliver, wrapping it across 3+ giant lines. Scoped to this section
	   only, not the shared class, since other constructor sections weren't
	   reported as having this problem. */
	.section-companies-shelf .section-block__header {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.section-companies-shelf .section-block__title {
		font-size: 20px;
	}

	/* Mirrors style.css's own body.home .section-posts .post-cards--horizontal
	   mobile rules (72px thumbnail + grid title/meta card layout, picked up
	   for free via the post-cards--horizontal class added in
	   companies-shelf.php) -- only the two rules that also require a
	   .section-posts ancestor (which this section isn't) are repeated here,
	   scoped to this section's own list class instead. */
	.section-companies-shelf__list--vertical.post-cards--horizontal {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.section-companies-shelf__list--vertical.post-cards--horizontal > .post-card--horizontal {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
		padding: 16px 0;
		border: 0;
		border-bottom: 1px solid #e6e6e6;
	}
}