/*
Theme Name: Tomaštíková
Author: Roman Hittl
Description: Vlastní šablona pro fotografku Pavlu Tomaštíkovou. Černobílá reportáž, akce, rodiny, svatby, školy. Bez builderu, galerie a lightbox jsou součástí šablony.
Version: 0.1.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tomastikova
Tags: photography, portfolio, custom-colors, block-patterns
*/

/* =====================================================================
   NÁVRHOVÝ ZÁMĚR

   Web je bílá galerijní stěna. Plocha nemá žádný odstín, takže jediný
   tón na stránce mají fotografie — a to je celý smysl.

   Struktura tedy nemůže stát na barvě plochy a stojí na dvou věcech:
   na vlasové lince mezi sekcemi, která značí hranici bloku, a na spáře
   kontaktního listu, ze které je jediná viditelná mřížka.

   Nadpis jde pod fotkou jako popiska, ne přes ni: přes fotku se text
   nepíše, protože ji to znehodnotí.

   Rozhraní zůstává v šedé škále, protože všechno barevné by
   černobílým fotkám konkurovalo. Jediná barva je kyanotypová modř,
   a jen na odkazy a fokus.

   Tmavý režim web nemá, a je to rozhodnutí, ne opomenutí. Bílá stěna
   je celý návrh; v tmavém režimu by z něj zbyly jen fotky na černé
   a to je jiný web. Zavázání se deklaruje `color-scheme: light`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Písmo
   Soubory patří do theme/tomastikova/fonts/. Když tam nejsou,
   použije se systémový zásobník a web funguje dál.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * Písma
 * ---------------------------------------------------------------------
 * Hostují se u nás, ne z Google Fonts. Důvod je dvojí: cizí požadavek
 * zdržuje první vykreslení a posílá IP adresu návštěvníka do USA, což
 * je u českého webu problém z pohledu GDPR.
 *
 * Každá rodina má DVA soubory, a to je tady podstatné. Podmnožina
 * `latin` neobsahuje ani jeden český znak s diakritikou — ě, š, č, ř,
 * ž ani ů. Ty jsou v `latin-ext`. Kdyby se nahrál jen `latin`,
 * propadaly by písmena s háčky a kroužky uprostřed slova na systémové
 * písmo a text by vypadal rozsypaně.
 *
 * Archivo je bez osy šířky schválně. S ní vážila 172 kB, bez ní 66 kB,
 * a `font-stretch: 92 %` se používal na dvou místech. Sto kilobajtů na
 * fotowebu soutěží s první fotografií, takže zúžení nahrazuje
 * negativní prostrkání, které nic nestojí.
 *
 * Kurzíva Newsreaderu tady zatím není: vážila 97 kB a používal ji jen
 * blockquote, který nemá obsah, dokud nejsou reference. Postup, jak ji
 * doplnit, je ve fonts/README.md.
 * ------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	src: url('fonts/archivo-latin.woff2') format('woff2-variations');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	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: 'Archivo';
	src: url('fonts/archivo-latin-ext.woff2') format('woff2-variations');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	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;
}

@font-face {
	font-family: 'Newsreader';
	src: url('fonts/newsreader-latin.woff2') format('woff2-variations');
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
	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: 'Newsreader';
	src: url('fonts/newsreader-latin-ext.woff2') format('woff2-variations');
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
	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;
}

/* ---------------------------------------------------------------------
   2. Hodnoty
   --------------------------------------------------------------------- */

:root {
	/* Šedá škála se studeným, selenově tónovaným černým, ne teplým.
	   Pasparta i podklad jsou bílé, takže plocha nemá žádný odstín
	   a jediný tón na stránce mají fotografie. */
	--papir: #ffffff;
	/* Podklad je bílý na Pavlino přání: chtěla bílé portfolio.
	   Pasparta se tím stává pojmovou, ne viditelnou — místo tisku na
	   kartonu je to tisk na bílé stěně. Strukturu drží linka mezi
	   sekcemi a spára kontaktního listu, ne odstín plochy. */
	--podklad: #ffffff;
	--inkoust: #14171a;
	--seda: #5c6369;
	/* Ověřeno výpočtem WCAG: #8d9399 dávalo na paspartě jen 3,10
	   a propadalo AA. Používá ho .drobne, tedy autorská a právní
	   řádka v patičce — tam je čitelnost povinná, ne volitelná.
	   #696e73 dává 5,15 na paspartě a 4,58 na podkladu. */
	--seda-svetla: #696e73;
	--linka: #d9dad6;

	/* Jediná barva na webu. Kyanotypová modř — fotografický proces,
	   studená, nekonkuruje černobílé fotografii. */
	--modr: #1f4066;

	/* Písmo */
	--pismo-nadpis: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--pismo-text: 'Newsreader', Georgia, 'Times New Roman', serif;

	/* Typografická škála, kvarta 1,333 od základu 17 px.
	   clamp() drží nadpisy čitelné na mobilu i na velké obrazovce. */
	--t-drobne: 0.8125rem;
	--t-mensi: 0.9375rem;
	--t-text: 1.0625rem;
	--t-uvod: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
	--t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--t-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem);
	--t-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);

	/* Rozestupy */
	--m-1: 0.5rem;
	--m-2: 1rem;
	--m-3: 1.75rem;
	--m-4: 3rem;
	--m-5: 5rem;

	/* Šířky. Text má mít měřítko pod 80 znaků. */
	--sirka-textu: 62ch;
	--sirka-obsahu: 78rem;
	--sirka-siroka: 100rem;

	--pasparta: clamp(0.75rem, 2vw, 2rem);

	/* Web se zavazuje k jedinému vizuálnímu světu a tmavý režim
	   nemá. Není to vynechání: černobílá fotografie na bílém
	   papíru JE ten návrh, a obrácená do skoro černé ztrácí
	   čtení „tisk na stěně", na kterém celý web stojí. Galerie
	   nepřemalovává stěny podle toho, že návštěvník má rád tmavé
	   pokoje.

	   Deklaruje se to schválně, aby prohlížeč neinvertoval
	   ovládací prvky, rolovací lišty a políčka formuláře sám. */
	color-scheme: light;
}

/* ---------------------------------------------------------------------
   3. Základ
   --------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--podklad);
	color: var(--inkoust);
	font-family: var(--pismo-text);
	font-size: var(--t-text);
	line-height: 1.65;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
   4. Typografie
   --------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--pismo-nadpis);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--m-2);
	text-wrap: balance;
}

h1 {
	font-size: var(--t-h1);
	/* Bez osy šířky (viz @font-face). Zúžení nahrazuje prostrkání —
	   u velkého grotesku dělá stejnou práci a nic neváží. */
	letter-spacing: -0.038em;
	line-height: 1.02;
	text-wrap: balance;
}

h2 {
	font-size: var(--t-h2);
	letter-spacing: -0.026em;
}

h3 {
	font-size: var(--t-h3);
	font-weight: 500;
}

p {
	margin: 0 0 var(--m-2);
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-color: var(--seda-svetla);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

a:hover {
	color: var(--modr);
	text-decoration-color: var(--modr);
}

:focus-visible {
	outline: 2px solid var(--modr);
	outline-offset: 3px;
	border-radius: 1px;
}

strong,
b {
	font-weight: 600;
}

blockquote {
	margin: var(--m-3) 0;
	padding-left: var(--m-3);
	/* Vzpřímeně, ne kurzívou. Kurzíva Newsreaderu se nehostuje
	   (viz @font-face) a syntetický sklon serifu vypadá špatně.
	   V fotografické knize se citace stejně sází vzpřímeně. */
	border-left: 2px solid var(--modr);
	font-size: var(--t-uvod);
	line-height: 1.5;
	color: var(--inkoust);
}

/* Text v příspěvcích a na stránkách drží čitelné měřítko */
.text {
	max-width: var(--sirka-textu);
}

.text > * + h2 {
	margin-top: var(--m-4);
}

.text > * + h3 {
	margin-top: var(--m-3);
}

.text ul,
.text ol {
	margin: 0 0 var(--m-2);
	padding-left: 1.35em;
}

.text li + li {
	margin-top: 0.35em;
}

/* ---------------------------------------------------------------------
   5. Obaly
   --------------------------------------------------------------------- */

.obal {
	width: 100%;
	max-width: var(--sirka-obsahu);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.obal--siroky {
	max-width: var(--sirka-siroka);
}

.sekce {
	padding-block: var(--m-5);
}

.sekce--tesna {
	padding-block: var(--m-4);
}

/* Oddělovač nese informaci o hranici bloku, nezdobí */
.sekce + .sekce {
	border-top: 1px solid var(--linka);
}

/* ---------------------------------------------------------------------
   6. Hlavička
   --------------------------------------------------------------------- */

.hlavicka {
	padding-block: var(--m-2);
	border-bottom: 1px solid var(--linka);
	background: var(--podklad);
}

.hlavicka__obal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--m-2) var(--m-3);
}

.znacka {
	font-family: var(--pismo-nadpis);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.026em;
	text-decoration: none;
}

.znacka:hover {
	color: var(--modr);
}

.hlavni-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-2) var(--m-3);
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
}

.hlavni-nav a {
	text-decoration: none;
	color: var(--seda);
}

.hlavni-nav a:hover {
	color: var(--inkoust);
}

.hlavni-nav a[aria-current='page'] {
	color: var(--inkoust);
	text-decoration: underline;
	text-decoration-color: var(--inkoust);
}

/* ---------------------------------------------------------------------
   7. Úvodní fotka
   Fotka je edge-to-edge a text jde POD ni jako popiska. Přes fotku
   se nepíše — a navíc je to LCP prvek, takže žádné překrytí ani
   načítání z CSS.
   --------------------------------------------------------------------- */

.uvod {
	padding-top: var(--m-3);
}

/* Na telefonu jeden sloupec: nadpis, pak fotka. Od 62 rem vedle sebe,
   text vlevo v úzkém sloupci a fotka vpravo — svislý snímek se tím
   sám omezí na rozumnou šířku a nesnaží se zabrat celou obrazovku. */
.uvod__mrizka {
	display: grid;
	gap: var(--m-3);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.uvod__mrizka {
		grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
		gap: var(--m-5);
		align-items: end;
	}
}

.uvod__snimek {
	background: var(--papir);
	padding: var(--pasparta);
	margin-bottom: var(--m-3);
}

/* Hlavní fotka se nijak neořezává a nemá vnucený poměr stran.
   Dřív tady bylo `aspect-ratio: 3/2` s `cover`, což ze svislé
   fotografie udělalo vodorovný pruh — a protože se ořezával už sám
   soubor, ořez byl dokonce dvojí. Na webu, který prodává autorský
   pohled, je to zásah do díla. Fotka se ukáže tak, jak byla
   vykomponovaná, a výšku určuje ona. */
.uvod__snimek img {
	display: block;

	/* Strop je ve VÝŠCE, ne v šířce, a to je celý trik.

	   Fotka neměla strop žádný, takže si výšku určovala šířkou
	   sloupce: na širokém monitoru měl sloupec okolo 62 rem a svislý
	   snímek 3:4 v něm vyšel 82 rem vysoký, tedy vyšší než jakákoli
	   obrazovka. Text pod ním nikdo neuviděl. Kdyby se omezila šířka,
	   dopadla by stejná hodnota na svislou i vodorovnou fotku — a
	   problém má jen svislá.

	   Šířku si dopočítá poměr stran sám, takže se pořád nic
	   neořezává. Dvojitý strop je schválně: `vh` drží fotku na jedné
	   obrazovce notebooku, `rem` ji nenechá narůst na 4K monitoru,
	   kde by 76 vh bylo přes tisíc pixelů.

	   `width: auto` navíc znamená, že se malá fotka nikdy nenatáhne
	   nad své rozlišení. */
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(76vh, 40rem);

	/* Svislá fotka je po zastropování užší než sloupec. Papír, který
	   zbude, se rozdělí na obě strany — na bílé ploše ho nikdo
	   neuvidí, ale fotka nezůstane přisátá k okraji. */
	margin-inline: auto;
}

.uvod__popiska {
	max-width: var(--sirka-textu);
}

.uvod__jmeno {
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
	font-weight: 500;
	color: var(--seda);
	margin: 0 0 var(--m-1);
}

.uvod__popiska h1 {
	margin-bottom: var(--m-2);
}

.uvod__misto {
	color: var(--seda);
	font-size: var(--t-mensi);
	margin: 0;
}

/* ---------------------------------------------------------------------
   8. Služby — seznam, ne karty
   Struktura služba/cena je informace, proto seznam se cenou vpravo,
   ne mřížka stejných dlaždic.
   --------------------------------------------------------------------- */

.sluzby {
	margin: 0;
	border-top: 1px solid var(--linka);
}

.sluzba {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--m-1) var(--m-3);
	padding-block: var(--m-2);
	border-bottom: 1px solid var(--linka);
	text-decoration: none;
}

.sluzba:hover .sluzba__nazev {
	color: var(--modr);
}

.sluzba__nazev {
	font-family: var(--pismo-nadpis);
	font-size: var(--t-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
	transition: color 0.15s ease;
}

.sluzba__cena {
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
	color: var(--seda);
	white-space: nowrap;
}

.sluzba__popis {
	grid-column: 1 / -1;
	max-width: 54ch;
	margin: 0;
	color: var(--seda);
	font-size: var(--t-mensi);
}

/* ---------------------------------------------------------------------
   9. Tlačítko
   Jedno na stránku, plnou barvou inkoustu.
   --------------------------------------------------------------------- */

.tlacitko {
	display: inline-block;
	padding: 0.7em 1.5em;
	background: var(--inkoust);
	color: var(--podklad);
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--inkoust);
	transition: background 0.15s ease, color 0.15s ease;
}

.tlacitko:hover {
	background: var(--modr);
	border-color: var(--modr);
	color: #fff;
}

.tlacitko--tichy {
	background: transparent;
	color: var(--inkoust);
}

.tlacitko--tichy:hover {
	background: var(--inkoust);
	color: var(--podklad);
	border-color: var(--inkoust);
}

/* ---------------------------------------------------------------------
   10. Popis služby — asymetrické dva sloupce
   --------------------------------------------------------------------- */

.sluzba-detail {
	display: grid;
	gap: var(--m-4);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.sluzba-detail {
		grid-template-columns: minmax(0, 62ch) minmax(16rem, 22rem);
		gap: var(--m-5);
	}
}

/* Co je v ceně — definiční seznam, ne dlaždice */
.vycet {
	margin: 0;
	font-size: var(--t-mensi);
}

.vycet dt {
	font-family: var(--pismo-nadpis);
	font-weight: 500;
	padding-top: var(--m-2);
	border-top: 1px solid var(--linka);
}

.vycet dd {
	margin: 0.15em 0 0;
	color: var(--seda);
}

/* ---------------------------------------------------------------------
   11. Patička
   --------------------------------------------------------------------- */

.paticka {
	padding-block: var(--m-4) var(--m-3);
	border-top: 1px solid var(--linka);
	font-size: var(--t-mensi);
}

.paticka__sloupce {
	display: grid;
	gap: var(--m-3);
	grid-template-columns: 1fr;
	margin-bottom: var(--m-4);
}

@media (min-width: 46rem) {
	.paticka__sloupce {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--m-4);
	}
}

.paticka h2 {
	font-size: var(--t-mensi);
	font-weight: 600;
	margin-bottom: var(--m-1);
}

.paticka p {
	color: var(--seda);
	margin-bottom: var(--m-1);
}

.paticka__mapa {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-1) var(--m-3);
	padding-top: var(--m-2);
	border-top: 1px solid var(--linka);
	font-family: var(--pismo-nadpis);
}

.paticka__mapa a {
	color: var(--seda);
	text-decoration: none;
}

.paticka__mapa a:hover {
	color: var(--inkoust);
}

.drobne {
	margin: var(--m-3) 0 0;
	color: var(--seda-svetla);
	font-size: var(--t-drobne);
}

/* ---------------------------------------------------------------------
   12. Formulář
   --------------------------------------------------------------------- */

label {
	display: block;
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
	font-weight: 500;
	margin-bottom: 0.3em;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
input[type='search'],
select,
textarea {
	width: 100%;
	padding: 0.6em 0.75em;
	background: var(--papir);
	color: var(--inkoust);
	border: 1px solid var(--linka);
	border-radius: 0;
	font-family: var(--pismo-text);
	font-size: var(--t-text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--modr);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

/* ---------------------------------------------------------------------
   13. Přeskočení na obsah
   --------------------------------------------------------------------- */

.preskocit {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.6em 1em;
	background: var(--inkoust);
	color: var(--podklad);
	text-decoration: none;
}

.preskocit:focus {
	left: 0;
}

/* ---------------------------------------------------------------------
   14. Bloky WordPressu — sladění s vzhledem webu
   --------------------------------------------------------------------- */

.wp-block-image {
	margin-block: var(--m-3);
}

.wp-block-image img {
	background: var(--papir);
	padding: var(--pasparta);
}

.wp-block-table {
	overflow-x: auto;
	font-size: var(--t-mensi);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.55em 0.8em;
	border-bottom: 1px solid var(--linka);
	text-align: left;
}

.wp-block-table th {
	font-family: var(--pismo-nadpis);
	font-weight: 500;
}

.wp-block-details {
	padding-block: var(--m-2);
	border-bottom: 1px solid var(--linka);
}

.wp-block-details summary {
	font-family: var(--pismo-nadpis);
	font-weight: 500;
	cursor: pointer;
}

.wp-block-details summary:hover {
	color: var(--modr);
}

/* Podpis autora webu. Vizuálně tišší než copyright fotografky —
   je to servisní informace, ne součást její prezentace. */
/* Bez `opacity`. S průhledností 0,62 měla tahle řádka kontrast 1,91
   a byla to nejmíň čitelná věc na celém webu — přidal jsem ji, abych
   podpis „vizuálně ztišil“, a udělal jsem ho nepřečtitelným.
   Žádná barva to neopraví: i s nejtmavší šedou se s tou průhledností
   dostane jen na 2,70. Ztišení dělá barva a velikost, ne průhlednost. */
.paticka__podpis {
	margin-top: .35rem;
}

.paticka__podpis a {
	color: inherit;
}

/* ---------------------------------------------------------------------
   Telefon a dotyk

   Šablona jinak stojí na fluidním layoutu (`clamp`, `auto-fill
   minmax`), takže pevných zlomů je schválně málo. Tady jsou jen věci,
   které fluidně vyřešit nejde.

   Přepínač nabídky tady záměrně NENÍ. Pro pět až šest položek se
   zalomení na dva řádky chová lépe než skládací nabídka — všechno je
   vidět, nic se neschovává za kliknutí a nepotřebuje to JavaScript.
   --------------------------------------------------------------------- */

/* Dotykové cíle se řídí ukazovadlem, ne šířkou okna: tablet v portrétu
   je široký a přesto se na něj klikne prstem. Odkaz v nabídce byl holý
   text o výšce řádku, asi 20 px, a do toho se prstem trefuje špatně. */
@media (pointer: coarse) {
	.hlavni-nav a,
	.tlacitko {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
	}

	/* Snímek v listu je tlačítko, které otevírá lightbox. Rám sám je
	   dost velký, ale ať je jasné, že se na něj kliká. */
	.list__snimek {
		touch-action: manipulation;
	}
}

@media (max-width: 46rem) {
	/* Na telefonu jméno na svůj řádek a nabídka pod něj, zleva.
	   `space-between` z výchozího rozvržení by při dvou řádcích
	   roztrhalo položky ke krajům a vypadalo by to jako chyba sazby. */
	.hlavicka__obal {
		flex-direction: column;
		align-items: stretch;
		gap: var(--m-1);
	}

	.hlavni-nav {
		gap: 0 var(--m-3);
	}

	/* Na telefonu je pět rem prázdna mezi sekcemi ztracená obrazovka,
	   ne vzduch. O stupeň dolů. */
	.sekce {
		padding-block: var(--m-4);
	}
}

/* Dlouhé slovo nesmí roztáhnout stránku do strany. „Valašskomeziříčsko"
   nebo dlouhá adresa v textu to dokáže, a na telefonu se pak roluje
   celá stránka doprava. */
body {
	overflow-wrap: break-word;
}

/* Odkaz z úvodu do nabídky. Není to tlačítko schválně — plné tlačítko
   je na stránce jedno, dole u výzvy ke kontaktu. Tohle jen ukazuje
   cestu, takže stačí odkaz se šipkou dolů v podtržení. */
.uvod__do-nabidky {
	margin: var(--m-3) 0 0;
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
}

.uvod__do-nabidky a {
	color: var(--modr);
	text-decoration-color: var(--modr);
	text-underline-offset: 0.3em;
}

/* Dodací lhůta a storno pod seznamem služeb. Šedě a drobně, protože
   je to doplněk k seznamu, ne nadpis — ale prózou, ne jako štítky. */
.sluzby__zaruky {
	margin: var(--m-2) 0 0;
	max-width: 54ch;
	color: var(--seda);
	font-size: var(--t-mensi);
}