/*
 * Bechster Core (HTMLy) – neutral base styles for the feeds, the share component, galleries and the lightbox.
 * Everything lives in a cascade layer, so any unlayered theme CSS wins
 * without specificity fights. Tune via the --bc-* custom properties.
 */
@layer bechster-core {
	.bc-feed,
	.bc-share,
	:is(.bechster-now, .bechster-timeline, .bechster-skills, .bechster-contact, .bechster-stats) {
		--_gap: var(--bc-gap, 1rem);
		--_radius: var(--bc-radius, 0.5rem);
		--_accent: var(--bc-accent, currentColor);
		--_muted: var(--bc-muted, color-mix(in srgb, currentColor 65%, transparent));
		--_border: var(--bc-border, color-mix(in srgb, currentColor 20%, transparent));
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.bc-feed :focus-visible {
		outline: 0.125rem solid var(--_accent);
		outline-offset: 0.125rem;
	}

	/* Mastodon */
	.bc-toots,
	.bc-photos {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bc-toots {
		display: grid;
		gap: var(--_gap);
	}

	.bc-toot {
		min-width: 0;
		padding: var(--_gap);
		border: 1px solid var(--_border);
		border-radius: var(--_radius);
	}

	.bc-toot__header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25em 0.5em;
		margin-block-end: 0.75em;
	}

	.bc-toot__avatar {
		display: grid;
		place-items: center;
		flex: none;
		inline-size: 2.5em;
		block-size: 2.5em;
		border-radius: 50%;
		border: 1px solid var(--_border);
		font-weight: 700;
		font-size: 0.875em;
	}

	.bc-toot__author {
		min-width: 0;
		font-weight: 700;
	}

	.bc-toot__handle,
	.bc-toot__time {
		min-width: 0;
		color: var(--_muted);
		font-size: 0.875em;
	}

	.bc-toot__time {
		margin-inline-start: auto;
	}

	.bc-toot__time a {
		color: inherit;
	}

	.bc-toot__content > :first-child,
	.bc-toot__content details > :nth-child(2) {
		margin-block-start: 0;
	}

	.bc-toot__content > :last-child {
		margin-block-end: 0;
	}

	.bc-toot__content p {
		margin-block: 0 0.75em;
	}

	/* Mastodon shortens link text with these helper classes. */
	.bc-toot__content .invisible {
		display: none;
	}

	.bc-toot__content .ellipsis::after {
		content: "…";
	}

	.bc-toot__footer {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25em 1em;
		margin-block-start: 0.75em;
		color: var(--_muted);
		font-size: 0.875em;
	}

	/* Pixelfed */
	.bc-photos {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
		gap: calc(var(--_gap) / 2);
	}

	.bc-photo {
		margin: 0;
		min-width: 0;
	}

	.bc-photo__link {
		display: block;
		border-radius: var(--_radius);
		overflow: hidden;
	}

	.bc-photo__img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.bc-photo__caption {
		margin-block-start: 0.25em;
		color: var(--_muted);
		font-size: 0.8125em;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	/* Shared */
	.bc-feed__more {
		color: var(--_accent);
	}

	.bc-feed__empty {
		color: var(--_muted);
	}

	/* Share on Mastodon */
	.bc-share__toggle {
		cursor: pointer;
		inline-size: fit-content;
	}

	.bc-share__form {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5em;
		margin-block-start: 0.75em;
	}

	.bc-share__label {
		flex-basis: 100%;
	}

	.bc-share__input {
		flex: 1 1 12em;
		min-inline-size: 0;
		padding: 0.4em 0.6em;
		font: inherit;
		border: 1px solid var(--_border);
		border-radius: var(--_radius);
	}

	.bc-share__submit {
		padding: 0.4em 1em;
		font: inherit;
		cursor: pointer;
	}

	.bc-share__hint,
	.bc-share__error {
		flex-basis: 100%;
		margin: 0;
		font-size: 0.875em;
		color: var(--_muted);
	}

	.bc-share__error {
		color: var(--_accent);
	}
	/* Patterns (includes/class-patterns.php). Only layout essentials; themes add the look. */
	.bechster-now,
	.bechster-stats {
		display: grid;
		gap: var(--_gap);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	}

	.bechster-now > :not(.bechster-now__item) {
		grid-column: 1 / -1;
	}

	.bechster-now__item,
	.bechster-stats__item {
		padding: var(--_gap);
		border: 1px solid var(--_border);
		border-radius: var(--_radius);
	}

	.bechster-now__item > * {
		margin-block: 0 0.5em;
	}

	.bechster-now__label {
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 0.875em;
	}

	.bechster-now__text,
	.bechster-timeline__place {
		color: var(--_muted);
	}

	.bechster-timeline ol,
	.bechster-skills__list,
	.bechster-skills__tools,
	.bechster-stats {
		list-style: none;
		padding: 0;
	}

	.bechster-timeline__item {
		display: grid;
		grid-template-columns: 7rem 1fr;
		gap: 0.25em 1em;
		padding-block: 0.75em;
		border-block-end: 1px solid var(--_border);
	}

	.bechster-timeline__place {
		grid-column: 2;
	}

	.bechster-skills__list {
		display: grid;
		gap: 0.75em;
	}

	.bechster-skills__skill {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.25em 0.5em;
	}

	.bechster-skills__label {
		text-transform: uppercase;
	}

	.bechster-skills__value {
		font-weight: 700;
	}

	.bechster-skills__bar {
		grid-column: 1 / -1;
		block-size: 0.5rem;
		background: var(--_border);
	}

	.bechster-skills__bar::after {
		content: "";
		display: block;
		block-size: 100%;
		inline-size: calc(var(--v, 0) * 1%);
		background: var(--_accent);
	}

	.bechster-skills__tools {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.bechster-skills__tools li {
		padding: 0.25em 0.6em;
		border: 1px solid var(--_border);
		border-radius: var(--_radius);
	}

	.bechster-stats__item {
		display: grid;
		gap: 0.25em;
		text-align: center;
	}

	.bechster-stats__value {
		font-size: 2em;
		line-height: 1.1;
	}

	.bechster-stats__label {
		color: var(--_muted);
	}

	/* Lightbox (templates/lightbox.php, assets/js/lightbox.js). Always dark, whatever the theme. */
	/* Neutral gallery layout for .bc-gallery in post content (themes restyle it). */
	.bc-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
		gap: calc(var(--bc-gap, 1rem) / 2);
		margin-block: var(--bc-gap, 1rem);
	}

	.bc-gallery figure {
		margin: 0;
		min-width: 0;
	}

	.bc-gallery img {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}

	:is(.bc-gallery, .wp-block-gallery, [data-bc-lightbox]) img[role="button"],
	:is(.bc-gallery, .wp-block-gallery) a[href] > img,
	.bc-photo__link {
		cursor: zoom-in;
	}

	html:has(.bc-lightbox[open]) {
		overflow: hidden;
	}

	.bc-lightbox {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: #f4f4f5;
		overflow: hidden;
	}

	.bc-lightbox[open] {
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.bc-lightbox [hidden] {
		display: none !important;
	}

	.bc-lightbox::backdrop {
		background: rgb(0 0 0 / calc(0.9 - var(--drag-p, 0) * 0.7));
	}

	.bc-lightbox__stage {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 0;
		overflow: hidden;
		padding: 3.75rem clamp(0.75rem, 6vw, 5rem) 0.75rem;
		touch-action: pinch-zoom;
	}

	.bc-lightbox__img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		user-select: none;
		-webkit-user-drag: none;
		opacity: 0;
		transform: translate(var(--drag-x, 0), var(--drag-y, 0)) scale(calc(1 - var(--drag-p, 0) * 0.25));
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.bc-lightbox__img.is-loaded {
		opacity: 1;
	}

	.bc-lightbox.is-dragging .bc-lightbox__img {
		transition: none;
	}

	.bc-lightbox.is-dismissing .bc-lightbox__img {
		opacity: 0;
		transform: translateY(100vh) scale(0.8);
		transition: transform 0.22s ease-in, opacity 0.22s ease-in;
	}

	.bc-lightbox.is-dragging :is(.bc-lightbox__bar, .bc-lightbox__btn) {
		opacity: calc(1 - var(--drag-p, 0) * 2);
	}

	.bc-lightbox__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.25rem 1.5rem;
		padding: 0.75rem clamp(0.75rem, 6vw, 5rem) max(1rem, env(safe-area-inset-bottom));
		font-size: 0.875rem;
		line-height: 1.5;
		color: #d4d4d8;
	}

	.bc-lightbox__caption {
		margin: 0;
		color: #f4f4f5;
		max-width: 70ch;
	}

	.bc-lightbox__meta {
		display: flex;
		gap: 1.25rem;
		margin: 0 0 0 auto;
	}

	.bc-lightbox__source {
		color: inherit;
	}

	.bc-lightbox__source::after {
		content: " ↗";
	}

	.bc-lightbox__btn {
		position: absolute;
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0;
		cursor: pointer;
		color: #f4f4f5;
		background: rgb(0 0 0 / 0.55);
		border: 0.0625rem solid rgb(255 255 255 / 0.35);
		border-radius: 50%;
		transition: border-color 0.2s;
	}

	.bc-lightbox__btn svg {
		inline-size: 1.25rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.bc-lightbox__btn:hover,
	.bc-lightbox__btn:focus-visible {
		border-color: #fff;
	}

	.bc-lightbox__close {
		top: max(0.75rem, env(safe-area-inset-top));
		right: 0.75rem;
	}

	.bc-lightbox__prev,
	.bc-lightbox__next {
		top: 50%;
		translate: 0 -50%;
	}

	.bc-lightbox__prev {
		left: 0.75rem;
	}

	.bc-lightbox__next {
		right: 0.75rem;
	}

	/* Small touch screens: swipe instead of arrows, so the image gets the full width. */
	@media (pointer: coarse) and (max-width: 40rem) {
		.bc-lightbox__prev,
		.bc-lightbox__next {
			display: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.bc-lightbox__img {
			transition: none;
		}
	}
}