/* ==========================================================
   KHANMAX CINEMATIC — v2 patch styles
   Loaded after the main theme stylesheet; safe to extend.
   Uses the theme's existing ink/bronze palette via CSS vars
   where available, with sane fallbacks.
   ========================================================== */

:root {
	--km-ink:    var(--ink, #0b0c0e);
	--km-bronze: var(--bronze, #b98a4e);
	--km-bone:   var(--bone, #f3efe6);
	--km-muted:  var(--muted, #9a958a);
}

/* ---- 1. Numbers/counts: hide anything already printed in markup
   that the theme doesn't have a clean toggle for. Add the class
   "km-hide-count" to any existing count element you can't remove
   from the loop directly, e.g. <span class="award-count km-hide-count">. 
   The award badge helper (khanmax_v2_award_badge) is the preferred
   long-term fix — this is a safety net for anything still hardcoded. */
.km-hide-count,
.film-count-total,
.screenplay-count-total,
.selection-count-number {
	display: none !important;
}

/* ---- 2. Laurel / award badge (replaces printed counts) ---- */
.km-laurel {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--km-bronze);
	opacity: 0.9;
}
.km-laurel-label { white-space: nowrap; }

/* ---- 3. Explicit credit line (e.g. Back Pedal) ---- */
.km-credit {
	display: block;
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--km-muted);
	margin-top: 0.35rem;
}
.km-credit-sep { color: var(--km-bronze); margin: 0 0.35em; }

/* ---- 4. Pending-stills placeholder (gallery / posters) ---- */
.km-pending-still {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(185,138,78,0.06) 0px,
			rgba(185,138,78,0.06) 2px,
			transparent 2px,
			transparent 14px
		),
		var(--km-ink);
	border: 1px dashed rgba(185,138,78,0.35);
	color: var(--km-muted);
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
}

/* ---- 5. Inquiry / pitch modal ---- */
.km-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(4, 4, 5, 0.88);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.km-modal-overlay.is-open { opacity: 1; pointer-events: all; }

.km-modal {
	width: 100%;
	max-width: 460px;
	background: var(--km-ink);
	border: 1px solid rgba(185,138,78,0.4);
	box-shadow: 0 30px 80px rgba(0,0,0,0.6);
	padding: 2.25rem 2rem 2rem;
	position: relative;
	transform: translateY(12px);
	transition: transform 0.3s ease;
}
.km-modal-overlay.is-open .km-modal { transform: translateY(0); }

.km-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	background: none;
	border: none;
	color: var(--km-bone);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s;
}
.km-modal-close:hover { opacity: 1; color: var(--km-bronze); }

.km-modal-title {
	font-family: var(--font-display, 'Fraunces', serif);
	font-size: 1.5rem;
	color: var(--km-bone);
	margin: 0 0 0.4rem;
}
.km-modal-sub {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.85rem;
	color: var(--km-muted);
	margin: 0 0 1.4rem;
	line-height: 1.5;
}

.km-form { display: flex; flex-direction: column; gap: 0.6rem; }
.km-form label {
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--km-muted);
	margin-top: 0.5rem;
}
.km-form input,
.km-form textarea {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(185,138,78,0.3);
	color: var(--km-bone);
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	padding: 0.6rem 0.7rem;
	resize: vertical;
}
.km-form input:focus,
.km-form textarea:focus {
	outline: none;
	border-color: var(--km-bronze);
}

.km-hp { position: absolute; left: -9999px; opacity: 0; }

.km-btn-filled {
	margin-top: 1rem;
	align-self: flex-start;
	background: var(--km-bronze);
	color: var(--km-ink);
	border: 1px solid var(--km-bronze);
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.7rem 1.6rem;
	cursor: pointer;
	transition: opacity 0.2s;
}
.km-btn-filled:hover { opacity: 0.85; }
.km-btn-filled:disabled { opacity: 0.5; cursor: default; }

.km-form-status {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.82rem;
	margin-top: 0.6rem;
	min-height: 1.2em;
}
.km-form-status.is-error { color: #d97757; }
.km-form-status.is-success { color: var(--km-bronze); }

@media (max-width: 480px) {
	.km-modal { padding: 1.75rem 1.4rem 1.5rem; }
}