/* ============================================================
   IT-RANKS Publications — page section
   Designed to sit in the /innovation/ container between
   innovation_pipeline_v2 (#F7FAFF) and itranks_cta (#FCFCFD).
   ============================================================ */

.itrp {
	--itrp-bg:       #0B1222;
	--itrp-text:     #FFFFFF;
	--itrp-muted:    rgba(255,255,255,.60);
	--itrp-accent:   #3B82F6;
	--itrp-accent-2: #7FB0FF;
	--itrp-ease:     cubic-bezier(.16,1,.3,1);

	position: relative;
	overflow: hidden;
	background: var(--itrp-bg);
	color: var(--itrp-text);
	/* Copied verbatim from the .ip-irdh cascade in the vendor styles.css so the
	   band sits on exactly the same gutters as the sections above it. The
	   padding-inline override is a second declaration there too — it wins over
	   the 80px shorthand and turns the gutter into "centre a 1280px column,
	   never closer than 80px to the edge". */
	padding: clamp(64px, 7vw, 104px) 80px;
	padding-inline: max(80px, 50% - 640px);

	/* Arriving here from a publication's back button lands on the anchor —
	   leave room so the heading is not tucked under the site header. */
	scroll-margin-top: 96px;
}

@media (max-width: 1024px) { .itrp { padding: 80px 40px; padding-inline: 12px; } }
@media (max-width: 640px)  { .itrp { padding: 60px 24px; padding-inline: 12px; } }

/* Light variant — matched to innovation_irdh_v2 ("The IT-RANKS Innovation
   Engine"): flat #F4F7FC, no glow, and the same body-text grey that section
   uses for .ip-irdh-sub. Tokens mirror --ip-blue / --ip-dark from styles.css. */
.itrp.itrp--light {
	--itrp-bg:       #F4F7FC;
	--itrp-text:     #0B1222;
	--itrp-muted:    #5B6B82;
	--itrp-accent:   #3B82F6;
	--itrp-accent-2: #3B82F6;
}

.itrp__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 78% at 82% 6%,  rgba(59,130,246,.20), transparent 66%),
		radial-gradient(40% 62% at 8% 96%,  rgba(127,176,255,.10), transparent 70%);
}

/* The irdh band is a flat colour — no atmospheric glow, so the light
   variant drops it entirely rather than tinting the section blue. */
.itrp--light .itrp__glow { display: none; }

/* Content column — the same declaration .ip-irdh-inner carries. The section's
   padding-inline does the centring; this only caps the column. */
.itrp__wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

/* ── Section header ────────────────────────────────────────────
   The vendor's eyebrow rules are SCOPED to their own section classes
   (.ip-hero / .ip-philosophy / .ip-irdh / .ip-process), so reusing the
   class names alone leaves them unstyled here — the line renders
   transparent and the text falls back to #333 / plex-sans.
   Every value below was measured from the live page and is reproduced
   exactly so this header is pixel-identical to the IRDH band. */

/* .ip-section-eyebrow — flex, gap 11px, margin-bottom 20px */
.itrp .ip-section-eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 20px;
}

/* .ip-eyebrow-line — 26 x 2px, solid --ip-blue, square corners */
.itrp .ip-eyebrow-line {
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	border-radius: 0;
	background: #3b82f6;
}

/* .ip-eyebrow-text — Work Sans 14px/600, ls 1.12px, uppercase, blue */
.itrp .ip-eyebrow-text {
	font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 16.8px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: #3b82f6;
}

/* .ip-irdh-heading — plex-mono-bold 49.6px/54.56px, weight 300,
   ls -0.3px, #0B1222, margin 8px top / 20px bottom */
.itrp .itrp__heading {
	font-family: plex-mono-bold, "IBM Plex Mono", ui-monospace, monospace;
	font-size: 49.6px;
	font-weight: 300;
	line-height: 54.56px;
	letter-spacing: -0.3px;
	color: #0B1222;
	margin: 8px 0 20px;
	max-width: none;
}

/* The accent must stay in the same face — only the colour changes.
   Left alone it inherits the theme's italic plex-sans. */
/* `font-family: inherit` gets outranked here (something in the theme /
   Elementor global typography targets em more specifically), so the face is
   restated explicitly rather than inherited. */
.itrp .itrp__heading em,
.itrp h2.itrp__heading em {
	font-family: plex-mono-bold, "IBM Plex Mono", ui-monospace, monospace !important;
	font-style: normal;
	font-weight: 300;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: #3b82f6;
}

/* .ip-irdh-sub — plex-sans 16.32px/28.56px, #5B6B82.
   Type matches IRDH exactly; only the measure is wider. IRDH uses 52ch
   (509px), which wraps this longer subtitle onto three lines — 880px
   brings it to two. */
.itrp .itrp__sub {
	font-family: plex-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16.32px;
	font-weight: 400;
	line-height: 28.56px;
	letter-spacing: normal;
	color: #5B6B82;
	max-width: 880px;
	margin: 0 0 14.4px;
}

/* Breathing room between the header block and the shelf */
.itrp .itrp__grid { margin-top: clamp(28px, 3vw, 44px); }

@media (max-width: 900px) {
	.itrp .itrp__heading { font-size: 34px; line-height: 1.14; }
	.itrp .itrp__sub     { font-size: 15.5px; line-height: 1.7; }
}
@media (max-width: 600px) {
	.itrp .itrp__heading { font-size: 27px; }
}

.itrp__empty {
	margin: 0;
	padding: 30px 0;
	color: var(--itrp-muted);
	font-size: 15px;
}

/* ── The shelf ────────────────────────────────────────────── */
.itrp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px,1fr));
	gap: clamp(26px,3vw,40px) clamp(20px,2.4vw,30px);
	align-items: start;
}

.itrp__item { position: relative; }

.itrp__link {
	display: block;
	text-decoration: none;
	color: inherit;
	outline: none;
}
.itrp__link:focus-visible .itrp__cover {
	box-shadow: 0 0 0 3px var(--itrp-accent), 0 18px 40px -12px rgba(0,0,0,.55);
}

/* Sequence badge — same 01/02/03 convention as the pipeline stages */
.itrp__seq {
	position: absolute;
	top: -10px;
	left: -8px;
	z-index: 3;
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--itrp-accent);
	color: #fff;
	font: 700 13px/1 inherit;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 6px 18px rgba(59,130,246,.42);
}

.itrp__cover {
	position: relative;
	aspect-ratio: 3/4;
	border-radius: 3px 7px 7px 3px;
	overflow: hidden;
	background: #060c18;
	box-shadow: 0 2px 4px rgba(0,0,0,.28), 0 16px 34px -12px rgba(0,0,0,.55);
	transform-origin: left center;
	transition: transform .5s var(--itrp-ease), box-shadow .5s var(--itrp-ease);
}
.itrp--light .itrp__cover {
	box-shadow: 0 2px 4px rgba(11,18,34,.14), 0 16px 34px -14px rgba(11,18,34,.34);
}
.itrp__link:hover .itrp__cover {
	transform: translateY(-7px) rotateY(-8deg) scale(1.015);
	box-shadow: 0 4px 8px rgba(0,0,0,.32), 0 32px 58px -16px rgba(0,0,0,.62);
}

.itrp__cover-img,
.itrp__cover img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Shown until a cover has been generated from page 1 of the PDF */
.itrp__cover-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 22px;
	background:
		radial-gradient(58% 44% at 76% 12%, rgba(59,130,246,.34), transparent 66%),
		linear-gradient(158deg, #16233f 0%, #0B1222 60%, #060c18 100%);
	color: #fff;
}
.itrp__cover-ev {
	font: 600 9.5px/1 inherit;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--itrp-accent-2);
	margin-bottom: 10px;
}
.itrp__cover-brand {
	font: 700 22px/1 inherit;
	letter-spacing: -.01em;
}
.itrp__cover-sub {
	margin-top: 5px;
	font: 400 11px/1 inherit;
	letter-spacing: .28em;
	color: rgba(255,255,255,.66);
}

.itrp__spine {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 9px;
	pointer-events: none;
	background: linear-gradient(to right,
		rgba(0,0,0,.36), rgba(0,0,0,.12) 44%,
		rgba(255,255,255,.14) 74%, rgba(0,0,0,.10));
}

.itrp__gloss {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(104deg, transparent 33%, rgba(255,255,255,.17) 48%, transparent 61%);
	transform: translateX(-100%);
	transition: transform .85s var(--itrp-ease);
}
.itrp__link:hover .itrp__gloss { transform: translateX(100%); }

.itrp__read {
	position: absolute;
	left: 50%;
	bottom: 14px;
	translate: -50% 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 17px;
	border-radius: 100px;
	background: rgba(255,255,255,.95);
	color: #0B1222;
	font: 600 12px/1 inherit;
	box-shadow: 0 5px 18px rgba(0,0,0,.34);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s var(--itrp-ease), transform .3s var(--itrp-ease);
	pointer-events: none;
}
.itrp__read svg { width: 14px; height: 14px; }
.itrp__link:hover .itrp__read { opacity: 1; transform: translateY(0); }

/* ── Card meta: name, date, free text ─────────────────────── */
.itrp__meta { padding-top: 15px; }

/* The publication name is an <h3>, so the theme's heading rules would
   otherwise impose the large monospace display face. font-family:inherit
   pulls it back to the body font — the same escape the vendor uses on
   .ip-irdh-structure-title. Selector is doubled up to outrank the theme. */
.itrp .itrp__meta .itrp__name {
	margin: 0 0 7px;
	font-family: plex-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: 0;
	text-transform: none;
	color: var(--itrp-text);
	transition: color .2s var(--itrp-ease);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.itrp .itrp__link:hover .itrp__name { color: var(--itrp-accent); }

.itrp .itrp__date {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-family: plex-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--itrp-muted);
	font-variant-numeric: tabular-nums;
}
.itrp .itrp__date svg { width: 12.5px; height: 12.5px; opacity: .7; flex: 0 0 auto; }

.itrp .itrp__text {
	margin: 0;
	font-family: plex-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12.8px;
	font-weight: 400;
	line-height: 1.62;
	color: var(--itrp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
	.itrp__grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 26px 16px; }
	.itrp__name { font-size: 14.5px; }
	.itrp__text { -webkit-line-clamp: 2; font-size: 12.6px; }
	.itrp__link:hover .itrp__cover { transform: none; }
	.itrp__read { display: none; }
	.itrp__seq { top: -8px; left: -6px; min-width: 30px; height: 30px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.itrp__cover, .itrp__gloss, .itrp__read { transition: none !important; }
	.itrp__link:hover .itrp__cover { transform: translateY(-3px); }
}

/* Never let the section fight the Elementor editor canvas */
.elementor-editor-active .itrp__link { pointer-events: none; }