/* ==========================================================================
   Vivanno → eshop-kvetinace, landing page
   Jeden soubor, žádný build. Barvy a typografie jsou převzaté z produkčního
   webu eshop-kvetinace, ať na sebe obě stránky vizuálně navazují.
   ========================================================================== */

/* Font hostujeme sami. Google Fonts CDN je v EU kvůli předávání IP adres
   problematické a navíc přidává další DNS a TLS handshake. */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('fonts/open-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('fonts/open-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer reset, base, layout, components;

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	body, h1, h2, p, figure, hr { margin: 0; padding: 0; }
	img, svg { display: block; max-width: 100%; }
	hr { border: none; }
	a { color: inherit; text-decoration: none; }
}

@layer base {
	:root {
		/* paleta odečtená z eshop-kvetinace.cz */
		--green: #3f7b31;
		--green-dark: #0b3b00;
		--clay: #a48c72;
		--surface: #faf8f6;
		--ink: #1f1f1f;
		--ink-soft: #4a4d44;
		--ink-faint: #6f7268;
		--rule: #e6e1d9;
		--radius: 10px;

		/* Přechod fotky do zelené plochy. Devět zastávek místo tří: přes světlá
		   místa fotky by méně kroků udělalo viditelný pruh.
		   Jemnější či výraznější variantu stačí vyměnit tady. */
		--hero-fade: linear-gradient(to right,
			var(--green-dark) 0%,
			rgb(11 59 0 / .94) 7%,
			rgb(11 59 0 / .82) 14%,
			rgb(11 59 0 / .63) 22%,
			rgb(11 59 0 / .42) 31%,
			rgb(11 59 0 / .24) 41%,
			rgb(11 59 0 / .11) 52%,
			rgb(11 59 0 / .03) 62%,
			rgb(11 59 0 / 0) 72%);
		--hero-fade-mobile: linear-gradient(to bottom,
			rgb(11 59 0 / 0) 0%,
			rgb(11 59 0 / .04) 34%,
			rgb(11 59 0 / .14) 50%,
			rgb(11 59 0 / .34) 65%,
			rgb(11 59 0 / .62) 78%,
			rgb(11 59 0 / .86) 90%,
			var(--green-dark) 100%);

		--gutter: clamp(20px, 5vw, 64px);
	}

	body {
		background: var(--surface);
		color: var(--ink);
		font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
		font-size: 16px;
		line-height: 1.45;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	:focus-visible {
		outline: 2px solid var(--green);
		outline-offset: 3px;
	}

	.skip {
		position: absolute;
		left: -9999px;
		top: 0;
		z-index: 10;
		background: #fff;
		color: var(--green-dark);
		padding: 12px 20px;
		font-weight: 600;
		border-radius: 0 0 var(--radius) 0;
	}
	.skip:focus { left: 0; }
}

@layer layout {
	.bar {
		background: #fff;
		border-bottom: 1px solid #ece7df;
		padding: clamp(13px, 1.9vw, 19px) var(--gutter);
	}

	.hero {
		position: relative;
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		align-items: stretch;
		background: var(--green-dark);
		color: #fff;
		overflow: hidden;
	}

	.hero__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: clamp(16px, 2.4vw, 26px);
		padding: clamp(30px, 5vw, 68px) clamp(20px, 4vw, 56px);
	}

	.hero__img {
		position: relative;
		min-height: clamp(230px, 31vw, 420px);
	}
	.hero__img img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.hero__img::after {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--hero-fade);
	}

	.body {
		display: flex;
		flex-direction: column;
		gap: clamp(26px, 4vw, 46px);
		padding: clamp(26px, 4vw, 52px) var(--gutter) clamp(24px, 3.5vw, 44px);
	}

	.info {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(16px, 3vw, 44px);
		max-width: 760px;
	}
	.info > div {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	@media (max-width: 720px) {
		.hero { grid-template-columns: 1fr; }
		.hero__img {
			min-height: 210px;
			order: -1;
		}
		.hero__img::after { background: var(--hero-fade-mobile); }
	}

	@media (max-width: 560px) {
		.info {
			grid-template-columns: 1fr;
			gap: 18px;
		}
	}
}

@layer components {
	/* přechodové logo: Vivanno → eshop-kvetinace */
	.lockup {
		display: flex;
		align-items: center;
		gap: clamp(12px, 2.2vw, 20px);
	}
	.lockup__viv { color: var(--ink); }
	.lockup__viv svg {
		height: clamp(17px, 2.3vw, 22px);
		width: auto;
	}
	/* logo Vivanna nemá v SVG vlastní fill, obarvíme ho přes currentColor */
	.lockup__viv svg path { fill: currentColor; }
	/* Chevron bez těla, tenký tah se zaoblenými konci: stejný tvar,
	   jaký používá eshop-kvetinace na navigačních prvcích. */
	.lockup__arr {
		flex: none;
		color: var(--clay);
	}
	.lockup__arr svg {
		height: clamp(17px, 2.3vw, 22px);
		width: auto;
	}
	.lockup__ek svg {
		height: clamp(23px, 3.3vw, 33px);
		width: auto;
	}

	.hero__eyebrow {
		font-size: clamp(10px, 1.2vw, 12px);
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: #a9c79e;
	}

	h1 {
		font-size: clamp(25px, 4.6vw, 48px);
		font-weight: 700;
		line-height: 1.12;
		letter-spacing: -.02em;
		text-wrap: balance;
		color: #fff;
	}
	/* doména se nikdy nesmí zalomit uprostřed */
	h1 em {
		font-style: normal;
		color: #a9c79e;
		white-space: nowrap;
	}

	.hero__lede {
		font-size: clamp(14px, 1.75vw, 17px);
		color: #cfdcc9;
		max-width: 40ch;
	}

	/* pozor: `a { color: inherit }` v resetu má stejnou specificitu jako `.cta`,
	   proto je selektor typový, aby tlačítko nepřišlo o barvu textu */
	a.cta {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 11px;
		background: #fff;
		color: var(--green-dark);
		font-size: clamp(15px, 1.7vw, 17px);
		font-weight: 600;
		padding: 14px 30px;
		border-radius: var(--radius);
		transition: background .3s ease-out, color .3s ease-out;
	}
	a.cta:hover,
	a.cta:focus-visible {
		background: var(--clay);
		color: #fff;
	}
	a.cta svg {
		height: 15px;
		width: auto;
		flex: none;
	}

	.info h2 {
		font-size: clamp(10px, 1.2vw, 11.5px);
		font-weight: 700;
		letter-spacing: .13em;
		text-transform: uppercase;
		color: var(--clay);
	}
	.info p {
		font-size: clamp(12.5px, 1.5vw, 15px);
		color: var(--ink-soft);
	}
	a.link {
		color: var(--green);
		font-weight: 600;
	}
	a.link:hover { text-decoration: underline; }

	.strip {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	.strip__label {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--clay);
	}
	.strip__grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 10px;
	}

	.tile {
		position: relative;
		display: block;
		aspect-ratio: 3 / 4;
		border-radius: var(--radius);
		overflow: hidden;
		background: #e8e4de;
	}
	.tile img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .5s ease-out;
	}
	.tile:hover img,
	.tile:focus-visible img { transform: scale(1.05); }
	.tile__label {
		position: absolute;
		inset: auto 0 0 0;
		padding: 30px 12px 10px;
		background: linear-gradient(to top,
			rgb(10 22 5 / .78),
			rgb(10 22 5 / .28) 42%,
			rgb(10 22 5 / 0));
		color: #fff;
		font-size: clamp(11px, 1.25vw, 13px);
		font-weight: 600;
		line-height: 1.25;
		text-shadow: 0 1px 3px rgb(10 22 5 / .5);
	}

	/* Šest portrétových dlaždic pod sebou by na mobilu znamenalo metr scrollování,
	   proto se pás překlopí do vodorovného posuvu se zarážkami. */
	@media (max-width: 720px) {
		.strip__grid {
			display: flex;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			gap: 10px;
			padding-bottom: 6px;
			scrollbar-width: thin;
			-webkit-overflow-scrolling: touch;
		}
		.tile {
			flex: 0 0 44%;
			scroll-snap-align: start;
		}
	}

	hr {
		height: 1px;
		background: var(--rule);
	}

	.foot {
		font-size: clamp(11px, 1.25vw, 12.5px);
		color: var(--ink-faint);
		line-height: 1.7;
	}
	.foot strong {
		font-weight: 600;
		color: var(--ink-soft);
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}