/* index.html, the start page (the previous one is old.html, style.css only): no header bar, the title and the search box (with the "szczyty" switch and
   the sort) over a random panorama drifting slowly sideways, square tiles the whole width, the map behind the
   Mapa / Lista button. Loaded after style.css; every rule is html.start, as specific as style.css's html.main ones,
   so these win by coming later (also over style.css's media queries). */

/* ---- map behind the button, tiles the whole width ---- */
html.start #grid-container {
	grid-template-columns:1fr;
}
html.start #grid-container.view-list #map,
html.start #grid-container.view-map #panolist {
	display:none;
}
html.start #view-toggle {
	display:block;
}

/* ---- the list: square tiles (thumb900 cut to a square); room under the last row for the Mapa button ---- */
html.start #panolist {
	grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
	grid-auto-rows:auto;
	align-content:start;
	gap:4px;
	padding:4px 4px 70px;
	background:var(--giga-surface);
	scroll-snap-type:none;
}
html.start #panolist > #noresults {
	grid-column:1 / -1;
}
html.start .onepano {
	position:relative;
	width:auto;
	cursor:pointer;
	background:#333;
	scroll-snap-align:none;
	transition:none;
}
html.start .onepano:hover {
	box-shadow:none;
}
/* the link clips the zoom on hover; overflow:hidden on the tile itself (a grid item) let the rows collapse */
html.start .onepano > a {
	display:block;
	overflow:hidden;
	color:#fff;
	text-decoration:none;
}
html.start .onepano img {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1;
	object-fit:cover;
	transition:transform .6s ease;
}
html.start .onepano:hover img {
	transform:scale(1.06);
}
/* shade under the title, so it reads on a bright sky or snow */
html.start .onepano > a::after {
	content:'';
	position:absolute;
	inset:45% 0 0 0;
	background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
	pointer-events:none;
}
html.start .onepano h2 {
	position:absolute;
	left:12px;
	right:12px;
	bottom:12px;
	z-index:1;
	margin:0;
	color:#fff;
	font:700 1.05rem/1.25 "Open Sans", sans-serif;
	text-shadow:0 0 8px rgba(0,0,0,.8);
	transition:color .3s;
}
html.start .onepano:hover h2 {
	color:var(--giga-accent);
}

/* ---- hero: title and search over a random panorama; a bar while searching or once the tiles are scrolled
   (html.hero-compact, set by index.js) ---- */
html.start #hero {
	flex:none;
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	height:clamp(240px, 46vh, 520px);
	padding:0 16px;
	overflow:hidden;
	background:var(--giga-surface);
	transition:height .35s ease;
}
html.start.hero-compact #hero {
	height:76px;
}
html.start #hero-image {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:0% 40%;
	animation:hero-drift 80s ease-in-out infinite alternate;
}
html.start #hero::before {
	content:'';
	position:absolute;
	inset:0;
	z-index:1;
	background:rgba(0,0,0,.28);
	pointer-events:none;
}
@keyframes hero-drift {
	to { object-position:100% 40%; }
}
@media (prefers-reduced-motion:reduce) {
	html.start #hero-image { animation:none; object-position:50% 40%; }
	html.start #hero { transition:none; }
}
html.start #hero h1 {
	position:relative;
	z-index:2;
	margin:0 0 6px;
	color:#fff;
	font:700 clamp(26px, 4.2vw, 52px)/1.1 "Open Sans", Arial, sans-serif;
	text-transform:uppercase;
	text-align:center;
	letter-spacing:.02em;
	text-shadow:0 0 24px rgba(0,0,0,.7), 0 0 4px rgba(0,0,0,.6);
}
html.start #hero-search {
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:12px;
	width:min(680px, 100%);
}
html.start #hero-search search {
	flex:1 1 auto;
	min-width:0;
}
html.start #hero #search {
	width:100%;
	box-sizing:border-box;
	padding:.85rem 1.4rem;
	border:0;
	border-radius:999px;
	font:400 1.15rem "Open Sans", Arial, Helvetica, sans-serif;
	box-shadow:0 4px 24px rgba(0,0,0,.35);
}
html.start #hero #search:focus-visible {
	outline:3px solid var(--giga-accent);
	outline-offset:2px;
}
html.start #hero #search-scope span {
	color:#fff;
	text-shadow:0 0 6px rgba(0,0,0,.8);
}
/* the sort select over the photo: a dark pill, it must read on snow */
html.start #hero #sort-box {
	color:#fff;
}
html.start #hero #switch-sort {
	background:rgba(0,0,0,.45);
	border-color:rgba(255,255,255,.55);
	color:#fff;
}
html.start #hero-caption {
	position:relative;
	z-index:2;
	color:#eee;
	font:400 .9rem "Open Sans", sans-serif;
	text-decoration:none;
	text-shadow:0 0 8px #000, 0 0 3px #000;
}
html.start #hero-caption:hover {
	color:var(--giga-accent);
}
html.start.hero-compact #hero-caption,
html.start.hero-compact #hero h1 {
	display:none;
}

@media (max-width:700px) {
	html.start #panolist {
		grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
	}
	html.start #hero {
		height:clamp(200px, 34vh, 320px);
	}
}
@media screen and (max-width:560px) {
	/* the box takes the whole row, the switch and the sort go under it */
	html.start #hero-search {
		flex-wrap:wrap;
		justify-content:center;
		row-gap:10px;
	}
	html.start #hero-search search {
		flex:1 1 100%;
	}
	html.start.hero-compact #hero {
		height:108px;
	}
}
@media screen and (max-width:480px) {
	html.start .onepano h2 {
		font-size:.95rem;
		left:9px;
		right:9px;
		bottom:9px;
	}
	html.start #hero #search {
		font-size:1rem;
		padding:.7rem 1.1rem;
	}
	/* the footer in one short row: panoramas and described points, "© 2017–2026 Zbooy" */
	html.start #footer {
		flex-wrap:nowrap;
		gap:12px;
		padding:9px 16px;
		font-size:12px;
		line-height:14px;
		white-space:nowrap;
	}
	html.start #footer > div {
		min-width:0;
	}
	html.start #footer #copyright {
		flex:none;
	}
	html.start #footer .footer-extra {
		display:none;
	}
}