/* ==========================================================================
   Kytky od potoka - Svatby
   "Galerie & reference" (F6, page-galerie.php) - per-page glue. Vetsina
   sekce je 1:1 z designu (pages.css/components.css - .gallery-masonry,
   .ref-slider/.ref-slide, .paths/.path-card...), tady jen jedna vec:
   masonry s realnymi fotkami (design pocital s CSS placeholdery na pevnem
   pomeru stran `gm-tall/gm-wide/gm-sq`, tady mistoho vykreslujeme skutecne
   svatebni fotky bez orezu, viz komentar nize).
   Nacita se JEN na teto strance, AZ ZA pages.css (viz inc/enqueue.php).
   ========================================================================== */

/*
 * Realna fotka urcuje vysku dlazdice v masonry - vedoma odchylka od navrhu.
 *
 * Design pouziva trojici trid `.gm-tall/.gm-wide/.gm-sq` (aspect-ratio
 * 3:4 / 4:3 / 1:1) a `.photo > img` z wp.css je na tyto tridy pripraveny -
 * `position:absolute; object-fit:cover`, tedy fotku orizne na pevny pomer.
 * Realne svatebni fotky (portrety kytic, detaily) na pevnem oriznuti casto
 * usekavaji podstatnou cast zaberu. CSS `columns` masonry navic vypada
 * prirozeneji prave s ruznymi vyskami dlazdic nez se třemi pevnymi pomery
 * dokola - proto tu na `.gallery-masonry` gm-* tridy vubec nepouzivame
 * (viz page-galerie.php) a vysku dlazdice necháváme určit samotným <img>.
 *
 * `.photo` (components.css) je `position:relative` bez vlastni vysky/aspect-
 * -ratio - v puvodnim stavu (absolutne pozicovany <img> z wp.css) by tedy
 * zustal 0px vysoky a fotka by zmizela. Tady <img> vratime do prirozeneho
 * toku (static/auto), cimz `.photo` dostane vysku z obsahu.
 */
.gallery-masonry .gallery-item .photo > img,
.gallery-masonry .gallery-item .photo > picture > img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: initial; /* prebiji jen umisteni/rozmery vyse - orez uz neni potreba, viz komentar */
}

/*
 * Slider referenci: fotka nesmi roztahnout grid slidu (oprava po realnem
 * overeni v prohlizeci, F6).
 *
 * `.ref-slide` je grid (components.css) - na uzkych sirkach jednosloupcovy
 * (`1fr`, media query 720px). Polozky gridu maji ve vychozim stavu
 * `min-width: auto`, takze je sloupec `1fr` nemuze zmensit pod jejich
 * min-content sirku. `.ref-slide__media .photo` ma zaroven `height: 100%`
 * a `aspect-ratio: 4 / 3`, cimz si sirku dopocitava Z VYSKY - a ta na
 * mobilu vychazi z natazeneho radku (vsechny slidy jsou vysoke jako
 * nejvyssi z nich). Vysledkem byl sloupec sirsi nez cely slide: fotka
 * i text citace byly oriznute pravym okrajem `.ref-slide{overflow:hidden}`.
 * Overeno i na statickem navrhu - chova se stejne, jen to na prazdnem
 * CSS placeholderu neni videt.
 *
 * `min-width: 0` vraci polozkam gridu moznost se zmensit; `width: 100%`
 * na fotce obraci smer vypoctu (vysku dopocita ze sirky, resp. ji prevezme
 * z radku), takze fotka presne vyplni svuj sloupec. Na desktopu je uprava
 * bez viditelneho efektu (overeno merenim pred/po na 1280 i 768 px).
 */
.ref-slider .ref-slide,
.ref-slider .ref-slide__media,
.ref-slider .ref-slide__body {
	min-width: 0;
}

.ref-slider .ref-slide__media .photo {
	width: 100%;
}