/*
 * Taneino Blocks — Shared CSS
 *
 * Styles partagés des composants atomiques (tn-section-header, tn-cta-row,
 * tn-pill, tn-input, tn-ticker, tn-card-list-row, tn-footer).
 *
 * Les styles spécifiques à chaque bloc métier vivent dans blocks/{name}/style.css.
 */

/* =========================================================================
 * Empty-state placeholder — affiché dans l'éditeur Gutenberg quand aucun
 * champ ACF du bloc n'est rempli. Aide visuelle pour l'auteur.
 * ========================================================================= */

.tn-block-placeholder {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--tn-line-2);
	border-radius: 4px;
	color: var(--tn-text-mute);
	font-family: var(--tn-font-body);
	font-size: 0.875rem;
	line-height: 1.4;
	background: var(--tn-bg-2);
}

/* =========================================================================
 * tn-card-list-row — Rangée de liste réutilisée (disciplines, projets…)
 * Layout grid : numéro / label / compteur / flèche.
 * ========================================================================= */

.tn-card-list-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--tn-line);
	color: var(--tn-text);
	text-decoration: none;
	transition: background 160ms ease, padding-inline 160ms ease;
}

.tn-card-list-row:last-child {
	border-bottom: 1px solid var(--tn-line);
}

a.tn-card-list-row:hover,
a.tn-card-list-row:focus-visible {
	background: var(--tn-bg-2);
	padding-inline: 1rem;
}

.tn-card-list-row__num {
	font-family: var(--tn-font-mono);
	font-size: 0.75rem;
	color: var(--tn-text-faint);
	letter-spacing: 0.18em;
	min-width: 2.5em;
}

.tn-card-list-row__label {
	font-family: var(--tn-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.tn-card-list-row__count {
	font-family: var(--tn-font-mono);
	font-size: 0.75rem;
	color: var(--tn-accent);
	letter-spacing: 0.15em;
}

.tn-card-list-row__arrow {
	font-family: var(--tn-font-display);
	font-size: 1.5em;
	color: var(--tn-text-faint);
	transition: color 160ms ease, transform 160ms ease;
}

a.tn-card-list-row:hover .tn-card-list-row__arrow,
a.tn-card-list-row:focus-visible .tn-card-list-row__arrow {
	color: var(--tn-accent);
	transform: translateX(4px);
}

/* =========================================================================
 * tn-input — Champ formulaire stylé (newsletter, quote-form, contact-form…)
 * Label mono kicker au-dessus + input bg-2 bordure line-2.
 * ========================================================================= */

.tn-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tn-input-group__label {
	font-family: var(--tn-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tn-text-faint);
	font-weight: 500;
}

.tn-input,
.tn-textarea,
.tn-select {
	font-family: var(--tn-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	padding: 14px 16px;
	background: var(--tn-bg-2);
	color: var(--tn-text);
	border: 1px solid var(--tn-line-2);
	border-radius: 2px;
	min-height: 52px;
	transition: border-color 160ms ease, background 160ms ease;
	width: 100%;
}

.tn-input::placeholder,
.tn-textarea::placeholder {
	color: var(--tn-text-faint);
}

.tn-input:focus,
.tn-textarea:focus,
.tn-select:focus {
	outline: none;
	border-color: var(--tn-accent);
}

.tn-textarea {
	min-height: 120px;
	resize: vertical;
}

.tn-input-helper {
	font-family: var(--tn-font-body);
	font-size: 0.8125rem;
	color: var(--tn-text-mute);
}

/* =========================================================================
 * tn-section-padding — Espacement interne par défaut des blocs métier.
 *
 * Valeurs en px (pas rem) : sur grand écran le scaling rem cumulé créait
 * jusqu'à 96px de padding-block, ce qui s'ajoutait au padding interne des
 * blocs (.tn-pbc__inner, .tn-hiw__step, etc.) et donnait des espaces
 * démesurés. Les valeurs ci-dessous sont calibrées pour tenir sur 1920px
 * sans dépasser 64px de padding-block.
 * ========================================================================= */

.tn-section {
	padding-block: clamp(32px, 5vw, 64px);
	padding-inline: clamp(16px, 3vw, 32px);
}

/* =========================================================================
 * tn-section-header — Composant complet (container + kicker + titre + sous-
 * titre) hébergé ici pour que tous les blocs qui réutilisent ses classes
 * via render.php (Disciplines, Galleries, Packs, How-it-works, Newsletter,
 * Portfolio, Club Band, Related, SEO, Gallery Search, Instagram) bénéficient
 * du rendu sans dépendre du chargement conditionnel de la CSS du bloc
 * tn-section-header standalone.
 *
 * Variables d'instance pilotées par render.php (CSS variables sur le
 * <header class="tn-section-header"> wrapper) :
 *   --tn-sh-bg-image      : url(...) si image de fond
 *   --tn-sh-bg-color      : var(--tn-...) si couleur de fond
 *   --tn-sh-bg-dim        : 0..0.8 — voile noir au-dessus de l'image
 *   --tn-sh-title-color
 *   --tn-sh-kicker-color
 *   --tn-sh-subtitle-color
 * ========================================================================= */

.tn-section-header {
	position: relative;
	display: block;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	background-color: var(--tn-sh-bg-color, transparent);
	color: var(--tn-text);
	overflow: hidden;
	isolation: isolate;
}

.tn-section-header--has-bg-image {
	background-image: var(--tn-sh-bg-image);
	background-size: cover;
	background-position: center;
	padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
}

.tn-section-header--has-bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--tn-sh-bg-dim, 0));
	z-index: 0;
	pointer-events: none;
	transition: background 200ms ease;
}

.tn-section-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Kicker — pseudo-élément ::before pour la décoration (line/bullet/arrow). */

.tn-section-header__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--tn-sh-kicker-color, var(--tn-text-faint));
}

.tn-section-header__kicker--line::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--tn-accent);
	flex-shrink: 0;
}

.tn-section-header__kicker--bullet::before {
	content: "✦";
	color: var(--tn-accent);
}

.tn-section-header__kicker--arrow::before {
	content: "→";
	color: var(--tn-accent);
	font-weight: 700;
}

.tn-section-header__kicker--numeral {
	color: var(--tn-sh-kicker-color, var(--tn-accent));
}

/* Sous-titre */

.tn-section-header__subtitle {
	margin: 0.25rem 0 0;
	max-width: 60ch;
	color: var(--tn-sh-subtitle-color, var(--tn-text-mute));
}

/* Titre WYSIWYG — la balise (h1/h2/h3 ou p) est choisie dans le WYSIWYG
   selon la sémantique de la page ; on stylise les enfants pour un rendu
   identique quel que soit le tag. */

.tn-section-header__title {
	color: var(--tn-sh-title-color, var(--tn-text));
}

.tn-section-header__title :where(h1, h2, h3, h4, h5, h6, p) {
	font-family: var(--tn-font-display);
	font-size: var(--tn-size-title-l);
	line-height: 0.96;
	letter-spacing: -0.025em;
	font-weight: 700;
	margin: 0;
	color: inherit;
}

/* Styles inline préservés depuis le WYSIWYG. */

.tn-section-header__title em {
	font-style: italic;
	font-weight: 400;
	font-size: 0.85em;
}

.tn-section-header__title mark {
	background: var(--tn-accent);
	color: var(--tn-accent-deep);
	padding: 0 0.18em;
	border-radius: 1px;
}

.tn-section-header__title strong {
	font-weight: 800;
}

.tn-section-header__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

/* Modifier --impact : graisse 800 + tracking serré, équivalent au titre Hero.
   Activé par l'ACF "Titre impactant" sur les blocs qui le proposent. */
.tn-section-header__title--impact :where(h1, h2, h3, h4, h5, h6, p) {
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* =========================================================================
 * tn-cta-row — Bouton CTA réutilisé dans tous les blocs (Hero, Disciplines,
 * Galleries, Newsletter…). Variants : primary (teal), ghost (bordure),
 * inverse (fond sombre), ghost-light (sur image). Hébergé dans shared.css
 * pour que les styles tombent même quand le bloc tn-cta-row n'est pas
 * inséré en standalone — les blocs qui réutilisent ses classes via render.php
 * ne déclenchent pas le chargement conditionnel de tn-cta-row/style.css.
 * ========================================================================= */

.tn-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 18px clamp(1rem, 3vw, 1.75rem);
	font-family: var(--tn-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	border-radius: 2px;
	min-height: 56px;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.tn-cta-row__arrow {
	font-family: var(--tn-font-display);
	font-size: 1.5em;
	line-height: 1;
	flex-shrink: 0;
}

/* Primary — fond teal pleine couleur. */
.tn-cta-row--primary {
	background: var(--tn-accent);
	color: var(--tn-accent-deep);
	font-weight: 700;
}
.tn-cta-row--primary:hover,
.tn-cta-row--primary:focus-visible {
	background: var(--tn-text);
	color: var(--tn-bg);
}

/* Ghost — bordure fine, fond transparent. */
.tn-cta-row--ghost {
	background: transparent;
	color: var(--tn-text);
	border: 1px solid var(--tn-line-2);
}
.tn-cta-row--ghost .tn-cta-row__arrow {
	color: var(--tn-accent);
}
.tn-cta-row--ghost:hover,
.tn-cta-row--ghost:focus-visible {
	border-color: var(--tn-accent);
	background: var(--tn-accent-soft);
}

/* Inverse — fond bg-2 sombre, bordure subtile. */
.tn-cta-row--inverse {
	background: var(--tn-bg-2);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
}
.tn-cta-row--inverse .tn-cta-row__arrow {
	color: var(--tn-accent);
}
.tn-cta-row--inverse:hover,
.tn-cta-row--inverse:focus-visible {
	background: var(--tn-bg);
	border-color: var(--tn-accent);
}

/* Ghost-light — blanc/blanc, flèche teal. Utilisé sur fond sombre. */
.tn-cta-row--ghost-light {
	background: transparent;
	color: var(--tn-text);
	border: 1px solid var(--tn-text);
}
.tn-cta-row--ghost-light .tn-cta-row__arrow {
	color: var(--tn-accent);
}
.tn-cta-row--ghost-light:hover,
.tn-cta-row--ghost-light:focus-visible {
	background: var(--tn-text);
	color: var(--tn-bg);
	border-color: var(--tn-text);
}
.tn-cta-row--ghost-light:hover .tn-cta-row__arrow {
	color: var(--tn-bg);
}

/* =========================================================================
 * Reset margin sur les éléments wrappés par wpautop
 * -------------------------------------------------------------------------
 * Les champs ACF wysiwyg passent par wpautop : leur sortie est wrappée
 * dans un <p>…</p> qui hérite du `margin-block` user-agent et crée des
 * espaces parasites entre titre et description (How-it-works, Pricing,
 * tn-pt, etc.).
 *
 * Important : on reset uniquement `margin`. Les propriétés de typo
 * (font-size, font-weight, font-family) sont gérées par les règles
 * spécifiques de chaque bloc — y toucher ici écraserait le style
 * "impact" du bloc tn-pt et la taille des titres tn-rp/tn-gl.
 * ========================================================================= */
.tn-title :where(p, h1, h2, h3, h4, h5, h6),
.tn-paragraph :where(p),
.tn-pse__body :where(p:first-child),
.tn-pbc__title :where(p, h1, h2, h3),
.tn-rp__title :where(p, h1, h2, h3),
.tn-pt__title :where(p, h1, h2, h3),
.tn-pt__description :where(p),
.tn-hiw__step-title :where(p, h1, h2, h3),
.tn-pack__name :where(p, h1, h2, h3) {
	margin: 0;
}

/* Le dernier paragraphe d'un wysiwyg ne doit pas créer un espace inutile
 * sous un bloc (description courte). */
.tn-paragraph > :where(p:last-child),
.tn-pse__body > :where(p:last-child) {
	margin-bottom: 0;
}

/* =========================================================================
 * tn-gl-card — Composant de carte projet/galerie réutilisé.
 * -------------------------------------------------------------------------
 * Hébergé dans shared.css (et non dans blocks/tn-galleries-latest/style.css)
 * parce qu'il est consommé par plusieurs blocs : Galeries Dernières (1.3) et
 * Projets Liés (3.6). Sans ça, le CSS du bloc galleries-latest ne se charge
 * pas sur les pages projet, et les cartes du bloc Related Projects perdent
 * leur design.
 *
 * Variantes :
 *   .tn-gl-card--featured  : grosse carte (image full-bleed, overlay bas)
 *   .tn-gl-card--secondary : carte cadrée + body séparé en dessous
 *   .tn-gl-card--no-image  : pattern stripes diagonales en fallback
 * ========================================================================= */

/* Pattern de stripes diagonales (fallback texture pour cards sans image) */
.tn-gl-card--no-image {
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.025) 0,
		rgba(255, 255, 255, 0.025) 1px,
		transparent 1px,
		transparent 14px
	);
}

/* Card — base commune */
.tn-gl-card {
	display: block;
	text-decoration: none;
	color: var(--tn-text);
	background: var(--tn-bg-2);
	overflow: hidden;
	transition: transform 200ms ease, opacity 200ms ease;
}
.tn-gl-card:hover, .tn-gl-card:focus-visible { transform: translateY(-2px); }
.tn-gl-card:hover { color: var(--tn-text); }

/* Featured — image full-bleed dans la card, overlay bas */
.tn-gl-card--featured {
	position: relative;
	min-height: clamp(360px, 56vw, 520px);
	background-color: var(--tn-bg-2);
	background-image: var(--tn-gl-bg, none);
	background-size: cover;
	background-position: center;
}
.tn-gl-card--featured::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,11,0.05) 35%, rgba(10,10,11,0.85) 100%);
	pointer-events: none;
}

/* Featured + no-image : on ré-applique le pattern stripes par-dessus le bg-color. */
.tn-gl-card--featured.tn-gl-card--no-image {
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.03) 0,
			rgba(255, 255, 255, 0.03) 1px,
			transparent 1px,
			transparent 14px
		);
}

/* Index "N°042 / 412" en haut à droite. */
.tn-gl-card__index {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	color: rgba(244, 241, 234, 0.8);
	z-index: 2;
}

.tn-gl-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Spécificité bumpée à 0,2,0 pour battre la règle générique .tn-mono. */
.tn-mono.tn-gl-card__badge {
	align-self: flex-start;
	padding: 0.4rem 0.7rem;
	background: var(--tn-accent);
	color: var(--tn-bg);
	font-weight: 700;
}

.tn-gl-card__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.tn-gl-card__heading {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.tn-gl-card--featured .tn-gl-card__title {
	margin: 0;
	font-family: var(--tn-font-display);
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--tn-text);
}

.tn-gl-card__count-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	color: var(--tn-text);
}

.tn-gl-card__count-num {
	font-family: var(--tn-font-display);
	font-size: clamp(2rem, 6.5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.tn-gl-card__count-label {
	margin-top: 0.25rem;
	color: var(--tn-text-faint);
}

/* Secondary — image cadrée, body séparé. */
.tn-gl-card--secondary {
	display: flex;
	flex-direction: column;
	background: transparent;
}

.tn-gl-card--secondary .tn-gl-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 11;
	background-size: cover;
	background-position: center;
	background-color: var(--tn-bg-2);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.03) 0,
		rgba(255, 255, 255, 0.03) 1px,
		transparent 1px,
		transparent 14px
	);
}

.tn-gl-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.75rem 0 0;
}

.tn-mono.tn-gl-card__date {
	color: var(--tn-accent);
	font-weight: 700;
}

.tn-gl-card--secondary .tn-gl-card__title {
	margin: 0;
	font-family: var(--tn-font-display);
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--tn-text);
}

.tn-gl-card--secondary .tn-gl-card__count {
	color: var(--tn-text-mute);
	font-family: var(--tn-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: lowercase;
}

@media (max-width: 640px) {
	.tn-gl-card__overlay { padding: 1rem 1rem 1.25rem; }
	.tn-gl-card__row { flex-direction: row; align-items: flex-end; }
}