/**
 * Styles responsive Socialter.
 *
 * Classes :
 * - bloc-marketing : groupe marketing avec colonnes (Figma 4208:39030)
 * - bloc-compo-media : groupe plat image + textes (Figma 4165:39780)
 *   → mobile : image à gauche, le reste à droite
 */

@media (max-width: 781px) {
	.bloc-marketing {
		padding: 18px !important;
	}

	.bloc-marketing > .wp-block-columns {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px 18px !important;
		align-items: center !important;
		flex-wrap: unset !important;
	}

	/* Les enfants des colonnes deviennent des enfants de la grille
	   (sinon les boutons restent coincés dans la largeur de colonne). */
	.bloc-marketing > .wp-block-columns > .wp-block-column {
		display: contents !important;
	}

	/* Ordre Figma : image | titre, puis texte, puis bouton. */
	.bloc-marketing > .wp-block-columns .wp-block-heading {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		margin: 0 !important;
		font-size: 1.1875rem !important; /* 19px */
		font-weight: 800;
		font-variation-settings: "wght" 800;
		line-height: 1.2 !important;
		letter-spacing: 0.01em;
		color: var(--Accent-fonc, #00264d);
	}

	.bloc-marketing > .wp-block-columns .wp-block-image {
		grid-column: 1;
		grid-row: 1;
		margin: 0 !important;
		width: 100%;
		max-width: none;
	}

	.bloc-marketing > .wp-block-columns .wp-block-image img {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		object-fit: contain;
	}

	.bloc-marketing > .wp-block-columns > .wp-block-column > p,
	.bloc-marketing > .wp-block-columns .wp-block-paragraph {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 0 !important;
		font-size: 1rem !important; /* 16px */
		line-height: 1.4 !important;
		letter-spacing: 0.01em;
		color: var(--Accent-fonc, #00264d);
	}

	/* Boutons : toujours en dessous, pleine largeur (dans colonnes ou enfants directs) */
	.bloc-marketing > .wp-block-columns .wp-block-buttons,
	.bloc-marketing > .wp-block-buttons {
		grid-column: 1 / -1 !important;
		grid-row: 3;
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		gap: 6px;
	}

	.bloc-marketing > .wp-block-columns .wp-block-button,
	.bloc-marketing > .wp-block-buttons .wp-block-button {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.bloc-marketing > .wp-block-columns .wp-block-button__link,
	.bloc-marketing > .wp-block-buttons .wp-block-button__link {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 40px;
		padding: 6px 18px;
		box-sizing: border-box;
		text-align: center;
	}

	/**
	 * Bloc Gutenberg « Acheter le numéro » (.ban-*).
	 * Même logique mobile : image | titre, puis description, puis boutons.
	 */
	.wp-block-socialter-acheter-numero.bloc-marketing {
		padding: 18px !important;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-layout {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px 18px !important;
		align-items: center !important;
		flex-direction: unset !important;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-content {
		display: contents;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-title {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		margin: 0 !important;
		font-size: 1.1875rem !important; /* 19px */
		line-height: 1.2 !important;
		max-width: none;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-media {
		grid-column: 1;
		grid-row: 1;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-media img {
		display: block;
		width: 100% !important;
		height: auto !important;
		object-fit: contain;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-desc {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 0 !important;
		max-width: none;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-actions {
		grid-column: 1 / -1;
		grid-row: 3;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		gap: 6px;
	}

	.wp-block-socialter-acheter-numero.bloc-marketing .ban-btn {
		width: 100% !important;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}

	/**
	 * Composition groupe plat (image + titre + textes + bouton).
	 * Classe à poser sur le groupe : bloc-compo-media
	 * Mobile — Figma 4165:39780 :
	 * eyebrow à gauche pleine largeur, puis image | titre+prix, bouton pleine largeur.
	 */
	.bloc-compo-media {
		display: grid !important;
		grid-template-columns: 94px minmax(0, 1fr);
		column-gap: 18px;
		row-gap: 12px;
		align-items: start;
		align-content: start !important;
		padding: 18px !important;
		min-height: 0 !important;
		height: auto !important;
	}

	/* Eyebrow (« Actuellement en kiosque ») — pleine largeur, à gauche */
	.bloc-compo-media > p:first-of-type {
		grid-column: 1 / -1;
		grid-row: 1;
		margin: 0 !important;
		text-align: left !important;
		justify-self: start;
	}

	.bloc-compo-media > .wp-block-image {
		grid-column: 1;
		grid-row: 2 / 4;
		align-self: start;
		margin: 0 !important;
		width: 94px;
		max-width: 94px;
	}

	.bloc-compo-media > .wp-block-image img {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		object-fit: contain;
	}

	.bloc-compo-media > .wp-block-heading {
		grid-column: 2;
		grid-row: 2;
		margin: 0 !important;
		text-align: left !important;
		align-self: start;
	}

	/* Prix — plus petit, aligné à gauche */
	.bloc-compo-media > p:nth-of-type(2) {
		grid-column: 2;
		grid-row: 3;
		margin: 0 !important;
		text-align: left !important;
		justify-self: start;
		width: 100%;
		font-size: 1rem !important; /* 16px */
		font-weight: 700;
		font-variation-settings: "wght" 700;
		line-height: 1.2 !important;
		color: var(--Gris-fonc, #565656);
	}

	/* Description éventuelle — pleine largeur sous image/titre */
	.bloc-compo-media > p:nth-of-type(n + 3) {
		grid-column: 1 / -1;
		margin: 0 !important;
		text-align: left !important;
	}

	/* Bouton(s) — pleine largeur sous le bloc */
	.bloc-compo-media > .wp-block-buttons {
		grid-column: 1 / -1;
		display: flex !important;
		flex-direction: column;
		width: 100%;
		margin: 0 !important;
		gap: 6px;
	}

	.bloc-compo-media > .wp-block-buttons .wp-block-button {
		width: 100%;
		margin: 0 !important;
	}

	.bloc-compo-media > .wp-block-buttons .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}