/* ==========================================================================
   INFOCEAN — Public Article
   ========================================================================== */


/* --------------------------------------------------------------------------
   Article shell
   -------------------------------------------------------------------------- */

.infocean-article__article {
	max-width: 1180px;

	margin: 0 auto;

	padding-bottom: var(--sp-9);
}


.infocean-article__layout {
	display: grid;

	grid-template-columns:
		minmax(0, 820px)
		minmax(240px, 280px);

	grid-template-areas:
		"hero contributors"
		"main contributors";

	column-gap: clamp(
		40px,
		5vw,
		72px
	);

	align-items: start;
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.infocean-article__hero {
	grid-area: hero;

	padding:
		0
		0
		var(--sp-6);

	border-bottom:
		1px solid
		var(--color-border);
}


.infocean-article__meta {
	display: flex;

	align-items: center;

	justify-content: flex-start;

	gap: var(--sp-4);

	margin-bottom: var(--sp-4);
}


.infocean-article__eyebrow {
	display: flex;

	align-items: center;

	gap: var(--sp-3);

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.09em;

	text-transform: uppercase;

	color: var(--color-brand);
}


.infocean-article__eyebrow::before {
	content: "";

	display: block;

	width: 42px;

	height: 2px;

	background: var(--gradient-brand);
}


.infocean-article__date {
	position: relative;

	flex: 0 0 auto;

	padding-left: var(--sp-4);

	font-size: 12px;

	color: var(--color-text-subtle);
}


.infocean-article__date::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 3px;
	height: 3px;

	background: currentColor;

	border-radius: 50%;

	transform: translateY(-50%);
}


.infocean-article__title {
	max-width: 780px;

	margin: 0;

	font-size: clamp(
		38px,
		3.8vw,
		52px
	);

	line-height: 1.05;

	letter-spacing: -0.03em;
}


.infocean-article__lead {
	max-width: 700px;

	margin:
		var(--sp-5)
		0
		0;

	font-size: clamp(
		18px,
		1.8vw,
		22px
	);

	line-height: 1.55;

	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Shared section label
   -------------------------------------------------------------------------- */

.infocean-article__section-label {
	margin:
		0
		0
		var(--sp-4);

	font-family: var(--font-text);

	font-size: 10px;

	font-weight: 700;

	line-height: 1.4;

	letter-spacing: 0.09em;

	text-transform: uppercase;

	color: var(--color-text-subtle);
}


/* --------------------------------------------------------------------------
   Responsibility / contributors rail
   -------------------------------------------------------------------------- */

.infocean-article__contributors {
	position: sticky;

	top: 112px;

	grid-area: contributors;

	margin-top: var(--sp-7);

	padding:
		var(--sp-5)
		var(--sp-4);

	background: var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius: var(--radius-md);
}


.infocean-article__contributors::before {
	content: "";

	position: absolute;

	top: -1px;

	left: var(--sp-4);

	width: 72px;

	height: 2px;

	background: var(--gradient-brand);
}


.infocean-article__contributor-list {
	display: flex;

	flex-direction: column;
}


.infocean-article__contributor {
	display: grid;

	grid-template-columns:
		52px
		minmax(0, 1fr);

	gap: var(--sp-3);

	align-items: start;
}


.infocean-article__contributor + .infocean-article__contributor {
	margin-top: var(--sp-4);

	padding-top: var(--sp-4);

	border-top:
		1px solid
		var(--color-border);
}


.infocean-article__contributor-photo {
	display: grid;

	place-items: center;

	width: 52px;

	height: 52px;

	overflow: hidden;

	background: var(--color-surface-muted);

	border-radius: 50%;
}


.infocean-article__contributor-image {
	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;
}


.infocean-article__contributor-content {
	min-width: 0;
}


.infocean-article__contributor-name {
	font-size: 14px;

	font-weight: 700;

	line-height: 1.35;
}


.infocean-article__contributor-name a {
	text-decoration: none;

	transition:
		color
		var(--motion-fast)
		var(--ease-standard);
}


.infocean-article__contributor-name a:hover {
	color: var(--color-brand);
}


.infocean-article__contributor-roles {
	margin-top: 4px;

	font-size: 11px;

	font-weight: 700;

	line-height: 1.4;

	color: var(--color-brand);
}


.infocean-article__contributor-position {
	margin-top: 5px;

	font-size: 11px;

	line-height: 1.45;

	color: var(--color-text-subtle);
}


/* --------------------------------------------------------------------------
   Main editorial column
   -------------------------------------------------------------------------- */

.infocean-article__main-column {
	grid-area: main;

	padding-top: var(--sp-6);
}


/* --------------------------------------------------------------------------
   Featured image
   -------------------------------------------------------------------------- */

.infocean-article__featured-media {
	margin:
		0
		0
		var(--sp-7);
}


.infocean-article__featured-image {
	display: block;

	width: 100%;

	height: auto;

	border-radius: var(--radius-md);
}


/* --------------------------------------------------------------------------
   Article body
   -------------------------------------------------------------------------- */

.infocean-article__content {
	max-width: 760px;

	font-size: 18px;

	line-height: 1.75;
}


.infocean-article__content > * {
	margin-right: 0;
	margin-left: 0;
}


.infocean-article__content > * + * {
	margin-top: 1.35em;
}


.infocean-article__content h2 {
	margin-top: 2.3em;

	font-size: clamp(
		28px,
		3vw,
		38px
	);

	line-height: 1.15;
}


.infocean-article__content h3 {
	margin-top: 2em;

	font-size: clamp(
		21px,
		2.2vw,
		27px
	);

	line-height: 1.2;
}


.infocean-article__content h4 {
	margin-top: 1.8em;
}


.infocean-article__content p,
.infocean-article__content li {
	max-width: 70ch;
}


.infocean-article__content ul,
.infocean-article__content ol {
	padding-left: 1.4em;
}


.infocean-article__content li + li {
	margin-top: 0.45em;
}


.infocean-article__content a {
	color: var(--color-brand);

	text-decoration: underline;

	text-decoration-thickness: 1px;

	text-underline-offset: 3px;
}


.infocean-article__content a:hover {
	color: var(--color-brand-strong);
}


.infocean-article__content blockquote {
	margin:
		var(--sp-6)
		0;

	padding:
		var(--sp-4)
		var(--sp-5);

	background: var(--color-surface-muted);

	border-left:
		3px solid
		var(--color-brand);
}


.infocean-article__content blockquote p {
	max-width: none;
}


.infocean-article__content figure {
	max-width: 100%;
}


.infocean-article__content figcaption {
	margin-top: var(--sp-2);

	font-size: 12px;

	line-height: 1.45;

	color: var(--color-text-subtle);
}


.infocean-article__content
.wp-block-table {
	overflow-x: auto;
}


.infocean-article__content table {
	width: 100%;

	border-collapse: collapse;

	font-size: 14px;
}


.infocean-article__content th,
.infocean-article__content td {
	padding:
		10px
		12px;

	text-align: left;

	border:
		1px solid
		var(--color-border);
}


/* --------------------------------------------------------------------------
   Evidence / Research
   -------------------------------------------------------------------------- */

.infocean-article__research {
	position: relative;

	margin-top: var(--sp-9);

	padding-top: var(--sp-7);

	border-top:
		1px solid
		var(--color-border);
}


.infocean-article__research::before {
	content: "";

	position: absolute;

	top: -1px;

	left: 0;

	width: 120px;

	height: 2px;

	background: var(--gradient-brand);
}


.infocean-article__research-header {
	display: grid;

	grid-template-columns:
		minmax(0, 0.82fr)
		minmax(260px, 0.38fr);

	column-gap: var(--sp-7);

	align-items: end;

	margin-bottom: var(--sp-6);
}


.infocean-article__research-header
.infocean-article__section-label {
	grid-column: 1 / -1;
}


.infocean-article__research-header h2 {
	max-width: 760px;

	margin: 0;

	font-size: clamp(
		30px,
		3.5vw,
		44px
	);

	line-height: 1.08;

	letter-spacing: -0.025em;
}


.infocean-article__research-header p {
	margin: 0;

	font-size: 14px;

	line-height: 1.55;

	color: var(--color-text-muted);
}


.infocean-article__research-grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap: var(--sp-5);
}


/* --------------------------------------------------------------------------
   Article semantic navigation
   -------------------------------------------------------------------------- */

.infocean-article__semantics {
	margin-top:
		var(--sp-7);

	padding-top:
		var(--sp-5);

	border-top:
		1px solid
		var(--color-border);
}


.infocean-article__semantics-title {
	margin-bottom:
		var(--sp-4);

	font-size:
		10px;

	font-weight:
		700;

	line-height:
		1.4;

	letter-spacing:
		0.09em;

	text-transform:
		uppercase;

	color:
		var(--color-text-subtle);
}


.infocean-article__semantics-groups {
	display: grid;

	row-gap:
		var(--sp-3);
}


.infocean-article__semantics-group {
	display: grid;

	grid-template-columns:
		120px
		minmax(0, 1fr);

	gap:
		var(--sp-3);

	align-items:
		start;
}


.infocean-article__semantics-label {
	padding-top:
		7px;

	font-size:
		12px;

	font-weight:
		600;

	line-height:
		1.4;

	color:
		var(--color-text-muted);
}


.infocean-article__semantics-list {
	display: flex;

	flex-wrap:
		wrap;

	gap:
		8px;

	margin:
		0;

	padding:
		0;

	list-style:
		none;
}


.infocean-article__semantics-list li {
	margin:
		0;
}


.infocean-article__semantics-list a {
	display: inline-flex;

	align-items:
		center;

	min-height:
		32px;

	padding:
		6px
		11px;

	font-size:
		12px;

	font-weight:
		600;

	line-height:
		1.35;

	text-decoration:
		none;

	color:
		var(--color-text);

	background:
		var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius:
		999px;

	transition:
		border-color 160ms ease,
		background-color 160ms ease;
}


.infocean-article__semantics-list a:hover {
	border-color:
		var(--color-text-muted);
}


@media (max-width: 720px) {

	.infocean-article__semantics-group {
		grid-template-columns:
			1fr;

		gap:
			8px;
	}


	.infocean-article__semantics-label {
		padding-top:
			0;
	}
}

/* --------------------------------------------------------------------------
   Canonical Article Card
   -------------------------------------------------------------------------- */

.infocean-content-card {
	display: flex;
	flex-direction: column;

	height: 100%;
	min-width: 0;

	overflow: hidden;

	background:
		var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-md);

	transition:
		border-color
		var(--motion-fast)
		var(--ease-standard);
}


.infocean-content-card:hover {
	border-color:
		color-mix(
			in srgb,
			var(--color-brand) 40%,
			var(--color-border)
		);
}


.infocean-content-card__media {
	display: block;

	overflow: hidden;

	aspect-ratio:
		16 / 9;

	background:
		var(--color-surface-muted);

	border-bottom:
		1px solid
		var(--color-border);
}


.infocean-content-card__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform
		var(--motion-normal)
		var(--ease-standard);
}


.infocean-content-card:hover
.infocean-content-card__image {
	transform:
		scale(1.015);
}


.infocean-content-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;

	padding:
		var(--sp-5);
}


.infocean-content-card__meta {
	display: flex;
	flex-wrap: wrap;

	gap:
		6px;

	margin-bottom:
		var(--sp-3);

	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.4;

	letter-spacing: 0.045em;

	text-transform: uppercase;

	color:
		var(--color-text-subtle);
}


.infocean-content-card__title {
	margin: 0;

	font-size:
		clamp(
			21px,
			1.8vw,
			26px
		);

	line-height: 1.13;
	letter-spacing: -0.018em;
}


.infocean-content-card__title a {
	text-decoration: none;

	transition:
		color
		var(--motion-fast)
		var(--ease-standard);
}


.infocean-content-card__title a:hover {
	color:
		var(--color-brand);
}


.infocean-content-card__excerpt {
	display: -webkit-box;

	margin:
		var(--sp-3)
		0
		0;

	overflow: hidden;

	-webkit-box-orient:
		vertical;

	-webkit-line-clamp:
		3;

	font-size: 14px;
	line-height: 1.55;

	color:
		var(--color-text-muted);
}


.infocean-content-card__more {
	display: inline-flex;
	align-items: center;

	align-self: flex-start;

	gap: 7px;

	margin-top: auto;
	padding-top: var(--sp-5);

	font-size: 12.5px;
	font-weight: 600;

	color:
		var(--color-brand);
}


.infocean-content-card__more::after {
	content: "→";
}


.infocean-content-card--no-media
.infocean-content-card__body {
	min-height: 240px;
}

/* Full-card navigation: articles */

.infocean-content-card {
    position: relative;
}

.infocean-content-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.infocean-content-card__more {
    position: relative;
    z-index: 2;
}

.infocean-content-card__title a:focus-visible::after {
    outline: 2px solid var(--color-brand);
    outline-offset: -3px;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Materials Index
   ========================================================================== */

.infocean-materials-index {
	padding-bottom:
		var(--sp-9);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.infocean-materials-index__hero {
	display: grid;

	grid-template-columns:
		minmax(0, 0.95fr)
		minmax(320px, 0.65fr);

	column-gap:
		var(--sp-8);

	row-gap:
		var(--sp-4);

	align-items:
		start;

	padding:
		0
		0
		var(--sp-8);
}


.infocean-materials-index__hero-main {
	min-width: 0;
}


.infocean-materials-index__eyebrow {
	display: flex;
	align-items: center;

	gap:
		var(--sp-3);

	margin-bottom:
		var(--sp-3);

	font-size:
		11px;

	font-weight:
		700;

	line-height:
		1.3;

	letter-spacing:
		0.08em;

	text-transform:
		uppercase;

	color:
		var(--color-brand);
}


.infocean-materials-index__eyebrow::before {
	content: "";

	display: block;

	flex:
		0 0 56px;

	width:
		56px;

	height:
		3px;

	background:
		var(--gradient-brand);

	border-radius:
		var(--radius-pill);
}


.infocean-materials-index__title {
	max-width:
		760px;

	margin:
		0;

	font-size:
		clamp(
			40px,
			4vw,
			52px
		);

	line-height:
		1.04;

	letter-spacing:
		-0.025em;
}


.infocean-materials-index__intro {
	max-width:
		580px;

	font-size:
		16.5px;

	font-weight:
		500;

	line-height:
		1.6;

	color:
		var(--color-text-muted);
}


.infocean-materials-index__intro
> * + * {
	margin-top:
		var(--sp-3);
}


/* --------------------------------------------------------------------------
   Directory
   -------------------------------------------------------------------------- */

.infocean-materials-index__directory {
	padding-top:
		var(--sp-8);

	border-top:
		1px solid
		var(--color-border);
}


.infocean-materials-index__section-header {
	display: flex;

	align-items:
		flex-end;

	justify-content:
		space-between;

	gap:
		var(--sp-6);

	margin-bottom:
		32px;
}


.infocean-materials-index__section-header h2 {
	margin:
		0;

	font-size:
		clamp(
			30px,
			2.6vw,
			37px
		);

	line-height:
		1.15;

	letter-spacing:
		-0.018em;
}


.infocean-materials-index__count {
	flex:
		0 0 auto;

	margin:
		0;

	font-size:
		13px;

	color:
		var(--color-text-subtle);
}


/* --------------------------------------------------------------------------
   Article grid
   -------------------------------------------------------------------------- */

.infocean-materials-index__grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap:
		var(--sp-5);
}


/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.infocean-materials-index__pagination {
	margin-top:
		var(--sp-7);

	padding-top:
		var(--sp-5);

	border-top:
		1px solid
		var(--color-border);
}


.infocean-materials-index__pagination
.page-numbers {
	display: flex;
	flex-wrap: wrap;

	align-items:
		center;

	gap:
		var(--sp-2);

	margin:
		0;

	padding:
		0;

	list-style:
		none;
}


.infocean-materials-index__pagination
.page-numbers a,
.infocean-materials-index__pagination
.page-numbers span {
	display: inline-flex;

	align-items:
		center;

	justify-content:
		center;

	min-width:
		38px;

	min-height:
		38px;

	padding:
		0
		10px;

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-sm);

	font-size:
		13px;
}


.infocean-materials-index__pagination
.page-numbers .current {
	color:
		#ffffff;

	background:
		var(--color-brand);

	border-color:
		var(--color-brand);
}


/* --------------------------------------------------------------------------
   Empty
   -------------------------------------------------------------------------- */

.infocean-materials-index__empty {
	max-width:
		760px;

	padding:
		var(--sp-6);

	background:
		var(--color-surface);

	border:
		1px solid
		var(--color-border);

	border-radius:
		var(--radius-md);
}


.infocean-materials-index__empty p {
	margin-top:
		var(--sp-3);

	color:
		var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.infocean-materials-index__hero {
		grid-template-columns:
			1fr;

		row-gap:
			var(--sp-4);
	}


	.infocean-materials-index__intro {
		max-width:
			720px;
	}


	.infocean-materials-index__grid {
		grid-template-columns:
			1fr;
	}
}


@media (max-width: 720px) {

	.infocean-materials-index__hero {
		padding:
			0
			0
			var(--sp-7);
	}


	.infocean-materials-index__eyebrow::before {
		flex-basis:
			40px;

		width:
			40px;
	}


	.infocean-materials-index__title {
		font-size:
			clamp(
				36px,
				11vw,
				46px
			);
	}


	.infocean-materials-index__intro {
		font-size:
			15px;
	}


	.infocean-materials-index__directory {
		padding-top:
			52px;
	}


	.infocean-materials-index__section-header {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			var(--sp-2);

		margin-bottom:
			24px;
	}
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {

	.infocean-article__layout {
		grid-template-columns:
			minmax(0, 1fr)
			240px;

		column-gap: var(--sp-5);
	}


	.infocean-article__contributors {
		top: 96px;
	}


	.infocean-article__content {
		max-width: none;
	}
}


/* --------------------------------------------------------------------------
   Mobile / narrow tablet
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

	.infocean-article__layout {
		grid-template-columns: 1fr;

		grid-template-areas:
			"hero"
			"contributors"
			"main";
	}


	.infocean-article__contributors {
		position: relative;

		top: auto;

		margin-top: var(--sp-5);
	}


	.infocean-article__contributor-list {
		display: grid;

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: var(--sp-4);
	}


	.infocean-article__contributor + .infocean-article__contributor {
		margin-top: 0;

		padding-top: 0;

		border-top: 0;
	}


	.infocean-article__research-header {
		grid-template-columns: 1fr;

		row-gap: var(--sp-3);
	}


	.infocean-article__research-grid {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {

	.infocean-article__hero {
		padding-top: 0;
	}


	.infocean-article__meta {
		align-items: flex-start;

		flex-direction: column;

		gap: var(--sp-2);
	}


	.infocean-article__title {
		font-size: clamp(
			34px,
			11vw,
			48px
		);
	}


	.infocean-article__contributors {
		padding: var(--sp-4);
	}


	.infocean-article__contributor-list {
		grid-template-columns: 1fr;
	}


	.infocean-article__main-column {
		padding-top: var(--sp-5);
	}


	.infocean-article__featured-media {
		margin-bottom: var(--sp-6);
	}


	.infocean-article__content {
		font-size: 17px;
	}


	.infocean-article__research {
		margin-top: var(--sp-8);

		padding-top: var(--sp-6);
	}
}