/* ==========================================================================
   Natrag u školu landing — responsive

   Desktop: --k skalira native px pozicije iz default.css; između
   breakpointa se bočni rubovi scene simetrično režu (bg je pinan na centar).

   Site header je FIKSAN ispod 992px (76px tablet, 61.05px mobile — iste
   vrijednosti kao na samsung-promo landinzima) pa .bts dobiva padding-top.

   Mobile (<768px): mobile pozadine (canvas 1000 š). Sve je u POSTOCIMA
   relativno na sekciju (left/width = canvas_px/10 %, top = y/H %, visina
   sekcije preko padding-bottom = H/10 %), ne u vw — stari web zna imati
   horizontalni overflow pa vw ne odgovara stvarnoj širini sekcije.
   Pozicije su procijenjene s mobile previewa — fine-tune po potrebi.
   ========================================================================== */

@media (max-width: 1440px) {
	.bts { --k: .85; }
}

@media (max-width: 1200px) {
	.bts { --k: .72; }
}

@media (max-width: 992px) {
	.bts { --k: .6; }
}

/* fiksni site header — tablet */
@media (min-width: 768px) and (max-width: 991px) {
	.bts { padding-top: 76px; }
}

@media (max-width: 767.98px) {

	/* fiksni site header — mobile */
	.bts { padding-top: 61.05px; }

	/* visina sekcije preko padding-bottom (% širine) pa omjer prati
	   pozadinu bez obzira na stvarnu širinu sekcije */
	.bts-slide {
		height: auto;
		background-size: 100% auto;
	}

	.bts-slide--1 { padding-bottom: 128.2%; background-image: url("/custom/back-to-school/assets/images/slide-1-bg-mobile.jpg"); }
	.bts-slide--2 { padding-bottom: 116.8%; background-image: url("/custom/back-to-school/assets/images/slide-2-bg-mobile.jpg"); }
	.bts-slide--3 { padding-bottom: 133.9%; background-image: url("/custom/back-to-school/assets/images/slide-3-bg-mobile.jpg"); }
	.bts-slide--4 { padding-bottom: 133.5%; background-image: url("/custom/back-to-school/assets/images/slide-4-bg-mobile.jpg"); }
	.bts-slide--5 { padding-bottom: 134%;   background-image: url("/custom/back-to-school/assets/images/slide-5-bg-mobile.jpg"); }
	.bts-slide--6 { padding-bottom: 134%;   background-image: url("/custom/back-to-school/assets/images/slide-6-bg-mobile.jpg"); }
	.bts-slide--7 { padding-bottom: 151.3%; background-image: url("/custom/back-to-school/assets/images/slide-7-bg-mobile.jpg"); }

	/* --- 1. Hero (H 1282); +2% top zraka od vrha --- */
	.bts-hero-clock   { left: 44.5%; top: 7.46%; width: 19.5%; }
	.bts-hero-text--1 { left: 16.5%; top: 24.23%; width: 47%; }
	.bts-hero-text--2 { left: 16.5%; top: 29.3%; width: 67.7%; }
	/* sjedi desno uz drugi red naslova ("ili TABLET"), isti odnos kao desktop */
	.bts-hero-text--3 { left: 58%;   top: 36.6%; width: 23.6%; }

	/* --- Product sekcije: jedinstveni raspored, sve horizontalno CENTRIRANO
	       (left = 50% − širina/2, bubble par kao cjelina od 42.2%);
	       top = y / H sekcije --- */
	.bts-slide--2 .bts-clock,
	.bts-slide--3 .bts-clock,
	.bts-slide--4 .bts-clock,
	.bts-slide--5 .bts-clock,
	.bts-slide--6 .bts-clock,
	.bts-slide--7 .bts-clock { left: 30.3%; width: 39.4%; }

	.bts-slide--2 .bts-bubble--1,
	.bts-slide--3 .bts-bubble--1,
	.bts-slide--4 .bts-bubble--1,
	.bts-slide--5 .bts-bubble--1,
	.bts-slide--6 .bts-bubble--1,
	.bts-slide--7 .bts-bubble--1 { left: 28.9%; width: 20.2%; }

	.bts-slide--2 .bts-bubble--2,
	.bts-slide--3 .bts-bubble--2,
	.bts-slide--4 .bts-bubble--2,
	.bts-slide--5 .bts-bubble--2,
	.bts-slide--6 .bts-bubble--2,
	.bts-slide--7 .bts-bubble--2 { left: 50.9%; width: 20.2%; }

	/* uređaji: centriranje preko left/right 0 + auto margina — drži centar
	   čak i ako neko vanjsko pravilo promijeni stvarnu širinu slike.
	   translate (u % vlastite širine) kompenzira pečenu sjenu u PNG-u da
	   TIJELO uređaja bude vizualno na centru; posebno svojstvo pa se ne
	   sudara s transform reveal animacijama */
	.bts-slide--2 .bts-device,
	.bts-slide--3 .bts-device,
	.bts-slide--4 .bts-device,
	.bts-slide--5 .bts-device,
	.bts-slide--6 .bts-device,
	.bts-slide--7 .bts-device { left: 0; right: 0; margin: 0 auto; }

	.bts-slide--2 .bts-device { translate: 12.6% 0; }
	.bts-slide--3 .bts-device { translate: 8.7% 0; }
	.bts-slide--4 .bts-device { translate: 12.6% 0; }
	.bts-slide--6 .bts-device { translate: .5% 0; }
	.bts-slide--7 .bts-device { translate: 5.4% 0; }

	/* tops: +3% zraka od vrha na clusteru (sat, bubbles, naziv) */
	.bts-slide--2 .bts-clock     { top: 7.28%; }
	.bts-slide--2 .bts-bubble--1 { top: 27.83%; }
	.bts-slide--2 .bts-bubble--2 { top: 24.83%; }
	.bts-slide--2 .bts-name      { left: 33.55%; top: 46.66%; width: 32.9%; }
	.bts-slide--2 .bts-device    { top: 52.5%; width: 77.7%; }

	.bts-slide--3 .bts-clock     { top: 6.73%; }
	.bts-slide--3 .bts-bubble--1 { top: 24.66%; }
	.bts-slide--3 .bts-bubble--2 { top: 22.04%; }
	.bts-slide--3 .bts-name      { left: 28.55%; top: 41.09%; width: 42.9%; }
	.bts-slide--3 .bts-device    { top: 46%; width: 69.8%; }

	.bts-slide--4 .bts-clock     { top: 6.75%; }
	.bts-slide--4 .bts-bubble--1 { top: 24.72%; }
	.bts-slide--4 .bts-bubble--2 { top: 22.10%; }
	.bts-slide--4 .bts-name      { left: 31.05%; top: 41.20%; width: 37.9%; }
	.bts-slide--4 .bts-device    { top: 46.5%; width: 77.7%; }

	.bts-slide--5 .bts-clock     { top: 6.73%; }
	.bts-slide--5 .bts-bubble--1 { top: 24.64%; }
	.bts-slide--5 .bts-bubble--2 { top: 22.03%; }
	.bts-slide--5 .bts-name      { left: 36.2%; top: 41.06%; width: 27.6%; }
	.bts-slide--5 .bts-device    { top: 46%; width: 41.4%; }

	.bts-slide--6 .bts-clock     { top: 6.73%; }
	.bts-slide--6 .bts-bubble--1 { top: 24.64%; }
	.bts-slide--6 .bts-bubble--2 { top: 22.03%; }
	.bts-slide--6 .bts-name      { left: 30.75%; top: 41.06%; width: 38.5%; }
	.bts-slide--6 .bts-device    { top: 46%; width: 68.7%; }

	.bts-slide--7 .bts-clock     { top: 6.30%; }
	.bts-slide--7 .bts-bubble--1 { top: 22.17%; }
	.bts-slide--7 .bts-bubble--2 { top: 19.85%; }
	.bts-slide--7 .bts-name      { left: 33.6%; top: 36.71%; width: 32.8%; }
	.bts-slide--7 .bts-device    { top: 45.3%; width: 73.4%; }
}