@layer gallery, site;

@layer site {
	:root {
		--gallery-background: #fff;
		--gallery-surface: #fff;
		--gallery-text: #1c1c1c;
		--gallery-muted: #1c1c1c;
		--gallery-accent: #3d3d3d;
		--gallery-overlay: rgb(34 34 34 / 70%);
		--gallery-overlay-ink: #f9f9f9;
		--site-gray-light: #c4c4c4;
		--site-gray-dark: #4a4a4a;
		--site-ink: #222;
		--site-light-ink: #f9f9f9;
		--site-red: #a31f1f;
		--site-gray-mid: #5c5c5c;
		--site-label: rgb(196 196 196 / 92%);
		--site-button: var(--site-gray-light);
		--site-button-ink: var(--site-ink);
		--site-button-hover: var(--site-gray-dark);
		--site-button-hover-ink: #f9f9f9;
		--site-band: #efefef;
		--site-heading-size: 22px;
		--site-subheading-size: 18px;
		--site-title-size: 26px;
	}

	@media (min-width: 768px) and (min-height: 600px) {
		:root {
			--site-heading-size: 30px;
			--site-subheading-size: 20px;
			--site-title-size: 34px;
		}
	}

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

	.gallery-page :is(h1, h2, h3, h4, h5, h6, .gallery-card__link) {
		font-weight: normal;
	}

	.gallery-body {
		font-size: 18px;
		line-height: 1.65;
	}

	.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: var(--gallery-label-inset);
		inset-inline-start: 0;
		max-inline-size: calc(100% - var(--gallery-label-inset));
		margin: 0;
		padding: 2px 10px;
		border-start-end-radius: 0.25rem;
		border-end-end-radius: 0.25rem;
		background: var(--site-label);
		color: var(--site-ink);
		box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
		font-size: var(--site-title-size);
		line-height: 1.15;
	}

	@media (orientation: portrait) {
		.gallery-hero .gallery-title {
			inset-block: auto var(--gallery-label-inset);
		}
	}

	.gallery-card__title {
		padding: 2px 8px;
		background: var(--site-label);
		color: var(--site-ink);
		font-size: 16px;
	}

	.gallery-card__status {
		--gallery-status-tint: var(--site-gray-light);
		padding: 2px 8px;
		background: color-mix(in srgb, var(--gallery-status-tint) 92%, transparent);
		color: var(--site-ink);
		font-size: 16px;
	}

	[data-status="reserved" i] > .gallery-card__status {
		--gallery-status-tint: var(--site-red);
		color: var(--site-light-ink);
	}

	[data-status="available" i] > .gallery-card__status {
		--gallery-status-tint: var(--site-gray-mid);
		color: var(--site-light-ink);
	}

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

	.gallery-hero > .gallery-card__status {
		padding: 2px 10px;
		font-size: var(--site-title-size);
		line-height: 1.15;
	}

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

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

	.gallery-card--markdown {
		padding: 1.5rem max(1.25rem, calc((100% - 60rem) / 2));
	}

	.gallery-card--markdown p {
		margin-block: 0.75rem;
	}

	.gallery-description h2 {
		margin-block: 6px;
		color: var(--gallery-accent);
		font-size: var(--site-heading-size);
		line-height: 1.2;
		text-align: center;
	}

	.gallery-card--markdown h2 {
		margin-block: 6px;
		color: var(--gallery-accent);
		font-size: var(--site-heading-size);
		line-height: 1.2;
		text-align: center;
	}

	.gallery-card--markdown h3 {
		margin-block: 6px;
		font-size: var(--site-subheading-size);
		line-height: 1.2;
		text-align: center;
	}

	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-hero .gallery-hero__image {
		block-size: min(45svh, 28rem);
		object-fit: cover;
		object-position: center 60%;
	}

	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-description {
		padding-block: 1rem 0;
	}

	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid > :not(.gallery-card--gallery),
	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid > [data-gallery-id="Photos"] {
		grid-column: 1 / -1;
	}

	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid > .gallery-card--picture:not(.gallery-card--gallery),
	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid > [data-gallery-id="Photos"] {
		justify-self: center;
		inline-size: min(100%, 60rem);
	}

	.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid > [data-gallery-id="Photos"] .gallery-card__image {
		aspect-ratio: 16 / 7;
	}

	.offer-md {
		padding-block: 0.25rem 1.25rem;
		text-align: center;
	}

	.offer-md p {
		max-inline-size: 44rem;
		margin-inline: auto;
		text-align: center;
	}

	.offer-md a {
		display: inline-block;
		padding: 6px 14px;
		border-radius: 0.25rem;
		background: var(--site-button);
		color: var(--site-button-ink);
		font-size: 16px;
		line-height: 1.3;
		text-decoration: none;
	}

	.offer-md a:hover {
		background: var(--site-button-hover);
		color: var(--site-button-hover-ink);
	}

	.offer-md a:focus-visible {
		outline: 3px solid var(--gallery-accent);
		outline-offset: 3px;
	}

	.included-md {
		background: var(--site-band);
	}

	.included-md ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 2rem;
		max-inline-size: 46rem;
		margin: 1rem auto 0;
		padding-inline-start: 1.25rem;
	}

	@media (max-width: 40rem) {
		.gallery[data-gallery-name="mysphynx.ca"] > .gallery-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.included-md ul {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.gallery-footer {
		padding-block: 2rem;
		background: var(--site-band);
		text-align: center;
	}

	.gallery-footer > p {
		max-inline-size: 44rem;
		margin: 0 auto 0.75rem;
	}

	.gallery-footer .footer-whatsapp {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.625rem;
		max-inline-size: 100%;
		min-block-size: 44px;
		padding: 10px 16px;
		border-radius: 0.25rem;
		background: var(--site-button);
		color: var(--site-button-ink);
		line-height: 1.35;
		text-decoration: none;
	}

	.footer-whatsapp svg,
	.footer-social svg {
		display: block;
		flex-shrink: 0;
		inline-size: 24px;
		block-size: 24px;
	}

	.gallery-footer .footer-social {
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		margin-block: 1.25rem 0;
	}

	.footer-social a {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 44px;
		min-block-size: 44px;
		border-radius: 0.25rem;
		text-decoration: none;
	}

	.footer-social .footer-social__association {
		inline-size: auto;
		min-inline-size: 44px;
		padding-inline: 0.5rem;
	}

	.footer-social__association svg {
		inline-size: 40px;
	}

	.footer-social a:hover {
		background: rgb(0 0 0 / 7%);
	}

	.gallery-footer .footer-whatsapp:hover {
		background: var(--site-button-hover);
		color: var(--site-button-hover-ink);
	}

	.footer-social a:focus-visible,
	.footer-whatsapp:focus-visible {
		outline: 3px solid var(--gallery-accent);
		outline-offset: 3px;
	}

	.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;
	}

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

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