/**
 * Document Library - front-end list: a section per category with a card per document.
 *
 * Every colour is a --doclib-* custom property. The defaults follow the Astra
 * global palette (Customize > Global > Colors), so the list picks up the site's
 * brand colours automatically; on other themes they fall back to neutral tints
 * of the surrounding text colour.
 *
 * To restyle site-wide, override the variables, e.g. in
 * Elementor > Site Settings > Custom CSS or Appearance > Customize > Additional CSS:
 *
 *   .doclib { --doclib-accent: #b3261e; --doclib-card-radius: 6px; }
 *
 * The Elementor widget's Style tab sets the same variables per widget.
 */
.doclib {
	--doclib-accent:            var(--ast-global-color-0, currentColor);
	--doclib-color:             currentColor;
	--doclib-title-color:       var(--ast-global-color-2, currentColor);
	--doclib-group-title-color: var(--ast-global-color-2, currentColor);
	--doclib-muted:             color-mix(in srgb, currentColor 65%, transparent);
	--doclib-border:            var(--ast-border-color, color-mix(in srgb, currentColor 18%, transparent));
	--doclib-icon-bg:           color-mix(in srgb, var(--doclib-accent) 10%, transparent);
	--doclib-icon-color:        var(--doclib-accent);
	--doclib-card-bg:           transparent;
	--doclib-card-hover-bg:     var(--doclib-card-bg);
	--doclib-card-hover-border: var(--doclib-accent);
	--doclib-card-radius:       0;
	--doclib-card-padding:      16px;
	--doclib-card-gap:          16px;   /* Space between cards. */
	--doclib-grid-columns:      2;      /* Max category sections per row. */
	--doclib-min-column:        26rem;  /* Narrower than this, a section moves to its own row. */
	--doclib-gap-x:             48px;
	--doclib-gap-y:             48px;

	width: 100%;
	margin: 0 0 1.5em;
	color: var(--doclib-color);
}

.doclib:last-child {
	margin-bottom: 0;
}

.doclib.doclib--cols-1 { --doclib-grid-columns: 1; }
.doclib.doclib--cols-3 { --doclib-grid-columns: 3; }
.doclib.doclib--cols-4 { --doclib-grid-columns: 4; }

/* In Elementor flex containers, fill the available width by default
   (the widget's own Advanced > Width setting still overrides this). */
.elementor-widget-doclib_document_list {
	width: 100%;
}

.doclib .doclib-icon {
	display: block;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Category sections side by side: up to --doclib-grid-columns per row,
 * never narrower than --doclib-min-column. Depends only on the list's own
 * width, so it works in any layout (page, narrow Elementor column, phone).
 * ---------------------------------------------------------------- */

.doclib .doclib__groups {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				min(100%, var(--doclib-min-column)),
				calc((100% - (var(--doclib-grid-columns) - 1) * var(--doclib-gap-x)) / var(--doclib-grid-columns))
			),
			1fr
		)
	);
	column-gap: var(--doclib-gap-x);
	row-gap: var(--doclib-gap-y);
	align-items: start;
}

.doclib .doclib__group {
	min-width: 0;
}

/* ------------------------------------------------------------------
 * Category header: icon square, title, "3 dok."
 * ---------------------------------------------------------------- */

.doclib .doclib__group-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--doclib-border);
}

.doclib .doclib__group-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--doclib-icon-bg);
	color: var(--doclib-icon-color);
}

.doclib .doclib__group-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--doclib-group-title-color);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.025em;
	overflow-wrap: break-word;
}

.doclib .doclib__group-count {
	flex-shrink: 0;
	color: var(--doclib-muted);
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
}

.doclib .doclib__group-empty {
	margin: 0;
	color: var(--doclib-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 20px;
}

/* ------------------------------------------------------------------
 * Document cards.
 * ---------------------------------------------------------------- */

.doclib .doclib__list {
	display: flex;
	flex-direction: column;
	gap: var(--doclib-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.doclib .doclib__item {
	margin: 0;
	padding: 0;
}

/* Extra specificity: themes (Astra, Elementor kits) colour and underline content links. */
.doclib .doclib__list .doclib__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--doclib-card-padding);
	border: 1px solid var(--doclib-border);
	border-radius: var(--doclib-card-radius);
	background: var(--doclib-card-bg);
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.doclib .doclib__card-main {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.doclib .doclib__card-text {
	flex: 1;
	min-width: 0;
}

.doclib .doclib__name {
	display: block;
	color: var(--doclib-title-color);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.025em;
	transition: color 0.15s ease;
}

.doclib.doclib--truncate .doclib__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.doclib.doclib--wrap .doclib__name {
	overflow-wrap: break-word;
}

.doclib .doclib__file-icon,
.doclib .doclib__download-icon {
	display: flex;
	flex-shrink: 0;
	color: var(--doclib-muted);
	transition: color 0.15s ease;
}

/* Fixed px sizes (not rem): Astra shrinks the root font size on phones. */

/* Details: "[calendar] 15 janar 2026   1,3 KB   PDF" */
.doclib .doclib__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	margin-top: 4px;
	color: var(--doclib-muted);
	font-size: 12px;
	line-height: 16px;
}

.doclib .doclib__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

/* Hover / keyboard focus: accent border, name and icons. */
.doclib .doclib__list a.doclib__card:hover,
.doclib .doclib__list a.doclib__card:focus-visible {
	border-color: var(--doclib-card-hover-border);
	background: var(--doclib-card-hover-bg);
	color: inherit;
	text-decoration: none;
}

.doclib .doclib__list a.doclib__card:focus-visible {
	outline: 2px solid var(--doclib-accent);
	outline-offset: 2px;
}

.doclib a.doclib__card:hover .doclib__name,
.doclib a.doclib__card:hover .doclib__file-icon,
.doclib a.doclib__card:hover .doclib__download-icon,
.doclib a.doclib__card:focus-visible .doclib__name,
.doclib a.doclib__card:focus-visible .doclib__file-icon,
.doclib a.doclib__card:focus-visible .doclib__download-icon {
	color: var(--doclib-accent);
}

.doclib__empty {
	margin: 0;
}

/* ------------------------------------------------------------------
 * Phones.
 * ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.doclib {
		--doclib-gap-y: 40px;
	}

	.doclib .doclib__group-header {
		gap: 12px;
	}

	.doclib .doclib__group-icon {
		width: 40px;
		height: 40px;
	}

	.doclib .doclib__group-title {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.doclib .doclib__list .doclib__card,
	.doclib .doclib__name,
	.doclib .doclib__file-icon,
	.doclib .doclib__download-icon {
		transition: none;
	}
}