/*
  profile-web.css — responsive web layout for datasolutions.rw/product.

  Reuses profile-print.css for the brand tokens and component detailing
  (cards, figures, callouts, pills, colours), then replaces the A4/mm page
  geometry with a fluid, responsive marketing-page layout: a contained
  content column on a soft backdrop, a full-width hero band, web-scale
  typography, and single-column collapse on phones.

  The print stylesheet stays the source of truth for PDF/A4 output
  (profile-a4.css). This file is screen-only.
*/
@import url("profile-print.css");

/* ─────────────────────────────  Page frame  ───────────────────────────── */
html {
	background: #e9eef4;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	width: auto;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 56px);
	background: #ffffff;
	box-shadow: 0 20px 64px rgba(15, 23, 42, 0.12);
	font-size: clamp(15.5px, 0.95rem + 0.15vw, 17px);
	line-height: 1.62;
	overflow-x: hidden;
}

@media (min-width: 1180px) {
	body {
		margin: 32px auto 48px;
		border-radius: 16px;
	}
}

img {
	max-width: 100%;
}

/* ───────────────────────────  Web typography  ─────────────────────────── */
h1 {
	font-size: clamp(30px, 5vw, 44px);
	margin-bottom: 0.5em;
}

h2 {
	font-size: clamp(23px, 3.4vw, 31px);
	margin: clamp(36px, 6vw, 64px) 0 0.7em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid var(--brand);
}

h3 {
	font-size: clamp(18px, 2.4vw, 22px);
	margin: 1.8em 0 0.6em;
}

h4 {
	font-size: 1.05rem;
	margin: 0 0 0.5em;
}

p {
	margin-bottom: 1em;
}

ul,
ol {
	padding-left: 1.4em;
	margin-bottom: 1.2em;
}

li + li {
	margin-top: 0.4em;
}

code {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.06em 0.36em;
	font-size: 0.9em;
}

/* ───────────────────────────────  Hero  ───────────────────────────────── */
/* Break the hero band out to the body edges for a full-width feel while the
   text stays in the contained column. */
.profile-cover {
	min-height: auto;
	gap: clamp(12px, 2vw, 18px);
	margin: calc(-1 * clamp(20px, 4vw, 56px)) calc(-1 * clamp(20px, 4vw, 56px)) clamp(20px, 3vw, 34px);
	padding: clamp(34px, 5vw, 64px) clamp(20px, 4vw, 56px) clamp(26px, 4vw, 46px);
	border-radius: 0;
	page-break-after: auto;
	break-after: auto;
	background:
		radial-gradient(circle at 88% 8%, rgba(15, 118, 110, 0.10), transparent 42%),
		radial-gradient(circle at 6% 92%, rgba(29, 78, 216, 0.08), transparent 40%),
		linear-gradient(165deg, #f7fafc 0%, #eef3f8 100%);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 1180px) {
	.profile-cover {
		border-radius: 16px 16px 0 0;
	}
}

/* The scattered screenshot collage is positioned in mm for A4 — hide it on
   web and let the clean gradient hero carry the top of the page. */
.profile-cover .cover-bg {
	display: none;
}

/* Logo chip: top-right, in normal px units */
.profile-cover > .cover-logo {
	position: absolute;
	top: clamp(14px, 2.5vw, 22px);
	right: clamp(16px, 3vw, 28px);
	width: auto;
	max-width: 240px;
	padding: 8px 12px;
}

.cover-logo img,
img.logo-mark {
	height: 26px;
	max-width: 150px;
	max-height: 30px;
}

.cover-site {
	font-size: 0.78rem;
}

.profile-cover h1,
.profile-cover > p,
.deck {
	width: auto;
	max-width: min(100%, 930px);
}

.profile-cover h1 {
	font-size: clamp(34px, 6vw, 58px);
	margin: 0;
}

.deck {
	font-size: clamp(17px, 2.4vw, 22px);
}

/* The intro paragraph had a right-fading white wash to sit over the collage;
   on web it sits on the gradient, so make it plain. */
.profile-cover > p {
	margin-top: 0.4em;
	padding: 0;
	border-radius: 0;
	background: none;
	text-shadow: none;
	color: var(--ink);
	font-size: clamp(15.5px, 1.6vw, 18px);
}

.profile-cover + h2 {
	margin-top: clamp(28px, 4vw, 42px);
}

/* ───────────────────────────  Card / path grids  ──────────────────────── */
.card-grid,
.adoption-paths,
.metric-grid {
	gap: clamp(14px, 2vw, 22px);
	margin: 1.6em 0;
}

.card,
.path,
.metric {
	padding: clamp(16px, 2vw, 22px);
}

.platform-tool-grid .card {
	min-height: 0;
}

/* ─────────────────────────────  Figures  ──────────────────────────────── */
.figure-grid {
	gap: clamp(14px, 2vw, 22px);
	margin: 1.6em 0 2em;
}

/* Drop the mm min-heights — let images size to their own aspect ratio. */
.figure-grid.wide figure,
.figure-grid.wide p,
.figure-grid.medium figure,
.figure-grid.medium p,
.figure-grid.short figure,
.figure-grid.short p,
.figure-grid.tall figure,
.figure-grid.tall p,
.figure-grid.phone figure,
.figure-grid.phone p,
.figure-grid.phone-three figure,
.figure-grid.phone-three p {
	min-height: 0;
}

.figure-grid.phone-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

figure img,
.figure-grid img,
img.fit-image {
	height: auto;
	max-height: 540px;
	object-fit: contain;
}

figcaption {
	padding: 10px 14px;
	font-size: 0.82rem;
}

/* Full-width story figures */
.story-figure {
	margin: 1.6em 0 2em;
}

.story-figure img {
	height: clamp(220px, 40vw, 460px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.story-figure.compact img {
	height: clamp(220px, 38vw, 440px);
}

.story-figure.precision-proof img {
	height: clamp(200px, 30vw, 360px);
}

.story-figure figcaption {
	border: 0;
	padding: 8px 2px 0;
	background: none;
}

/* ──────────────────────  Evidence (image + copy) rows  ─────────────────── */
.evidence-row {
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(16px, 2.5vw, 28px);
	margin: 1.6em 0 2em;
}

.evidence-row.network-proof {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.evidence-row img {
	max-height: 420px;
}

.network-proof .paired-evidence-shots img {
	height: clamp(180px, 24vw, 300px);
}

.paired-caption p {
	max-width: none;
	font-size: 0.82rem;
}

.evidence-copy em,
.paired-caption p,
.image-table em,
table.outputs-table em {
	font-size: 0.82rem;
}

/* ─────────────────────────  Image / output tables  ────────────────────── */
/* Linearise the print tables into responsive blocks. */
.image-table,
table.image-table {
	display: block;
	border-spacing: 0;
	margin: 1.4em 0 2em;
}

.image-table thead,
.image-table tbody,
table.image-table thead,
table.image-table tbody {
	display: block;
}

.image-table tr,
table.image-table tr {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 22px);
}

.image-table th,
.image-table td,
table.image-table th,
table.image-table td {
	display: block;
	width: auto;
}

.image-table img,
table.image-table img {
	width: 100%;
	max-height: 380px;
}

.image-table em,
table.image-table em {
	max-width: none;
	font-size: 0.82rem;
}

table.outputs-table {
	display: block;
	border-spacing: 0;
	margin: 1.4em 0 2em;
}

table.outputs-table tbody,
table.outputs-table tr,
table.outputs-table td {
	display: block;
	width: auto;
}

table.outputs-table td {
	margin-bottom: clamp(14px, 2vw, 22px);
}

table.outputs-table img {
	width: 100%;
	max-height: none;
}

/* Pandoc emits inline colgroup widths for pipe tables. The shared print CSS
   overrides those for the engineering project table; here we tune the screen density. */
body.company-profile table:not(.image-table):not(.outputs-table) {
	font-size: 0.86rem;
	line-height: 1.45;
}

/* ───────────────────────────  Pills / callouts  ───────────────────────── */
.pill-row {
	gap: 8px;
	margin: 0.6em 0 1.4em;
}

.pill-row span {
	min-height: 0;
	padding: 6px 12px;
	font-size: 0.86rem;
}

.callout,
.note {
	margin: 1.4em 0;
	padding: clamp(14px, 2vw, 20px);
}

/* ────────────────────────────────  Footer  ────────────────────────────── */
.profile-footer {
	margin-top: 2.4em;
	padding-top: 1em;
	font-size: 1.15rem;
}

/* ──────────────────────────  Mobile: 1 column  ────────────────────────── */
@media (max-width: 760px) {
	.card-grid,
	.card-grid.three,
	.adoption-paths,
	.metric-grid,
	.metric-grid.three,
	.figure-grid.two,
	.figure-grid.three,
	.figure-grid.main-side,
	.figure-grid.phone,
	.figure-grid.phone-three,
	.evidence-row,
	.evidence-row.network-proof {
		grid-template-columns: 1fr;
	}

	.paired-image-row p {
		grid-template-columns: 1fr 1fr;
	}

	.image-table tr,
	table.image-table tr {
		grid-template-columns: 1fr;
	}

	body.company-profile table:not(.image-table):not(.outputs-table),
	body.company-profile table:not(.image-table):not(.outputs-table) tbody,
	body.company-profile table:not(.image-table):not(.outputs-table) tr,
	body.company-profile table:not(.image-table):not(.outputs-table) td {
		display: block;
		width: 100%;
	}

	body.company-profile table:not(.image-table):not(.outputs-table) {
		border-collapse: separate;
		border-spacing: 0;
		font-size: 0.9rem;
	}

	body.company-profile table:not(.image-table):not(.outputs-table) colgroup,
	body.company-profile table:not(.image-table):not(.outputs-table) thead {
		display: none;
	}

	body.company-profile table:not(.image-table):not(.outputs-table) tr {
		margin: 0 0 14px;
		padding: 12px 14px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		background: #ffffff;
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td {
		border: 0;
		padding: 8px 0;
		display: grid;
		grid-template-columns: minmax(112px, 34%) 1fr;
		gap: 12px;
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td + td {
		border-top: 1px solid var(--line);
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td::before {
		color: var(--brand-dark);
		font-weight: 700;
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td:nth-child(1)::before {
		content: "Project";
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td:nth-child(2)::before {
		content: "Country";
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td:nth-child(3)::before {
		content: "Period";
	}

	body.company-profile table:not(.image-table):not(.outputs-table) td:nth-child(4)::before {
		content: "Delivered scope";
	}

	.profile-cover > .cover-logo {
		position: static;
		margin-bottom: 8px;
		align-self: flex-start;
	}
}