/**
 * Flex Recruit – latest vacancies panel ([flex_recruit_latest])
 * Part of the per-feature CSS split. Loaded conditionally by Plugin::enqueue_frontend_assets().
 *
 * Designed to sit inside a hero banner over a photo + scrim (dark theme)
 * or in a regular page section (light theme). Sized to replace hero intro
 * copy: max 520px wide, three compact rows.
 */

.fr-latest {
	/* Self-contained: this component must render correctly wherever it is
	   pasted (builder widgets, theme templates), with or without the other
	   plugin bundles. Brand values mirror base.css. */
	--fr-primary:    #009AB2;
	--fr-dark:       #173557;
	--fr-text-light: #5a6b7d;

	max-width:     520px;
	border-radius: 14px;
	overflow:      hidden;
	font-size:     1rem;
}

/* Toggles — [flex_recruit_latest shadow="off" border="off" radius="off"] */
.fr-latest--no-shadow { box-shadow: none !important; }
.fr-latest--no-border { border: none !important; }

/* ── Dark: translucent navy glass for on-photo placement ─────────────── */
.fr-latest--dark {
	background:      rgba(18, 30, 48, .55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border:          1px solid rgba(255, 255, 255, .12);
	box-shadow:      0 10px 34px -12px rgba(8, 15, 26, .55);
}

/* No backdrop-filter support → heavier plate so contrast still holds. */
@supports not (backdrop-filter: blur(10px)) {
	.fr-latest--dark { background: rgba(18, 30, 48, .82); }
}

/* ── Light: solid card for normal sections ───────────────────────────── */
.fr-latest--light {
	background: #fff;
	border:     1px solid rgba(15, 30, 50, .08);
	box-shadow: 0 8px 28px -14px rgba(10, 20, 35, .18);
}

/* ── Head ────────────────────────────────────────────────────────────── */
.fr-latest__head {
	padding: 1rem 1.25rem .55rem;
}

.fr-latest__eyebrow {
	font-size:      .62rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .14em;
}
.fr-latest--dark  .fr-latest__eyebrow { color: rgba(255, 255, 255, .55); }
.fr-latest--light .fr-latest__eyebrow { color: var(--fr-primary); }

/* Headerless mode ([... title="off"]): first row provides the top spacing. */
.fr-latest__list:first-child .fr-latest__item:first-child .fr-latest__link { padding-top: 1rem; }

/* Footerless mode ([... all="off"]): last row provides the bottom spacing. */
.fr-latest__list:last-child .fr-latest__item:last-child .fr-latest__link { padding-bottom: 1rem; }

/* ── List rows ───────────────────────────────────────────────────────── */
.fr-latest__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.fr-latest__item + .fr-latest__item { border-top: 1px solid; }
.fr-latest--dark  .fr-latest__item + .fr-latest__item { border-top-color: rgba(255, 255, 255, .09); }
.fr-latest--light .fr-latest__item + .fr-latest__item { border-top-color: rgba(15, 30, 50, .07); }

.fr-latest__link {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .9rem;
	padding:         .8rem 1.25rem;
	text-decoration: none;
	transition:      background-color .16s ease;
}
.fr-latest--dark  .fr-latest__link:hover { background: rgba(255, 255, 255, .07); }
.fr-latest--light .fr-latest__link:hover { background: rgba(0, 154, 178, .06); }

.fr-latest__link:focus-visible {
	outline:        3px solid var(--fr-primary);
	outline-offset: -3px;
}

.fr-latest__text {
	display:        flex;
	flex-direction: column;
	gap:            .15rem;
	min-width:      0;
}

.fr-latest__title {
	font-weight:   600;
	font-size:     .95rem;
	line-height:   1.35;
	display:       flex;
	align-items:   center;
	gap:           .5rem;
	overflow:      hidden;
}
.fr-latest--dark  .fr-latest__title { color: #fff; }
.fr-latest--light .fr-latest__title { color: var(--fr-dark); }

.fr-latest__new {
	flex-shrink:    0;
	font-size:      .58rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding:        .18rem .45rem;
	border-radius:  999px;
	background:     var(--fr-primary);
	color:          #fff;
}

.fr-latest__meta {
	font-size: .78rem;
}
.fr-latest--dark  .fr-latest__meta { color: rgba(255, 255, 255, .62); }
.fr-latest--light .fr-latest__meta { color: var(--fr-text-light); }

.fr-latest__chevron {
	flex-shrink: 0;
	width:       1rem;
	height:      1rem;
	transition:  transform .16s ease;
}
.fr-latest__chevron svg { width: 100%; height: 100%; display: block; }
.fr-latest--dark  .fr-latest__chevron { color: rgba(255, 255, 255, .45); }
.fr-latest--light .fr-latest__chevron { color: var(--fr-primary); }
.fr-latest__link:hover .fr-latest__chevron { transform: translateX(3px); }

/* ── Footer link ─────────────────────────────────────────────────────── */
.fr-latest__all {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             .4rem;
	padding:         .75rem 1.25rem;
	font-size:       .85rem;
	font-weight:     600;
	text-decoration: none;
	border-top:      1px solid;
	transition:      background-color .16s ease;
}
.fr-latest--dark .fr-latest__all {
	color:            #fff;
	background:       rgba(0, 154, 178, .85);
	border-top-color: transparent;
}
.fr-latest--dark .fr-latest__all:hover { background: var(--fr-primary); }

.fr-latest--light .fr-latest__all {
	color:            var(--fr-primary);
	background:       transparent;
	border-top-color: rgba(15, 30, 50, .07);
}
.fr-latest--light .fr-latest__all:hover { background: rgba(0, 154, 178, .06); }

.fr-latest__all svg {
	width:  .95rem;
	height: .95rem;
}

.fr-latest__all:focus-visible {
	outline:        3px solid var(--fr-primary);
	outline-offset: -3px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.fr-latest { max-width: none; }
	.fr-latest__link { padding: .75rem 1rem; }
	.fr-latest__head { padding: .9rem 1rem .5rem; }
}