/* =========================================================================
   The homepage opportunity showcase: [befello_home_opportunities].

   SCOPE. Every selector starts with .bfd-home. The cards are not styled here
   at all -- they are the theme's card, in the theme's grid, which already
   lays three to a row on a desktop, two on a tablet and one on a phone. The
   nationality field is nationality-picker.css, shared with the directory.

   The values come from the theme's --bf-* tokens with the homepage's own
   numbers as fallbacks (#0069C7 action blue, #252A27 ink), so the controls
   match the page they sit on whichever is present.
   ========================================================================= */

.bfd-home {
	--bfd-home-blue: var(--bf-cta, #0069c7);
	--bfd-home-ink: var(--bf-ink, #252a27);
	--bfd-home-muted: var(--bf-ink-muted, #545b57);
	--bfd-home-line: var(--bf-border, #e4e8e6);
	--bfd-home-radius: var(--bf-radius-btn, 8px);
	--bfd-home-set: var(--bf-surface-yellow, #fff8d8);
	--bfd-home-h: 3.25rem;
	--bfd-home-accent: #087fe4;          /* Befello blue: edges and arrows */
	--bfd-home-blue-soft: #eaf4fe;

	min-width: 0;
}

.bfd-home,
.bfd-home *,
.bfd-home *::before,
.bfd-home *::after {
	box-sizing: border-box;
}

/* --- The two filters -------------------------------------------------------
   Side by side on a wide screen, nationality the wider of the two because a
   country name is longer than a field. No panel, no card, no background:
   two labelled fields on the page, the same height and the same edge. */

.bfd-home__filters {
	display: grid;
	/* Nationality keeps a comfortable fixed share; the field row takes the
	   rest of the line and scrolls inside it. */
	grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
	align-items: start;
	gap: 1rem 1.25rem;
	margin: 0 0 2rem;
}

.bfd-home .bfd-home__label {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--bfd-home-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

/* --- Field of interest -------------------------------------------------------
   One row of boxes, one choice. Real radio buttons, visually hidden and
   stretched over their box, so the click target, the keyboard behaviour and
   the screen-reader announcement are all the native control's. The row
   scrolls sideways and never wraps; the arrows (desktop) and a swipe
   (phone) move it. Selected: Befello blue edge, doubled so it is a change of
   shape as well as colour, on a subtle blue fill.

   (0,2,0) and up, to settle the theme's `input[type="radio"]` sizing and
   `label` weight, and the homepage block's `.bfd-home label` type rule. */

.bfd-home .bfd-home__field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A legend does not lay out like a block in every engine; floated full
   width it does, and the row below clears it. */
.bfd-home .bfd-home__field > legend.bfd-home__label {
	float: left;
	width: 100%;
	padding: 0;
}

.bfd-home__chips {
	clear: both;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.bfd-home__chips-track {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	gap: 0.625rem;
	min-width: 0;
	/* Room for the focus ring inside the scroller, which clips. */
	margin: -4px;
	padding: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 4px;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.bfd-home__chips-track::-webkit-scrollbar {
	display: none;
}

/* A soft fade on whichever edge has more fields beyond it, so a box cut by
   the edge reads as "the row continues", not as a broken box. */
.bfd-home__field.has-more .bfd-home__chips-track {
	--bfd-fade-l: 0px;
	--bfd-fade-r: 0px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bfd-fade-l), #000 calc(100% - var(--bfd-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--bfd-fade-l), #000 calc(100% - var(--bfd-fade-r)), transparent 100%);
}

.bfd-home__field.has-more:not(.at-start) .bfd-home__chips-track {
	--bfd-fade-l: 28px;
}

.bfd-home__field.has-more:not(.at-end) .bfd-home__chips-track {
	--bfd-fade-r: 28px;
}

.bfd-home .bfd-home__chip {
	position: relative;
	display: flex;
	flex: none;
	margin: 0;
	scroll-snap-align: start;
	cursor: pointer;
}

.bfd-home .bfd-home__chip-input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bfd-home .bfd-home__chip-text {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 6.5rem;
	min-height: var(--bfd-home-h);
	padding: 0 1.25rem;
	background: var(--bf-surface, #fff);
	color: var(--bfd-home-ink);
	border: 1px solid var(--bf-border-strong, #cbd2ce);
	border-radius: var(--bfd-home-radius);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bfd-home .bfd-home__chip:hover .bfd-home__chip-text {
	border-color: var(--bfd-home-muted);
}

.bfd-home .bfd-home__chip-input:checked + .bfd-home__chip-text {
	background: var(--bfd-home-blue-soft, #eaf4fe);
	color: var(--bfd-home-ink);
	border-color: var(--bfd-home-accent, #087fe4);
	box-shadow: inset 0 0 0 1px var(--bfd-home-accent, #087fe4);
	font-weight: 500;
}

.bfd-home .bfd-home__chip-input:focus {
	outline: none;
}

.bfd-home .bfd-home__chip-input:focus-visible + .bfd-home__chip-text {
	outline: 2px solid var(--befello-focus-ring, #0069c7);
	outline-offset: 2px;
}

/* The arrows: quiet circles at the end of the row. Next carries the soft
   brand tint while there is more to see; a disabled arrow goes grey. */
.bfd-home .bfd-home__chips-arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: var(--bfd-home-blue-soft, #eaf4fe);
	color: var(--bfd-home-accent, #087fe4);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bfd-home .bfd-home__chips-arrow:hover,
.bfd-home .bfd-home__chips-arrow:focus {
	background: #d6eafc;
	color: var(--bfd-home-blue);
}

.bfd-home .bfd-home__chips-arrow:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #0069c7);
	outline-offset: 2px;
}

.bfd-home .bfd-home__chips-arrow:disabled,
.bfd-home .bfd-home__chips-arrow:disabled:hover {
	background: var(--bf-surface-subtle, #f2f5f3);
	color: #9aa39e;
	cursor: default;
}

.bfd-home .bfd-home__chips-arrow[hidden] {
	display: none;
}

.bfd-home .bfd-home__chips-arrow svg {
	display: block;
	width: 18px;
	height: 18px;
}

.bfd-home__submit {
	grid-column: 1 / -1;
}

/* --- Results -------------------------------------------------------------- */

/*
 * The grid is the theme's, and so is its rule: as many columns as fit at a
 * readable card width, at most three. Left to that rule a tablet in
 * portrait (820px) still fits three cards of 246px. The homepage asks for
 * two there, so between the phone line and a desktop the showcase's own
 * grid is told two -- the column count only; the cards and the gap are
 * untouched, and so is every other grid on the site.
 */
@media (min-width: 641px) and (max-width: 1023.98px) {
	.bfd-home .befello-opportunity-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bfd-home__results {
	position: relative;
	min-width: 0;
}

/* Dimmed while a request is out, never emptied: the grid stays where it is,
   so the page does not jump under the reader between two choices. */
.bfd-home.is-loading .bfd-home__results {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.bfd-home__empty {
	padding: 2.5rem 1.25rem;
	border: 1px solid var(--bfd-home-line);
	border-radius: var(--bf-radius-card, 14px);
	text-align: center;
}

.bfd-home .bfd-home__empty-title {
	margin: 0 0 0.5rem;
	color: var(--bfd-home-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
}

.bfd-home .bfd-home__empty-hint {
	margin: 0 0 1.25rem;
	color: var(--bfd-home-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.bfd-home .bfd-home__empty-clear {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1.25rem;
	border: 1px solid var(--bfd-home-ink);
	border-radius: var(--bfd-home-radius);
	background: var(--bf-surface, #fff);
	color: var(--bfd-home-ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.bfd-home .bfd-home__empty-clear:hover,
.bfd-home .bfd-home__empty-clear:focus {
	background: var(--bf-surface, #fff);
	color: var(--bfd-home-ink);
	border-color: var(--bfd-home-ink);
}

.bfd-home .bfd-home__empty-clear:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #0069c7);
	outline-offset: 2px;
}

/* --- The one way on --------------------------------------------------------- */

.bfd-home__cta {
	margin-top: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.bfd-home.is-loading .bfd-home__results {
		transition: none;
	}
}

/* --- Phone ---------------------------------------------------------------
   640px, the card grid's own phone line. The fields stack, take the full
   width at 48px, and the CTA spans the column under the last card. */

/* Nationality above the field row once there is no longer room for both
   side by side without squeezing the row to two boxes. */
@media (max-width: 900px) {
	.bfd-home__filters {
		grid-template-columns: minmax(0, 1fr);
	}

	.bfd-home__nat {
		max-width: 28rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfd-home .bfd-home__chip-text,
	.bfd-home .bfd-home__chips-arrow {
		transition: none;
	}
}

@media (max-width: 640px) {
	.bfd-home {
		--bfd-home-h: 3rem;
	}

	.bfd-home__filters {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.bfd-home__nat {
		max-width: none;
	}

	/* A finger swipes the row; the arrows would only take its room. */
	.bfd-home .bfd-home__chips-arrow,
	.bfd-home .bfd-home__chips-arrow:disabled {
		display: none;
	}

	.bfd-home .bfd-home__chip-text {
		min-width: 0;
		padding: 0 1rem;
		font-size: 0.9375rem;
	}

	.bfd-home .bfd-home__label {
		margin-bottom: 0.25rem;
	}

	.bfd-home__cta {
		margin-top: 2rem;
	}

	.bfd-home__cta .bfd-home__cta-link {
		width: 100%;
	}
}