/**
 * Dashboard/Settings
 */
.dashboard {
	padding-block: .5rem;
	--gutter: 2em;
	&:has(> aside.cta-sidebar) {
		max-inline-size: 100rem;
		:where(.pwp-tiles) {
			max-inline-size: unset;
		}
	}
}
.dashboard-title {
	border-bottom: 1px solid var(--color-mid-glare);
	padding-bottom: 10px;
	margin-bottom: 1rem;
}
.dashboard-description + * {
	margin-top: 1.5rem;
}

// Tiles, both on the Dashboard and Settings sidebar
:where(.pwp-tiles) {
	max-inline-size: 68rem;
	--grid-min-width: 18rem;
	--gap-width: 2rem 1.5rem;
	padding-block-end: 2rem;

	&.cta-sidebar {
		margin-inline: 0;
		max-inline-size: unset;
		align-self: flex-start;
	}

	:where(.tile) {
		color: var(--color-dark);
		background: var(--color-light);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1);
		border-radius: .5rem;
		font-size: .875rem;
		position: relative;
		overflow: hidden;

		img {
			width: 100%;
			aspect-ratio: 1.77/1;
			object-fit: cover;
		}
		&.disabled img {
			filter: grayscale(1);
		}

		.banner {
			z-index: 1; // Fix issue due to filter
			place-self: center;
			font-size: .75rem;
			text-align: center;
			color: var(--color-light);
			font-weight: bold;
			&.coming-soon {
				border-radius: 3rem;
				background: var(--color-secondary);
				color: var(--color-light);
				padding: .5rem .75rem;
				text-transform: uppercase;
			}
			&.upgrade a {
				margin-top: 0;
			}
		}

		:where(.tile__content) {
			display: flex;
			flex-direction: column;
			padding-block: 1rem 2rem;
			padding-inline: 1rem;
			> * {
				// Remove inherited, we'll use flow
				margin: 0;
			}
		}

		&:not(.has-button) .tile__content {
			padding-inline-end: 2.5rem;
			padding-block-end: 1rem;
		}

		&.has-button .tile__content {
			align-items: center;
			text-align: center;
		}

		.tile__title {
			color: inherit;
			font-size: .875rem;
			font-weight: bold;
			+ * {
				--flow-space: .25rem;
			}

			a {
				text-decoration: none;

				// Expand link to whole tile
				&::before {
					content: '';
					position: absolute;
					inset: 0;
				}
				// Little arrow effect
				&::after {
					content: '';
					position: absolute;
					bottom: 2.5rem;
					right: .75rem;
					width: .6rem;
					height: .6rem;
					border-top: .15rem solid var(--color-text);
					border-right: .15rem solid var(--color-text);
					transform: rotate(45deg) translateX(-.5rem) translateY(50%);
					transition: right .2s;
				}
				&:where(:hover,:focus-within)::after {
					right: .25rem;
				}
			}
		}

		&.has-button .tile__title {
			color: var(--color-dark);
			font-size: 1.25rem;
		}

		&:where(.disabled,[inert]) .tile__title {
			color: var(--color-mid-glare);
		}

		.btn {
			--flow-space: 1.5rem;
		}
	}
}