/* =====================================================================
   HÄÄBÄNDI.FI ILME V5: PhotoSwipe-gallerian painikkeet (K28, 2.11.2026).
   Ladataan vain v5:n esiintyjäsivuilla, joilla on galleria: templates/artisti.php tulostaa tämän <link>in ja .pswp-pohjan,
   ja teeman footer.php PhotoSwipe-skriptit, kaikki saman ehdon pike_ilme_v5_galleria() (pike-ilme-v5.php) mukaan.
   Muilla sivuilla (myös galleriattomilla esiintyjäsivuilla) tätä ei ladata.
   Syy: teeman global.css sisältää PhotoSwipen perus- ja default-skin-tyylit (html body .pswp__button), mutta sen yleinen
   painikesääntö "body button:not(.nav-toggle):not(...)x4" (!important, tarkkuus 0,4,2) ohittaa ne: painikkeet olivat
   tummansinisiä pillereitä ilman kuvakkeita, nuolet ylhäällä oikealla, ja nuolet peittivät Sulje- ja Jaa-painikkeen.
   Tässä palautetaan default-skin-asettelu id-tason valitsimella (:not(#\#), kuten ilme.css) ja annetaan kuvakkeille
   v5:n tumma pyöreä tausta, jotta valkoinen kuvake erottuu myös vaalean kuvan päällä.
   Kuvakkeet: PhotoSwipe 4.1.2:n default-skin.svg (264 x 88 px, solu 44 px), sama tiedosto kuin global.css käyttää.
   ===================================================================== */

/* Yläpalkin painikkeet: 44 x 44 px, kuvake spritestä, tumma pyöreä tausta. */
html.ilme-v5 .pswp .pswp__button:not(#\#) {
	display: block;
	float: right;
	position: relative !important;
	width: 44px !important;
	height: 44px;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgb(79 35 50 / 0.86) url('../../themes/air-master/sass/photo/default-skin/default-skin.svg') 0 0 / 264px 88px no-repeat !important;
	box-shadow: inset 0 0 0 1px rgb(248 239 227 / 0.28);
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0;
	opacity: 1;
	overflow: visible;
	cursor: pointer !important;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 160ms ease !important;
}
html.ilme-v5 .pswp .pswp__top-bar .pswp__button:not(#\#) { margin: 0 0 0 4px; }
html.ilme-v5 .pswp .pswp__button:not(#\#):hover,
html.ilme-v5 .pswp .pswp__button:not(#\#):focus { background-color: rgb(92 49 63 / 0.96) !important; color: #fff !important; }
html.ilme-v5 .pswp .pswp__button:not(#\#):focus { outline: none; }
html.ilme-v5 .pswp .pswp__button:not(#\#):focus-visible { outline: 2px solid #e6bd78; outline-offset: 2px; }
/* Yläpalkin painikkeet ovat ruudun ylä- ja oikeassa reunassa: rengas painikkeen sisäpuolelle, jottei se leikkaudu
   (kulta tummaa painiketaustaa vasten 8,1:1). */
html.ilme-v5 .pswp .pswp__top-bar .pswp__button:not(#\#):focus-visible { outline-offset: -4px; }
html.ilme-v5 .pswp .pswp__button:not(#\#)::-moz-focus-inner { padding: 0; border: 0; }

/* Kuvakkeiden paikat spritessä (default-skin). */
html.ilme-v5 .pswp .pswp__button--close:not(#\#) { background-position: 0 -44px !important; }
html.ilme-v5 .pswp .pswp__button--share:not(#\#) { background-position: -44px -44px !important; }
html.ilme-v5 .pswp .pswp__button--fs:not(#\#) { display: none; background-position: 0 0 !important; }
html.ilme-v5 .pswp.pswp--supports-fs .pswp__button--fs:not(#\#) { display: block; }
html.ilme-v5 .pswp.pswp--fs .pswp__button--fs:not(#\#) { background-position: -44px 0 !important; }
html.ilme-v5 .pswp .pswp__button--zoom:not(#\#) { display: none; background-position: -88px 0 !important; }
html.ilme-v5 .pswp.pswp--zoom-allowed .pswp__button--zoom:not(#\#) { display: block; }
html.ilme-v5 .pswp.pswp--zoomed-in .pswp__button--zoom:not(#\#) { background-position: -132px 0 !important; }

/* Nuolet: 70 x 100 px:n osuma-alue kuvan reunoilla pystykeskellä, kuvake pyöreässä 44 px:n taustassa (::before)
   ja nuoli spritestä (::after). */
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#),
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#) {
	position: absolute !important;
	top: 50%;
	float: none;
	width: 70px !important;
	height: 100px;
	margin: -50px 0 0;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none;
}
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#) { left: 0; right: auto; }
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#) { right: 0; left: auto; }
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#)::before,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#)::before {
	content: '';
	position: absolute;
	top: 28px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgb(79 35 50 / 0.86) !important;
	box-shadow: inset 0 0 0 1px rgb(248 239 227 / 0.28);
	transition: background-color 160ms ease;
}
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#)::after,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#)::after {
	content: '';
	position: absolute;
	top: 35px;
	width: 32px;
	height: 30px;
	background: url('../../themes/air-master/sass/photo/default-skin/default-skin.svg') 0 0 / 264px 88px no-repeat;
}
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#)::before { left: 13px; }
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#)::before { right: 13px; }
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#)::after { left: 19px; background-position: -138px -44px; }
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#)::after { right: 19px; background-position: -94px -44px; }
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#):hover::before,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#):hover::before,
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#):focus::before,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#):focus::before { background: rgb(92 49 63 / 0.96) !important; }
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#):hover,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#):hover,
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#):focus,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#):focus { background: none !important; }
/* Nuolen fokus: rengas pyöreän taustan ympärille, ei koko osuma-alueen. */
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#):focus-visible,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#):focus-visible { outline: none; }
html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#):focus-visible::before,
html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#):focus-visible::before { outline: 2px solid #e6bd78; outline-offset: 2px; }

/* PhotoSwipen tilat, jotka yllä olevat (tarkemmat) säännöt muuten ohittaisivat. */
html.ilme-v5 .pswp .pswp__ui--idle .pswp__button--arrow--left:not(#\#),
html.ilme-v5 .pswp .pswp__ui--idle .pswp__button--arrow--right:not(#\#),
html.ilme-v5 .pswp .pswp__ui--hidden .pswp__button--arrow--left:not(#\#),
html.ilme-v5 .pswp .pswp__ui--hidden .pswp__button--arrow--right:not(#\#) { opacity: 0; }
html.ilme-v5 .pswp .pswp__ui--one-slide .pswp__button--arrow--left:not(#\#),
html.ilme-v5 .pswp .pswp__ui--one-slide .pswp__button--arrow--right:not(#\#) { display: none; }
html.ilme-v5 .pswp.pswp--touch .pswp__button--arrow--left:not(#\#),
html.ilme-v5 .pswp.pswp--touch .pswp__button--arrow--right:not(#\#) { visibility: hidden; }
html.ilme-v5 .pswp .pswp__element--disabled:not(#\#) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	html.ilme-v5 .pswp .pswp__button:not(#\#),
	html.ilme-v5 .pswp .pswp__button--arrow--left:not(#\#)::before,
	html.ilme-v5 .pswp .pswp__button--arrow--right:not(#\#)::before { transition: none !important; }
}