/* Shared actions */
.mood-board-card-actions {
	position: relative;
	z-index: 3;
	margin-top: var(--space-3);
}
/* Shared card text */
.mood-board-card-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	line-height: var(--line-height-tight);
}
.mood-board-card-meta-header,
.mood-board-card-owner-collection,
.mood-board-card-count-collection {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* Profile variation */
.mood-board-card-profile .mood-board-card-overlay {
	padding: var(--space-4);
}
.mood-board-card-profile .mood-board-card-title {
	margin-bottom: var(--space-1);
	font-size: var(--text-lg);
}
.mood-board-card-profile .mood-board-card-meta-header {
	margin-bottom: var(--space-2);
	font-size: var(--text-xs);
}
/* Manage variation */
.moodboard-manager-grid .moodboard-card-wrapper {
	position: relative;
}
.mood-board-card-manage .mood-board-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.mood-board-card-manage .mood-board-card-actions .board-action-link,
.mood-board-card-manage .mood-board-card-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	padding: var(--space-2) var(--space-3);
	appearance: none;
	border: 0;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-text-on-dark);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--duration-base) var(--ease-standard),
		opacity var(--duration-base) var(--ease-standard);
}
.mood-board-card-manage .mood-board-card-actions .board-action-link:hover,
.mood-board-card-manage .mood-board-card-actions .board-action-link:focus-visible,
.mood-board-card-manage .mood-board-card-actions button:hover,
.mood-board-card-manage .mood-board-card-actions button:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}
/* Collection variation */
.mood-board-card-collection {
	position: relative;
}
.mood-board-card-collection .mood-board-card-overlay-collection {
	position: absolute;
	inset: 0;
	padding: var(--space-5) var(--space-4);
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.4) 40%,
			rgba(0, 0, 0, 0.1) 100%);
	color: var(--color-text-on-dark);
}
.mood-board-card-collection .mood-board-card-title {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: calc(100% - 2 * var(--space-5));
	margin: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	line-height: var(--line-height-tight);
	letter-spacing: 0.1em;
	text-align: center;
	text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.85);
	text-transform: uppercase;
}
.mood-board-card-collection .mood-board-card-owner-collection {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-3);
	z-index: 3;
	pointer-events: none;
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-shadow: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
}
.mood-board-card-collection .mood-board-card-count-collection {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-3);
	z-index: 3;
	pointer-events: none;
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-shadow: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
}
.mood-board-card-collection .mood-board-card-description-collection {
	display: none;
}
@media (max-width: 37.5rem) {
	.mood-board-card-collection .mood-board-card-title {
		width: calc(100% - 2 * var(--space-4));
		font-size: var(--text-xl);
	}
}


/* --- Manage: Board Creation Block --- */
.manage-board-create {
    background: var(--color-surface-subtle);
    border: 2px dashed var(--color-border-main); /* Dashed suggests "Insert here" */
    padding: var(--space-6) var(--space-4);
	margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 20rem; /* Match roughly the height of your grid items */
    transition: border-color var(--transition-base);
}

.manage-board-create:hover {
    border-color: var(--color-accent);
}

.manage-board-create-title {
    margin-top: 0;
    margin-bottom: var(--space-5);
    font-size: var(--text-2xl);
    font-style: italic; /* Adding that curated touch */
    color: var(--color-text-main);
    text-align: center;
}

.manage-board-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 32rem; /* Keeps the form from getting too wide on desktop */
    margin: 0 auto;
}

/* Customizing the input for the board title */
.manage-board-create-input {
    border-radius: var(--radius-pill) !important; /* Overriding global LG radius for a sleeker look */
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    background: var(--color-surface-subtle) !important;
}

.manage-board-create-input:focus {
    background: var(--color-surface) !important;
    box-shadow: 0 0 0 3px rgba(33, 117, 155, 0.1); /* Subtle brand glow */
}

/* Responsive adjustment: stack to inline on larger screens if desired */
@media (min-width: 40rem) {
    .manage-board-create-form {
        flex-direction: row;
        align-items: center;
    }

    .manage-board-create-input {
        flex: 1;
    }

    .manage-board-create-form button {
        flex-shrink: 0;
    }
}




/* Gothic Owner Tools Styling */
.board-owner-tools {
    position: absolute; 
    top: 15px; 
    right: 15px; 
    z-index: 100;
    display: flex; 
    gap: 8px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.moodboard-card-wrapper:hover .board-owner-tools {
    opacity: 1;
}

.rename-board-btn, .delete-board-btn {
    background: #000; 
    color: #fff; 
    border: 1px solid rgba(255,255,255,0.1);
    width: 32px; 
    height: 32px; 
    cursor: pointer; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 14px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rename-board-btn:hover { 
    background: #222; 
    border-color: #fff; 
    transform: translateY(-2px);
}

.delete-board-btn:hover { 
    background: #400; 
    border-color: #f00; 
    transform: translateY(-2px);
}