/* ==========================================================================
   emedia: slajder w hero strony glownej (7.09.2026)
   Okno z wideo w naglowku strony glownej ma dwa slajdy: slajd 1 zaprasza do
   rankingu widocznosci agencji w AI (tytul, jedno zdanie, przycisk, portret
   w kole), slajd 2 to glowny komunikat agencji (H1, opis, przycisk, plakietka).
   Znacznik siedzi w tresci strony Home (id 330, blok HTML w oknie #intro).
   Slajdami steruje js/emedia-promo-home.js: strzalki, kropki, przelaczanie
   samoczynne (data-auto 9 s), pauza po najechaniu, gest na telefonie.
   Arkusz i skrypt laduje emedia_ranking_promo_zasoby() w inc/functions-settings.php,
   oba tylko na stronie glownej. Okno logotypow partnerow (#logotypy) od 7.09.2026
   znow jest zwykla galeria, bez slajdera (decyzja CEO).

   Wgrywanie po zmianie:
   node narzedzia/motyw-wgraj.mjs css/emedia-promo-home.css kod/motyw-emedia/css/emedia-promo-home.css
   node narzedzia/wpsc-wyczysc.mjs

   Sekcje: 1. slajder (silnik)  2. slajder w hero  3. telefon  4. ograniczony ruch
   ========================================================================== */


/* --- 1. Slajder: slajdy leza jeden na drugim w jednej komorce siatki, widoczny jest tylko em-akt (js) --- */

.em-slajder { position: relative; }
.em-slajder-tor { display: grid; }
.em-slajder .em-slajd { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.em-slajder .em-slajd.em-akt { opacity: 1; pointer-events: auto; }
.em-slajder .em-slajd > figure.wp-block-gallery { margin: 0; }

/* strzalki poza oknem (biale kolka, granatowe po najechaniu), kropki pod oknem (aktywna wydluzona).
   Kropka ma 7 px, ale przycisk pod nia 24 x 24 px (obszar dotyku na telefonie, gdzie strzalek nie ma);
   rzad kropek zachowuje 7 px wysokosci, a przyciski wystaja z niego symetrycznie, wiec uklad sie nie zmienia */
.em-slajder-strzalka { position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: #fff; color: #192743; box-shadow: 0 6px 16px rgba(29, 63, 121, .14); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 3; transition: background .2s ease, transform .2s ease; }
.em-slajder-strzalka:hover, .em-slajder-strzalka:focus-visible { background: #192743; color: #fff; outline: none; }
.em-slajder-strzalka::before { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.em-slajder-lewa { left: -48px; } .em-slajder-lewa::before { transform: translateX(2px) rotate(135deg); }
.em-slajder-prawa { right: -48px; } .em-slajder-prawa::before { transform: translateX(-2px) rotate(-45deg); }
.em-slajder-kropki { display: flex; justify-content: center; align-items: center; gap: 0; height: 7px; margin: 12px 0 0; }
.em-slajder-kropka { position: relative; flex: none; width: 24px; height: 24px; border: 0; padding: 0; background: transparent; cursor: pointer; transition: width .2s ease; }
.em-slajder-kropka::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: #c9d2df; transition: width .2s ease, background .2s ease; }
.em-slajder-kropka[aria-current="true"] { width: 37px; }
.em-slajder-kropka[aria-current="true"]::before { width: 20px; border-radius: 4px; background: #192743; }


/* --- 2. Slajder w hero: slajd 1 o rankingu, slajd 2 z glownym komunikatem (7.09.2026) ----------- */

/* slajdy dziela jedna komorke siatki (sekcja 1), kazdy wysrodkowany w pionie, wiec okno z wideo
   ma wysokosc wyzszego slajdu i nie skacze przy przelaczaniu */
#intro .em-hero-slajder .em-slajd { align-self: center; width: 100%; }

/* slajd 1: tekst po lewej, portret w kole po prawej (ten sam plik, ktory byl na banerze) */
#intro .em-hero-ranking { display: flex; align-items: center; gap: 0 36px; }
#intro .em-hero-ranking-tresc { flex: 1 1 auto; min-width: 0; }
#intro .em-hero-tytul { margin: 0 0 22px; padding: 0; color: #fff; font-family: 'all-round-gothic', sans-serif; font-weight: 600; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.1; letter-spacing: -.005em; }
#intro .em-hero-opis { margin: 0; max-width: 680px; color: #fff; font-size: 18px; line-height: 1.6; }
#intro .em-hero-ranking .wp-block-buttons { padding-top: 30px; }
/* CEO 7.09 wieczor: zamiast portretu w kole duza grafika podium (Higgsfield, Nano Banana 2, bez tytulu),
   wtopiona w tlo miekka maska na krawedziach; !important, bo arkusz motywu narzuca obrazkom w tresci szerokosc */
#intro .em-hero-podium { flex: none; width: 560px !important; height: auto !important; max-width: 46%; display: block !important; margin: 0; -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 56%, #000 58%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 56%, #000 58%, rgba(0, 0, 0, 0) 100%); }

/* sterowanie pod trescia: strzalki z sekcji 1 (tu w ukladzie, nie poza oknem) i kropki w jednym rzedzie, na granacie biale */
/* CEO 7.09 wieczor: okno nizsze (mniej pustego miejsca pod sterowaniem), sterowanie blizej tresci */
#intro .wp-block-cover { padding-top: 128px; padding-bottom: 54px; }
#intro .em-hero-glowny .wp-block-buttons { padding-top: 28px; }
#intro .em-slajder-sterowanie { display: flex; align-items: center; gap: 0 10px; margin-top: 12px; }
#intro .em-slajder-sterowanie .em-slajder-strzalka { position: static; margin: 0; width: 34px; height: 34px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
#intro .em-slajder-sterowanie .em-slajder-strzalka:hover, #intro .em-slajder-sterowanie .em-slajder-strzalka:focus-visible { background: #fff; color: #192743; }
#intro .em-slajder-sterowanie .em-slajder-kropki { margin: 0; }
#intro .em-slajder-kropka::before { background: rgba(255, 255, 255, .38); }
#intro .em-slajder-kropka[aria-current="true"]::before { background: #fff; }


/* --- 3. Telefon (do 767 px): portret nad tytulem, mniejsze litery ------------------------------------ */

@media (max-width: 767px) {
	#intro .em-hero-ranking { flex-direction: column; align-items: flex-start; gap: 22px 0; }
	#intro .em-hero-podium { order: -1; width: 100% !important; max-width: none; }
	/* tytul 38 px, zeby na telefonie to on (nie baner ciasteczek, ok. 37 tys. px2) byl najwiekszym
	   elementem widoku; H1 siedzi na ukrytym slajdzie 2, wiec nie liczy sie do LCP */
	#intro .em-hero-tytul { font-size: 38px; margin-bottom: 14px; }
	#intro .em-hero-opis { font-size: 16px; }
	#intro .em-hero-ranking .wp-block-buttons { padding-top: 22px; }
	#intro .em-slajder-sterowanie { margin-top: 26px; }
}


/* --- 4. Ograniczony ruch: slajdy przelaczaja sie bez przenikania ------------------------------------ */

@media (prefers-reduced-motion: reduce) { .em-slajder .em-slajd { transition: none; } }