/* =========================================================
   HardStudio – Foto koláž
   Čtvercová mřížka, fotky vedle sebe, bez překryvu
   ---------------------------------------------------------
   Blok je čtverec (poměr se dá přenastavit), fotky ho vyplní
   beze zbytku, mezi nimi je jednotná mezera. Výška se počítá
   z reálné šířky sloupce přes aspect-ratio, takže widget
   vždycky zabere přesně tolik místa, kolik potřebuje.
   ========================================================= */

.hs-collage-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.hs-collage {
	--hs-gap: 5px;      /* mezera mezi fotkami */
	--hs-radius: 10px;  /* zaoblení rohů fotek */
	--hs-ar: 1;         /* poměr výška/šířka – 1 = čtverec */
	--hs-main: 120fr;   /* velikost hlavní fotky u 3fotkových variant (proti 100fr) */
	--hs-mx: 1;

	display: grid;
	gap: var(--hs-gap);
	width: 100%;
	min-width: 0;
	aspect-ratio: 1 / var(--hs-ar);
	transform: scaleX(var(--hs-mx));
}

.hs-collage--flip {
	--hs-mx: -1;
}

/* ---------- jedna fotka ---------- */

.hs-collage__item {
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--hs-radius);
}

.hs-collage__link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.hs-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transform: scaleX(var(--hs-mx));
	transition: transform 0.5s ease;
}

/* =========================================================
   VARIANTA 1 – 2 fotky vedle sebe (svislé dělení)
   ┌─────┬─────┐
   │  1  │  2  │
   └─────┴─────┘
   ========================================================= */

.hs-collage--v1 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

/* =========================================================
   VARIANTA 2 – 2 fotky nad sebou (vodorovné dělení)
   ┌───────────┐
   │     1     │
   ├───────────┤
   │     2     │
   └───────────┘
   ========================================================= */

.hs-collage--v2 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
}

/* =========================================================
   VARIANTA 3 – velká vlevo + dvě menší vpravo
   ┌───────┬─────┐
   │       │  2  │
   │   1   ├─────┤
   │       │  3  │
   └───────┴─────┘
   ========================================================= */

.hs-collage--v3 {
	grid-template-columns: var(--hs-main) 100fr;
	grid-template-rows: 1fr 1fr;
}

.hs-collage--v3 .hs-collage__item--1 {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.hs-collage--v3 .hs-collage__item--2 {
	grid-column: 2;
	grid-row: 1;
}

.hs-collage--v3 .hs-collage__item--3 {
	grid-column: 2;
	grid-row: 2;
}

/* =========================================================
   VARIANTA 4 – velká nahoře + dvě menší pod ní
   ┌───────────┐
   │     1     │
   ├─────┬─────┤
   │  2  │  3  │
   └─────┴─────┘
   ========================================================= */

.hs-collage--v4 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--hs-main) 100fr;
}

.hs-collage--v4 .hs-collage__item--1 {
	grid-column: 1 / span 2;
	grid-row: 1;
}

.hs-collage--v4 .hs-collage__item--2 {
	grid-column: 1;
	grid-row: 2;
}

.hs-collage--v4 .hs-collage__item--3 {
	grid-column: 2;
	grid-row: 2;
}

/* =========================================================
   Hover
   ========================================================= */

.hs-collage--hover-zoom .hs-collage__item:hover img {
	transform: scaleX(var(--hs-mx)) scale(1.06);
}

/* =========================================================
   Mobil – mřížka se škáluje sama, jen u tří fotek
   necháme hlavní fotku o něco větší, ať nejsou dlaždice drobné
   ========================================================= */

@media (max-width: 767px) {
	.hs-collage--v3,
	.hs-collage--v4 {
		--hs-main: 135fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-collage__item img {
		transition: none;
	}
}