/*
 * Fotografering.nu — supplemental styles.
 * The design system lives in theme.json; this file only covers what blocks
 * can't express: hover transitions, the photographer/milestone grids, the
 * timeline rail, and a few editorial flourishes.
 */

/* ---- Cards (post, photographer, milestone) ---- */
.fnu-card {
	transition: transform 0.25s ease;
}
.fnu-card img {
	transition: filter 0.4s ease, transform 0.4s ease;
}
.fnu-card:hover img {
	filter: saturate(1.05) contrast(1.02);
}
.fnu-card .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--sepia), var(--wp--preset--color--sepia));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.3s ease;
	color: var(--wp--preset--color--ink);
}
.fnu-card:hover .wp-block-post-title a {
	background-size: 100% 1px;
}

/* Portrait-led photographer cards crop tall */
.fnu-grid--fotograf .wp-block-post-featured-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

/* ---- Cover fallback: loop cards without a featured image ---- */
.fnu-cover-fallback {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 1 / 1; /* default; inline style (or the rule below) overrides */
	overflow: hidden;
	border-radius: 2px;
	background-image:
		radial-gradient(130% 130% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
		linear-gradient(150deg, var(--wp--preset--color--sepia), #6f4f2e);
}
.fnu-grid--fotograf .fnu-cover-fallback {
	aspect-ratio: 3 / 4;
}

/* ---- Card grids collapse on small screens ----
 * WordPress' columnCount grid is a fixed N columns at every width. These
 * override it (higher specificity than the generated .wp-container rule) so the
 * card grids become 1 column on phones and 2 on small tablets; desktop keeps
 * its 3–4 columns untouched. */
@media (max-width: 600px) {
	.wp-block-post-template.fnu-grid {
		grid-template-columns: 1fr;
	}
}
@media (min-width: 601px) and (max-width: 781px) {
	.wp-block-post-template.fnu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.fnu-cover-fallback__link {
	display: flex;
	width: 100%;
	text-decoration: none;
}
.fnu-cover-fallback__title {
	margin: auto;
	max-width: 84%;
	padding: 1.1rem;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.05rem, 0.9rem + 1vw, 1.55rem);
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}
.fnu-cover-fallback::after { /* subtle museum passepartout frame */
	content: "";
	position: absolute;
	inset: 0.7rem;
	border: 1px solid rgba(244, 239, 229, 0.32);
	pointer-events: none;
}
.fnu-card:hover .fnu-cover-fallback {
	filter: brightness(1.04);
}

/* ---- Site header / nav ---- */
.site-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.01em;
}
.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--sepia);
}

/* ---- Milestone timeline rail ---- */
.fnu-nedslag-year {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	color: var(--wp--preset--color--sepia);
	letter-spacing: -0.02em;
}
.fnu-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
}

/* ---- Editorial article body rhythm ---- */
.wp-block-post-content > * {
	margin-block: 1.4em 0;
}
.wp-block-post-content > figure.wp-block-image {
	margin-block: 2.4em;
}
.wp-block-post-content .wp-block-image figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	margin-top: 0.6em;
}
/* Portrait credit under the featured image on single fotograf — matches content
 * captions (muted + small come from theme.json elements.caption). */
.fnu-portrait-caption {
	text-align: center;
	margin-top: 0.6em;
}
/* Gallery image captions: WordPress overlays them on the image (absolute +
 * gradient ::before). Put them BELOW each image instead, like single images, so
 * a credit reads the same everywhere. Specificity beats core's 0,3,2. */
.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	margin: 0.6em 0 0;
	padding: 0;
	overflow: visible;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	text-shadow: none;
	will-change: auto;
}
.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}
/* "Beskär bilder" toggle ON → uniform square equal grid. */
.wp-block-post-content .wp-block-gallery.is-cropped figure.wp-block-image:not(#individual-image) img {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.wp-block-pullquote,
.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--sepia);
	padding-left: 1.4rem;
	font-style: italic;
}

/* Subtle reveal on featured images in singles */
.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}
/* When the figure has a set aspect-ratio (the cards), the image must cover-fill
 * it. WordPress omits the cover styling on the useFirstImageFromPost path, so a
 * first-image-from-post would otherwise sit short and not fill the square. */
.wp-block-post-featured-image[style*="aspect-ratio"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Series day badge (#N / 200), layered over the featured image (and over the
 * sepia fallback). pointer-events:none so the card link underneath still works. */
.wp-block-post-featured-image {
	position: relative;
}
.fnu-dag-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-block;
	padding: 4px 9px;
	border-radius: 4px;
	background: var(--wp--preset--color--sepia);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	pointer-events: none;
}

/* Comments spacing */
.fnu-comments {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
}

/* --- Form controls (Ninja Forms) ---
 * Ninja Forms ships only structure CSS and expects the THEME to style the
 * actual fields. A block theme has no input defaults, so without this the
 * name/email/phone fields fall back to raw browser styling (21px tall, 2px
 * inset border). Scoped to .nf-form-cont to leave the editor/other UI alone. */
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="url"],
.nf-form-cont input[type="number"],
.nf-form-cont input[type="password"],
.nf-form-cont textarea,
.nf-form-cont select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nf-form-cont textarea {
	min-height: 8rem;
}
.nf-form-cont input:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus {
	border-color: var(--wp--preset--color--sepia);
	outline: none;
	box-shadow: 0 0 0 3px rgba(154, 116, 74, 0.15);
}
/* Submit button — match the site's dark button look. */
.nf-form-cont input[type="submit"] {
	display: inline-block;
	cursor: pointer;
	padding: 0.9rem 1.6rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 3px;
	transition: background-color 0.15s ease;
}
.nf-form-cont input[type="submit"]:hover {
	background: var(--wp--preset--color--sepia);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.fnu-card,
	.fnu-card img,
	.fnu-card .wp-block-post-title a {
		transition: none;
	}
}

/* ---- Nedslag timeline (/historia/) ---- */
.fnu-timeline {
	--tl-year-col: 96px;
	--tl-rail: 108px;
	--tl-pad: 120px;
	--tl-gap-pad: 80px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 782px) {
	.fnu-timeline {
		--tl-year-col: 140px;
		--tl-rail: 152px;
		--tl-pad: 164px;
		--tl-gap-pad: 124px;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 2.5rem;
	}
}
.fnu-tl-nav {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
}
@media (min-width: 782px) {
	.fnu-tl-nav {
		position: sticky;
		top: 1.5rem;
		align-self: start;
		flex-direction: column;
		max-height: calc(100vh - 3rem);
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 0;
	}
	.fnu-tl-nav a {
		white-space: normal;
		line-height: 1.25;
	}
}
.fnu-tl-nav a {
	white-space: nowrap;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding: 0.3rem 0.5rem;
	border-left: 2px solid transparent;
	transition: color 0.2s ease;
}
.fnu-tl-nav a:hover,
.fnu-tl-nav a.is-current {
	color: var(--wp--preset--color--sepia);
	border-left-color: var(--wp--preset--color--sepia);
}
.fnu-tl-track {
	position: relative;
}
.fnu-tl-track::before {
	content: "";
	position: absolute;
	left: var(--tl-rail);
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: var(--wp--preset--color--line);
}
.fnu-tl-era {
	padding-left: var(--tl-pad);
	margin: 2.2rem 0 1.25rem;
}
.fnu-tl-era:first-child {
	margin-top: 0.25rem;
}
.fnu-tl-era__eyebrow {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sepia);
	margin-bottom: 0.15rem;
}
.fnu-tl-era__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
}
.fnu-tl-row {
	display: grid;
	grid-template-columns: var(--tl-year-col) 24px minmax(0, 1fr);
	align-items: start;
	margin-bottom: 1.6rem;
}
.fnu-tl-year {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: clamp(1.3rem, 0.9rem + 1.2vw, 1.85rem);
	line-height: 1.05;
	color: var(--wp--preset--color--sepia);
	text-align: right;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.fnu-tl-dot {
	justify-self: center;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--sepia);
	border: 3px solid var(--wp--preset--color--paper);
	outline: 1px solid var(--wp--preset--color--line);
	margin-top: 0.45rem;
}
.fnu-tl-title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 1.15rem;
	line-height: 1.2;
	margin: 0 0 0.2rem;
}
.fnu-tl-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.fnu-tl-title a:hover {
	color: var(--wp--preset--color--sepia);
}
.fnu-tl-gap {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-left: var(--tl-gap-pad);
	margin: 0.2rem 0 1.4rem;
}
.fnu-tl-gap__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--sepia);
	background: var(--wp--preset--color--paper);
	margin-left: 24px;
}
.fnu-tl-gap em {
	font-style: italic;
	font-size: 0.75rem;
	color: var(--wp--preset--color--sepia);
}
.fnu-timeline-empty {
	color: var(--wp--preset--color--muted);
}
.js-reveal .fnu-tl-row,
.js-reveal .fnu-tl-era {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal .fnu-tl-row.is-in,
.js-reveal .fnu-tl-era.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js-reveal .fnu-tl-row,
	.js-reveal .fnu-tl-era {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- AI-generated summary ("I korthet") ----
 * The AI plugin inserts a .ai-summarization-summary group at the top of the
 * content and colours it with two CSS variables. We just retheme those to the
 * museum palette and add the eyebrow label — so the summary the editor
 * generates is the single, nicely-formatted lead (no separate excerpt box). */
.wp-block-group.ai-summarization-summary {
	--ai-summary-background-color: var(--wp--preset--color--card);
	--ai-summary-border-color: var(--wp--preset--color--sepia);
	border-left-width: 3px;
	border-radius: 0;
	margin-bottom: var(--wp--preset--spacing--50);
}
.wp-block-group.ai-summarization-summary::before {
	content: "I korthet";
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sepia);
}

/* ---- Photographer profile panel ---- */
.fnu-fotograf-panel {
	margin-top: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 1.1rem 1.15rem;
	font-size: 0.875rem;
}
.fnu-fp-facts {
	margin: 0;
}
.fnu-fp-row {
	margin: 0 0 0.7rem;
}
.fnu-fp-row:last-child {
	margin-bottom: 0;
}
.fnu-fp-lab {
	margin: 0 0 7px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #7a5a33; /* darker sepia — stronger, more present labels */
}
.fnu-fp-val {
	margin: 0;
	color: var(--wp--preset--color--ink);
	line-height: 1.4;
}
.fnu-fp-val a {
	color: var(--wp--preset--color--sepia);
	text-decoration: none;
}
.fnu-fp-val a:hover {
	text-decoration: underline;
}
/* Section labels (På nätet / Utmärkelser / Böcker): a full-width hairline UNDER
 * the heading + extra air above, instead of a divider between sections. */
.fnu-fp-links-lab {
	margin-top: 1.6rem;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--wp--preset--color--sepia);
}
.fnu-fp-links {
	margin-top: 0.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fnu-fp-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--sepia);
	text-decoration: none;
	word-break: break-word;
}
.fnu-fp-link:hover span {
	text-decoration: underline;
}
.fnu-fp-ic {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}
/* Inline link cue after a linked book title. */
.fnu-fp-linkic {
	width: 0.72em;
	height: 0.72em;
	margin-left: 0.25em;
	vertical-align: -0.05em;
	color: var(--wp--preset--color--sepia);
}
.fnu-fp-extra {
	margin-top: 0;
}
.fnu-fp-extra .fnu-fp-lab {
	margin-top: 1.6rem;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--wp--preset--color--sepia);
}
/* Böcker + Utmärkelser = a two-column timeline: a dim, narrow year column then
 * the title, so titles share a clean left edge. No bullets, no parentheses.
 * (Class kept as .fnu-fp-books; shared by both sections via fnu_fp_render_timeline.) */
.fnu-fp-books {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.7rem;
	row-gap: 0.3rem;
	margin: 0.2rem 0 0;
}
.fnu-fp-byear {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	line-height: 1.4;
}
.fnu-fp-btitle {
	color: var(--wp--preset--color--ink);
	line-height: 1.4;
}
.fnu-fp-books em {
	font-style: italic;
}
.fnu-fp-books a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fnu-fp-books a:hover {
	color: var(--wp--preset--color--sepia);
}
/* Free-text note inside Böcker (a line with no "| year") — plain, not a bullet. */
.fnu-fp-note {
	margin: 0.2rem 0 0.55rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.45;
}
/* A note that follows a book list needs more air above it than one that sits
 * right under the "Böcker" heading. */
.fnu-fp-books + .fnu-fp-note {
	margin-top: 0.85rem;
}