/* KDramas Maza Links — link rows (episode-list / episode-row / ep-no / button-123).
   Same HTML as all existing posts; made readable and thumb-friendly on phones. */

.episode-list {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.episode-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: var(--kdm-card, #171a21);
	border: 1px solid var(--kdm-line, #2a2f3a);
	border-radius: 14px;
	overflow: visible;
}

.ep-no {
	flex: 0 0 100%;
	color: var(--kdm-label, #22c55e);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	font-family: inherit;
	word-break: break-word;
	padding: 0 2px 2px;
}

/* Each link fills its share of the row, so buttons are big enough to tap. */
.episode-row > a {
	flex: 1 1 calc(33.333% - 8px);
	min-width: 0;
	text-decoration: none;
	display: flex;
}

.button-123 {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--kdm-accent, #2f7de1), #1a56b3);
	color: #fff;
	font: 700 14px/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.episode-row > a:hover .button-123,
.button-123:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.button-123:active { transform: translateY(1px); }
.episode-row > a:focus-visible { outline: 3px solid #7cb7ff; outline-offset: 2px; border-radius: 10px; }

/* Wider screens: label on the left, buttons beside it. */
@media (min-width: 720px) {
	.episode-row { flex-wrap: nowrap; padding: 10px 12px; }
	.ep-no { flex: 0 0 180px; padding: 0; }
	.episode-row > a { flex: 1 1 0; max-width: 170px; }
}

/* Phones: three buttons per line (two on very small screens). */
@media (max-width: 480px) {
	.episode-row { padding: 10px; gap: 6px; }
	.episode-row > a { flex: 1 1 calc(33.333% - 6px); }
	.button-123 { min-height: 46px; padding: 8px 6px; font-size: 13.5px; }
}
@media (max-width: 340px) {
	.episode-row > a { flex: 1 1 calc(50% - 6px); }
}

/* Old posts may use this button too. */
.button-78 {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 14px 26px; border: 0; border-radius: 80px;
	background: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
	color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none;
}