/**
 * Layali single post template (single.php).
 *
 * Scoped under `.ly-single`. Only loaded on `is_singular('post')` via
 * layali_enqueue_single_styles() so blog-only typography rules don't leak
 * into pages / products / cart.
 *
 * Layout (matches the Passage du Désir reference):
 *   ┌─────────────── ← Go back (centered) ───────────────┐
 *   ├─────────────────────────────────────────┬──────────┤
 *   │  Title (centered in column)             │  Latest  │
 *   │  Byline (centered)                      │  News    │
 *   │  Featured image                         │  Card 1  │
 *   │                                         │  Card 2  │
 *   │  Body content                           │  Card 3  │
 *   │  …                                      │          │
 *   └─────────────────────────────────────────┴──────────┘
 */

.ly-single {
	background: #ffffff;
	color: var( --ly-color-text, #1f1f23 );
}

/* =============================================================================
   Top bar — Go back link
   ========================================================================== */

.ly-single__topbar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 32px 0;
	text-align: center;
}

.ly-single__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --ly-color-text-muted, #4a4a52 );
	text-decoration: none;
	font-size: 0.95rem;
	transition: color 150ms ease;
}

.ly-single__back:hover,
.ly-single__back:focus-visible {
	color: var( --ly-color-primary, #53225e );
	outline: none;
}

/* =============================================================================
   Two-column layout — main + sticky sidebar
   ========================================================================== */

.ly-single__layout {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 32px 96px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: 64px;
	align-items: start;
}

@media ( max-width: 960px ) {
	.ly-single__layout {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 16px 20px 56px;
	}
}

.ly-single__main {
	min-width: 0;
}

/* =============================================================================
   Hero band (inside the main column)
   ========================================================================== */

.ly-single__hero {
	text-align: center;
	margin-bottom: 40px;
}

.ly-single__title {
	margin: 0 auto 24px;
	max-width: 760px;
	font-size: clamp( 1.8rem, 3.4vw, 2.6rem );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --ly-color-primary, #53225e );
}

.ly-single__byline {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin: 0 0 32px;
	color: var( --ly-color-text-muted, #4a4a52 );
	font-size: 0.9rem;
	line-height: 1.5;
}

.ly-single__byline-item strong,
.ly-single__byline-item time {
	color: inherit;
	font-weight: 500;
}

.ly-single__sep {
	opacity: 0.4;
}

.ly-single__featured {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
}

.ly-single__featured-img,
.ly-single__featured img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* =============================================================================
   Main content — typography
   ========================================================================== */

.ly-single__content {
	max-width: 760px;
	margin: 48px auto 0;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var( --ly-color-text, #1f1f23 );
	word-wrap: break-word;
}

.ly-single__content > * {
	margin: 0 0 1.4em;
}

/* Server-side `--empty` modifier (added in single.php when the_content()
   produced no rendered output). Shows a dashed drop zone visible BOTH in
   the Elementor editor preview iframe AND on the front-end — front-end is
   acceptable because a published post with literally no content is a bug
   the author should see. Replaces the previous `.elementor-editor-active
   :empty::before` rule that never matched (admin body class only). */
.ly-single__content--empty {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed var( --ly-color-border, #ece6e0 );
	border-radius: 16px;
}

.ly-single__content--empty::before {
	content: "Drop your Elementor widgets here.";
	color: var( --ly-color-text-muted, #4a4a52 );
	font-size: 0.95rem;
}

.ly-single__content > *:last-child {
	margin-bottom: 0;
}

.ly-single__content h2 {
	margin: 1.8em 0 0.6em;
	font-size: clamp( 1.4rem, 2.2vw, 1.75rem );
	font-weight: 700;
	line-height: 1.25;
	color: var( --ly-color-primary, #53225e );
	letter-spacing: -0.005em;
}

.ly-single__content h3 {
	margin: 1.5em 0 0.5em;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --ly-color-primary, #53225e );
}

.ly-single__content h4 {
	margin: 1.4em 0 0.4em;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --ly-color-primary, #53225e );
}

.ly-single__content strong,
.ly-single__content b {
	color: var( --ly-color-primary, #53225e );
	font-weight: 700;
}

.ly-single__content a {
	color: var( --ly-color-primary, #53225e );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.ly-single__content a:hover,
.ly-single__content a:focus-visible {
	text-decoration-thickness: 2px;
	outline: none;
}

.ly-single__content ul,
.ly-single__content ol {
	padding-left: 1.4em;
	margin: 0 0 1.4em;
}

.ly-single__content li {
	margin: 0 0 0.4em;
}

.ly-single__content blockquote {
	margin: 1.6em 0;
	padding: 16px 24px;
	border-left: 4px solid var( --ly-color-primary, #53225e );
	color: var( --ly-color-text-muted, #4a4a52 );
	font-style: italic;
}

.ly-single__content img,
.ly-single__content figure img,
.ly-single__content .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.4em auto;
	border-radius: 12px;
}

.ly-single__content figcaption {
	text-align: center;
	font-size: 0.85rem;
	color: var( --ly-color-text-muted, #4a4a52 );
	margin-top: 8px;
}

.ly-single__content hr {
	border: none;
	border-top: 1px solid var( --ly-color-border, #ece6e0 );
	margin: 2em 0;
}

.ly-single__content code,
.ly-single__content kbd {
	background: var( --ly-color-surface-subtle, #f4f0eb );
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.92em;
}

.ly-single__content pre {
	background: var( --ly-color-surface-subtle, #f4f0eb );
	padding: 16px;
	border-radius: 12px;
	overflow-x: auto;
}

.ly-single__pagination {
	margin-top: 32px;
	color: var( --ly-color-text-muted, #4a4a52 );
}

.ly-single__pagination a {
	color: var( --ly-color-primary, #53225e );
}

/* =============================================================================
   Sidebar — Latest News
   ========================================================================== */

.ly-single__sidebar {
	min-width: 0;
}

@media ( min-width: 961px ) {
	.ly-single__sidebar {
		position: sticky;
		top: 32px;
	}
}

.ly-single__sidebar-title {
	margin: 0 0 24px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --ly-color-text, #1f1f23 );
	letter-spacing: -0.005em;
}

.ly-single__sidebar-empty {
	color: var( --ly-color-text-muted, #4a4a52 );
	font-size: 0.95rem;
}

.ly-news-card {
	display: block;
	margin: 0 0 28px;
	text-decoration: none;
	color: inherit;
}

.ly-news-card:last-child {
	margin-bottom: 0;
}

.ly-news-card__media {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 12px;
	aspect-ratio: 16 / 10;
	background: var( --ly-color-surface-subtle, #f4f0eb );
}

.ly-news-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}

.ly-news-card:hover .ly-news-card__media img,
.ly-news-card:focus-visible .ly-news-card__media img {
	transform: scale( 1.03 );
}

.ly-news-card__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var( --ly-color-text, #1f1f23 );
	transition: color 150ms ease;
}

.ly-news-card:hover .ly-news-card__title,
.ly-news-card:focus-visible .ly-news-card__title {
	color: var( --ly-color-primary, #53225e );
}

.ly-news-card:focus-visible {
	outline: none;
}

.ly-news-card:focus-visible .ly-news-card__media {
	outline: 2px solid var( --ly-color-primary, #53225e );
	outline-offset: 2px;
}

/* =============================================================================
   Responsive tweaks
   ========================================================================== */

@media ( max-width: 600px ) {
	.ly-single__topbar {
		padding: 18px 16px 0;
	}
	.ly-single__title {
		font-size: 1.6rem;
	}
	.ly-single__byline {
		font-size: 0.82rem;
		gap: 8px;
	}
	.ly-single__sep {
		display: none;
	}
	.ly-single__byline-item {
		flex: 0 0 100%;
		text-align: center;
	}
	.ly-single__featured {
		border-radius: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Author bio — branded "columnist card" at the end of the post.
 * Rendered by layali_render_author_bio() (functions.php). Bound to the shared
 * Layali tokens with hard fallbacks.
 * ------------------------------------------------------------------------- */

.ly-author {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 40px;
	padding: 28px 36px;
	background: var( --ly-color-secondary-soft, #ffe2e3 );
	border-radius: var( --ly-radius-xl, 24px );
	font-family: var( --ly-text-body, 'DM Sans', system-ui, -apple-system, sans-serif );
}

.ly-author__media {
	position: relative;
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
}

/* Soft organic blob — a bold, slightly offset accent behind the avatar (the
 * yellow shape in the reference). */
.ly-author__blob {
	position: absolute;
	inset: -10%;
	background: var( --ly-author-blob, #f7ef7a );
	border-radius: 62% 38% 54% 46% / 54% 50% 50% 46%;
	transform: translate( -5px, 6px ) rotate( -4deg );
	z-index: 0;
}

/* Opaque cream disc so a transparent logo (e.g. the brand mark) or any
 * non-photo avatar sits in a clean circle instead of floating on the blob;
 * photos fill it edge-to-edge via object-fit: cover. */
.ly-author__avatar,
.ly-author__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
	background: var( --ly-color-cream, #fbf5ef );
	display: block;
}

/* Logo/graphic avatar (transparent) — show the whole mark with breathing room
 * inside the disc instead of cropping it like a photo. */
.ly-author--logo .ly-author__avatar,
.ly-author--logo .ly-author__media img {
	object-fit: contain;
	padding: 18%;
	box-sizing: border-box;
}

.ly-author__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ly-author__eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ly-color-secondary-hover, #cc4f52 );
}

.ly-author__name {
	font-family: var( --ly-text-heading, 'Bricolage Grotesque', system-ui, sans-serif );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --ly-color-primary, #53225e );
	/* A long display name or a URL in the bio must wrap, not overflow the card. */
	overflow-wrap: anywhere;
}

.ly-author__bio {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var( --ly-color-text, #53225e );
	overflow-wrap: anywhere;
}

.ly-author__bio p {
	margin: 0 0 0.6em;
}

.ly-author__bio p:last-child {
	margin: 0;
}

@media ( max-width: 600px ) {
	.ly-author {
		gap: 18px;
		margin-top: 28px;
		padding: 20px;
		align-items: flex-start;
	}
	.ly-author__media {
		width: 88px;
		height: 88px;
	}
	.ly-author__name {
		font-size: 1.25rem;
	}
	.ly-author__bio {
		font-size: 0.95rem;
	}
}