/**
 * COROI homepage (mockup) + header social icons. Loaded on every page (header icons) – homepage rules are scoped to body.home.
 * Markup produced by mu-plugins/coroi-shop/inc/home.php (news carousel, brands carousel).
 * Mockup measures are for a 1920px wide screen: content container 1548px (186px side margins), cards 423px, gap 40px.
 * Documentation: docs/PROJECT.md "Homepage".
 */
:root {
	--coroi-yellow: #fed300;
	--coroi-grey: #f3f4f4;
	--coroi-side: max(24px, calc((100vw - 1548px) / 2)); /* left/right margin of the content container */
}

/* ---------------------------------------------------------------- Header: Facebook + LinkedIn */
header.header { position: relative; }
.coroi-social { display: flex; gap: 12px; }
.coroi-social--header { position: absolute; top: 12px; right: clamp(16px, 3.4vw, 64px); z-index: 10000; } /* above the theme top bar (z-index 9999, transparent box covering the icons = not clickable) */
.coroi-social__link {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 2px solid #000; border-radius: 9px;
	color: #000; background: transparent;
	transition: background .15s;
}
.coroi-social__link:hover, .coroi-social__link:focus { background: var(--coroi-yellow); color: #000; }
/* Room for the icons next to the search field */
.hestia-top-bar .container { padding-right: 120px; }
@media (max-width: 991px) {
	.coroi-social--header { display: none; }
	.hestia-top-bar .container { padding-right: 15px; }
}

/* ---------------------------------------------------------------- Homepage sections */
body.home .hp-latest-news,
body.home .leading-brands,
body.home .grey-block-col {
	display: block;
	margin: 0 !important;
	padding-left: var(--coroi-side) !important;
	padding-right: var(--coroi-side) !important;
	gap: 0;
}
body.home .hp-latest-news .wp-block-column,
body.home .leading-brands .wp-block-column {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none;
	background: transparent !important;
}

/* Section titles (Oswald, uppercase, short bar underneath – bar defined by the theme: 93x7px) */
body.home .hp-latest-news h2,
body.home .leading-brands h2 {
	font: 700 clamp(30px, 2.5vw, 46px)/1.15 'Inter', Arial, sans-serif !important; /* same family as the section titles of the other pages */
	text-transform: uppercase;
	letter-spacing: 0;
	color: #000 !important;
	margin: 0 0 26px !important;
	padding: 0 !important;
	/* Two lines as in the mockup (LATEST / NEWS & UPDATES): the line break after the first word is inserted by coroi-home.js */
}
body.home .hp-latest-news h2::after { background: #000; height: 7px; width: 93px; margin-top: 14px; }
body.home .leading-brands h2::after { background: var(--coroi-yellow); height: 7px; width: 93px; margin-top: 14px; }

/* Intro paragraphs */
body.home .hp-latest-news > .wp-block-column > p,
body.home .leading-brands > .wp-block-column > p {
	font: 500 16px/1.5 'Montserrat', Arial, sans-serif !important;
	letter-spacing: .02em;
	color: #000 !important;
	max-width: 540px;
	width: auto !important;
	padding: 0 !important;
	margin: 0 0 0 !important;
}

/* ---------------------------------------------------------------- Latest news */
body.home .hp-latest-news { background: var(--coroi-yellow) !important; padding-top: clamp(40px, 4.4vw, 84px) !important; padding-bottom: clamp(40px, 4.4vw, 72px) !important; }
.coroi-news { margin-top: clamp(28px, 3vw, 57px); }
.coroi-news__track {
	display: flex;
	gap: clamp(16px, 2.1vw, 40px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-right: calc(-1 * var(--coroi-side)); /* bleeds to the right edge of the screen (next card peeks out) */
	padding-right: var(--coroi-side);
}
.coroi-news__track::-webkit-scrollbar { display: none; }
.coroi-news__card {
	flex: 0 0 clamp(250px, 22.05vw, 423px);
	scroll-snap-align: start;
	background: #fff;
	display: flex; flex-direction: column;
}
.coroi-news__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e9e9e9; }
.coroi-news__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.coroi-news__card:hover .coroi-news__img img { transform: scale(1.04); }
.coroi-news__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.coroi-news__meta {
	display: flex; justify-content: space-between; gap: 12px;
	font: 600 12px/1 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #999;
}
.coroi-news__meta span { text-align: right; text-transform: none; font-weight: 600; }
body.home .coroi-news__title { margin: 0; padding: 0; font: 700 15px/1.5 'Inter', Arial, sans-serif !important; letter-spacing: 0; text-transform: none; }
body.home .coroi-news__title a { color: #000 !important; font: inherit !important; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.coroi-news__more {
	margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	font: 600 12px/1 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #777; text-decoration: none;
}
.coroi-news__more:hover { color: #000; }
.coroi-news__controls { display: flex; align-items: center; gap: 28px; margin-top: clamp(24px, 2.6vw, 42px); }
.coroi-news__arrows { display: flex; gap: 14px; }
.coroi-arrow-btn { background: none; border: 0; padding: 4px 0; color: #000; cursor: pointer; line-height: 0; }
.coroi-arrow-btn:hover { opacity: .65; }
.coroi-news__progress { position: relative; flex: 1; height: 1px; background: rgba(0, 0, 0, .35); margin-right: 66px; }
.coroi-news__progress span { position: absolute; left: 0; top: -1px; height: 3px; width: 33%; background: #000; transition: left .15s linear; }

/* ---------------------------------------------------------------- Our brands */
body.home .leading-brands { padding-top: clamp(40px, 4.4vw, 80px) !important; padding-bottom: clamp(30px, 3.4vw, 64px) !important; background: #fff; }
.coroi-brands { position: relative; margin: clamp(36px, 4.4vw, 84px) calc(-1 * var(--coroi-side)) 0; }
.coroi-brands__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin: 0 clamp(70px, 13vw, 250px);
}
.coroi-brands__track::-webkit-scrollbar { display: none; }
.coroi-brands__item { flex: 0 0 25%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; height: clamp(90px, 8.5vw, 150px); padding: 0 clamp(12px, 2vw, 40px); }
.coroi-brands__item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.coroi-brands__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.coroi-brands__btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border: 2px solid #000; border-radius: 50%; background: #fff; color: #000;
	display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 2;
}
.coroi-brands__btn:hover { background: var(--coroi-yellow); }
.coroi-brands__btn--prev { left: clamp(10px, 6.1vw, 117px); }
.coroi-brands__btn--next { right: clamp(10px, 6.1vw, 117px); }

/* ---------------------------------------------------------------- Careers / Contact us */
body.home .grey-block-col {
	background: var(--coroi-grey) !important;
	display: flex; gap: 0;
	padding-top: clamp(40px, 4.4vw, 76px) !important; padding-bottom: clamp(40px, 4.8vw, 84px) !important;
}
body.home .grey-block-col > .wp-block-column { flex: 1 1 0; margin: 0 !important; padding: 0 !important; min-width: 0; }
/* Mockup: Careers takes 63% of the container, Contact starts at x=1165 (1920px screen) and may run past the container */
body.home .grey-block-col > .wp-block-column:first-child { flex: 0 0 calc(63.2% - 24px); max-width: 760px; }
body.home .grey-block-col > .wp-block-column:last-child { flex: 1 1 0; margin-right: calc(-1 * var(--coroi-side) + 60px) !important; }
body.home .grey-block-col h2 {
	font: 700 clamp(30px, 2.5vw, 46px)/1.15 'Inter', Arial, sans-serif !important;
	letter-spacing: 0; text-transform: none; color: #000 !important; margin: 0 0 22px !important; padding: 0 !important;
}
body.home .grey-block-col h2::after { content: ''; display: block; width: 93px; height: 7px; background: var(--coroi-yellow); margin-top: 14px; }
body.home .grey-block-col .wp-block-media-text { padding: 0 !important; display: grid; grid-template-columns: clamp(64px, 6vw, 110px) 1fr !important; gap: clamp(16px, 2vw, 34px); align-items: start; margin-top: 34px; }
body.home .grey-block-col .wp-block-media-text__media { margin: 0; }
body.home .grey-block-col .wp-block-media-text__media img { width: 100%; height: auto; display: block; }
body.home .grey-block-col .wp-block-media-text__content { padding: 0 !important; max-width: 540px; }
body.home .grey-block-col p {
	font: 500 16px/1.5 'Montserrat', Arial, sans-serif !important;
	letter-spacing: .02em; color: #000 !important; margin: 0 0 20px !important; padding: 0 !important; width: auto !important; text-align: left !important;
}
/* Buttons (pills with arrow) */
body.home .grey-block-col p a {
	display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
	padding: 14px 26px; border-radius: 40px; border: 0;
	font: 700 18px/1 'Montserrat', Arial, sans-serif !important; letter-spacing: 0; text-decoration: none !important;
}
body.home .grey-block-col p a::after {
	content: ''; display: inline-block !important; margin: 0 0 0 12px !important; flex: none; width: 22px; height: 10px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
body.home .grey-block-col > .wp-block-column:first-child p a { background: #000 !important; color: var(--coroi-yellow) !important; }
body.home .grey-block-col > .wp-block-column:last-child p a { background: var(--coroi-yellow) !important; color: #000 !important; }
body.home .grey-block-col p a:hover { opacity: .85; }
/* The link sits in the paragraph: put it on its own line under the text */
body.home .grey-block-col .wp-block-media-text__content p { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 991px) {
	body.home .grey-block-col { flex-direction: column; }
	.coroi-brands__item { flex-basis: 33.333%; }
}
@media (max-width: 640px) {
	.coroi-brands__item { flex-basis: 50%; }
	.coroi-brands__track { margin: 0 56px; }
	.coroi-brands__btn { width: 38px; height: 38px; }
	.coroi-news__progress { margin-right: 0; }
	body.home .grey-block-col .wp-block-media-text { grid-template-columns: 64px 1fr !important; }
}

/* WordPress "stack on mobile" puts the text under the icon in a 64px column: keep icon + text side by side */
@media (max-width: 640px) {
	body.home .grey-block-col .wp-block-media-text .wp-block-media-text__media { grid-column: 1 !important; grid-row: 1 !important; }
	body.home .grey-block-col .wp-block-media-text .wp-block-media-text__content { grid-column: 2 !important; grid-row: 1 !important; }
}

/* Full-bleed sections must never create a horizontal scrollbar */
body.home { overflow-x: clip; }

/* Careers / Contact alignment: icons and texts start at the same height in both columns; no extra gap before the button */
body.home .grey-block-col .wp-block-media-text .wp-block-media-text__media,
body.home .grey-block-col .wp-block-media-text .wp-block-media-text__content { align-self: start !important; }
body.home .grey-block-col .wp-block-media-text__content p br { display: none; }
body.home .grey-block-col .wp-block-media-text__content p { gap: 20px; }
/* No white band between the grey section and the footer on the homepage */
body.home footer.footer { margin-top: 0 !important; }
body.home .grey-block-col { margin-bottom: 0 !important; }

/* Contact Us button: no top margin (theme: .grey-block-col .wp-block-column:last-of-type ... p a) */
body.home .grey-block-col .wp-block-column:last-of-type .wp-block-media-text__content p a { margin-top: 0 !important; }