/**
 * Driffle Tier List — image grid cards (tier-colored) + text table
 * Grid: 7×3 desktop / 4×2 mobile before "View more characters"
 */

.dtl-tier-list {
	--dtl-page: #0c0c0c;
	--dtl-surface: #141414;
	--dtl-surface-alt: #262626;
	--dtl-header: #141414;
	--dtl-text: #ffffff;
	--dtl-view-more-bg: #2c2c2c;

	--dtl-badge-w: 50px;
	--dtl-grid-pad: 16px;
	--dtl-card-gap: 10px;
	--dtl-card-radius: 10px;
	--dtl-letter-size: 44px;
	--dtl-tier-gap: 48px;

	--dtl-row-h: 69px;
	--dtl-cell-pad-x: 40px;
	--dtl-head-size: 18px;
	--dtl-body-size: 15px;

	color: var(--dtl-text);
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	margin: 24px 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.dtl-tier-list *,
.dtl-tier-list *::before,
.dtl-tier-list *::after {
	box-sizing: border-box;
}

.dtl-tier-list__section-title {
	margin: 0 0 32px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: var(--dtl-text);
}

.dtl-tier-list__tiers {
	display: flex;
	flex-direction: column;
	gap: var(--dtl-tier-gap);
}

/* ========== Tier row ========== */
.dtl-tier {
	display: flex;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
	background: transparent;
	min-height: 0;
}

.dtl-tier__badge {
	flex: 0 0 var(--dtl-badge-w);
	width: var(--dtl-badge-w);
	background: var(--dtl-tier-color, #888);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.dtl-tier__label {
	display: block;
	color: #fff;
	font-size: var(--dtl-letter-size);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	user-select: none;
}

/* ========== GRID ========== */
.dtl-tier-list--grid .dtl-tier {
	background: var(--dtl-surface);
}

.dtl-tier-list--grid .dtl-tier__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--dtl-grid-pad);
	background: var(--dtl-surface);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dtl-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--dtl-card-gap);
}

.dtl-card.is-hidden {
	display: none;
}

/* ---- Character card (matches Card_1 reference) ---- */
.dtl-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--dtl-card-radius);
	background: var(--dtl-tier-color, #888);
	aspect-ratio: 100 / 140;
}

.dtl-card__header {
	flex: 0 0 auto;
	background: var(--dtl-tier-color, #888);
	padding: 5px 6px 4px;
	min-height: 22px;
	display: flex;
	align-items: center;
}

.dtl-card__header--empty {
	min-height: 10px;
	padding: 0;
}

.dtl-card__title {
	display: block;
	width: 100%;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.dtl-card__media {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Soft tier-tinted radial ground behind portrait */
	background:
		radial-gradient(
			circle at 50% 42%,
			color-mix(in srgb, var(--dtl-tier-color) 18%, #ffffff) 0%,
			color-mix(in srgb, var(--dtl-tier-color) 35%, #f0e4e4) 55%,
			color-mix(in srgb, var(--dtl-tier-color) 55%, #e8d0d0) 100%
		);
}

@supports not (background: color-mix(in srgb, red 50%, white)) {
	.dtl-card__media {
		background: radial-gradient(circle at 50% 42%, #fff5f5 0%, #f0dede 100%);
	}
}

.dtl-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.dtl-card__placeholder {
	display: block;
	width: 60%;
	height: 70%;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.08);
}

.dtl-card__footer {
	flex: 0 0 auto;
	background: var(--dtl-tier-color, #888);
	padding: 8px 6px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dtl-card__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	word-break: break-word;
}

/* View more CTA */
.dtl-view-more {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--dtl-view-more-bg);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.dtl-view-more:hover,
.dtl-view-more:focus-visible {
	background: #3a3a3a;
	outline: none;
}

.dtl-view-more[hidden] {
	display: none !important;
}

/* ========== TABLE ========== */
.dtl-tier-list--table .dtl-tier__body {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

.dtl-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	margin: 0;
}

.dtl-table thead th {
	height: var(--dtl-row-h);
	padding: 0 var(--dtl-cell-pad-x);
	background: var(--dtl-header);
	color: var(--dtl-text);
	font-size: var(--dtl-head-size);
	font-weight: 600;
	line-height: 26px;
	text-align: left;
	vertical-align: middle;
	border: 0;
}

.dtl-table tbody td {
	height: var(--dtl-row-h);
	padding: 0 var(--dtl-cell-pad-x);
	color: var(--dtl-text);
	font-size: var(--dtl-body-size);
	font-weight: 400;
	line-height: 20px;
	vertical-align: middle;
	border: 0;
}

.dtl-table tbody tr.is-odd td {
	background: #1c1c1c;
}

.dtl-table tbody tr.is-even td {
	background: var(--dtl-surface-alt);
}

.dtl-table__col--name {
	width: 50%;
}

.dtl-table__col--title {
	width: 50%;
}

/* ========== MOBILE ≤767px ========== */
@media (max-width: 767px) {
	.dtl-tier-list {
		--dtl-badge-w: 100%;
		--dtl-m-badge-h: 28px;
		--dtl-card-gap: 8px;
		--dtl-grid-pad: 12px;
		--dtl-letter-size: 18px;
		--dtl-tier-gap: 24px;
		--dtl-m-row-h: 48px;
		--dtl-m-cell-pad: 12px;
		margin: 16px 0;
	}

	.dtl-tier-list__section-title {
		margin: 0 0 16px;
		font-size: 16px;
		line-height: 20px;
	}

	.dtl-tier {
		flex-direction: column;
	}

	.dtl-tier__badge {
		flex: 0 0 var(--dtl-m-badge-h);
		width: 100%;
		height: var(--dtl-m-badge-h);
		min-height: var(--dtl-m-badge-h);
	}

	.dtl-tier__label {
		font-size: var(--dtl-letter-size);
		line-height: 22px;
	}

	.dtl-tier-list--grid .dtl-tier__body {
		padding: var(--dtl-grid-pad);
		gap: 10px;
	}

	.dtl-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dtl-card {
		aspect-ratio: 74 / 110;
		border-radius: 8px;
	}

	.dtl-card__header {
		min-height: 18px;
		padding: 3px 4px;
	}

	.dtl-card__title {
		font-size: 8px;
	}

	.dtl-card__footer {
		min-height: 32px;
		padding: 6px 4px;
	}

	.dtl-card__name {
		font-size: 10px;
	}

	.dtl-view-more {
		padding: 12px;
		font-size: 13px;
		border-radius: 6px;
	}

	.dtl-tier-list--table .dtl-tier__body {
		margin: 0;
		padding: 0;
	}

	.dtl-table thead th,
	.dtl-table tbody td {
		height: var(--dtl-m-row-h);
		padding: 0 var(--dtl-m-cell-pad);
	}

	.dtl-table thead th {
		font-size: 14px;
		line-height: 18px;
	}

	.dtl-table tbody td {
		font-size: 13px;
		line-height: 15px;
	}
}

/* Mid widths: keep 7 cols but allow slightly tighter gap */
@media (min-width: 768px) and (max-width: 960px) {
	.dtl-cards {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 8px;
	}

	.dtl-card__name {
		font-size: 11px;
	}
}

.dtl-block-placeholder {
	padding: 16px;
	background: #1a1a1a;
	color: #ccc;
	border: 1px dashed #555;
}

.editor-styles-wrapper .dtl-tier-list,
.block-editor-block-list__block .dtl-tier-list {
	max-width: 100%;
}