/**
 * Creative library
 *
 * The creative library: the index at /creative-library/, the category archives,
 * and the single item page. Bootstrap, Font Awesome, and base.css come first
 * from partials/head.php - this is only the page layer on top.
 *
 * The index chrome this shares with the video library - the page head and its
 * search, the FacetWP filter sidebar, the results bar, the selections, the
 * section headings, the popular band, the empty state, and the pager - is in
 * learn.css under FACETED LIBRARY INDEX, which every hub page loads for the
 * subnav anyway. Nothing here depends on videos.css, and videos.css never
 * loads on these URLs.
 *
 * What FacetWP markup is restyled below is the sidebar's own hide list, which
 * is about creative_library_cats and belongs to this page rather than to the
 * shared sheet.
 *
 * @copyright   2026, ON1
 */

/* !- Plus upsell
 *
 * The house CTA button sizing, off #blog-cta .btn - smaller text and more
 * padding than Bootstrap's default, which is what .btn otherwise falls through
 * to. base.css only sets the weight.
 *
 * Here rather than on .plus-upsell in learn.css because that band is also on
 * the video library index, the courses archive, and the single book page, and
 * those aren't being rebuilt. This sheet only loads on creative library URLs,
 * so the rule can't reach them.
 */
#library-plus-upsell .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Filter sidebar
 *
 * Non-Plus is hidden in learn.css, since both libraries carry that term. What
 * is left here is Loyalty Rewards, which stays: it is a real shelf with 200-odd
 * items on it, and the mockup draws it directly under ON1 Plus as a second
 * top-level checkbox.
 *
 * ON1 Plus and Loyalty Rewards have no children in this taxonomy, so they fall
 * through the shared sheet's parent-heading rule and render as plain
 * checkboxes. Type, Apps, Seasons, and Genre do have children and become the
 * collapsible headings the mockup draws. Nothing extra is needed for either.
 */
#library-filters .facetwp-checkbox[data-value="loyalty-rewards"] {
	font-weight: 600;
}

/* !- Item layouts
 */
/* !- Item grid
 *
 * Four across, matching the video library, and the listings that feed it come
 * in multiples of four so no row ends with a card hanging off the edge.
 */
.creative-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
	.creative-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* !- Item cards
 *
 * 4:3 rather than the video library's 16:9. These previews are photographs and
 * swatches uploaded at whatever shape they came in, so a wide crop throws away
 * more of them than it needs to.
 */
.creative-card .creative-thumb {
	aspect-ratio: 4 / 3;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	margin-bottom: 0.75rem;
	overflow: hidden;
	position: relative;
}

.creative-card .creative-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s;
	width: 100%;
}

.creative-card .creative-thumb:hover img {
	transform: scale(1.03);
}

/*
 * The padlock says this visitor can't have this item, so it only appears when
 * that's true - see partials/creative-card.php. Orange, because ON1 Plus is
 * orange; the mockup drew it gold.
 */
.creative-card .lock-badge {
	align-items: center;
	background: color-mix(in srgb, var(--black) 65%, transparent);
	border-radius: 50%;
	color: var(--orange-400);
	display: flex;
	font-size: var(--text-micro);
	height: 1.625rem;
	justify-content: center;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	width: 1.625rem;
}

.creative-card .creative-title {
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

.creative-card .creative-title a {
	color: var(--text-100);
	text-decoration: none;
}

.creative-card .creative-title a:hover {
	color: var(--link);
}

.creative-tag {
	border-radius: var(--border-radius);
	display: inline-block;
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.1875rem 0.5rem;
	text-transform: uppercase;
}

.creative-tag-plus {
	background: var(--orange-transparent);
	color: var(--accent-orange);
}

.creative-tag-free {
	background: var(--blue-transparent);
	color: var(--accent-blue);
}

/* !- Small screens */
@media (max-width: 767.98px) {
}

/*==============================================================================
 * SINGLE ITEM
 =============================================================================*/

/* !- Breadcrumb */
#creative-breadcrumb {
	padding-top: 1.25rem;
}

#creative-breadcrumb .breadcrumb-list {
	color: var(--text-500);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-mini);
	gap: 0.5rem;
	margin-bottom: 0;
}

#creative-breadcrumb .breadcrumb-list li:not(:last-child)::after {
	color: var(--bg-500);
	content: '\203a';
	margin-left: 0.5rem;
}

#creative-breadcrumb .breadcrumb-list a {
	color: var(--text-500);
	text-decoration: none;
}

#creative-breadcrumb .breadcrumb-list a:hover {
	color: var(--text-100);
}

#creative-breadcrumb .breadcrumb-list li[aria-current] {
	color: var(--text-300);
}

/* !- Body */
#creative-body {
	padding-bottom: 5rem;
	padding-top: 1.5rem;
}

/* !- Preview
 *
 * No fixed aspect ratio: these are uploaded at every shape from a square
 * swatch to a 3:2 landscape, and cropping them to one is throwing away the
 * thing the visitor came to look at. Capped in height so a tall one doesn't
 * push the title off the first screen.
 */
.creative-preview {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	overflow: hidden;
	text-align: center;
}

.creative-preview img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 32rem;
	max-width: 100%;
	width: auto;
}

/* !- Title and byline
 *
 * The gap belongs to the preview above it, not to the head - a gated item and
 * one with no featured image have nothing up there to be clear of.
 */
.creative-preview + .creative-head {
	margin-top: 1.875rem;
}

.creative-head h1 {
	font-size: var(--text-3xl);
	line-height: 1.3;
	margin-bottom: 1rem;
}

.creative-head .preview-badge {
	background: var(--green-500);
	border-radius: var(--border-radius);
	color: var(--white);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.5rem;
	position: relative;
	text-transform: uppercase;
	top: -0.375rem;
	white-space: nowrap;
}

.creative-head .byline-row {
	align-items: center;
	border-bottom: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	padding-bottom: 1.25rem;
}

.creative-head .byline-meta {
	color: var(--text-500);
	font-size: var(--text-micro);
}

.creative-head .byline-meta .list-inline-item:not(:last-child)::after {
	content: '\2022';
	margin-left: 0.375rem;
}

/* !- Favourite and share */
.creative-head .action-row {
	align-items: center;
	display: flex;
	gap: 0.625rem;
}

.creative-head .icon-btn,
.creative-favorite .simplefavorite-button {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-sm);
	height: 2.75rem;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0 0.75rem;
}

.creative-head .icon-btn:hover,
.creative-favorite .simplefavorite-button:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

/* Filled, not just an outline - the outline alone read as no feedback at all */
.creative-head .icon-btn.copied {
	background: var(--green-500);
	border-color: var(--green-500);
	color: var(--white);
}

.creative-head .icon-btn.copy-failed {
	background: color-mix(in srgb, var(--red-500) 15%, transparent);
	border-color: var(--red-500);
	color: var(--red-400);
}

/* The favorites plugin flips this class on when the post is saved */
.creative-favorite .simplefavorite-button.active {
	background: color-mix(in srgb, var(--red-500) 12%, transparent);
	border-color: var(--red-500);
	color: var(--red-400);
}

/* !- Description */
.creative-desc {
	margin-top: 1.5rem;
}

/* !- Tag groups */
.tag-groups {
	margin-top: 1.75rem;
}

.tag-group {
	margin-bottom: 0.875rem;
}

.tag-group .tag-group-label {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

.tag-pill {
	border-radius: 1rem;
	display: inline-block;
	font-size: var(--text-mini);
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.375rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
}

.tag-pill-type {
	background: color-mix(in srgb, var(--orange-500) 15%, transparent);
	color: var(--orange-300);
}

.tag-pill-apps {
	background: color-mix(in srgb, var(--blue-500) 15%, transparent);
	color: var(--accent-blue);
}

.tag-pill-genre,
.tag-pill-seasons {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	color: var(--text-300);
	font-weight: 600;
	text-transform: none;
}

.tag-pill:hover {
	color: var(--text-50);
}

/* !- Comments */
#creative-comments {
	border-top: 1px solid var(--bg-700);
	margin-top: 2.75rem;
	padding-top: 1.875rem;
}

/* !- Rail
 *
 * The page's light band. A two-column detail page has no full-width section to
 * hand that job to, so theme-inverted is scoped to this column and the cards
 * inside read from the inverted tokens without needing their own colors.
 */
#creative-rail {
	background: none;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#creative-rail .rail-card {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.5rem;
}

#creative-rail .rail-title {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

#creative-rail .rail-note {
	color: var(--text-400);
	font-size: var(--text-mini);
	line-height: 1.6;
	margin-bottom: 1rem;
}

#creative-rail .rail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#creative-rail .rail-actions .btn {
	font-size: var(--text-xs);
	padding: 0.5rem 1rem;
}

#creative-rail .rail-link {
	align-items: center;
	color: var(--link-alt);
	display: flex;
	font-size: var(--text-mini);
	font-weight: 600;
	margin-top: 1rem;
	text-decoration: none;
}

#creative-rail .rail-link:hover {
	text-decoration: underline;
}

/* !- Downloads */
.download-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0;
}

.download-item {
	align-items: center;
	color: var(--text-100);
	display: flex;
	gap: 0.875rem;
	text-decoration: none;
}

.download-icon {
	align-items: center;
	background: color-mix(in srgb, var(--blue-500) 15%, transparent);
	border-radius: var(--border-radius);
	color: var(--blue-500);
	display: flex;
	flex-shrink: 0;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.download-name {
	font-size: var(--text-xs);
	font-weight: 700;
	word-break: break-word;
}

.download-item:hover .download-name {
	color: var(--link);
}

/* !- More like this */
.rail-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

.rail-list li:not(:last-child) {
	border-bottom: 1px solid var(--bg-700);
}

.rail-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.625rem 0;
	text-decoration: none;
}

.rail-item-thumb {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	flex-shrink: 0;
	height: 3.5rem;
	overflow: hidden;
	width: 4.6875rem;
}

.rail-item-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.rail-item-title {
	align-self: center;
	color: var(--text-50);
	display: block;
	font-size: var(--text-mini);
	font-weight: 600;
	line-height: 1.4;
}

.rail-item:hover .rail-item-title {
	color: var(--link);
}

/* !- Small screens */
@media (max-width: 767.98px) {
	.creative-head h1 {
		font-size: var(--text-2xl);
	}

	.creative-preview img {
		max-height: 20rem;
	}

	.rail-item-thumb {
		height: 3rem;
		width: 4rem;
	}
}