/**
 * AION Theme - Resources Page Styles
 *
 * A single vertical list rather than a card grid: these are documents, and a
 * list reads as an index while a grid reads as a product range.
 *
 * @package aion-theme
 * @since   1.2.0
 */

.resources-list__heading {
	margin-bottom: var(--space-8);
	text-align: left;
}

.resources {
	margin: 0;
	padding: 0;
	list-style: none;
}

.resource {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	padding-block: var(--space-8);
	border-bottom: 1px solid var(--color-medium-gray);
}

.resource:first-child {
	padding-top: 0;
}

.resource:last-child {
	border-bottom: none;
}

.resource__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background-color: var(--color-light-bg);
	color: var(--color-accent-text);
}

/* min-width: 0 lets the flex item shrink; without it a long word would
   push the row wider than its container. */
.resource__body {
	min-width: 0;
}

.resource__title {
	margin-bottom: var(--space-1);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--color-dark-text);
}

.resource__meta {
	margin-bottom: var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-accent-text);
}

.resource__text {
	margin-bottom: var(--space-4);
	line-height: var(--leading-relaxed);
	color: var(--color-body-text);
}

.resource__action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--weight-semibold);
	color: var(--color-accent-text);
	text-decoration: none;
}

.resource__action:hover {
	text-decoration: underline;
}

/* Not-yet-available items get no link and read as status, not as an offer. */
.resource__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-body-text);
}

.resource--draft .resource__icon {
	background-color: transparent;
	border: 1px dashed var(--color-border-gray);
	color: var(--color-body-text);
}