/* IDE Downloads — frontend styles. Self-contained; Avada CSS variables are
   used only as optional fallbacks, never as a hard dependency.

   The "sidebar" layout's proportions/spacing/typography follow the same
   pattern already used by ide-multimedia's default layout, which in turn
   matches the Company → Organization page of the IDE site: content ~75%,
   nav ~25%, #f2f2f2 divider, "Categories" heading, and a nav where only
   font-weight (not colour) marks the active item. */

.ide-downloads {
	--ide-dl-accent: var(--awb-color2, #0073aa);
	--ide-dl-text: var(--awb-text-color, #283253); /* rgb(40, 50, 83) — IDE text colour */
	--ide-dl-muted: #666;
	--ide-dl-card-bg: var(--awb-color7, #f2f2f2);
	--ide-dl-border: #f2f2f2;
	font-family: var(--ide-dl-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.ide-downloads .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Sidebar layout ----------
   Content ~75%, category navigation ~25%, subtle vertical divider — the nav
   stays first in the markup (so the mobile <select> still appears above the
   content when the two-column grid collapses) and is only moved visually
   via `order`. Not sticky. */

.ide-dl-layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
	gap: 3rem;
	align-items: start;
}

.ide-dl-content {
	order: 1;
	min-width: 0;
}

.ide-dl-sidebar {
	order: 2;
	/* Deliberately not sticky. */
	position: static;
}

/* Sits above the divider/list, flush left — not indented, no border. */
.ide-dl-sidebar-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ide-dl-text);
}

.ide-dl-mobile-select-wrap {
	display: none;
	margin-bottom: 1.5rem;
}

.ide-dl-category-select {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--ide-dl-text);
	background: #fff;
	border: 1px solid #d3d6db;
	border-radius: 6px;
}

/* The vertical divider belongs to the list, not the heading above it. */
.ide-dl-sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.5rem;
	border-left: 1px solid var(--ide-dl-border);
	padding-left: 1.875rem;
}

/* Only font-weight marks the active item — same colour throughout, no
   border/pill, hover underlines. */
.ide-dl-sidebar-link {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0;
	color: var(--ide-dl-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
	transition: font-weight .2s ease;
}

.ide-dl-sidebar-link:hover {
	text-decoration: underline;
}

.ide-dl-sidebar-link.is-active {
	font-weight: 700;
}

.ide-dl-sidebar-link:focus-visible {
	outline: 2px solid var(--ide-dl-accent);
	outline-offset: 2px;
}

.ide-dl-layout .ide-dl-category {
	margin-bottom: 0;
}

@media (max-width: 782px) {
	.ide-dl-layout {
		display: block;
	}

	.ide-dl-sidebar-heading,
	.ide-dl-sidebar-list {
		display: none;
	}

	.ide-dl-mobile-select-wrap {
		display: block;
	}
}

/* ---------- Sections & grid ---------- */

.ide-dl-category {
	margin-bottom: 3.5rem;
}

.ide-dl-category[hidden] {
	display: none;
}

.ide-dl-category-title {
	color: var(--ide-dl-text);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 8px;
	letter-spacing: normal;
}

/*
 * `columns` is a maximum, not a fixed count: each track's minimum width is
 * "what 1/N of the available space would be" (clamped to a 200px floor for
 * readability). At that minimum, exactly N columns fit — never more, since
 * a further column would have to be narrower than the minimum. When the
 * container is too narrow for N columns of >=200px, the column count steps
 * down on its own, continuously, with no fixed breakpoint.
 *
 * auto-fill (not auto-fit): with fewer items than columns, auto-fit would
 * collapse the empty tracks and stretch the remaining item(s) to fill the
 * row — a single document would blow up to full width. auto-fill keeps the
 * empty tracks reserved instead, so 1 item stays one column wide, 2 items
 * stay two columns wide, etc.
 *
 * align-items:stretch (unlike a video gallery, where rows are deliberately
 * left ragged) is what makes every card in the same row match the row's
 * tallest card, so a one-line and a two-line title never create a visual
 * "step" between neighbouring cards — the card itself then distributes that
 * extra height into its title area (see .ide-dl-card-title below).
 */
.ide-dl-grid {
	--ide-dl-gap: 2rem;
	display: grid;
	align-items: stretch;
	gap: var(--ide-dl-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(160px, (100% - (var(--ide-dl-cols, 4) - 1) * var(--ide-dl-gap)) / var(--ide-dl-cols, 4)), 1fr)
	);
}

@media (max-width: 480px) {
	.ide-dl-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Card ---------- */

/* Flat fill, square corners, no border — reads as part of the layout, not a
   boxed widget. The whole card is a link to the protected download. */
.ide-dl-card {
	background: var(--ide-dl-card-bg);
	display: flex;
	flex-direction: column;
	text-align: left;
	text-decoration: none;
	color: inherit;
}

.ide-dl-card:hover .ide-dl-card-title {
	text-decoration: underline;
}

/*
 * One frame for every card, regardless of where the image came from
 * (per-post Featured Image, the Settings' global "Default document image",
 * or the SVG placeholder) — .ide-dl-media alone owns aspect ratio,
 * background, padding, centring and overflow; the <img> inside never
 * changes that, only its own content does. aspect-ratio 4/5 (portrait, not
 * the 16/9 "video" shape) gives a certificate's own A4-ish proportions room
 * to use. object-fit:contain + padding on the frame means the image is
 * always shown whole, centred, never cropped or stretched — cover would
 * crop a tall A4 certificate's top/bottom (title, signature, seal) to fill
 * the box, which is wrong for a document page even though it's fine for an
 * ordinary photo.
 */
.ide-dl-media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--ide-dl-card-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	overflow: hidden;
}

.ide-dl-thumb {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* Caption sits centred under the thumbnail, close to it — same concept as
   the old downloads pages' cards, just flattened/modernised. flex-grow +
   centred content is what lets the extra height a stretched row hands this
   card land as balanced padding around a one-line title, instead of the
   title clinging to the top while the rest of the card is dead space.
   min-height reserves room for two lines so a one-line and a two-line
   neighbour still occupy the same footprint before the row is even
   measured. */
.ide-dl-card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	min-height: calc(1.35em * 2 + 16px);
	margin: 0;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	color: var(--ide-dl-text);
}

/*
 * The sidebar layout's document panels can hold many references per
 * subcategory (see the old "Technical sheets" page) — shorter, more
 * landscape-ish thumbnails and a tighter gap keep each row compact instead
 * of turning every technical sheet into an oversized poster. The grid
 * layout (e.g. company certificates, usually fewer, portrait items) keeps
 * the taller 4/5 default above.
 */
.ide-dl-layout .ide-dl-grid {
	--ide-dl-gap: 1.5rem;
}

.ide-dl-layout .ide-dl-media {
	aspect-ratio: 4 / 3;
}