/*
 * Page sections from patterns/home-*.php. Text and images are edited in the block editor; layout and colour
 * live here.
 */

/* Sections meet edge to edge (Blocksy spaces every block apart) and set their own padding. */
:is(.ca-hero, .ca-section, .ca-trust) {
	margin-block: 0;
}

.ca-section {
	padding-block: var(--ca-space-12);
}

.ca-section > :last-child {
	margin-block-end: 0;
}

/* Two sections on the page background in a row share one gap rather than two. */
:is(.ca-hero, .ca-section:not(.ca-section--subtle, .ca-section--offers, .ca-section--promoted)) + .ca-section:not(.ca-section--subtle, .ca-section--offers, .ca-section--promoted) {
	padding-block-start: 0;
}

.ca-section--subtle {
	background: var(--ca-bg-subtle);
}

.ca-section .ca-section__title {
	margin-block: 0 var(--ca-space-6);
}

.ca-section__header {
	margin-block-end: var(--ca-space-6);
}

.ca-section__header .ca-section__title,
.ca-section__header .ca-section__link {
	margin: 0;
}

/* Small capitals label above a heading. Wheat text only ever on Forest. */
.ca-eyebrow {
	margin: 0;
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-label);
	font-weight: var(--ca-text-label-weight);
	line-height: var(--ca-text-label-line-height);
	letter-spacing: var(--ca-text-label-tracking);
	text-transform: uppercase;
	color: var(--ca-text-accent-on-brand);
}

/* Hero (patterns/home-hero.php): the season's main push on a Forest panel with its photo, and two smaller
 * promotions beside it. Nothing rotates. Every photo sits in a box of fixed shape, so nothing moves as it loads. */
.ca-hero {
	padding-block: var(--ca-space-4) var(--ca-space-8);
}

.ca-hero .ca-hero__grid {
	display: grid;
	gap: var(--ca-space-4);
}

.ca-hero .ca-hero__grid > *,
.ca-hero .ca-hero__main > *,
.ca-hero .ca-hero__promos > *,
.ca-hero .ca-promo > * {
	margin: 0;
}

.ca-hero .ca-hero__main {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-block-end: var(--ca-border-width-accent) solid var(--ca-decor-gold);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-brand);
	color: var(--ca-text-on-brand);
}

.ca-hero .ca-hero__text {
	padding: var(--ca-space-6) var(--ca-space-5) var(--ca-space-8);
}

.ca-hero .ca-hero__title {
	margin-block: var(--ca-space-2) var(--ca-space-3);
	font-size: var(--ca-text-h1);
	line-height: var(--ca-text-h1-line-height);
	letter-spacing: var(--ca-text-h1-tracking);
	color: var(--ca-text-on-brand);
}

.ca-hero .ca-hero__lede {
	max-width: 36rem;
	margin-block: 0 var(--ca-space-6);
	font-size: var(--ca-text-body-lg);
	line-height: var(--ca-text-body-lg-line-height);
}

.ca-hero .wp-block-buttons {
	gap: var(--ca-space-3);
}

/* On phones the photo opens the panel. It's decorative (no alt text), so the order doesn't change the meaning. */
.ca-hero .ca-hero__image {
	order: -1;
	aspect-ratio: 16 / 9;
}

:is(.ca-hero__image, .ca-promo__image, .ca-promoted__image) {
	position: relative;
	overflow: hidden;
	background: var(--ca-bg-subtle);
}

.ca-hero :is(.ca-hero__image, .ca-promo__image) img,
.ca-promoted .ca-promoted__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Promotions: photo, heading and one line; the heading's link covers the whole tile. */
.ca-hero .ca-hero__promos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ca-space-4);
}

.ca-hero .ca-promo {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
	transition: border-color var(--ca-duration-base) var(--ca-ease-standard), box-shadow var(--ca-duration-base) var(--ca-ease-standard);
}

.ca-hero .ca-promo:hover {
	border-color: var(--ca-border-brand);
	box-shadow: var(--ca-shadow-2);
}

.ca-hero .ca-promo__image {
	aspect-ratio: 4 / 3;
}

.ca-hero .ca-promo .ca-promo__title {
	margin: var(--ca-space-3) var(--ca-space-3) var(--ca-space-1);
	font-size: var(--ca-text-h4);
	line-height: var(--ca-text-h4-line-height);
}

.ca-promo .ca-promo__title a {
	color: var(--ca-text-heading);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.ca-promo .ca-promo__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ca-hero .ca-promo .ca-promo__text {
	margin: 0 var(--ca-space-3) var(--ca-space-4);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
	color: var(--ca-text-secondary);
}

/* The focus ring goes round the whole tile the link covers. */
@supports selector(:has(a)) {
	.ca-promo .ca-promo__title a:focus-visible {
		outline: none;
		box-shadow: none;
	}

	.ca-hero .ca-promo:has(.ca-promo__title a:focus-visible) {
		outline: var(--ca-border-width-focus) solid var(--ca-border-focus);
		outline-offset: 2px;
		box-shadow: 0 0 0 2px var(--ca-border-focus-halo);
	}
}

@media (min-width: 48rem) {
	.ca-hero .ca-hero__main {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ca-hero .ca-hero__text {
		align-self: center;
		padding: var(--ca-space-10) var(--ca-space-8);
	}

	.ca-hero .ca-hero__image {
		order: 0;
		aspect-ratio: auto;
		min-height: 18rem;
	}

	.ca-hero .ca-promo__image {
		aspect-ratio: 16 / 9;
	}

	.ca-hero .ca-promo .ca-promo__title {
		margin-inline: var(--ca-space-4);
	}

	.ca-hero .ca-promo .ca-promo__text {
		margin-inline: var(--ca-space-4);
	}
}

/* Desktop: the main panel takes two thirds, the promotions stack beside it, each photo beside its text. */
@media (min-width: 64rem) {
	.ca-hero {
		padding-block: var(--ca-space-6) var(--ca-space-12);
	}

	.ca-hero .ca-hero__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.ca-hero .ca-hero__text {
		padding: var(--ca-space-12) var(--ca-space-10);
	}

	.ca-hero .ca-hero__title {
		font-size: var(--ca-text-display);
		line-height: var(--ca-text-display-line-height);
		letter-spacing: var(--ca-text-display-tracking);
	}

	.ca-hero .ca-hero__promos {
		grid-template-columns: minmax(0, 1fr);
	}

	.ca-hero .ca-promo {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: 1fr auto 1fr;
		min-height: 12rem;
	}

	.ca-hero .ca-promo__image {
		grid-row: 1 / -1;
		aspect-ratio: auto;
	}

	.ca-hero .ca-promo .ca-promo__title {
		align-self: end;
		margin-block-start: var(--ca-space-4);
	}

	.ca-hero .ca-promo .ca-promo__text {
		grid-row: 3;
		align-self: start;
	}
}

/* Button styles for Forest backgrounds (inc/patterns.php). Blocksy colours buttons through these variables. */
.wp-block-button.is-style-ca-accent > .wp-block-button__link {
	--theme-button-background-initial-color: var(--ca-action-accent-bg);
	--theme-button-background-hover-color: var(--ca-action-accent-bg-hover);
	--theme-button-text-initial-color: var(--ca-action-accent-text);
	--theme-button-text-hover-color: var(--ca-action-accent-text);
}

.wp-block-button.is-style-ca-outline-light > .wp-block-button__link {
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: var(--ca-forest-800);
	--theme-button-text-initial-color: var(--ca-text-on-brand);
	--theme-button-text-hover-color: var(--ca-text-on-brand);
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Trust strip: three short points, each under a Wheat rule. */
.ca-trust {
	padding-block: var(--ca-space-10);
	border-block-start: 1px solid var(--ca-border-default);
	background: var(--ca-bg-surface);
}

.ca-trust__list {
	gap: var(--ca-space-6);
}

.ca-trust__item {
	padding-block-start: var(--ca-space-4);
	border-block-start: 3px solid var(--ca-decor-gold);
}

.ca-trust .ca-trust__title {
	margin: 0 0 var(--ca-space-1);
	font-size: var(--ca-text-h4);
	line-height: var(--ca-text-h4-line-height);
}

.ca-trust .ca-trust__text {
	margin: 0;
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
	color: var(--ca-text-secondary);
}

@media (min-width: 64rem) {
	.ca-section {
		padding-block: var(--ca-space-16);
	}
}

/* Delivery prices (Delivery & returns page, patterns/page-info.php; inc/home.php): one tile per delivery size. */
.ca-delivery-prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--ca-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-delivery-prices__item {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-1);
	padding: var(--ca-space-4) var(--ca-space-5);
	border: 1px solid var(--ca-border-default);
	border-block-start: 3px solid var(--ca-decor-gold);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
}

.ca-delivery-prices__label {
	color: var(--ca-text-secondary);
}

.ca-delivery-prices__price {
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h3);
	font-weight: var(--ca-text-h3-weight);
	line-height: var(--ca-text-h3-line-height);
	color: var(--ca-text-heading);
}

.ca-delivery-prices__note {
	color: var(--ca-text-secondary);
}

/* Brands (patterns/home-brands.php): logos on white tiles, the whole tile a link. */
.ca-brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--ca-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-brands__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding: var(--ca-space-4);
	border: 1px solid var(--ca-border-default);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
	color: var(--ca-text-heading);
	font-family: var(--ca-font-heading);
	font-weight: 600;
	text-align: center;
}

.ca-brands__link:hover {
	border-color: var(--ca-border-brand);
}

.ca-brands__logo {
	max-width: 100%;
	max-height: 3.5rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Category tiles (inc/home.php): the category's photo over its name, the whole tile a link. Two to a row on
 * phones. Without a photo the tile shows the brand mark. */
.ca-cat-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ca-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-cat-tile {
	margin: 0;
}

.ca-cat-tile__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
	color: var(--ca-text-heading);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: border-color var(--ca-duration-base) var(--ca-ease-standard), box-shadow var(--ca-duration-base) var(--ca-ease-standard);
}

.ca-cat-tile__link:hover {
	border-color: var(--ca-border-brand);
	box-shadow: var(--ca-shadow-2);
	color: var(--ca-text-heading);
}

.ca-cat-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ca-bg-subtle);
}

.ca-cat-tile__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ca-cat-tile__media--empty {
	background: var(--ca-bg-brand-subtle) url(../images/Connacht-Agri_Icon-CA_Full-Colour.svg) center / auto 40% no-repeat;
}

.ca-cat-tile__name {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: var(--ca-size-control);
	padding: var(--ca-space-2) var(--ca-space-3);
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h4);
	font-weight: 600;
	line-height: var(--ca-text-h4-line-height);
}

/* Offers (or All products) after the ten headings: two columns wide, its media as tall as its neighbours'. */
.ca-cat-tile--wide {
	grid-column: span 2;
}

.ca-cat-tile--wide .ca-cat-tile__media {
	aspect-ratio: 8 / 3;
}

/* Heading category pages (inc/shop.php): the categories inside, before the toolbar. */
.ca-subcats {
	margin-block-end: var(--ca-space-8);
}

.ca-subcats .ca-cat-tile__name {
	font-size: var(--ca-text-body);
}

/* Ten headings and Offers: four to a row from tablets up (4, 4, then 2 and the wide Offers tile). Tablet tiles
 * are narrow, so their names are body size until the desktop. */
@media (min-width: 48rem) {
	.ca-cat-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ca-space-4);
	}

	.ca-cat-tiles .ca-cat-tile__name {
		font-size: var(--ca-text-body);
	}

	.ca-subcats .ca-cat-tiles {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}

	.ca-cat-tile__name {
		padding: var(--ca-space-3) var(--ca-space-4);
	}
}

@media (min-width: 64rem) {
	.ca-cat-tiles:not(.ca-subcats .ca-cat-tiles) .ca-cat-tile__name {
		font-size: var(--ca-text-h4);
	}
}

/* Offers: a Wheat tint marks the deals. */
.ca-section--offers {
	background: var(--ca-bg-accent-subtle);
}

/* Machinery spotlight (patterns/home-machinery.php): one machine, large, then links to the others. */
.ca-spotlight {
	display: grid;
	overflow: hidden;
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
}

.ca-spotlight__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--ca-bg-subtle);
}

.ca-spotlight__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ca-spotlight__body {
	padding: var(--ca-space-6) var(--ca-space-5);
}

.ca-spotlight .ca-spotlight__title {
	margin: 0 0 var(--ca-space-3);
	font-size: var(--ca-text-h2);
	line-height: var(--ca-text-h2-line-height);
}

.ca-spotlight__title a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
	color: var(--ca-text-heading);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.ca-spotlight .ca-badges {
	margin: 0 0 var(--ca-space-4);
}

.ca-spotlight__summary ul {
	margin: 0 0 var(--ca-space-4);
	padding-inline-start: var(--ca-space-5);
}

.ca-spotlight__summary li + li {
	margin-block-start: var(--ca-space-1);
}

.ca-spotlight .ca-spotlight__price {
	margin: 0 0 var(--ca-space-5);
	color: var(--ca-text-primary);
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h4);
	font-weight: 700;
}

.ca-spotlight__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-3);
}

.ca-spotlight__actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ca-size-control);
	padding-inline: var(--ca-space-6);
}

.ca-spotlight__actions .ca-spotlight__call {
	--theme-button-background-initial-color: var(--ca-action-secondary-bg);
	--theme-button-background-hover-color: var(--ca-action-secondary-bg-hover);
	--theme-button-text-initial-color: var(--ca-action-secondary-text);
	--theme-button-text-hover-color: var(--ca-action-secondary-text);
	box-shadow: inset 0 0 0 var(--ca-border-width-control) var(--ca-action-secondary-border);
}

.ca-spotlight__more {
	margin-block-start: var(--ca-space-8);
}

.ca-spotlight__more .ca-spotlight__more-title {
	margin: 0 0 var(--ca-space-2);
	font-size: var(--ca-text-h4);
	line-height: var(--ca-text-h4-line-height);
}

/* Two columns even on phones, so nine machines don't make a long single file. */
.ca-spotlight__links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(9rem, 40%), 1fr));
	column-gap: var(--ca-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-spotlight__links li {
	margin: 0;
}

.ca-spotlight__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
	padding-block: var(--ca-space-1);
}

@media (min-width: 48rem) {
	.ca-spotlight__links {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

@media (min-width: 64rem) {
	.ca-spotlight {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.ca-spotlight__media {
		aspect-ratio: auto;
		min-height: 24rem;
	}

	.ca-spotlight__body {
		align-self: center;
		padding: var(--ca-space-10);
	}
}

/* Promoted range (patterns/home-promoted.php): a Forest band with the starred products on white cards. */
.ca-section--promoted {
	background: var(--ca-bg-brand);
	color: var(--ca-text-on-brand);
}

.ca-promoted {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ca-space-6);
}

.ca-promoted > *,
.ca-promoted .ca-promoted__intro > * {
	margin: 0;
}

.ca-promoted__intro {
	display: grid;
	gap: var(--ca-space-3);
	align-content: start;
}

.ca-promoted .ca-promoted__image {
	aspect-ratio: 16 / 9;
	margin-block-end: var(--ca-space-2);
	border-radius: var(--ca-radius-lg);
}

.ca-promoted .ca-promoted__title {
	font-size: var(--ca-text-h2);
	line-height: var(--ca-text-h2-line-height);
	color: var(--ca-text-on-brand);
}

.ca-promoted .ca-section__link a {
	color: var(--ca-text-on-brand);
}

.ca-promoted .ca-section__link a:hover {
	color: var(--ca-text-accent-on-brand);
}

/* The cards are white, so they keep the light-surface focus ring. */
.ca-section--promoted .products .product {
	--ca-border-focus: var(--ca-forest-900);
	--ca-border-focus-halo: var(--ca-gold-300);
	padding: var(--ca-space-3);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
	color: var(--ca-text-primary);
}

@media (min-width: 64rem) {
	.ca-promoted {
		grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr);
		gap: var(--ca-space-10);
	}

	.ca-promoted .ca-promoted__image {
		aspect-ratio: 4 / 3;
	}
}

/* Product rows that scroll sideways (offers, promoted range). On phones a third card peeks in, so the row reads
 * as one to swipe; assets/js/rails.js adds Previous and Next buttons while there's more to see. */
.ca-rail [data-products] {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 42%; /* a fixed share: with minmax(0, …) the grid squeezes every card in */
	/* Room inside the scroller for the focus ring, which would otherwise be clipped. */
	margin: calc(var(--ca-space-2) * -1);
	padding: var(--ca-space-2) var(--ca-space-2) var(--ca-space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--ca-space-2);
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--ca-border-strong) transparent;
	scrollbar-width: thin;
}

/* A narrower gap on phones leaves room for the third card to show. */
@media (max-width: 47.99rem) {
	.ca-rail [data-products] {
		--grid-columns-gap: var(--ca-space-4);
	}
}

.ca-rail [data-products] > .product {
	scroll-snap-align: start;
}

.ca-rail__nav {
	display: flex;
	gap: var(--ca-space-2);
	justify-content: flex-end;
	margin-block-start: var(--ca-space-3);
}

.ca-rail__nav[hidden] {
	display: none;
}

.ca-rail__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ca-size-control);
	height: var(--ca-size-control);
	padding: 0;
	border: var(--ca-border-width-control) solid var(--ca-action-secondary-border);
	border-radius: var(--ca-radius-md);
	background: var(--ca-action-secondary-bg);
	color: var(--ca-action-secondary-text);
	cursor: pointer;
}

.ca-rail__button:hover:not([aria-disabled='true']) {
	background: var(--ca-action-secondary-bg-hover);
}

.ca-rail__button[aria-disabled='true'] {
	border-color: var(--ca-border-default);
	color: var(--ca-text-disabled);
	cursor: default;
}

.ca-rail__button svg {
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
}

.ca-on-brand .ca-rail__button {
	border-color: var(--ca-text-on-brand);
	background: transparent;
	color: var(--ca-text-on-brand);
}

.ca-on-brand .ca-rail__button:hover:not([aria-disabled='true']) {
	background: var(--ca-forest-800);
}

.ca-on-brand .ca-rail__button[aria-disabled='true'] {
	border-color: var(--ca-forest-600);
	color: var(--ca-forest-300);
}

@media (min-width: 48rem) {
	.ca-rail [data-products] {
		grid-auto-columns: calc((100% - 2 * var(--grid-columns-gap, 30px)) / 3);
	}
}

@media (min-width: 64rem) {
	.ca-rail [data-products] {
		grid-auto-columns: calc((100% - 3 * var(--grid-columns-gap, 30px)) / 4);
	}

	.ca-promoted .ca-rail [data-products] {
		grid-auto-columns: calc((100% - 2 * var(--grid-columns-gap, 30px)) / 3);
	}
}