/**
 * FAP AniList Integration — Zone 2 Frontend Styles (Structural)
 * Visual polish is handled in a separate design pass.
 *
 * @package jk-anilist
 */

/* ──────────────────────────────────────────────
   ZONE 2 WRAPPER
────────────────────────────────────────────── */

.jk-anilist-zone2 {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color, #e0e0e0);
}

/* ──────────────────────────────────────────────
   TAB BAR
────────────────────────────────────────────── */

/* Hide tab bar when only one entry */
.jk-anilist--single .jk-anilist__tabs {
	display: none;
}

/* Tab bar layout only — visual styling (colors, borders, hover) is in fap-style.css */
.jk-anilist__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

/* ──────────────────────────────────────────────
   TAB PANELS
────────────────────────────────────────────── */

.jk-anilist__panel[hidden] {
	display: none;
}

/* ──────────────────────────────────────────────
   HEADER: COVER + META
────────────────────────────────────────────── */

.jk-anilist__header {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.jk-anilist__cover {
	flex-shrink: 0;
}

.jk-anilist__cover img {
	display: block;
	width: 160px;
	border-radius: 4px;
	object-fit: cover;
}

.jk-anilist__meta {
	flex: 1;
	min-width: 0;
}

.jk-anilist__title {
	margin: 0 0 0.5rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Status badge */
.jk-anilist__status-badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 3px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.75rem;
	background: var(--text-secondary, #888);
	color: #fff;
}

.jk-anilist__status--finished  { background: #27ae60; }
.jk-anilist__status--releasing { background: var(--brand-1, #e74c3c); }
.jk-anilist__status--not_yet_released { background: #f39c12; }
.jk-anilist__status--cancelled { background: #7f8c8d; }

/* Details list */
.jk-anilist__details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}

.jk-anilist__details dt {
	font-weight: 600;
	color: var(--text-secondary, #666);
}

.jk-anilist__details dd {
	margin: 0;
}

/* Genre / Tag pills */
.jk-anilist__genres,
.jk-anilist__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.jk-anilist__pill {
	display: inline-block;
	padding: 0.2em 0.65em;
	border-radius: 2px;
	font-size: 0.78rem;
	background: var(--brand-1, #e74c3c);
	color: #fff;
	font-weight: 500;
}

.jk-anilist__pill--tag {
	background: var(--surface-2, #444);
	color: var(--text-primary, #fff);
}

/* ──────────────────────────────────────────────
   BANNER
────────────────────────────────────────────── */

.jk-anilist__banner {
	margin-bottom: 1.5rem;
}

.jk-anilist__banner img {
	display: block;
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	border-radius: 4px;
}

/* ──────────────────────────────────────────────
   CHARACTER CARDS
────────────────────────────────────────────── */

.jk-anilist__char-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	padding-top: 0.25rem;
}

/* Each card: character on left + VA column on right */
.jk-anilist__char-card {
	display: flex;
	gap: 0.5rem;
	font-size: 0.78rem;
	line-height: 1.3;
}

/* Character figure (image + role badge + name) */
.jk-anilist__char-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	width: 80px;
	flex-shrink: 0;
}

.jk-anilist__char-figure img {
	display: block;
	width: 80px;
	height: 113px;
	object-fit: cover;
	border-radius: 3px;
}

.jk-anilist__char-role {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.1em 0.4em;
	border-radius: 2px;
	line-height: 1.4;
}

.jk-anilist__char-role--main {
	background: var(--brand-1, #e74c3c);
	color: #fff;
}

.jk-anilist__char-role--supporting {
	background: var(--text-secondary, #888);
	color: #fff;
}

.jk-anilist__char-label {
	text-align: center;
	font-weight: 600;
}

.jk-anilist__char-label a,
.jk-anilist__char-va-name {
	color: inherit;
	text-decoration: none;
}

.jk-anilist__char-label a:hover,
.jk-anilist__char-va-name:hover {
	text-decoration: underline;
}

/* VA column — stacks JP and EN vertically */
.jk-anilist__char-vas {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: flex-start;
	flex: 1;
	min-width: 0;
}

.jk-anilist__char-va {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	text-align: center;
}

.jk-anilist__char-va img {
	display: block;
	width: 60px;
	height: 85px;
	object-fit: cover;
	border-radius: 3px;
}

.jk-anilist__char-va-name {
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.3;
}

.jk-anilist__char-va-lang {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-secondary, #888);
}

/* ──────────────────────────────────────────────
   STAFF LIST
────────────────────────────────────────────── */

.jk-anilist__staff-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}

.jk-anilist__staff-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
}

.jk-anilist__staff-item img {
	width: 48px;
	height: 68px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}

.jk-anilist__staff-item > div {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.jk-anilist__staff-role {
	font-size: 0.78rem;
	color: var(--text-secondary, #888);
}

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */

@media (max-width: 600px) {
	.jk-anilist__header {
		flex-direction: column;
	}

	.jk-anilist__cover img {
		width: 100%;
		max-width: 180px;
	}

	.jk-anilist__char-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* ──────────────────────────────────────────────
   INNER TABS (Info / Characters / Staff)
────────────────────────────────────────────── */

.jk-anilist__inner-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 2px solid var(--border-color, #e0e0e0);
	padding-bottom: 0;
}

.jk-anilist__inner-tab {
	padding: 0.35rem 1rem;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--text-secondary, #666);
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.jk-anilist__inner-tab[aria-selected="true"] {
	color: var(--brand-1, #e74c3c);
	border-bottom-color: var(--brand-1, #e74c3c);
}

.jk-anilist__inner-tab:focus-visible {
	outline: 2px solid var(--brand-1, #e74c3c);
	outline-offset: 2px;
}

.jk-anilist__inner-panel[hidden] {
	display: none;
}

/* ──────────────────────────────────────────────
   DARK MODE (structural — keeps layout intact)
────────────────────────────────────────────── */

html.dark-mode .jk-anilist-zone2 {
	border-top-color: var(--border-color-dark, #333);
}

html.dark-mode .jk-anilist__tabs {
	border-bottom-color: var(--border-color-dark, #333);
}


html.dark-mode .jk-anilist__details dt {
	color: var(--text-secondary-dark, #aaa);
}

html.dark-mode .jk-anilist__characters h3,
html.dark-mode .jk-anilist__staff h3 {
	border-bottom-color: var(--border-color-dark, #333);
}

html.dark-mode .jk-anilist__staff-role {
	color: var(--text-secondary-dark, #aaa);
}

html.dark-mode .jk-anilist__pill--tag {
	background: #555;
}

html.dark-mode .jk-anilist__inner-tabs {
	border-bottom-color: var(--border-color-dark, #333);
}

html.dark-mode .jk-anilist__inner-tab {
	color: var(--text-secondary-dark, #aaa);
}

html.dark-mode .jk-anilist__inner-tab[aria-selected="true"] {
	color: var(--brand-1, #e74c3c);
	border-bottom-color: var(--brand-1, #e74c3c);
}

html.dark-mode .jk-anilist__char-va-lang {
	color: var(--text-secondary-dark, #aaa);
}