/**
 * Documentary Page Styles
 *
 * Styles for the Documentary page template.
 * Matches wireframe: sovereign-debt-hub-documentary-wireframe.html
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.1.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.documentary__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--md);
}

/* ==========================================================================
   Header Section (Breadcrumb + Badges)
   ========================================================================== */

.documentary__header {
	padding-top: var(--wp--preset--spacing--lg);
}

.documentary__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray-600);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}

.documentary__breadcrumb a {
	color: var(--wp--preset--color--gray-600);
	text-decoration: none;
}

.documentary__breadcrumb a:hover {
	color: var(--wp--preset--color--gray-900);
}

.documentary__breadcrumb-sep {
	margin: 0 var(--wp--preset--spacing--2xs);
}

.documentary__breadcrumb-current {
	color: var(--wp--preset--color--gray-900);
}

.documentary__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--sm);
}

.documentary__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.documentary__badge--primary {
	background-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
}

.documentary__badge-text {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gray-600);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.documentary__hero {
	padding: var(--wp--preset--spacing--xl) 0;
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
}

.documentary__hero-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--xl);
}

@media (min-width: 1024px) {
	.documentary__hero-layout {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}
}

/* Hero Content (Left Column) */
.documentary__hero-content {
	display: flex;
	flex-direction: column;
}

.documentary__title {
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0;
}

@media (min-width: 768px) {
	.documentary__title {
		font-size: var(--wp--preset--font-size--4xl);
	}
}

.documentary__summary {
	margin-top: var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.7;
}

.documentary__topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	margin-top: var(--wp--preset--spacing--md);
}

.documentary__topic {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border: 2px solid var(--wp--preset--color--gray-900);
	background-color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.documentary__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--lg);
}

.documentary__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	border: 2px solid var(--wp--preset--color--gray-900);
	background-color: transparent;
	color: var(--wp--preset--color--gray-900);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.documentary__cta-btn:hover {
	background-color: var(--wp--preset--color--gray-100);
}

.documentary__cta-btn--primary {
	background-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
}

.documentary__cta-btn--primary:hover {
	background-color: var(--wp--preset--color--gray-700);
}

/* Hero Media (Right Column) */
.documentary__hero-media {
	display: flex;
	flex-direction: column;
}

.documentary__video-frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	border: 2px solid var(--wp--preset--color--gray-900);
	border-radius: 10px;
	background-color: #000;
	overflow: hidden;
}

/* Target WordPress oembed iframe wrapper */
.documentary__video-frame iframe,
.documentary__video-frame .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.documentary__video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.documentary__video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--gray-200);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 8px,
		rgba(0, 0, 0, 0.05) 8px,
		rgba(0, 0, 0, 0.05) 9px
	);
}

.documentary__play-badge {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--gray-900);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	color: var(--wp--preset--color--gray-900);
}

.documentary__video-placeholder-text {
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
}

/* Info Boxes below video */
.documentary__info-boxes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.documentary__info-boxes {
		grid-template-columns: repeat(3, 1fr);
	}
}

.documentary__info-box {
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.documentary__info-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gray-700);
}

.documentary__info-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.6;
}

/* ==========================================================================
   Body Section
   ========================================================================== */

.documentary__body {
	padding: var(--wp--preset--spacing--xl) 0;
}

.documentary__body-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--xl);
}

@media (min-width: 1024px) {
	.documentary__body-layout {
		grid-template-columns: 2fr 1fr;
	}
}

/* Main Content */
.documentary__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}

.documentary__section {
	padding: var(--wp--preset--spacing--lg);
	border: 2px solid var(--wp--preset--color--gray-900);
}

.documentary__section--description {
	/* Ensure description section has distinct style */
}

.documentary__section-title {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.documentary__section-content {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.7;
}

.documentary__section-content p {
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.documentary__section-content p:last-child {
	margin-bottom: 0;
}

.documentary__list {
	margin: 0;
	padding-left: var(--wp--preset--spacing--md);
	list-style-type: disc;
}

.documentary__list li {
	margin-bottom: var(--wp--preset--spacing--xs);
}

.documentary__list li:last-child {
	margin-bottom: 0;
}

/* Two Column Layout */
.documentary__two-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
}

@media (min-width: 768px) {
	.documentary__two-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

.documentary__two-columns .documentary__section-title {
	font-size: var(--wp--preset--font-size--lg);
}

/* Credits Section */
.documentary__section--credits .documentary__section-title {
	font-size: var(--wp--preset--font-size--lg);
}

.documentary__credits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.documentary__credits-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.documentary__credit-item {
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.documentary__credit-label {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gray-700);
}

.documentary__credit-value {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.documentary__sidebar {
	/* Sticky on larger screens */
}

@media (min-width: 1024px) {
	.documentary__sidebar {
		position: sticky;
		top: var(--wp--preset--spacing--lg);
	}
}

.documentary__sidebar-panel {
	padding: var(--wp--preset--spacing--lg);
	border: 2px solid var(--wp--preset--color--gray-900);
}

.documentary__sidebar-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.documentary__sidebar-desc {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.6;
}

/* Related Items */
.documentary__related-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

.documentary__related-item {
	display: block;
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--gray-300);
	text-decoration: none;
	transition: background-color 0.2s;
}

.documentary__related-item:hover {
	background-color: var(--wp--preset--color--gray-100);
}

.documentary__related-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.documentary__related-title {
	margin: var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--gray-900);
	line-height: 1.4;
}

.documentary__related-link {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray-600);
}

/* Feedback Section */
.documentary__feedback {
	margin-top: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.documentary__feedback-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gray-700);
}

.documentary__feedback-text {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.6;
}

.documentary__feedback-btn {
	display: block;
	width: 100%;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--wp--preset--color--gray-900);
	background-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s;
}

.documentary__feedback-btn:hover {
	background-color: var(--wp--preset--color--gray-700);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
	.documentary__hero {
		padding: var(--wp--preset--spacing--lg) 0;
	}

	.documentary__title {
		font-size: var(--wp--preset--font-size--2xl);
	}

	.documentary__section {
		padding: var(--wp--preset--spacing--md);
	}

	.documentary__sidebar-panel {
		padding: var(--wp--preset--spacing--md);
	}
}