/**
 * styles/article.css
 *
 * SUP Journals Theme — the article landing page.
 *
 * Measured from the JMSACL Article Page frame: 40px above the breadcrumbs,
 * a 780px main column beside a 380px side column, 64px above the footer.
 *
 * The design strokes its blocks inside their frames, so where a block has
 * a rule on a side, the CSS padding on that side is the Figma padding less
 * the 1px the border takes.
 */

.sup-article-page { padding-block: var(--sup-space-40) var(--sup-space-64); }

/* 780 + 380 = 1160: the two columns meet without a gap. */
.sup-article-page .sup-layout--article { gap: 0; }

/* The Standard Label: its 14/14 uppercase text on an 18px row. */
.sup-article-label,
.pkp_structure_page .sup-article-label {
	margin: 0;
	padding-block: var(--sup-space-2);
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Article module — main column
   --------------------------------------------------------------- */
.sup-article { background: var(--sup-color-surface); }

.sup-article__rule { height: 4px; background: var(--sup-color-accent); }

/* The section, on a 34px row between side rules: 10/24 of padding. */
.sup-article__type,
.pkp_structure_page .sup-article__type {
	margin: 0;
	padding: var(--sup-space-10) calc(var(--sup-space-24) - var(--sup-border-width));
	border-inline: var(--sup-border-width) solid var(--sup-color-border);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
	text-transform: uppercase;
}

/* The title, framed on every side: 28/24 of padding. */
.sup-article__head {
	padding: calc(var(--sup-space-28) - var(--sup-border-width)) calc(var(--sup-space-24) - var(--sup-border-width));
	border: var(--sup-border-width) solid var(--sup-color-border);
}

.sup-article__title,
.pkp_structure_page .sup-article__title {
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-h2);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-text);
}

/* Every row below the title hangs from it: rules on the sides and bottom. */
.sup-article__facts,
.sup-article__block {
	border: var(--sup-border-width) solid var(--sup-color-border);
	border-top: 0;
}

/* Dates and DOI — a 44px row, 10/24 of padding, the two ends apart. */
.sup-article__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sup-space-10);
	padding:
		var(--sup-space-10)
		calc(var(--sup-space-24) - var(--sup-border-width))
		calc(var(--sup-space-10) - var(--sup-border-width));
}

.sup-article__dates,
.pkp_structure_page .sup-article__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sup-space-8);
	margin: 0;
}

.sup-article__date { display: inline-flex; align-items: baseline; gap: var(--sup-space-4); }

.sup-article__date-label,
.sup-article__date-value {
	font-size: var(--sup-text-sm);
	color: var(--sup-color-muted);
}
.sup-article__date-label { line-height: var(--sup-leading-flat); font-weight: var(--sup-weight-semibold); }
.sup-article__date-value { line-height: var(--sup-leading-text); }

/* The slash opens the date it belongs to, so a wrapped row never ends on
   it. It stands 8px from the date before, as the canvas draws it: the 4px
   the row already sets between its parts, and 4px of its own. */
.sup-article__date-sep {
	margin-right: var(--sup-space-4);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}

.sup-article__doi {
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	color: var(--sup-color-link);
	text-decoration: underline;
	overflow-wrap: anywhere;
}
.sup-article__doi:hover,
.sup-article__doi:focus-visible { color: var(--sup-color-link-strong); }

/* Summary, abstract, keywords — 20/24 of padding, the label 4px above
   text set to the 600px reading measure. */
.sup-article__block {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-4);
	padding:
		var(--sup-space-20)
		calc(var(--sup-space-24) - var(--sup-border-width))
		calc(var(--sup-space-20) - var(--sup-border-width));
}

.sup-article__text,
.pkp_structure_page .sup-article__text {
	max-width: var(--sup-col-abstract);
	margin: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}
.sup-article__text p,
.pkp_structure_page .sup-article__text p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}
.pkp_structure_page .sup-article__text p + p { margin-top: var(--sup-space-16); }
.sup-article__text a { color: var(--sup-color-link); text-decoration: underline; }

/* ---------------------------------------------------------------
   Side column — 40px in from the main column, starting level with the
   article module; each block 20px of air above and below its rule
   --------------------------------------------------------------- */
/* The page's 40px sits above both columns; the side column adds the
   breadcrumbs' 24px row and 16px, so its first block is level with the
   article module. */
.sup-article-side { padding: var(--sup-space-40) 0 0 var(--sup-space-40); }

.sup-article-side__block {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-4);
	padding: var(--sup-space-20) 0 calc(var(--sup-space-20) - var(--sup-border-width));
	border-bottom: var(--sup-border-width) solid var(--sup-color-border);
}
.sup-article-side > .sup-article-side__block:first-child { padding-top: 0; }

/* Galleys — three outlined buttons sharing the row, 4px apart: 44px tall,
   12/14 of padding, a 20px icon 6px from its 15/500 label. */
.sup-article-galleys__list {
	display: flex;
	gap: var(--sup-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sup-article-galleys__item { flex: 1 1 0; min-width: 0; display: flex; }

.sup-article-galleys .sup-galley {
	flex: 1 1 auto;
	min-height: 44px;
	padding: calc(var(--sup-space-12) - var(--sup-border-width)) calc(var(--sup-space-14) - var(--sup-border-width));
	gap: var(--sup-space-6);
	font-size: var(--sup-text-ui);
}
.sup-article-galleys .sup-galley .sup-icon { width: 20px; height: 20px; }

/* Supplementary files and citation downloads — a 20px icon 2px from an
   underlined 15px link. */
.sup-article-supplementary__list,
.sup-cite__downloads {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each row is a flex container in its own right, so the link inside does
   not sit on a text line box, whose strut would add 8.5px under every
   row and stand the block taller than the canvas draws it. */
.sup-article-supplementary__list > li,
.sup-cite__downloads > li { display: flex; }

.sup-article-supplementary__link,
.sup-cite__download {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-2);
	font-size: var(--sup-text-ui);
	line-height: var(--sup-leading-flat);
	color: var(--sup-color-link);
	text-decoration: underline;
}
.sup-article-supplementary__link:hover,
.sup-article-supplementary__link:focus-visible,
.sup-cite__download:hover,
.sup-cite__download:focus-visible { color: var(--sup-color-link-strong); }

/* How to Cite — the reference, the DOI 2px under it, the downloads 8px
   below. */
.sup-cite__body { display: flex; flex-direction: column; gap: var(--sup-space-8); }
.sup-cite__reference { display: flex; flex-direction: column; gap: var(--sup-space-2); }

.sup-cite__citation,
.sup-cite__citation * {
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-heading);
}
.sup-cite__citation .csl-entry { margin: 0; }

.sup-cite__doi {
	align-self: flex-start;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	color: var(--sup-color-link);
	text-decoration: underline;
	overflow-wrap: anywhere;
}
.sup-cite__doi:hover,
.sup-cite__doi:focus-visible { color: var(--sup-color-link-strong); }

/* Authors — the list closes on each author's own rule, so the block adds
   none of its own. */
.sup-article-authors { border-bottom: 0; padding-bottom: var(--sup-space-20); }

.sup-article-authors .authors {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One author: name, affiliation, and 12px below them the CRediT roles;
   20px of air above (4px for the first, under the label) and 24px below,
   down to the rule. */
.sup-author {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-12);
	padding: var(--sup-space-20) 0 calc(var(--sup-space-24) - var(--sup-border-width));
	border-bottom: var(--sup-border-width) solid var(--sup-color-border);
}
.sup-author:first-child { padding-top: var(--sup-space-4); }

/* The name and its affiliation read as one block, flush. */
.sup-author__who { display: flex; flex-direction: column; }

.sup-author__name,
.pkp_structure_page .sup-author__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-text);
}

/* The ORCID mark sits in a 24px box beside the name. */
.sup-author__orcid {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.sup-author__affiliation,
.pkp_structure_page .sup-author__affiliation {
	margin: 0;
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}

/* CRediT roles, as the CRediT plugin writes them into the list: chips
   4px apart along the row and 6px between rows — 13/19.5 in a pill with
   a 1px inside rule and 12px either side. An author without roles gets an
   empty list, which takes no room. */
.sup-article-authors ul.userGroup {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sup-space-6) var(--sup-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sup-article-authors ul.userGroup:empty { display: none; }

.sup-article-authors .userGroup .creditRole {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 0 var(--sup-space-12);
	border-radius: var(--sup-radius-pill);
	box-shadow: inset 0 0 0 var(--sup-border-width) var(--sup-color-border);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}
.sup-article-authors .userGroup li.creditRole:not(:last-child)::after { content: none; }

/* Licence — straight after the authors, closing the column. */
.sup-article-license { border-bottom: 0; }
.sup-article-authors + .sup-article-license { padding-top: 0; }

.sup-article-license__body {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-16);
}

.sup-article-license__body p,
.pkp_structure_page .sup-article-license__body p {
	margin: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}

/* The licence's badge, 8px above its sentence. */
.sup-article-license__badge {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sup-space-8);
}
.sup-article-license__badge img { display: block; }

/* A link inside the licence sentence keeps the text's colour, as drawn,
   and its underline, so it still reads as a link. */
.sup-article-license__body p a {
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.sup-article-page { padding-block: var(--sup-space-32) var(--sup-space-64); }
	.sup-article-page .sup-layout--article { gap: var(--sup-space-40); }
	.sup-article-side { padding: 0; }
}

@media (max-width: 767.98px) {
	.sup-article-page { padding-block: var(--sup-space-24) var(--sup-space-40); }
	.sup-article__type,
	.pkp_structure_page .sup-article__type,
	.sup-article__head,
	.sup-article__facts,
	.sup-article__block {
		padding-inline: calc(var(--sup-space-20) - var(--sup-border-width));
	}
	.sup-article__title,
	.pkp_structure_page .sup-article__title { font-size: var(--sup-text-h3); }
}