/* Home content sections (below the prompt bar on /). */

.ii-home-sections {
	max-width: var(--ii-page-large);
	margin: 0 auto;
	padding: 0 var(--ii-page-gutter) var(--ii-section-y);
	box-sizing: border-box;
}

.ii-home-tools {
	padding-top: var(--ii-section-y);
}

.ii-home-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--ii-space-3);
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.ii-home-section-head .ii-section-title {
	font-size: var(--ii-fs-4xl);
}

.ii-tool-rows {
	display: grid;
	gap: clamp(56px, 7vw, 112px);
	margin-top: clamp(48px, 6vw, 96px);
}

.ii-tool-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	padding: 20px;
	border-radius: var(--ii-radius-lg);
	background: var(--ii-bg-secondary);
}

/* Media is always the wider track. order: -1 alone would put it in column 1,
   which is the narrow one, so the template flips with it. */
.ii-tool-row:nth-child(even) {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.ii-tool-row:nth-child(even) .ii-tool-row-media {
	order: -1;
}

.ii-tool-row-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ii-space-4);
	min-width: 0;
}

.ii-tool-row-title {
	margin: 0;
	font-size: var(--ii-fs-2xl);
	line-height: var(--ii-lh-tight);
	font-weight: 700;
	font-family: var(--ii-font-display);
	color: var(--ii-text-primary);
}

.ii-tool-row-desc {
	margin: 0;
	max-width: 46ch;
	font-size: var(--ii-fs-md);
	line-height: var(--ii-lh-relaxed);
	color: var(--ii-text-secondary);
}

.ii-tool-row-text .ii-section-actions {
	margin-top: var(--ii-space-2);
}

.ii-tool-row-media {
	min-width: 0;
}

/* Recent Workspaces / Recent Generations */

.ii-home-recent {
	padding-top: var(--ii-section-y);
}

.ii-home-recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ii-space-3);
	margin-bottom: var(--ii-space-6);
}

.ii-recent-head-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--ii-border);
	border-radius: var(--ii-radius-full);
	background: var(--ii-surface-white);
	color: var(--ii-text-secondary);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--ii-transition),
		color var(--ii-transition),
		border-color var(--ii-transition);
}

.ii-recent-head-btn:hover,
.ii-recent-head-btn.is-popper-open {
	background: var(--ii-bg-hover);
	color: var(--ii-text-primary);
	text-decoration: none;
}

.ii-recent-head-btn:focus-visible {
	outline: 2px solid var(--ii-accent);
	outline-offset: 2px;
}

.ii-recent-grid {
	display: grid;
	gap: var(--ii-space-4);
}

.ii-recent-grid--workspaces {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ii-recent-grid--generations {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ii-recent-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ii-border);
	border-radius: var(--ii-radius-md);
	background: var(--ii-surface-white);
	overflow: hidden;
	transition:
		box-shadow var(--ii-transition),
		background var(--ii-transition);
}

/* Same lift as the prompt bar input. */
.ii-recent-card:hover {
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.075),
		0 0 0 0.5px rgb(193 193 193 / 30%);
}

.dark .ii-recent-card:hover {
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.15),
		0 0 0 0.5px rgb(151 151 151 / 30%);
}

.ii-recent-card--new {
	align-items: center;
	justify-content: center;
	gap: var(--ii-space-3);
	min-height: 180px;
	border-style: dashed;
	color: var(--ii-text-secondary);
	font-size: var(--ii-fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ii-recent-card--new:hover {
	color: var(--ii-text-primary);
	background: var(--ii-bg-hover);
	text-decoration: none;
}

.ii-recent-new-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--ii-bg-tertiary);
}

/* A <button> on generation cards, a <div> on workspace ones: the reset is
   inert on the div. */
.ii-recent-card-thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: inherit;
	aspect-ratio: 4 / 3;
	background: var(--ii-bg-tertiary);
	overflow: hidden;
}

.ii-recent-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ii-recent-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--ii-text-tertiary);
}

.ii-recent-card-placeholder svg {
	width: 28px;
	height: 28px;
}

.ii-recent-card-meta {
	display: flex;
	flex-direction: column;
	gap: var(--ii-space-1);
	min-width: 0;
	padding: var(--ii-space-3) var(--ii-space-4);
}

/* Workspace cards carry it over the thumb and reveal it on hover, same
   treatment as the detector's history cards: the grid reads as a wall of
   thumbnails rather than thumbnails with captions. The gradient is what makes
   the text legible over an arbitrary image. */
.ii-recent-card--workspace .ii-recent-card-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--ii-space-6) var(--ii-space-4) var(--ii-space-3);
	background: linear-gradient(
		to top,
		rgba(8, 12, 20, 0.88) 0%,
		rgba(8, 12, 20, 0.55) 55%,
		transparent 100%
	);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

/* focus-within, not :focus-visible on the card: the card is a plain div, and
   the thing that takes focus is the title link INSIDE this block, which would
   otherwise be tabbed to while invisible. Unlike the detector's history label
   this must keep its pointer events, for the same link. */
.ii-recent-card--workspace:hover .ii-recent-card-meta,
.ii-recent-card--workspace:focus-within .ii-recent-card-meta {
	opacity: 1;
	transform: translateY(0);
}

/* Both read against the gradient now, not the card surface. */
.ii-recent-card--workspace .ii-recent-card-title {
	color: #ffffff;
}

.ii-recent-card--workspace .ii-recent-card-time {
	color: rgba(255, 255, 255, 0.78);
}

.ii-recent-card-title {
	min-width: 0;
	font-size: var(--ii-fs-sm);
	font-weight: 600;
	color: var(--ii-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ii-recent-card-time {
	min-width: 0;
	font-size: var(--ii-fs-xs);
	color: var(--ii-text-secondary);
	line-height: 1.125;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Generation cards are the image itself: no meta row, actions float on top. */
.ii-recent-card--generation,
.ii-recent-card--workspace {
	cursor: pointer;
}

/* The focus ring lives on the real control inside the card, not on the card:
   the card is a plain div now. Inset, because the card clips its overflow. */
button.ii-recent-card-thumb:focus-visible,
.ii-recent-card-title-link:focus-visible {
	outline: 2px solid var(--ii-accent);
	outline-offset: -2px;
}

.ii-recent-card-title-link {
	display: block;
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.ii-recent-card-title-link:hover {
	color: inherit;
	text-decoration: none;
}

/* Blockified so the title's own ellipsis still applies inside the link. */
.ii-recent-card-title-link .ii-recent-card-title {
	display: block;
}

.ii-recent-card--generation .ii-recent-card-thumb {
	aspect-ratio: 1 / 1;
}

.ii-recent-card--empty {
	align-items: center;
	justify-content: center;
	gap: var(--ii-space-3);
	padding: var(--ii-space-10) var(--ii-space-6);
	border-style: dashed;
	text-align: center;
}

.ii-recent-empty-icon {
	display: inline-flex;
	color: var(--ii-text-tertiary);
}

.ii-recent-empty-icon svg {
	width: 32px;
	height: 32px;
}

.ii-recent-empty-title {
	font-size: var(--ii-fs-md);
	font-weight: 600;
	color: var(--ii-text-primary);
}

.ii-recent-empty-desc {
	font-size: var(--ii-fs-sm);
	color: var(--ii-text-secondary);
}

.ii-recent-card--empty .ii-btn-secondary {
	margin-top: var(--ii-space-2);
}

.ii-recent-card-actions {
	position: absolute;
	top: 7px;
	right: 7px;
	display: flex;
	align-items: center;
	gap: var(--ii-space-1);
}

/* Same pill as the wishlist card options button. */
.ii-recent-card-open,
.ii-recent-card-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: var(--ii-radius-rounded);
	background: rgba(0, 0, 0, 0.48);
	color: #ffffff;
	cursor: pointer;
	text-decoration: none;
	opacity: 0;
	transition:
		opacity 180ms ease,
		background 160ms ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ii-recent-card-menu {
	position: absolute;
	top: 7px;
	right: 7px;
}

.ii-recent-card-actions .ii-recent-card-menu {
	position: static;
	top: auto;
	right: auto;
}

.ii-recent-card-open:hover,
.ii-recent-card-menu:hover {
	background: rgba(0, 0, 0, 0.68);
	color: #ffffff;
	text-decoration: none;
}

.ii-recent-card-open:focus-visible,
.ii-recent-card-menu:focus-visible {
	outline: 2px solid var(--ii-accent);
	outline-offset: 2px;
}

.ii-recent-card:hover .ii-recent-card-open,
.ii-recent-card:hover .ii-recent-card-menu,
.ii-recent-card-open:focus-visible,
.ii-recent-card-menu:focus-visible,
.ii-recent-card .ii-recent-card-menu.is-popper-open {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ii-recent-card,
	.ii-recent-card-open,
	.ii-recent-card-menu,
	.ii-recent-card--workspace .ii-recent-card-meta {
		transition: none;
	}
}

/* No hover to reveal it, and unlike the menu button this is the only place the
   workspace name appears, so it must not stay hidden. Width alone would miss a
   wide tablet, hence the pointer query rather than the 900px block below. */
@media (hover: none) and (pointer: coarse) {
	.ii-recent-card--workspace .ii-recent-card-meta {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 900px) {
	.ii-tool-row,
	.ii-tool-row:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ii-space-8);
	}

	.ii-tool-row:nth-child(even) .ii-tool-row-media {
		order: 0;
	}

	.ii-recent-grid--workspaces,
	.ii-recent-grid--generations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ii-recent-card-open,
	.ii-recent-card-menu,
	.ii-recent-card--workspace .ii-recent-card-meta {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.ii-home-section-head .ii-section-title {
		font-size: var(--ii-fs-2xl);
	}
}