/**
 * styles/announcements.css
 *
 * SUP Journals Theme — the Announcements list and the page of one
 * announcement.
 *
 * Measured from the Announcements and Announcement Page frames: an 840px
 * column beside the native OJS sidebar's 320px, 40px under the header and
 * 40px above the footer.
 *
 * Every announcement is drawn as a sheet of paper with its bottom-right
 * corner folded back. The canvas gives that sheet a warm palette of its
 * own, which lives in tokens.css as the --sup-color-note-* family.
 */

/* ---------------------------------------------------------------
   Page heading — the title and the journal's own introduction
   --------------------------------------------------------------- */
/* The heading stands 16px under the breadcrumbs, which .sup-page sets. */
.sup-page-head {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-8);
}

.sup-page-head__title,
.pkp_structure_page .sup-page-head__title {
	margin: 0;
	max-width: var(--sup-col-heading);
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-display);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-heading);
}

.sup-page-head__lead,
.pkp_structure_page .sup-page-head__lead {
	max-width: var(--sup-col-prose);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-heading);
}

.pkp_structure_page .sup-page-head__lead p { margin: 0; font-size: inherit; line-height: inherit; }
.pkp_structure_page .sup-page-head__lead p + p { margin-top: var(--sup-space-16); }

/* ---------------------------------------------------------------
   The list — three sheets to a row, 18px apart
   --------------------------------------------------------------- */
/* base.css zeroes the margin of every classed list on a page, at the same
   specificity, so this rule names the element to win it back. */
.sup-notes,
.pkp_structure_page ul.sup-notes {
	display: grid;
	/* The canvas sets the sheet at 268px and three to a row in the 840px
	   column. Stated as a fill, the same 268px gives those three here and
	   drops a column at a time as the column narrows, down to one on a
	   phone — the canvas draws this page at 1920 only. */
	grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
	gap: var(--sup-space-18);
	margin: var(--sup-space-32) 0 0;
	padding: 0;
	list-style: none;
}

.sup-notes > li { display: flex; }

/* ---------------------------------------------------------------
   One announcement, as a sheet of paper
   --------------------------------------------------------------- */
/* The corner is cut along the diagonal of a 32px square; the fold that
   sits in it carries that edge's own line, so the sheet's border stops
   where the clip does. */
.sup-note {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	/* The sheet keeps a band of 32px under its text: that is where the
	   corner folds back, and the canvas leaves it clear. */
	padding:
		calc(var(--sup-space-25) - var(--sup-border-width))
		calc(var(--sup-space-25) - var(--sup-border-width))
		calc(var(--sup-space-32) - var(--sup-border-width));
	background: var(--sup-color-surface);
	border: var(--sup-border-width) solid var(--sup-color-note-border);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 32px),
		calc(100% - 32px) 100%,
		0 100%
	);
}

.sup-note__fold {
	position: absolute;
	/* On the sheet's outer edge, as the canvas sets it: the sheet's own
	   border would otherwise hold the fold 1px inside the cut, leaving a
	   sliver of white between the two diagonals. */
	right: calc(-1 * var(--sup-border-width));
	bottom: calc(-1 * var(--sup-border-width));
	width: 32px;
	height: 32px;
	background: center / contain no-repeat url('../images/note-fold.svg');
}

/* The mark and the title share a row, 8px apart; the title runs to two
   lines and then ends in an ellipsis, as the canvas truncates it. */
.sup-note__head {
	display: flex;
	align-items: center;
	gap: var(--sup-space-8);
}

.sup-note__head .sup-icon { color: var(--sup-color-note-border); }

.sup-note__title,
.pkp_structure_page .sup-note__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-note-title);
}

/* The date stands 8px under the title, its calendar 4px from the figure.
   The date and the link are paragraphs, and a sidebar block sets its own
   paragraph margin and size one level deeper than a class; naming the
   element here keeps the sheet the same when it stands in the sidebar. */
.sup-note__date,
.pkp_structure_page .sup-note__date,
.pkp_structure_page p.sup-note__date {
	display: flex;
	align-items: center;
	gap: var(--sup-space-4);
	margin: var(--sup-space-8) 0 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-subtle);
}

.sup-note__date .sup-icon { color: var(--sup-color-note-icon); }

/* The summary stands 16px lower, behind a rule of its own, and ends after
   four lines. */
.sup-note__summary,
.pkp_structure_page .sup-note__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin: var(--sup-space-16) 0 0 var(--sup-space-4);
	padding-left: var(--sup-space-14);
	border-left: var(--sup-border-width) solid var(--sup-color-note-rule);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-subtle);
}

.pkp_structure_page .sup-note__summary p { margin: 0; font-size: inherit; line-height: inherit; }

/* The link closes the sheet, 14px under whatever came before it. */
.sup-note__more,
.pkp_structure_page .sup-note__more,
.pkp_structure_page p.sup-note__more {
	margin: var(--sup-space-14) 0 0;
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-flat);
}

.sup-note__more a {
	color: var(--sup-color-link);
	text-decoration: underline;
}

.sup-note__more a:hover,
.sup-note__more a:focus-visible { color: var(--sup-color-link-strong); }

/* ---------------------------------------------------------------
   The page of one announcement
   --------------------------------------------------------------- */
/* The prose stands 16px under the title, at the reading measure. */
.sup-announcement__body,
.pkp_structure_page .sup-announcement__body {
	max-width: var(--sup-col-prose);
	margin-top: var(--sup-space-16);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-heading);
}

.pkp_structure_page .sup-announcement__body p { margin: 0; font-size: inherit; line-height: inherit; }
.pkp_structure_page .sup-announcement__body p + p { margin-top: var(--sup-space-16); }
.sup-announcement__body a { color: var(--sup-color-link); text-decoration: underline; }

/* ---------------------------------------------------------------
   The homepage's announcements — at the head of the sidebar

   Measured from the PBMT Homepage frame: the block stands 16px below the
   top of the sidebar, its label is the sidebar's own, and each
   announcement is the sheet above at the sidebar's 280px. More than one
   stack 18px apart, as the sheets of the Announcements page do.
   --------------------------------------------------------------- */
.pkp_block.sup-block-announcements { padding-top: var(--sup-space-16); }

.sup-block-announcements__list,
.pkp_structure_page ul.sup-block-announcements__list {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-18);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pkp_block .content li.sup-block-announcements__item { margin: 0; padding: 0; }