/* ==========================================================================
   DESIGN TOKENS
   "Young critic" aesthetic: warm cream ground, friendly navy text, a
   bright coral primary accent, sky-blue secondary accent for links, and
   a sunny-yellow highlight for ratings/badges/featured tags.
   ========================================================================== */
:root {
	--color-bg:        #fff8ed;
	--color-surface:   #ffffff;
	--color-ink:       #1e2a4a;
	--color-ink-soft:  #57628a;
	--color-accent:    #ff6b4a;
	--color-accent-dark: #e0502f;
	--color-secondary:   #4a9dff;
	--color-secondary-dark: #2b7fe0;
	--color-highlight:   #ffd23f;
	--color-border:    #f1e3cc;

	--font-display: 'Baloo 2', 'Segoe UI', sans-serif;
	--font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;

	--radius: 6px;
	--max-width: 1180px;
	--transition: 200ms ease;
}

@media (prefers-color-scheme: dark) {
	/* Editorial sites read best on a consistent light ground; we opt to
	   keep a single committed look rather than a dark variant for v1. */
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.3;
	margin: 0 0 var(--space-2);
	font-weight: 700;
}
p { margin: 0 0 var(--space-2); }
.wrap {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.skip-link:focus {
	position: fixed; top: var(--space-1); inset-inline-start: var(--space-1);
	width: auto; height: auto; clip: auto;
	background: var(--color-ink); color: #fff;
	padding: var(--space-1) var(--space-2);
	z-index: 1000;
	border-radius: var(--radius);
}

.eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	margin-bottom: var(--space-1);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn--primary {
	background: var(--color-accent);
	color: #fff;
}
.btn--primary:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.btn--secondary {
	background: transparent;
	color: var(--color-secondary-dark);
	border-color: var(--color-secondary);
}
.btn--secondary:hover { background: var(--color-secondary); color: #fff; }
.btn--outline {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}
.btn--outline:hover { background: var(--color-accent); color: #fff; }
.btn--text {
	background: none;
	padding: 0.5em 0;
	color: var(--color-secondary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.btn--text:hover { color: var(--color-accent-dark); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 248, 237, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
}
.site-brand { text-decoration: none; }
.site-brand__name {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-ink);
}
.primary-nav__list {
	list-style: none;
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}
.primary-nav__list a {
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
}
.primary-nav__list a:hover { color: var(--color-accent-dark); }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-1);
}
.nav-toggle__bar {
	width: 24px;
	height: 2px;
	background: var(--color-ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	/* No bottom padding: the photo (cut at the hips) stands on the hero's
	   bottom edge. Clip on all sides so the decorative circles and the
	   flying book end at that edge too, instead of spilling out. */
	padding: var(--space-6) 0 0;
	overflow: clip;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-5);
	align-items: center;
}
.hero__title {
	font-size: clamp(2.4rem, 5vw, 4rem);
	margin-bottom: var(--space-2);
}
.hero__tagline {
	font-size: 1.3rem;
	font-family: var(--font-display);
	font-style: italic;
	color: var(--color-ink-soft);
	margin-bottom: var(--space-2);
}
.hero__intro {
	color: var(--color-ink-soft);
	max-width: 46ch;
	margin-bottom: var(--space-3);
}
.hero__content { padding-bottom: var(--space-5); }
.hero__actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
/* Soft yellow and blue circles behind the hero image (same motif as the
   login page). */
.hero__media { position: relative; isolation: isolate; align-self: end; }
.hero__media::before,
.hero__media::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.hero__media::before {
	width: 46%;
	aspect-ratio: 1;
	top: 20%; 
	inset-inline-start: -14%;
	background: rgba(255, 210, 63, 0.45);
}
.hero__media::after {
	width: 58%;
	aspect-ratio: 1;
	bottom: -12%;
	inset-inline-end: -18%;
	background: rgba(74, 157, 255, 0.2);
}
.hero__image {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center bottom;
}
.hero__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--color-border), var(--color-surface));
	border-radius: var(--radius);
	position: relative;
	z-index: 1;
}

/* Flying book on a half orbit: a "U" around the bottom third of the
   hero image, always in front of it. X sweeps side to side every 26s;
   Y runs at exactly twice that rate (13s) so the book is highest at the
   sides and lowest when passing under the middle. A small wander on an
   unrelated 11s period keeps each pass slightly different, and the
   start point is randomised per page load via --orbit-delay /
   --orbit-w-delay (set in section-hero.php). */
.hero__orbit,
.hero__orbit-x {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.hero__orbit { animation: hero-orbit-y 13s ease-in-out var(--orbit-delay, 0s) infinite alternate; }
.hero__orbit-x { animation: hero-orbit-x 26s ease-in-out var(--orbit-delay, 0s) infinite alternate; }
.hero__book {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(80px, 28%, 150px);
	height: auto;
	filter: drop-shadow(0 10px 8px rgba(30, 42, 74, 0.25));
	animation:
		hero-book-flap 1.6s ease-in-out infinite alternate,
		hero-book-wander 11s ease-in-out var(--orbit-w-delay, 0s) infinite alternate;
}
@keyframes hero-orbit-x {
	from { transform: translateX(-62%); }
	to   { transform: translateX(62%); }
}
/* Book centre from ~58% (sides) down to ~84% (middle) of the image height,
   so it stays above the hero's bottom edge. */
@keyframes hero-orbit-y {
	from { transform: translateY(8%) scale(0.9); }
	to   { transform: translateY(34%) scale(1.1); }
}
/* Flap and wander use the separate rotate/scale and translate properties
   so the two animations don't overwrite each other's transform. */
@keyframes hero-book-flap {
	from { rotate: -7deg; scale: 1 1; }
	to   { rotate: 5deg;  scale: 1 0.82; }
}
@keyframes hero-book-wander {
	0%   { translate: -50% -50%; }
	35%  { translate: -38% -64%; }
	70%  { translate: -62% -40%; }
	100% { translate: -45% -58%; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__orbit, .hero__orbit-x, .hero__book { animation: none; }
	.hero__book { top: 78%; left: 90%; translate: -50% -50%; rotate: -7deg; }
}

/* ==========================================================================
   SECTIONS (shared)
   ========================================================================== */
.section { padding: var(--space-6) 0; }
.section__header { text-align: center; max-width: 640px; margin: 0 auto var(--space-4); }
.section__title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.section__empty { text-align: center; color: var(--color-ink-soft); }
.section__footer { text-align: center; margin-top: var(--space-4); }
.section--books, .section--articles, .section--videos { background: var(--color-surface); }

/* ==========================================================================
   BOOK / EVENT / VIDEO SLIDERS
   Shows 4 cards per view on large screens, fewer as the viewport narrows.
   Shared chrome (track + arrows) for the Books, Events and Videos sliders.
   ========================================================================== */
.book-slider, .event-slider, .video-slider {
	position: relative;
	padding: 0 var(--space-5);
}
.book-slider__track, .event-slider__track, .video-slider__track {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--space-1);
	/* Hide scrollbar; navigation is via the arrow buttons. */
	scrollbar-width: none;
}
.book-slider__track::-webkit-scrollbar, .event-slider__track::-webkit-scrollbar, .video-slider__track::-webkit-scrollbar { display: none; }
.book-slider__arrow, .event-slider__arrow, .video-slider__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	cursor: pointer;
	font-size: 1.1rem;
	box-shadow: 0 6px 16px -8px rgba(30, 42, 74, 0.3);
	transition: background var(--transition), color var(--transition);
}
.book-slider__arrow:hover, .event-slider__arrow:hover, .video-slider__arrow:hover { background: var(--color-ink); color: #fff; }
.book-slider__arrow--prev, .event-slider__arrow--prev, .video-slider__arrow--prev { inset-inline-start: 0; }
.book-slider__arrow--next, .event-slider__arrow--next, .video-slider__arrow--next { inset-inline-end: 0; }
.book-slider__arrow.is-disabled, .event-slider__arrow.is-disabled, .video-slider__arrow.is-disabled { opacity: 0.35; cursor: default; }
.book-slider__arrow.is-disabled:hover, .event-slider__arrow.is-disabled:hover, .video-slider__arrow.is-disabled:hover { background: var(--color-surface); color: inherit; }
.book-card {
	flex: 0 0 calc(25% - (var(--space-4) * 3 / 4));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	position: relative;
}
.event-slider__track .event-card {
	flex: 0 0 calc(25% - (var(--space-4) * 3 / 4));
	scroll-snap-align: start;
}
.book-card__cover-link { position: relative; display: block; margin-bottom: var(--space-2); }
.book-card__cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 12px 24px -12px rgba(30, 42, 74, 0.35);
	transition: transform var(--transition);
}
.book-card__cover-link:hover .book-card__cover { transform: translateY(-4px); }
.book-card__cover--placeholder { background: var(--color-border); }
.badge {
	position: absolute;
	top: var(--space-1);
	inset-inline-start: var(--space-1);
	background: var(--color-highlight);
	color: var(--color-ink);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.3em 0.7em;
	border-radius: 999px;
	font-weight: 700;
}
.book-card__title { font-size: 1.15rem; margin-bottom: 0.4em; }
.book-card__title a { text-decoration: none; }
.book-card__title a:hover { color: var(--color-accent-dark); }
.book-card__excerpt { color: var(--color-ink-soft); font-size: 0.95rem; }
.book-card__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }

/* ==========================================================================
   EVENT GRID / CARD
   ========================================================================== */
.event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}
.event-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.event-card__media img { aspect-ratio: 16 / 10; object-fit: cover; }
.event-card__body { padding: var(--space-3); }
.event-card__date {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.4em;
}
.event-card__title { font-size: 1.2rem; margin-bottom: 0.3em; }
.event-card__title a { text-decoration: none; }
.event-card__location { color: var(--color-ink-soft); font-size: 0.9rem; }
.event-card__actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }
.archive-toggle { margin-bottom: var(--space-3); }
.archive-toggle a { text-decoration: underline; }

/* ==========================================================================
   ARTICLE GRID / CARD
   ========================================================================== */
.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}
.article-card {
	display: flex;
	flex-direction: column;
}
.article-card__media-link { display: block; margin-bottom: var(--space-2); }
.article-card__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius);
}
.article-card__media--placeholder { background: var(--color-border); }
.article-card__date {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.4em;
}
.article-card__title { font-size: 1.2rem; margin-bottom: 0.3em; }
.article-card__title a { text-decoration: none; }
.article-card__title a:hover { color: var(--color-accent-dark); }
.article-card__excerpt { color: var(--color-ink-soft); font-size: 0.95rem; margin-bottom: var(--space-1); }

/* ==========================================================================
   VIDEOS
   Portrait preview cards (reels-style) in the shared slider; the player
   opens in a <dialog>, landscape for YouTube, portrait for Shorts,
   Instagram and TikTok.
   ========================================================================== */
.video-card {
	flex: 0 0 calc(25% - (var(--space-4) * 3 / 4));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.video-card__preview {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	margin-bottom: var(--space-2);
	border-radius: 16px;
	overflow: hidden;
	background: var(--color-ink);
	box-shadow: 0 12px 24px -12px rgba(30, 42, 74, 0.45);
	isolation: isolate;
}
.video-card__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
/* YouTube's hqdefault is 4:3 with letterbox bars; zoom past them. */
.video-card__thumb--youtube { transform: scale(1.34); }
.video-card__thumb--placeholder {
	background:
		radial-gradient(circle at 25% 20%, rgba(255, 210, 63, 0.9) 0 18%, transparent 19%),
		radial-gradient(circle at 80% 85%, rgba(74, 157, 255, 0.55) 0 24%, transparent 25%),
		linear-gradient(160deg, var(--color-accent), var(--color-accent-dark));
}
.video-card__preview::after {
	/* Soft bottom shade so the provider label stays readable on any image. */
	content: '';
	position: absolute;
	inset: 55% 0 0;
	background: linear-gradient(transparent, rgba(30, 42, 74, 0.55));
	pointer-events: none;
}
.video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border: 3px solid #fff;
	border-radius: 50%;
	/* See-through fill; only the ring and the triangle stay solid. */
	background: rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 0 6px 18px -6px rgba(30, 42, 74, 0.5);
	transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.video-card__play::before {
	/* Triangle always points right (play), regardless of text direction. */
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -6px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 1px 2px rgba(30, 42, 74, 0.35));
	transition: border-color var(--transition);
}
.video-card__preview:hover .video-card__thumb,
.video-card__preview:focus-visible .video-card__thumb { transform: scale(1.05); }
.video-card__preview:hover .video-card__thumb--youtube,
.video-card__preview:focus-visible .video-card__thumb--youtube { transform: scale(1.4); }
.video-card__preview:hover .video-card__play,
.video-card__preview:focus-visible .video-card__play {
	transform: scale(1.1);
	background: var(--color-accent);
}
.video-card__preview:hover .video-card__play::before,
.video-card__preview:focus-visible .video-card__play::before { border-left-color: #fff; }
.video-card__preview:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 3px;
}
.video-card__provider {
	position: absolute;
	inset-block-end: var(--space-1);
	inset-inline-start: var(--space-1);
	z-index: 1;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-ink);
	font-size: 0.75rem;
	font-weight: 700;
}
.video-card__preview .badge {
	position: absolute;
	inset-block-start: var(--space-1);
	inset-inline-start: var(--space-1);
	z-index: 1;
}
.video-card__title { font-size: 1.1rem; margin-bottom: 0.2em; }
.video-card__book { color: var(--color-ink-soft); font-size: 0.9rem; margin: 0; }
.video-card__book a { color: var(--color-secondary-dark); }

.video-modal {
	width: min(960px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #000;
	overflow: visible;
}
.video-modal.is-vertical { width: min(400px, calc(100vw - 32px), calc((100vh - 32px) * 9 / 16)); }
.video-modal::backdrop { background: rgba(30, 42, 74, 0.82); }
.video-modal__frame {
	aspect-ratio: 16 / 9;
	border-radius: inherit;
	overflow: hidden;
}
.video-modal.is-vertical .video-modal__frame { aspect-ratio: 9 / 16; }
.video-modal__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-modal__close {
	position: absolute;
	top: -14px;
	inset-inline-end: -14px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: 2px solid var(--color-ink);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.video-modal__close:hover { background: var(--color-highlight); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-5);
}
.contact__list { list-style: none; padding: 0; margin: 0; }
.contact__list li { margin-bottom: var(--space-1); }
.contact__list a { text-decoration: underline; }
.wpcf7-form p { margin-bottom: var(--space-2); }
.wpcf7-form label { display: block; font-weight: 500; margin-bottom: 0.4em; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.8em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 1rem;
	background: var(--color-bg);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
	outline: 2px solid var(--color-secondary);
	outline-offset: 1px;
}
.wpcf7-form .form-row { margin-bottom: var(--space-2); }
.hp-field {
	/* Visually hidden without an off-canvas offset — a large negative
	   "left" caused the whole document to overflow horizontally on
	   RTL pages, since RTL scroll containers can reach negative x. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1.6em;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
	background: var(--color-accent);
	color: #fff;
	transition: background var(--transition), transform var(--transition);
}
.wpcf7-form input[type="submit"]:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.wpcf7-not-valid-tip { color: #b3261e; font-size: 0.85rem; margin-top: 0.3em; }
.wpcf7-response-output { border-radius: var(--radius); padding: var(--space-2); margin-top: var(--space-2); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--color-ink); color: #f4efe7; padding: var(--space-5) 0; margin-top: var(--space-5); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }
.site-footer__brand { font-family: var(--font-display); font-size: 1.3rem; }
.site-footer__tagline { color: #c9c0b4; font-size: 0.9rem; }
.site-footer__social { display: flex; gap: var(--space-3); }
.site-footer__social a { text-decoration: underline; font-size: 0.9rem; }
.site-footer__copy { color: #a89f92; font-size: 0.85rem; margin: 0; }
.site-footer__credit { color: #a89f92; font-size: 0.8rem; margin: 0; }
.site-footer__credit a { color: var(--color-highlight); font-weight: 700; text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }

/* ==========================================================================
   SINGLE BOOK / EVENT
   ========================================================================== */
.book-single__inner, .event-single__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--space-5);
	padding: var(--space-6) 0;
}
.book-single__meta, .event-single__meta { list-style: none; padding: 0; margin-bottom: var(--space-3); }
.book-single__meta li, .event-single__meta li { margin-bottom: 0.4em; }
.book-single__actions, .event-single__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.event-single__media img { border-radius: var(--radius); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.book-card, .event-slider__track .event-card, .video-card { flex-basis: calc(33.333% - (var(--space-4) * 2 / 3)); }
}

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	/* Photo goes below the text on narrow screens so it can still stand on
	   the hero's bottom edge. */
	.hero__content { padding-bottom: 0; }
	.hero__media { max-width: 320px; margin: var(--space-2) auto 0; }
	.contact__inner { grid-template-columns: 1fr; }
	.book-single__inner, .event-single__inner { grid-template-columns: 1fr; }
	.book-card, .event-slider__track .event-card, .video-card { flex-basis: calc(50% - (var(--space-4) / 2)); }
}

@media (max-width: 720px) {
	.nav-toggle { display: flex; }
	.book-slider, .event-slider, .video-slider { padding: 0 var(--space-3); }
	.book-slider__arrow, .event-slider__arrow, .video-slider__arrow { width: 36px; height: 36px; }
	.primary-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-border);
	}
	.primary-nav.is-open { display: block; }
	.primary-nav__list { flex-direction: column; gap: 0; padding: var(--space-2) var(--space-3); }
	.primary-nav__list li { border-bottom: 1px solid var(--color-border); }
	.primary-nav__list a { display: block; padding: var(--space-2) 0; }
	.site-footer__inner { text-align: center; }
}

@media (max-width: 480px) {
	body { font-size: 16px; }
	.section { padding: var(--space-5) 0; }
	.hero { padding: var(--space-5) 0 0; }
	.book-card, .event-slider__track .event-card, .video-card { flex-basis: 82%; }
}

/* ==========================================================================
   RTL (right-to-left languages, e.g. Site Language set to Arabic)
   WordPress adds body.rtl automatically. Arrow positions and the scroll
   direction (in JS) already follow logical/direction-aware rules; this
   only flips the arrow glyph itself, which CSS can't do automatically.
   ========================================================================== */
.rtl .book-slider__arrow,
.rtl .event-slider__arrow,
.rtl .video-slider__arrow {
	/* Flip the arrow glyph to point the right physical way now that
	   prev/next have swapped sides. */
	transform: translateY(-50%) scaleX(-1);
}