/* ============================================================================
   INSIGHTS TECH: the archive, the card, the single.

   A separate stylesheet from blog.css, not an extension of it, because the two
   sections are answering different questions. An article card sells a read: a
   16:9 photograph, a title, three lines of excerpt, "Lire l'article". An
   insight card has to make the value legible in about two seconds, so it leads
   with the diagram — which IS the lesson here, not decoration — states the
   format and the minute, and says one sentence.

   Everything is built on the site's own tokens, so this reads as hariri.ch and
   not as a second site bolted on. What makes it recognisable as its own section
   is not a new palette, it is the shape: a format badge on everything, a
   reading-time cue everywhere, denser cards, and a diagram at 16:9 rather than
   a photograph.

   Every class is prefixed in- . blog.css warns that a bare `.post` rule
   collided with WordPress's own class; the same discipline applies here, and
   `in-` cannot collide with `bl-`, Elementor, or core.
   ========================================================================== */

.in {
	--in-gap: clamp(20px, 2.6vw, 34px);
	padding: var(--page-top) var(--gut) clamp(80px, 10vw, 140px);
	max-width: var(--maxw);
	margin-inline: auto;
}

/* ============================================================================
   THE HERO
   ========================================================================== */

.in__head {
	max-width: 68ch;
	margin-bottom: clamp(30px, 4vw, 52px);
}

.in__kick {
	margin: 0 0 18px;
	font-size: var(--label);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--accent);
}

.in__h1 {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--title-page);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--text);
	text-wrap: balance;
}

.in__lede {
	margin: 18px 0 0;
	max-width: 58ch;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.65;
	color: var(--text-2);
}

/* The three promises, stated as facts rather than as marketing. Rendered as a
   definition-style row so a reader takes in "court / visuel / concret" without
   reading a paragraph about it. */
.in__promise {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--meta);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-2);
}

.in__promise li { display: flex; align-items: center; gap: 8px; }

.in__promise li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}

/* ============================================================================
   THE FORMAT ROW

   Only formats that hold something are ever rendered, so this row can never
   lead to an empty page — see hti_formats_in_use(). At launch it may hold two
   chips, and two chips look deliberate; seven chips with five dead ends do not.
   ========================================================================== */

.in__formats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(30px, 4vw, 48px);
	padding: 0;
	list-style: none;
}

.in__format {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: var(--meta);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--text-2);
	text-decoration: none;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: color .18s var(--ease-soft), border-color .18s var(--ease-soft);
}

.in__format:hover,
.in__format:focus-visible { color: var(--text); border-color: var(--accent-mute); }

.in__format.is-on {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-mute);
}

.in__format i {
	font-style: normal;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.in__format.is-on i { color: var(--accent); }

/* ============================================================================
   THE BADGE

   The one element that appears on every card, every single and every related
   entry. It is what tells a reader, before they read anything, that this is not
   an article.
   ========================================================================== */

.in-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
	background: var(--accent-mute);
	border: 1px solid transparent;
	border-radius: 6px;
	white-space: nowrap;
}

a.in-badge:hover { border-color: var(--accent); }

/* The minute. Deliberately plain text beside the badge rather than a second
   chip: two chips read as two categories. */
.in-min {
	font-size: var(--meta);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-2);
	white-space: nowrap;
}

.in-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* ============================================================================
   THE FEATURED INSIGHT

   Shown only when there is more than one insight to feature it above; with a
   single published insight the archive is one grid of one card, which looks
   intentional, while a "featured" heading over the only entry does not.
   ========================================================================== */

.in__lead {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 46px);
	align-items: center;
	margin: 0 0 clamp(38px, 5vw, 64px);
	padding: 0 0 clamp(38px, 5vw, 64px);
	border-bottom: 1px solid var(--line);
}

.in__leadfig {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
}

.in__leadfig img,
.in-card__fig img {
	width: 100%;
	height: 100%;
	/* `contain`, never `cover`. A diagram cropped is a diagram with a label
	   missing, and the label is the content. The frame is the same tone as the
	   card so the letterboxing reads as the card rather than as a gap. */
	object-fit: contain;
	display: block;
	background: var(--canvas);
}

.in__leadt {
	margin: 14px 0 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(24px, 2.9vw, 38px);
	line-height: 1.13;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.in__leadt a { color: var(--text); text-decoration: none; }
.in__leadt a:hover { color: var(--accent-hi); }

.in__leadx {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-2);
}

.in__leadcta { margin: 20px 0 0; }

/* ============================================================================
   THE GRID AND THE CARD
   ========================================================================== */

.in__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--in-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.in-card {
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .2s var(--ease-soft), transform .3s var(--ease);
}

.in-card:hover { border-color: var(--accent-mute); transform: translateY(-3px); }

.in-card__fig {
	display: block;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--canvas);
	border-bottom: 1px solid var(--line);
}

/* No diagram: a drawn placeholder rather than a broken frame or a collapsed
   card. Matches the treatment blog.css already uses for a missing thumbnail. */
.in-card__fig--ph {
	background:
		radial-gradient(120% 90% at 30% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
		var(--panel-2);
}

.in-card__b {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px 20px;
	flex: 1;
}

.in-card__t {
	margin: 0;
	font-family: var(--display);
	font-weight: 650;
	font-size: 17.5px;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.in-card__t a { color: var(--text); text-decoration: none; }
.in-card__t a:hover { color: var(--accent-hi); }

/* One sentence. The rule that keeps a card scannable is a hard clamp rather
   than trust: a takeaway edited by hand can be any length. */
.in-card__x {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.in-card__more {
	margin-top: auto;
	padding-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
}

.in-card__more:hover { color: var(--accent-hi); }
.in-card__more span { transition: margin-left .2s var(--ease-soft); }
.in-card__more:hover span { margin-left: 5px; }

.in__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: clamp(44px, 6vw, 72px) 0 0;
	padding-top: clamp(26px, 4vw, 40px);
	border-top: 1px solid var(--line);
	font-size: 13px;
	font-weight: 600;
}

.in__pager .page-numbers {
	min-width: 40px;
	padding: 9px 13px;
	text-align: center;
	color: var(--text-2);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: 9px;
	transition: color .18s var(--ease-soft), border-color .18s var(--ease-soft);
}

.in__pager .page-numbers:hover { color: var(--text); border-color: var(--accent-mute); }

.in__pager .page-numbers.current {
	color: var(--canvas);
	background: var(--accent);
	border-color: var(--accent);
}

.in__pager .page-numbers.dots { border-color: transparent; }

.in__empty {
	padding: 40px 0 8px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-2);
}

/* ============================================================================
   ONE INSIGHT

   Narrower than an article and shorter. The article template gives running text
   the full container because an article is a read; an insight is one idea and
   the whole page fits inside a single measure, diagram included.
   ========================================================================== */

.in-art {
	/* The site's own container, and the same one the article uses: --maxw with
	   a --gut inside it, so the badge, the title, the diagram, the text and the
	   takeaway all begin and end on the header's edges — and on the edges of
	   the related cards below, which were already built this way.

	   It was a 760px reading column before. That is the better measure for
	   running text and it made this page the only one on the site that started
	   somewhere else, which reads as a template that has not been finished
	   rather than as a deliberate column. Matching the article is worth more
	   here than the measure, because the body is three short paragraphs. */
	--in-col: var(--maxw);
	padding: var(--page-top) var(--gut) clamp(48px, 6vw, 80px);
	max-width: var(--in-col);
	margin-inline: auto;
}

.in-art__head { margin: 0 0 clamp(24px, 3vw, 34px); }

.in-art__line { margin: 0 0 18px; }

.in-art__h1 {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--text);
	text-wrap: balance;
}

/* The hook under the title, when it says something the title does not. */
.in-art__hook {
	margin: 16px 0 0;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: var(--text-2);
}

.in-art__fig {
	margin: 0 0 clamp(26px, 3.4vw, 40px);
}

.in-art__scroll { display: block; }

.in-art__fig img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--canvas);
}

.in-art__fig figcaption {
	margin-top: 10px;
	font-size: var(--meta);
	font-weight: 500;
	line-height: 1.5;
	color: var(--text-2);
}

.in-body {
	font-size: clamp(16px, 1.15vw, 17.5px);
	line-height: 1.75;
	color: var(--c-article-fg);
}

.in-body > * + * { margin-top: 1.3em; }

.in-body :is(h2, h3) {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--text);
	margin-top: 1.9em;
	font-size: clamp(20px, 2vw, 25px);
	text-wrap: balance;
}

.in-body a {
	color: var(--accent-hi);
	text-decoration: underline;
	text-decoration-color: var(--accent-mute);
	text-underline-offset: 3px;
}

.in-body a:hover { text-decoration-color: var(--accent); }

.in-body :is(ul, ol) { padding-left: 1.25em; }
.in-body li + li { margin-top: .5em; }

.in-body code {
	font-family: var(--code);
	font-size: .92em;
	padding: .15em .4em;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 5px;
}

/* ---- the takeaway: the one thing to remember, given its own frame ---- */

.in-take {
	margin: clamp(30px, 4vw, 44px) 0 0;
	padding: 22px 24px;
	background: var(--panel);
	border: 1px solid var(--line);
	/* The only place the ember appears in this section. The palette reserves it
	   for resolution — a stage passing, a fragment docking — and a takeaway is
	   exactly that: the point at which the idea lands. */
	border-left: 3px solid var(--ember);
	border-radius: 4px 12px 12px 4px;
}

.in-take__k {
	margin: 0 0 8px;
	font-size: var(--label);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--ember);
}

.in-take__t {
	margin: 0;
	font-size: clamp(16px, 1.3vw, 18.5px);
	line-height: 1.6;
	color: var(--text);
}

.in-art__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	margin: clamp(30px, 4vw, 44px) 0 0;
	padding-top: clamp(22px, 3vw, 32px);
	border-top: 1px solid var(--line);
	font-size: var(--meta);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-2);
}

.in-art__foot a { color: var(--accent); text-decoration: none; }
.in-art__foot a:hover { color: var(--accent-hi); }

.in-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: clamp(24px, 3vw, 32px) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--meta);
}

.in-tags a {
	display: inline-block;
	padding: 5px 11px;
	color: var(--text-2);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: 999px;
}

.in-tags a:hover { color: var(--text); border-color: var(--accent-mute); }

/* ---- related ---- */

.in-rel {
	max-width: var(--maxw);
	/* No top margin: the article above already ends on its own bottom padding,
	   and stacking the two put a quarter of a screen of nothing between the
	   takeaway and the next thing to read. */
	margin: 0 auto;
	padding: clamp(36px, 4.5vw, 54px) var(--gut) clamp(20px, 3vw, 40px);
	border-top: 1px solid var(--line);
}

.in-rel__k {
	margin: 0 0 6px;
	font-size: var(--label);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--accent);
}

.in-rel__h {
	margin: 0 0 clamp(22px, 3vw, 32px);
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--text);
}

/* ============================================================================
   THE CROSS-LINK

   One strip, used in two places: at the top of the blog archive, pointing at
   the insights, and on the insights archive when it points back. It is the
   whole homepage-integration answer for launch — see inc/insights.php for why
   the homepage itself is left alone.
   ========================================================================== */

.in-xlink {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 clamp(30px, 4vw, 46px);
	padding: 18px 22px;
	/* radial-gradient, not linear: the `at 0% 0%` position syntax is only valid
	   on a radial one, and inside a linear it invalidates the whole shorthand —
	   which took the panel colour and the strip's entire background with it. */
	background:
		radial-gradient(120% 160% at 0% 0%, var(--accent-mute), transparent 62%),
		var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
}

/* Placed after a list rather than before one: the margin moves to the top, and
   it is a modifier rather than an inline style so both call sites agree. */
.in-xlink--after {
	margin: clamp(40px, 5vw, 64px) 0 0;
}

.in-xlink__t {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-2);
}

.in-xlink__t strong { color: var(--text); font-weight: 650; }

/* ============================================================================
   RESPONSIVE

   Insights are read on a phone more than anywhere else, and the diagram is the
   part that fails first: a 1200x675 card holding four boxes of labels is
   legible at 390px only because it is never cropped and never inset into a
   narrower column than the text. Both are enforced above with object-fit and
   full-bleed widths respectively.
   ========================================================================== */

@media (max-width: 900px) {
	.in__lead {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

/* The diagram, held readable.

   A 1200x675 card whose step labels are set around 22px renders them near 6px
   inside a 390px viewport — the picture is there and its content is not, which
   for a diagram made of words means the lesson did not arrive. Below this width
   it keeps a floor and scrolls sideways instead of shrinking, which brings the
   labels back to about 11px. The same answer blog.css already gives a table too
   wide for the column. */
@media (max-width: 680px) {
	.in-art__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* The rounded corners belong to the frame, so the frame moves out here
		   and the image inside it stops drawing its own. */
		border: 1px solid var(--line);
		border-radius: 14px;
		background: var(--canvas);
	}

	.in-art__scroll img {
		min-width: 600px;
		border: 0;
		border-radius: 0;
	}

	/* Says the picture continues, without adding a control to press. */
	.in-art__fig figcaption::after {
		content: " ↔";
		color: var(--accent);
	}
}

@media (max-width: 620px) {
	.in__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	.in-card__b { padding: 14px 16px 18px; }

	.in-card__t { font-size: 17px; }

	/* The badge and the minute stop being a row and wrap, rather than the badge
	   shrinking its text: a truncated format label is worse than a second line. */
	.in-line { gap: 8px; }

	.in-take { padding: 18px 18px; }

	.in-xlink { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.in-card,
	.in-card__more span { transition: none; }

	.in-card:hover { transform: none; }
}