@layer gallery, site;

@layer site {
	:root {
		--gallery-background: #fff;
		--gallery-surface: #fff;
		--gallery-text: #1c1c1c;
		--gallery-muted: #1c1c1c;
		--gallery-accent: #875626;
		--gallery-overlay: rgb(37 37 34 / 70%);
		--gallery-overlay-ink: #f9f9f9;
		--site-button: #252522;
		--site-button-ink: #f9f9f9;
	}

	.gallery-page {
		font-family: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
	}

	.gallery-body {
		font-size: 18.6667px;
		line-height: 1.8;
	}

	.gallery-hero {
		margin: 0 0 var(--gallery-gap);
	}

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

	.gallery-hero .gallery-title {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		max-inline-size: calc(100% - var(--gallery-label-inset));
		margin: 0;
		padding: 0.2rem 0.75rem;
		border-start-end-radius: 0.25rem;
		border-end-end-radius: 0.25rem;
		background: var(--gallery-overlay);
		color: var(--gallery-overlay-ink);
		box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
		font-size: clamp(1.5rem, 5vw, 2.5rem);
		font-weight: 300;
		line-height: 1.2;
		transform: translateY(-50%);
	}

	[data-status="reserved" i] > .gallery-card__status {
		--gallery-status-tint: #c62828;
	}

	[data-status="available" i] > .gallery-card__status {
		--gallery-status-tint: #1b7f3b;
	}

	[data-status="adopted" i] > .gallery-card__status {
		display: none;
	}

	.gallery-description {
		max-inline-size: 60rem;
		margin-inline: auto;
		padding-block: 1rem;
	}

	.gallery-description p,
	.gallery-card--markdown p {
		text-align: justify;
	}

	.gallery-card--markdown h2 {
		margin-block: 0.5rem;
		color: var(--gallery-accent);
		font-size: 29.3333px;
		font-weight: 300;
		line-height: 1.2;
		text-align: center;
	}

	.gallery-card--markdown h3 {
		margin-block: 0.5rem;
		font-size: 21.3333px;
		font-weight: 300;
		line-height: 1.2;
		text-align: center;
	}

	.gallery-footer {
		text-align: center;
	}

	.gallery-footer ul {
		justify-content: center;
	}

	.gallery-card--gallery:not(.gallery-card--picture) {
		background: var(--site-button);
	}

	.gallery-card--gallery:not(.gallery-card--picture) .gallery-card__link {
		color: var(--site-button-ink);
		text-align: center;
	}
}