/* BP Advice & News widget styles
 *
 * Transparent outer section. The page background shows through
 * and the cards stand on their own. A centered section heading
 * sits above a single row of three article cards. Each card is
 * a horizontal split: image on the inline-start, content (title
 * + description + link) on the inline-end. The image is a real
 * <img> with object-fit: cover so the photograph always fills
 * its slot without distortion. The link is an underline-on-hover
 * inline anchor with a small arrow.
 *
 * All rules stay under .bp-advice-news. Logical properties
 * keep LTR/RTL aligned without an override file. Layout uses
 * CSS grid so the responsive breakpoints stay clean and the
 * image/text ratio is editable from Elementor.
 */

.bp-advice-news {
	--bp-an-pad:          0;
	--bp-an-heading:      #374F37;
	--bp-an-card-bg:      #FFFFFF;
	--bp-an-card-border:  #E4DCCB;
	--bp-an-card-radius:  14px;
	--bp-an-card-gap:     18px;
	--bp-an-card-min-h:   220px;
	--bp-an-image-ratio:  40%;
	--bp-an-title:        #1F2A1F;
	--bp-an-desc:         #5C6A5C;
	--bp-an-link:         #374F37;
	--bp-an-font:         var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-an-display:      var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	font-family: var(--bp-an-font);
	color: var(--bp-an-title);

	/* Transparent section so the page background shows through;
	 * no border, no radius, no shadow. Only vertical padding is
	 * kept to preserve breathing room above/below the cards. */
	padding-block: 0;
	padding-inline: 0;

	/* Flex column so head, grid stack vertically with predictable
	 * spacing. The outer section no longer carries a background,
	 * border or radius, so heading sits naturally above the cards
	 * (no fieldset-legend trick needed). */
	display: flex;
	flex-direction: column;
}

/* ---- Section heading ----
 * Eyebrow + title share the same visual scale as the other
 * Barbary Plante section headings ("COMMENT L'UTILISER ?",
 * "NOS RÉSULTATS", "À SAVOIR"). The head wrapper centers the
 * stack and sits above the grid with consistent spacing. */
.bp-advice-news__head {
	position: relative;
	z-index: 1;
	align-self: stretch;
	text-align: center;
	margin-block-end: 28px;
}

.bp-advice-news__eyebrow {
	margin: 0 0 10px;
	font-family: var(--bp-an-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-an-heading);
}

.bp-advice-news__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	max-inline-size: 90%;
	margin-inline: auto;
	text-align: center;
	font-family: var(--bp-an-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--bp-an-heading);
	text-transform: uppercase;
}

/* ---- Cards grid ----
 * CSS grid: 3 columns on desktop, 2 on tablet, 1 on mobile. The
 * selector targets the list directly so Elementor's responsive
 * column control can drive the layout. */
.bp-advice-news__grid {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bp-an-card-gap);
}

.bp-advice-news__card-wrap {
	display: flex;
	block-size: 100%;
	min-inline-size: 0;
}

/* ---- Single card ----
 * Horizontal split (image / content) via CSS grid. The image
 * column takes a percentage of the card width (editable from
 * Elementor) and the content fills the rest. align-items:
 * center keeps the text vertically aligned with the image.
 *
 * min-block-size guarantees equal card heights even when the
 * image is short or absent; overflow: hidden is what allows
 * the border-radius to clip the image on the leading edge. */
.bp-advice-news__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-block-size: var(--bp-an-card-min-h);
	block-size: 100%;
	background-color: var(--bp-an-card-bg);
	border: 1px solid var(--bp-an-card-border);
	border-radius: var(--bp-an-card-radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

a.bp-advice-news__card:hover,
a.bp-advice-news__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--bp-an-shadow);
	border-color: #D4CAB5;
	outline: none;
}

/* ---- Image slot ----
 * The image is a real <img> with object-fit: cover so any
 * photo aspect ratio fills the slot without distortion.
 * Background colour acts as a fallback when no image is set
 * so the card still reads as a card on the editor preview. */
.bp-advice-news__image {
	position: relative;
	inline-size: 100%;
	block-size: 200px;
	min-block-size: 200px;
	flex: 0 0 auto;
	background-color: #E9E2D2;
	overflow: hidden;
}

.bp-advice-news__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---- Content slot ----
 * Flex column that fills the card's full block-size (set via
 * align-items: stretch on the parent grid) so all three cards
 * in a row share the same height. The link is pushed to the
 * bottom of the column with margin-block-start: auto, which
 * keeps "LIRE L'ARTICLE" aligned consistently across cards
 * regardless of how long the title or description is. */
.bp-advice-news__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch;
	gap: 10px;
	padding: 20px 22px;
	min-inline-size: 0;
}

.bp-advice-news__article-title {
	margin: 0;
	font-family: var(--bp-an-font);
	font-weight: 700;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--bp-an-title);
}

.bp-advice-news__description {
	margin: 0;
	font-family: var(--bp-an-font);
	font-weight: 400;
	font-size: clamp(13px, 1.1vw, 14px);
	line-height: 1.55;
	color: var(--bp-an-desc);
}

/* ---- Read-more link ----
 * Inline-flex with a small arrow that nudges right on hover.
 * The arrow is a real <span> with a unicode glyph so the
 * widget ships with no icon dependency.
 *
 * Color: default is the muted description tone; hover/focus
 * shifts to the Barbary Plante site green (#374F37). A short
 * transition keeps the change subtle. The link is always
 * rendered as a real <a>; when no URL is provided in
 * Elementor, the PHP adds data-bp-advice-placeholder and a
 * tiny vanilla-JS handler calls preventDefault() so the
 * placeholder never scrolls to the top of the page. */
.bp-advice-news__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: auto;
	font-family: var(--bp-an-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bp-an-desc);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

a.bp-advice-news__link:hover,
a.bp-advice-news__link:focus-visible {
	color: var(--bp-an-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
	gap: 10px;
	outline: none;
}

.bp-advice-news__link-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

a.bp-advice-news__link:hover .bp-advice-news__link-arrow,
a.bp-advice-news__link:focus-visible .bp-advice-news__link-arrow {
	transform: translateX(2px);
}

/* ---- Tablet: 2 columns ---- */
@media (max-width: 960px) {
	.bp-advice-news {
		--bp-an-pad: 28px;
	}
}

/* ---- Mobile: 1 column, image on top ---- */
@media (max-width: 720px) {
	.bp-advice-news {
		--bp-an-pad: 22px;
		--bp-an-card-min-h: auto;
		--bp-an-image-ratio: 100%;
	}

	.bp-advice-news__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.bp-advice-news__image {
		block-size: 180px;
		min-block-size: 180px;
	}

	.bp-advice-news__heading {
		font-size: 22px;
		letter-spacing: 0.02em;
	}
}