/* Folder feature — primitive classes ported from com-x.life ---------------- */

[v-cloak] {display: none !important;}

/* Buttons (com-x equivalents) */
.btn--primary {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 20px;
	background: var(--accent); color: #000;
	border: none; border-radius: 6px;
	font-size: 14px; font-weight: 600;
	cursor: pointer; font-family: inherit;
	transition: opacity .15s;
}
.btn--primary:hover {opacity: .85;}
.btn--primary:disabled {opacity: .5; cursor: not-allowed;}

.btn--ghost {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 20px;
	background: transparent; color: var(--tt);
	border: 1px solid var(--bdc); border-radius: 6px;
	font-size: 14px; font-weight: 600;
	cursor: pointer; font-family: inherit;
	transition: border-color .15s;
}
.btn--ghost:hover {border-color: var(--tt);}
.btn--ghost:disabled {opacity: .5; cursor: not-allowed;}

/* Layout helpers (com-x equivalents) */
.page__hr {padding: 12px 0; border-top: 1px solid var(--bg-lighter-2); margin: 8px 0;}
.text-truncate {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;}
.line-clamp {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.img-responsive--portrait {aspect-ratio: 2/3;}
.folder-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-shrink: 0;
}
.folder-share-status {
	color: var(--accent);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* Folder grid behaviour: match com-x folder vitrines. */
.js-folders > .carou__content,
.js-folder > .carou__content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 22px 16px;
	overflow: visible;
	overflow-x: visible;
	overflow-y: visible;
	scroll-snap-type: none;
	padding: 0;
	margin: 18px 0 0;
}
.js-folders > .carou__content:not(.owl-carousel) > *,
.js-folder > .carou__content:not(.owl-carousel) > * {
	width: auto;
	min-width: 0;
	margin-right: 0;
	flex-shrink: 1;
	scroll-snap-align: unset;
}
.js-folders .poster,
.js-folder .poster {margin-bottom: 0;}
.js-folders .folder-card {position: relative;}
.js-folders .folder-card > a {display: block; color: inherit;}
.js-folder .folder-item > a {display: block; color: inherit;}
.folder-card__share {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	background: rgba(0,0,0,.72);
	color: #fff;
	cursor: pointer;
}
.folder-card__share:hover {border-color: var(--accent); color: var(--accent);}
@media (max-width: 590px) {
	.js-folders > .carou__content,
	.js-folder > .carou__content {
		grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
		gap: 16px 12px;
	}
}

/* Drag affordance for sortable */
.js-folder .poster__img,
.js-folders .poster__img {cursor: grab;}
.js-folder .poster__img:active,
.js-folders .poster__img:active {cursor: grabbing;}

.sortable-ghost {opacity: .4;}

.folder-starter {margin-top: 18px;}
.folder-starter__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}
.folder-starter__item {
	position: relative;
	min-width: 0;
	border: 1px solid var(--bg-lighter-3);
	border-radius: 8px;
	background: var(--bg-lighter);
}
.folder-starter__item:hover {border-color: var(--accent);}
.folder-starter__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 88px;
	padding: 10px 42px 10px 10px;
	color: inherit;
	text-decoration: none;
}
.folder-starter__img {
	width: 44px;
	height: 66px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
	background: var(--bg-lighter-2);
}
.folder-starter__body {min-width: 0;}
.folder-starter__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.folder-starter__meta {
	margin-top: 5px;
	color: var(--tt-darker);
	font-size: 12px;
}
.folder-starter__author {
	margin-top: 3px;
	color: var(--tt-darker);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.folder-starter__author span {color: var(--tt); font-weight: 600;}

.folder-starter__share {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	color: #fff;
	cursor: pointer;
}
.folder-starter__share:hover {border-color: var(--accent); color: var(--accent);}

.folder-top {margin-top: 26px;}
.folder-top__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.folder-top__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
}
.folder-top__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.folder-guide-wrap {
	position: relative;
	min-width: 0;
}
.folder-guide {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--bg-lighter-3);
	border-radius: 8px;
	background: var(--bg-lighter);
	color: inherit;
	text-decoration: none;
}
.folder-guide:hover {border-color: var(--accent);}
.folder-guide__share {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	color: #fff;
	cursor: pointer;
}
.folder-guide__share:hover {border-color: var(--accent); color: var(--accent);}
.folder-guide__img {
	width: 44px;
	height: 66px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
	background: var(--bg-lighter-2);
}
.folder-guide__body {min-width: 0;}
.folder-guide__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.folder-guide__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 5px;
	color: var(--tt-darker);
	font-size: 12px;
}

/* Folder-item delete badge — handled inline in the template; nothing here. */

/* Homepage-eligibility nudge banner (My Folders) */
.folder-nudge {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--accent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--accent) 12%, var(--bg-lighter));
	font-size: 14px;
	line-height: 1.4;
}
.folder-nudge__icon {color: var(--accent); font-size: 18px; flex-shrink: 0;}
.folder-nudge__text {flex: 1; min-width: 0;}
.folder-nudge__close {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tt-darker);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.folder-nudge__close:hover {color: var(--tt); background: var(--bg-lighter-2);}