@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/**
 * YesterVault — Yesterday Memories Brand Stylesheet
 *
 * Complete styling for all Memory render blocks, site header,
 * and site footer. Uses CSS custom properties throughout for
 * easy palette customisation per family site.
 *
 * @package YesterVault
 */

/* ── Custom Properties ────────────────────────────────── */

:root {
	/* Primary — CTAs, accents, "record button" energy */
	--ym-primary: #E84545;
	--ym-primary-hover: #D03030;
	--ym-primary-light: #FFF0F0;

	/* Dark — cinematic backdrop, headers, contrast sections */
	--ym-dark: #1A1A2E;
	--ym-dark-mid: #2D2D44;
	--ym-dark-light: #3D3D5C;

	/* Light — content areas, breathing room */
	--ym-light: #F8F8FA;
	--ym-white: #FFFFFF;

	/* Accent — links, highlights, interactive elements */
	--ym-accent: #00D9C0;
	--ym-accent-hover: #00BFA8;
	--ym-accent-light: #E6FBF8;

	/* Neutral — text, borders, subtle backgrounds */
	--ym-text: #2C2C2C;
	--ym-text-light: #6B6B80;
	--ym-border: #E2E2EA;
	--ym-border-light: #F0F0F5;

	/* Media type colours — badges and pills */
	--ym-video: #E84545;
	--ym-photo: #4ECDC4;
	--ym-audio: #FFB347;
	--ym-document: #7C83FD;

	/* Typography */
	--ym-font-heading: 'Space Grotesk', 'DM Sans', sans-serif;
	--ym-font-body: 'Inter', 'DM Sans', sans-serif;

	/* Spacing & Effects */
	--ym-radius: 12px;
	--ym-radius-sm: 8px;
	--ym-radius-pill: 999px;
	--ym-shadow: 0 2px 12px rgba(26, 26, 46, 0.08);
	--ym-shadow-hover: 0 4px 20px rgba(26, 26, 46, 0.15);
	--ym-transition: all 0.25s ease;
}

/* ── Base Block ───────────────────────────────────────── */

.ym-block {
	margin-bottom: 2rem;
	font-family: var(--ym-font-body);
	color: var(--ym-text);
}

.ym-block__heading {
	font-family: var(--ym-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ym-dark);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--ym-primary);
	display: inline-block;
}

/* ── Hero Block ───────────────────────────────────────── */

.ym-block--hero {
	border-radius: var(--ym-radius);
	overflow: hidden;
	box-shadow: var(--ym-shadow);
	background: var(--ym-dark);
}

.ym-block--hero video,
.ym-block--hero audio,
.ym-block--hero img {
	width: 100%;
	display: block;
}

.ym-block--hero video {
	border-radius: var(--ym-radius);
}

.ym-hero__caption {
	font-family: var(--ym-font-heading);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--ym-white);
	padding: 0.75rem 1rem;
	background: var(--ym-dark);
}

.ym-hero--audio {
	background: linear-gradient(135deg, var(--ym-dark) 0%, var(--ym-dark-mid) 100%);
	padding: 1.5rem;
}

.ym-hero--audio audio {
	margin-top: 1rem;
}

.ym-hero__document {
	position: relative;
}

.ym-hero__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(26, 26, 46, 0.8);
	color: var(--ym-white);
	padding: 0.25rem 0.75rem;
	border-radius: var(--ym-radius-sm);
	font-family: var(--ym-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Hero: PDF Viewer ────────────────────────────────── */

.ym-hero__pdf-viewer {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--ym-border, #E2E2EA);
}

.ym-hero__pdf-embed {
	width: 100%;
	height: 600px;
	border: none;
	display: block;
}

/* ── Hero: Document Actions ──────────────────────────── */

.ym-hero__document-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	flex-wrap: wrap;
}

.ym-hero__document-actions .ym-hero__badge {
	position: static;
}

.ym-hero__filename {
	font-size: 0.85rem;
	color: var(--ym-text-light, #6B6B80);
	font-family: monospace;
}

.ym-hero__download {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4rem 1rem;
	background: var(--ym-primary, #E84545);
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background 0.2s ease;
	margin-left: auto;
}

.ym-hero__download:hover {
	background: var(--ym-primary-hover, #D03030);
	color: #fff;
}

.ym-hero__badge--pdf {
	background: #DC2626;
	color: #fff;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Hero: Placeholder ───────────────────────────────── */

.ym-hero--placeholder {
	background: transparent;
	box-shadow: none;
}

.ym-hero__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	background: var(--ym-light, #F8F8FA);
	border: 2px dashed var(--ym-border, #E2E2EA);
	border-radius: 12px;
	gap: 0.75rem;
}

.ym-hero__placeholder .ym-hero__badge {
	position: static;
}

.ym-hero__placeholder-icon {
	font-size: 2.5rem;
}

.ym-hero__placeholder-text {
	font-size: 0.95rem;
	color: var(--ym-text-light, #6B6B80);
	font-style: italic;
}

/* ── Story Block ──────────────────────────────────────── */

.ym-block--story .ym-story__content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ym-text);
	max-width: 72ch;
}

.ym-block--story .ym-story__content p {
	margin-bottom: 1rem;
}

.ym-block--story .ym-story__content p:last-child {
	margin-bottom: 0;
}

/* ── Details / Technical / Digitisation / Provenance ──── */

.ym-details__list {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 0.5rem 1.5rem;
	background: var(--ym-light);
	padding: 1.25rem;
	border-radius: var(--ym-radius-sm);
	margin: 0;
}

.ym-details__label {
	font-family: var(--ym-font-heading);
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--ym-text-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ym-details__value {
	font-size: 0.95rem;
	color: var(--ym-text);
	word-break: break-word;
}

/* ── Taxonomy Groups & Pills ──────────────────────────── */

.ym-tax-group {
	margin-bottom: 1.25rem;
}

.ym-tax-group:last-child {
	margin-bottom: 0;
}

.ym-tax-group__heading {
	font-family: var(--ym-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ym-text-light);
	margin: 0 0 0.5rem;
}

.ym-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ym-term-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.85rem;
	border-radius: var(--ym-radius-pill);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	transition: var(--ym-transition);
	border: 1px solid var(--ym-border);
	background: var(--ym-white);
	color: var(--ym-text);
}

.ym-term-pill:hover {
	background: var(--ym-primary);
	color: var(--ym-white);
	border-color: var(--ym-primary);
	transform: translateY(-1px);
	box-shadow: var(--ym-shadow);
}

.ym-term-pill--person {
	background: var(--ym-dark);
	color: var(--ym-white);
	border-color: var(--ym-dark);
}

.ym-term-pill--person:hover {
	background: var(--ym-primary);
	border-color: var(--ym-primary);
}

.ym-term-pill--media_type {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Relationship Cards ───────────────────────────────── */

.ym-block--relationships {
	margin-top: 2rem;
}

.ym-rel-section {
	margin-bottom: 2rem;
}

.ym-rel-count {
	font-weight: 400;
	color: var(--ym-text-light);
	font-size: 0.9rem;
}

.ym-rel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1.25rem;
}

.ym-rel-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--ym-white);
	border-radius: var(--ym-radius-sm);
	overflow: hidden;
	border: 1px solid var(--ym-border);
	transition: var(--ym-transition);
}

.ym-rel-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ym-shadow-hover);
	border-color: var(--ym-primary);
}

.ym-rel-card__thumb img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
}

.ym-rel-card__title {
	display: block;
	font-family: var(--ym-font-heading);
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	color: var(--ym-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ym-rel-card__meta {
	display: block;
	font-size: 0.75rem;
	color: var(--ym-text-light);
	padding: 0 0.75rem 0.5rem;
}

.ym-rel-card__info {
	flex: 1;
	min-width: 0;
}

.ym-rel-card--source {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: var(--ym-accent-light);
	border: 1px solid var(--ym-accent);
	border-radius: var(--ym-radius-sm);
}

.ym-rel-card--source:hover {
	background: var(--ym-white);
	border-color: var(--ym-primary);
}

.ym-rel-card--source .ym-rel-card__thumb {
	flex-shrink: 0;
	width: 80px;
}

.ym-rel-card--source .ym-rel-card__thumb img {
	width: 80px;
	height: 60px;
	border-radius: 6px;
}

.ym-rel-card--source .ym-rel-card__title {
	padding: 0;
}

.ym-rel-card--source .ym-rel-card__meta {
	padding: 0;
	margin-top: 0.15rem;
}

/* ── Map Block ────────────────────────────────────────── */

.ym-block--map {
	background: var(--ym-light);
	border-radius: var(--ym-radius);
	padding: 1.25rem;
}

.ym-map__embed iframe {
	border-radius: var(--ym-radius-sm);
	width: 100%;
}

.ym-map__label {
	font-size: 0.85rem;
	color: var(--ym-text-light);
	margin: 0.5rem 0 0;
	font-style: italic;
}

/* ── Transcript Block ─────────────────────────────────── */

.ym-block--transcript {
	background: var(--ym-light);
	border-radius: var(--ym-radius);
	padding: 1.5rem;
}

.ym-transcript__original,
.ym-transcript__translation {
	margin-bottom: 1.5rem;
}

.ym-transcript__original:last-child,
.ym-transcript__translation:last-child {
	margin-bottom: 0;
}

.ym-transcript__text {
	font-size: 0.95rem;
	line-height: 1.75;
	font-style: italic;
	border-left: 3px solid var(--ym-primary);
	padding-left: 1rem;
}

.ym-transcript__text p {
	margin: 0 0 1em;
}

.ym-transcript__text p:last-child {
	margin-bottom: 0;
}

.ym-transcript__translation .ym-transcript__text {
	border-left-color: var(--ym-accent);
	font-style: normal;
}

/* ── Site Header ──────────────────────────────────────── */

.ym-site-header {
	background: var(--ym-white);
	border-bottom: 1px solid var(--ym-border);
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--ym-shadow);
}

.ym-site-header__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ym-site-header__logo-text {
	font-family: var(--ym-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ym-dark);
	text-decoration: none;
}

.ym-site-header__logo-link {
	text-decoration: none;
}

.ym-site-header__tagline {
	display: block;
	font-size: 0.75rem;
	color: var(--ym-text-light);
	font-style: italic;
	margin-top: -0.25rem;
}

.ym-site-header__nav ul {
	display: flex;
	list-style: none;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.ym-site-header__nav a {
	font-family: var(--ym-font-heading);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ym-text);
	text-decoration: none;
	transition: var(--ym-transition);
}

.ym-site-header__nav a:hover {
	color: var(--ym-primary);
}

/* ── Site Footer ──────────────────────────────────────── */

.ym-footer {
	background: var(--ym-dark);
	color: var(--ym-white);
	padding: 3rem 0 0;
	margin-top: 3rem;
}

.ym-footer__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
}

.ym-footer__name {
	font-family: var(--ym-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	display: block;
	margin-bottom: 0.75rem;
}

.ym-footer__quote {
	font-style: italic;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 40ch;
}

.ym-footer__heading {
	font-family: var(--ym-font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ym-accent);
	margin-bottom: 1rem;
}

.ym-footer__links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ym-footer__links a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 2;
	transition: var(--ym-transition);
}

.ym-footer__links a:hover {
	color: var(--ym-primary);
}

.ym-footer__contact p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	line-height: 1.6;
}

.ym-footer__bottom {
	border-top: 1px solid var(--ym-dark-light);
	margin-top: 3rem;
	padding: 1.25rem 1.5rem;
	text-align: center;
}

.ym-footer__bottom p {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.8rem;
	margin: 0;
}

/* ── Archive Thumbnail Placeholders ──────────────────── */

.ym-thumb--placeholder {
	aspect-ratio: 16 / 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--ym-dark);
	border-radius: var(--ym-radius-sm);
	color: rgba(255, 255, 255, 0.45);
	overflow: hidden;
	width: 100%;
}

.ym-thumb--video    { background: var(--ym-dark); }
.ym-thumb--pdf      { background: linear-gradient(135deg, var(--ym-dark) 0%, #2e1a2e 100%); }
.ym-thumb--audio    { background: linear-gradient(135deg, var(--ym-dark) 0%, #1a2e1a 100%); }
.ym-thumb--document { background: linear-gradient(135deg, var(--ym-dark) 0%, #1a1a3e 100%); }

.ym-thumb__icon svg {
	opacity: 0.5;
	transition: var(--ym-transition);
}

a:hover .ym-thumb__icon svg {
	opacity: 0.8;
	transform: scale(1.1);
}

.ym-thumb__label {
	font-family: var(--ym-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.6;
	text-align: center;
	padding: 0 1rem;
}

/* ── Archive Grid (shortcode) ────────────────────────── */

.ym-archive-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
}

.ym-archive-card {
	flex: 1 1 var(--ym-grid-basis, 30%);
	min-width: 220px;
	text-decoration: none;
	color: inherit;
	border-radius: var(--ym-radius);
	overflow: hidden;
	background: var(--ym-white);
	box-shadow: var(--ym-shadow);
	transition: var(--ym-transition);
}

.ym-archive-card:hover {
	box-shadow: var(--ym-shadow-hover);
	transform: translateY(-2px);
}

.ym-archive-card__thumb {
	position: relative;
	overflow: hidden;
}

.ym-archive-card__thumb img.ym-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.ym-archive-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: rgba(26, 26, 46, 0.8);
	color: #fff;
	font-family: var(--ym-font-body);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--ym-radius-pill);
	backdrop-filter: blur(4px);
}

.ym-archive-card__info {
	padding: 1rem 1.25rem 1.25rem;
}

.ym-archive-card__title {
	font-family: var(--ym-font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ym-text);
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.ym-archive-card__meta {
	font-family: var(--ym-font-body);
	font-size: 0.8rem;
	color: var(--ym-text-light);
}

/* Archive empty state */
.ym-archive-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ym-text-light);
	font-family: var(--ym-font-body);
	font-style: italic;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 768px) {
	.ym-details__list {
		grid-template-columns: 1fr;
	}

	.ym-details__label {
		margin-bottom: -0.25rem;
	}

	.ym-rel-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 0.75rem;
	}

	.ym-rel-card--source {
		flex-direction: column;
		text-align: center;
	}

	.ym-block__heading {
		font-size: 1.1rem;
	}

	.ym-hero__pdf-embed {
		height: 400px;
	}

	.ym-map__embed iframe {
		height: 200px;
	}

	.ym-site-header__nav ul {
		display: none;
	}

	.ym-site-header__container {
		flex-wrap: wrap;
	}

	.ym-footer__container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.ym-archive-grid {
		gap: 1rem;
	}
	.ym-archive-card {
		min-width: 100%;
	}
}

@media (max-width: 480px) {
	.ym-rel-grid {
		grid-template-columns: 1fr 1fr;
	}
}