/*
Theme Name: My Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, empty WordPress starter theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================
   BASE RESET & BOX SIZING
   ============================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
	--color-primary:    #1a1a2e;
	--color-secondary:  #16213e;
	--color-accent:     #0f3460;
	--color-highlight:  #e94560;
	--color-text:       #333333;
	--color-text-light: #666666;
	--color-bg:         #ffffff;
	--color-bg-alt:     #f5f5f5;
	--color-border:     #e0e0e0;

	--font-heading: Georgia, "Times New Roman", serif;
	--font-body:    "Helvetica Neue", Arial, sans-serif;
	--font-mono:    "Courier New", Courier, monospace;

	--font-size-base: 1rem;       /* 16px */
	--font-size-sm:   0.875rem;   /* 14px */
	--font-size-lg:   1.125rem;   /* 18px */
	--font-size-xl:   1.5rem;     /* 24px */
	--font-size-2xl:  2rem;       /* 32px */
	--font-size-3xl:  3rem;       /* 48px */

	--line-height-base:    1.6;
	--line-height-heading: 1.2;

	--spacing-xs:  0.25rem;
	--spacing-sm:  0.5rem;
	--spacing-md:  1rem;
	--spacing-lg:  2rem;
	--spacing-xl:  4rem;
	--spacing-2xl: 8rem;

	--container-width: 1200px;
	--container-padding: 1.5rem;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
	--shadow-lg: 0 8px 30px rgba(0,0,0,0.2);

	--transition: 0.3s ease;
}

/* =============================================
   BASE TYPOGRAPHY
   ============================================= */
html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: var(--line-height-heading);
	font-weight: 700;
	margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p { margin-bottom: var(--spacing-md); }

a {
	color: var(--color-highlight);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--color-accent); }

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { padding-left: var(--spacing-lg); }

blockquote {
	border-left: 4px solid var(--color-highlight);
	padding-left: var(--spacing-md);
	margin: var(--spacing-lg) 0;
	font-style: italic;
	color: var(--color-text-light);
}

code {
	font-family: var(--font-mono);
	background: var(--color-bg-alt);
	padding: 0.1em 0.4em;
	border-radius: var(--radius-sm);
	font-size: 0.9em;
}

pre {
	background: var(--color-bg-alt);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	overflow-x: auto;
}

hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--spacing-lg) 0;
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
	padding: var(--spacing-xl) 0;
}

/* =============================================
   HEADER
   ============================================= */
.site-header {
	background-color: var(--color-primary);
	color: #fff;
	padding: var(--spacing-md) 0;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-md);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.site-branding .site-title {
	font-size: var(--font-size-xl);
	margin: 0;
}

.site-branding .site-title a {
	color: #fff;
	text-decoration: none;
}

.site-branding .site-description {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.65);
	margin: 0;
}

/* =============================================
   NAVIGATION
   ============================================= */
.main-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.main-navigation a {
	color: rgba(255,255,255,0.85);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color var(--transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--color-highlight);
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
	background-color: var(--color-secondary);
	color: rgba(255,255,255,0.7);
	padding: var(--spacing-lg) 0;
	text-align: center;
	font-size: var(--font-size-sm);
}

.site-footer a {
	color: rgba(255,255,255,0.85);
}

/* =============================================
   POSTS & CONTENT
   ============================================= */
.entry-header { margin-bottom: var(--spacing-lg); }
.entry-title  { margin-bottom: var(--spacing-sm); }
.entry-meta   {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}
.entry-content { margin-bottom: var(--spacing-lg); }
.entry-footer  {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

/* Post list */
.posts-list { list-style: none; padding: 0; }
.posts-list li { margin-bottom: var(--spacing-xl); }

/* =============================================
   SIDEBAR & WIDGETS
   ============================================= */
.widget-area { display: flex; flex-direction: column; gap: var(--spacing-lg); }

.widget-title {
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--color-highlight);
}

/* =============================================
   BUTTONS
   ============================================= */
.btn,
button,
input[type="submit"],
input[type="button"] {
	display: inline-block;
	padding: 0.6em 1.4em;
	background: var(--color-highlight);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition), transform 0.1s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--color-accent);
	color: #fff;
	transform: translateY(-1px);
}

/* =============================================
   FORMS
   ============================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 0.6em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background: var(--color-bg);
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-highlight);
	box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

/* =============================================
   COMMENTS
   ============================================= */
.comments-area { margin-top: var(--spacing-xl); }
.comment-list  { list-style: none; padding: 0; }

.comment {
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
}

/* =============================================
   PAGINATION
   ============================================= */
.pagination {
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
	margin-top: var(--spacing-xl);
}

.page-numbers {
	padding: 0.4em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	transition: all var(--transition);
}

.page-numbers:hover,
.page-numbers.current {
	background: var(--color-highlight);
	border-color: var(--color-highlight);
	color: #fff;
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
.skip-link {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.skip-link:focus {
	top: 0;
	left: 0;
	z-index: 9999;
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--color-highlight);
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--color-highlight);
	outline-offset: 3px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
	h1 { font-size: var(--font-size-2xl); }
	h2 { font-size: var(--font-size-xl); }

	.site-header .container {
		flex-direction: column;
		align-items: flex-start;
	}

	.main-navigation ul { gap: var(--spacing-sm); }
}

/* =============================================
   CUSTOM POST TYPES
   ============================================= */

/* ── Portfolio grid ── */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

.portfolio-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}

.portfolio-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.portfolio-card__thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.portfolio-card__body {
	padding: var(--spacing-md);
}

.portfolio-card__title { font-size: var(--font-size-lg); margin-bottom: var(--spacing-xs); }
.portfolio-card__cats  { font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--spacing-sm); }

/* ── Taxonomy filter ── */
.taxonomy-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

.taxonomy-filter .filter-link {
	padding: 0.3em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	transition: all var(--transition);
}

.taxonomy-filter .filter-link:hover,
.taxonomy-filter .filter-link.is-active {
	background: var(--color-highlight);
	border-color: var(--color-highlight);
	color: #fff;
}

/* ── Portfolio single ── */
.portfolio-categories { font-size: var(--font-size-sm); color: var(--color-text-light); }
.portfolio-tags        { font-size: var(--font-size-sm); }

/* ── Team member ── */
.team-member__avatar img {
	border-radius: 50%;
	width: 120px;
	height: 120px;
	object-fit: cover;
	margin-bottom: var(--spacing-md);
}

.team-member__role  { font-size: var(--font-size-lg); color: var(--color-text-light); margin-top: calc( var(--spacing-xs) * -1 ); }

.team-member__social {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.team-member__social a {
	font-size: var(--font-size-sm);
	font-weight: 600;
}

/* ── FAQ accordion ── */
.faq-accordion { margin-top: var(--spacing-lg); }

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
	overflow: hidden;
}

.faq-item__question {
	padding: var(--spacing-md);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--color-bg-alt);
	transition: background var(--transition);
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__question::after {
	content: '+';
	font-size: 1.4em;
	line-height: 1;
	color: var(--color-highlight);
	transition: transform var(--transition);
}

.faq-item[open] > .faq-item__question { background: var(--color-bg); }
.faq-item[open] > .faq-item__question::after { transform: rotate(45deg); }

.faq-item__answer { padding: var(--spacing-md); }

/* =============================================
   CPT TEMPLATES – News, Books, Films
   ============================================= */

/* ── Shared: Hero banner ──────────────────────── */
.cpt-hero {
	padding: var(--spacing-xl) 0 var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	position: relative;
	overflow: hidden;
}

.cpt-hero--news  { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }
.cpt-hero--books { background: linear-gradient(135deg, #1a1a2e 0%, #4a1942 100%); }
.cpt-hero--films { background: linear-gradient(135deg, #0d0d0d 0%, #1a0533 100%); }

.cpt-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.cpt-hero .container { position: relative; z-index: 1; }

.cpt-hero__eyebrow {
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
	margin-bottom: var(--spacing-sm);
}

.cpt-hero__title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 900;
	color: #fff;
	margin: 0 0 var(--spacing-sm);
	line-height: 1.05;
}

.cpt-hero__desc {
	color: rgba(255,255,255,.65);
	font-size: var(--font-size-lg);
	margin: 0;
	max-width: 560px;
}

/* ── Shared: taxonomy filter pills ───────────── */
.cpt-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: var(--spacing-lg) 0;
}

.cpt-filter__link {
	padding: .35em 1em;
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
	transition: all var(--transition);
	white-space: nowrap;
}

.cpt-filter__link:hover,
.cpt-filter__link.is-active {
	background: var(--color-highlight);
	border-color: var(--color-highlight);
	color: #fff;
}

/* ── Shared: base grids ───────────────────────── */
.cpt-grid {
	display: grid;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
}

.cpt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cpt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cpt-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
	.cpt-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.cpt-grid--4,
	.cpt-grid--3,
	.cpt-grid--2 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.cpt-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shared: badges ───────────────────────────── */
.badge {
	display: inline-block;
	padding: .2em .7em;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.badge--news  { background: #dbeafe; color: #1d4ed8; }
.badge--book  { background: #fce7f3; color: #9d174d; }
.badge--film  { background: #ede9fe; color: #6d28d9; }

/* ══════════════════════════════════════════════
   NEWS — 4 column cards
   ══════════════════════════════════════════════ */
.news-card {
	background: #fff;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition), transform var(--transition);
}
.news-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.news-card__thumb-link { position: relative; display: block; overflow: hidden; }

.news-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.news-card:hover .news-card__thumb { transform: scale(1.04); }

.news-card__thumb--placeholder {
	aspect-ratio: 16 / 10;
	background: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--color-border);
}

.news-card__cat {
	position: absolute;
	top: .6rem;
	left: .6rem;
	background: var(--color-highlight);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .2em .65em;
	border-radius: 3px;
}

.news-card__body {
	padding: var(--spacing-md);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.news-card__date {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-bottom: .4rem;
}

.news-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 .5rem;
}
.news-card__title a { color: var(--color-text); }
.news-card__title a:hover { color: var(--color-highlight); }

.news-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	line-height: 1.55;
	flex: 1;
	margin-bottom: .75rem;
}

.news-card__more {
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--color-highlight);
	margin-top: auto;
}

/* ══════════════════════════════════════════════
   BOOKS — 3 column cards
   ══════════════════════════════════════════════ */
.book-card {
	display: flex;
	flex-direction: column;
	transition: transform var(--transition);
}
.book-card:hover { transform: translateY(-6px); }

.book-card__cover-link {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.book-card__cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
	transition: filter .35s ease;
}
.book-card:hover .book-card__cover { filter: brightness(.75); }

.book-card__cover--placeholder {
	aspect-ratio: 2 / 3;
	background: linear-gradient(135deg, #f0f0f5 0%, #d9d9e8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: #aaa;
}

.book-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .3s ease;
}
.book-card:hover .book-card__overlay { opacity: 1; }

.book-card__read-btn {
	background: rgba(255,255,255,.92);
	color: var(--color-primary);
	font-size: var(--font-size-sm);
	font-weight: 700;
	padding: .5em 1.2em;
	border-radius: 999px;
}

.book-card__body { padding: var(--spacing-md) 0 0; }

.book-card__genre {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-highlight);
}

.book-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: .3rem 0 .25rem;
	line-height: 1.3;
}
.book-card__title a { color: var(--color-text); }
.book-card__title a:hover { color: var(--color-highlight); }

.book-card__author {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	font-style: italic;
	margin: 0 0 .5rem;
}

.book-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	line-height: 1.55;
}

/* ══════════════════════════════════════════════
   FILMS — 2 column cards
   ══════════════════════════════════════════════ */
.film-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #0d0d12;
	border: 1px solid rgba(255,255,255,.06);
	transition: box-shadow var(--transition), transform var(--transition);
}
.film-card:hover {
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
	transform: translateY(-5px);
}

.film-card__poster-link {
	position: relative;
	display: block;
	overflow: hidden;
}

.film-card__poster {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.film-card:hover .film-card__poster { transform: scale(1.04); }

.film-card__poster--placeholder {
	aspect-ratio: 2 / 3;
	background: #1a1a2e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	color: rgba(255,255,255,.15);
}

.film-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
	opacity: 0;
	transition: opacity .35s ease;
	display: flex;
	align-items: flex-end;
	padding: 1.5rem;
}
.film-card:hover .film-card__overlay { opacity: 1; }

.film-card__overlay-inner {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.film-info-chip {
	background: rgba(255,255,255,.15);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: .25em .7em;
	border-radius: 4px;
}
.film-info-chip--rating { background: rgba(233,69,96,.8); }

.film-card__play {
	display: block;
	width: 100%;
	margin-top: .5rem;
	color: #fff;
	font-weight: 700;
	font-size: var(--font-size-sm);
	letter-spacing: .04em;
}

.film-card__genres {
	position: absolute;
	top: .75rem;
	left: .75rem;
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
}

.film-card__body {
	padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
	background: #111118;
}

.film-card__title {
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0 0 .5rem;
	line-height: 1.2;
}
.film-card__title a { color: #f0f0f5; }
.film-card__title a:hover { color: var(--color-highlight); }

.film-card__excerpt {
	font-size: var(--font-size-sm);
	color: rgba(240,240,245,.6);
	line-height: 1.6;
	margin-bottom: .75rem;
}

.film-card__more {
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--color-highlight);
}

/* ══════════════════════════════════════════════
   SINGLE CPT – shared layout
   ══════════════════════════════════════════════ */
.single-cpt-wrap {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-xl);
}

.single-cpt__breadcrumb {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-lg);
	flex-wrap: wrap;
}
.single-cpt__breadcrumb a { color: var(--color-text-light); }
.single-cpt__breadcrumb a:hover { color: var(--color-highlight); }

.single-cpt__meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: var(--spacing-md);
}

.single-cpt__date,
.single-cpt__author {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

.single-cpt__title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.1;
	margin-bottom: var(--spacing-md);
}

.single-cpt__content { max-width: 72ch; }

.single-cpt__hero-image {
	margin: var(--spacing-lg) 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.single-cpt__hero-image img { width: 100%; }

/* Navigation */
.single-cpt__nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}
.single-cpt__nav .nav-label {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.single-cpt__nav .nav-title {
	font-weight: 700;
	color: var(--color-text);
}

.back-to-archive {
	display: inline-block;
	margin-top: var(--spacing-lg);
	font-weight: 600;
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}
.back-to-archive:hover { color: var(--color-highlight); }

/* ── Single Book layout ───────────────────────── */
.single-book__layout,
.single-film__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--spacing-xl);
	align-items: start;
}
@media (max-width: 768px) {
	.single-book__layout,
	.single-film__layout { grid-template-columns: 1fr; }
}

.single-book__cover,
.single-film__poster {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	position: sticky;
	top: 80px;
}
.single-book__cover img,
.single-film__poster img { width: 100%; display: block; }

.single-book__details,
.single-film__details {
	margin-top: var(--spacing-md);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .4rem .75rem;
	font-size: var(--font-size-sm);
}
.single-book__details dt,
.single-film__details dt {
	font-weight: 700;
	color: var(--color-text-light);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .06em;
	align-self: center;
}
.single-book__details dd,
.single-film__details dd {
	margin: 0;
	color: var(--color-text);
	align-self: center;
}

.single-book__genres,
.single-film__genres {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: var(--spacing-md);
}

.film-rating-star { color: #f59e0b; }