/* Normalise by Andy Bell <3 https://github.com/Andy-set-studio/modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding-left: 0;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	 scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Custom styles */
:root {
	--color-text: #303030;
	--color-bg: rgba(207 207 207 / 0.15);
	--color-bd: rgba(207 207 207 / 1);
	--primary: rgba(216 34 51 / 1);
	--primary-light: rgba(216 34 51 / 0.1);
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	display: flex;
	flex-direction: column;
	padding: var(--size-3);
	background-color: var(--color-bg);
	margin: 0;
	color: var(--color-text);
	font-family: Verdana, Geneva, sans-serif;
	font-size: clamp(1rem, 1.25vw, 1.25rem);
}

h1,
h2,
h3 {
	color: var(--primary);
}

h1 {
	margin-bottom: var(--size-5);
	text-transform: lowercase;
}

h2 {
	margin-bottom: var(--size-4);
}

h3:not(:first-child) {
	margin-top: var(--size-8);
}

h3,
p,
li {
	margin-bottom: var(--size-3);
}

h1 > strong {
	color: var(--color-text);
}

dl {
	margin-bottom: var(--size-8);
}

dt {
	font-weight: var(--font-weight-6);
}

header,
main,
footer {
	max-width: 79ch;
}

header {
	display: flex;
	flex-flow: wrap;
	justify-content: start;
	align-items: center;
	gap: 0 2rem;
}

header > a {
	display: flex;
	flex-flow: row-reverse;
	justify-content: start;
	align-items: center;
	gap: 2rem;
	text-decoration: none;
}

header img {
	width: min(150px, 30vw);
}

nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding-left: 0;
}

blockquote {
	font-style: italic;
}

a {
	color: inherit;
}

a > span {
	display: none;
}

a[href^="tel:"] {
	text-decoration: none;
	white-space: nowrap;
}

strong em {
	font-style: normal;
	color: var(--primary);
}

address {
	font-style: normal;
}

img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--stone-6);
	border-radius: var(--radius-2);
}

article {
	padding-block: var(--size-8);
	border-bottom: 1px dashed var(--color-bd);

	/* detail novinky */
	> header {
		display: flex;
		flex-direction: column-reverse;
		align-items: start;

		time {
			font-size: .88em;
		}
	}
}

/* upoutávka */
article > article {
	padding: var(--size-8) var(--size-8);
	background-color: var(--primary-light);
	border: 4px var(--primary) solid;
	border-radius: var(--radius-2);
	margin-bottom: var(--size-5);
}

/* galerie */

article:where([id="galerie"]):has(> a) {

	@media screen and (min-width: 360px) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: var(--size-2);
		margin-bottom: 0;

		h2 {
			grid-column: 1 / -1;
		}

		a:has(> img) {
			margin-bottom: 0;
		}
	}

	img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
		width: 100%;
	}
}

a:has(> img) {
	margin-bottom: var(--size-2);
}

.blueimp-gallery > .description {
	position: absolute;
	top: 30px;
	left: 15px;
	color: #fff;
	display: none;
}

.blueimp-gallery-controls > .description {
	display: block;
}

footer {
	margin-block: var(--size-5);
}

footer,
footer ul,
footer li {
	display: flex;
	align-items: center;
	gap: var(--size-3);
	font-size: 0.8em;
}

footer ul,
footer li {
	margin: 0;
}

footer ul {
	padding-left: var(--size-3);
	border-left: 1px solid currentColor;
}

footer li a {
	display: inherit;

	&:hover {
		color: var(--primary);
	}
}

/* link to the archive */
a[href="/index.alt.html"] {
	text-decoration: none;
	cursor: default;
}