/**
 * Knewledge × Kleyr Grasso — page-builders.css
 *
 * Styles minimaux pour les composants posés par les page-builders et
 * shortcodes du plugin :
 *   - hero / logos slider
 *   - newsletter form
 *   - lawyers grid
 *   - contact block
 *   - taxonomy-kg_expertise template
 *
 * Le thème Astra + Elementor portent l'essentiel de l'identité visuelle ;
 * ces styles servent uniquement à garantir le rendu hors-thème (échec de
 * chargement, dev environnement) et la responsivité de base.
 */

/* ─── Grids ──────────────────────────────────────────────────────── */
.knkg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── News card / Event card ────────────────────────────────────── */
.knkg-news-card,
.knkg-event-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.knkg-news-card__media img,
.knkg-event-card__media img,
.knkg-news-card img,
.knkg-event-card img {
	width: 100%;
	height: auto;
	display: block;
}
.knkg-news-card__body,
.knkg-event-card__body {
	padding: 1rem 1.25rem;
}
.knkg-news-card__title,
.knkg-event-card__title {
	margin: 0.25rem 0 0.5rem;
	font-size: 1.05rem;
	line-height: 1.3;
}
.knkg-news-card time,
.knkg-event-card time {
	font-size: 0.85rem;
	color: #6b7280;
}

/* ─── Hero slider ────────────────────────────────────────────────── */
.knkg-hero-slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.knkg-hero-slider__slide {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: #1f2937;
}
.knkg-hero-slider__img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	position: absolute;
	inset: 0;
}
.knkg-hero-slider__overlay {
	position: relative;
	z-index: 2;
	color: #fff;
	padding: 2rem;
	background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
	width: 100%;
	text-align: center;
}
.knkg-hero-slider__cta {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.5rem 1.25rem;
	background: #b91c1c;
	color: #fff;
	text-decoration: none;
	border-radius: 2px;
}

/* ─── Logos slider ───────────────────────────────────────────────── */
.knkg-logos-slider {
	padding: 2rem 0;
	overflow: hidden;
}
.knkg-logos-slider__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
}
.knkg-logos-slider__img {
	max-height: 70px;
	max-width: 160px;
	width: auto;
	height: auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s, opacity 0.2s;
}
.knkg-logos-slider__slide:hover .knkg-logos-slider__img {
	filter: grayscale(0);
	opacity: 1;
}

/* ─── Newsletter form ────────────────────────────────────────────── */
.knkg-newsletter-form {
	max-width: 560px;
	margin: 0 auto;
	padding: 1.5rem;
	background: #f9fafb;
	border-radius: 4px;
}
.knkg-newsletter-form__title {
	margin: 0 0 1rem;
}
.knkg-field {
	margin-bottom: 0.75rem;
}
.knkg-field label {
	display: block;
	font-size: 0.9rem;
	margin-bottom: 0.25rem;
}
.knkg-field input[type="text"],
.knkg-field input[type="email"] {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #d1d5db;
	border-radius: 2px;
}
.knkg-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.knkg-newsletter-form__submit {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	background: #1f2937;
	color: #fff;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}
.knkg-newsletter-form__feedback {
	margin-top: 0.75rem;
	font-size: 0.95rem;
}

/* ─── Lawyers grid ───────────────────────────────────────────────── */
.knkg-lawyers-grid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.knkg-lawyers-grid__filters label {
	display: flex;
	flex-direction: column;
	font-size: 0.9rem;
}
.knkg-lawyers-grid__filters select {
	padding: 0.4rem 0.5rem;
	border: 1px solid #d1d5db;
}
.knkg-lawyers-grid__results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
}
.knkg-lawyer-card__photo {
	width: 100%;
	height: auto;
	display: block;
}
.knkg-lawyer-card__name {
	margin: 0.5rem 0 0.25rem;
	font-size: 1rem;
}
.knkg-lawyer-card__role {
	font-size: 0.85rem;
	color: #6b7280;
	margin: 0;
}
.knkg-lawyer-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.knkg-lawyers-grid__more {
	display: block;
	margin: 2rem auto 0;
	padding: 0.65rem 1.5rem;
	background: transparent;
	border: 1px solid #1f2937;
	cursor: pointer;
}

/* ─── Contact block ──────────────────────────────────────────────── */
.knkg-contact-block__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.knkg-contact-block__item {
	margin-bottom: 0.5rem;
}

/* ─── Expertise page template ───────────────────────────────────── */
.knkg-expertise-page__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1rem;
}
@media (max-width: 900px) {
	.knkg-expertise-page__layout {
		grid-template-columns: 1fr;
	}
}
.knkg-expertise-page__lawyers {
	list-style: none;
	margin: 0;
	padding: 0;
}
.knkg-expertise-page__lawyers li {
	margin-bottom: 0.75rem;
}
.knkg-expertise-page__lawyers a {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.knkg-expertise-page__lawyers img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.knkg-citation {
	border-left: 3px solid #b91c1c;
	padding: 0.5rem 1rem;
	margin: 1rem 0;
}
.knkg-citation__author {
	display: block;
	font-style: normal;
	color: #6b7280;
	margin-top: 0.5rem;
}
.knkg-faq-item {
	border-bottom: 1px solid #e5e7eb;
	padding: 0.75rem 0;
}
.knkg-faq-item__q {
	cursor: pointer;
	font-weight: 600;
}
.knkg-faq__more,
.knkg-news__more {
	display: block;
	margin: 1.5rem auto 0;
	padding: 0.65rem 1.5rem;
	background: transparent;
	border: 1px solid #1f2937;
	cursor: pointer;
}
.knkg-empty {
	text-align: center;
	padding: 2rem;
	color: #6b7280;
}

/* ─── kg_contact_map shortcode ───────────────────────────────────────── */
.kg-contact-map {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0;
}
@media (min-width: 768px) {
	.kg-contact-map {
		grid-template-columns: 1fr 1fr;
	}
}
.kg-contact-map__image-link {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	transition: opacity .15s ease;
}
.kg-contact-map__image-link:hover {
	opacity: 0.92;
}
.kg-contact-map__image {
	width: 100%;
	height: auto;
	display: block;
}
.kg-contact-map__iframe-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}
.kg-contact-map__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ─── kg_contact_block shortcode (refonte) ───────────────────────────── */
.kg-contact-block {
	display: grid;
	gap: 1rem;
	margin: 1rem 0;
	font-style: normal;
	line-height: 1.6;
}
.kg-contact-block__address {
	font-style: normal;
}
.kg-contact-block__line {
	display: block;
}
.kg-contact-block__contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.25rem;
}
.kg-contact-block__contact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.kg-contact-block__contact a:hover {
	opacity: 0.75;
}
.kg-contact-block__legal {
	font-size: 0.875rem;
	color: #6b7280;
	margin-top: 0.5rem;
}
.kg-contact-block__label {
	font-weight: 600;
	margin-right: 0.25rem;
}

/* ============================================================
 * CF7 confirmation / error messages — design partagé
 *
 * Harmonise le rendu des `.wpcf7-response-output` sur toutes les
 * surfaces du site qui hébergent un form CF7 (save-the-date,
 * newsletter sign-up, career application, contact).
 *
 * Pattern visuel :
 *   - Pas de boîte fantôme quand vide (display: none par défaut)
 *   - Apparaît avec un état parent (.wpcf7 .[status])
 *   - Carte épurée : bg unicolore subtil + border 1px assortie
 *
 * Variantes parent :
 *   - .invalid / .unaccepted    → validation rouge
 *   - .sent                     → confirmation turquoise success
 *   - .spam                     → spam jaune
 *   - .failed / .aborted        → envoi échoué rouge
 * ============================================================ */

/* Base : typo + padding seulement, AUCUNE couleur — caché quand vide */
.wpcf7 .wpcf7-response-output,
.wpcf7-form .wpcf7-response-output {
	box-sizing: border-box;
	display: block;
	margin: 24px 0 0;
	padding: 14px 18px;
	font-family: Figtree, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	font-weight: 500;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
}

/* CF7 expose `display: none` natif sur .wpcf7-response-output sans status
 * parent, mais on renforce pour ne jamais voir de boîte vide. */
.wpcf7 .wpcf7-response-output:empty,
.wpcf7-form .wpcf7-response-output:empty {
	display: none;
}

/* État succès (mail envoyé) — turquoise foncé sur fond clair */
.wpcf7 .sent .wpcf7-response-output,
.wpcf7.sent .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output {
	color: #00786b;
	background: #ecfaf8;
	border-color: #c8eee8;
}

/* États erreur — validation form, acceptance manquante, mail échoué */
.wpcf7 .invalid .wpcf7-response-output,
.wpcf7.invalid .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .unaccepted .wpcf7-response-output,
.wpcf7.unaccepted .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 .failed .wpcf7-response-output,
.wpcf7.failed .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .aborted .wpcf7-response-output,
.wpcf7.aborted .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	color: #b00020;
	background: #fdecef;
	border-color: #f5c8d0;
}

/* État spam — jaune doux */
.wpcf7 .spam .wpcf7-response-output,
.wpcf7.spam .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	color: #8a6100;
	background: #fff7e0;
	border-color: #f3e2a4;
}

/* Validation message inline sous chaque champ — petit texte rouge */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: Figtree, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #b00020;
}