/* ==========================================================================
   Activepharm Labs — poprawki własne

   Plik celowo trzymany OSOBNO od css/style.css (skompilowany szablon Medin).
   Ładowany PO style.css, więc nadpisuje reguły szablonu.
   Dzięki temu nasze zmiany nie zginą, gdyby ktoś kiedyś przekompilował
   szablon ze źródeł w scss/.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. MENU GŁÓWNE
   Problem: po dodaniu "Produkcja kontraktowa" i "Centrum Wiedzy" menu ma
   6 pozycji i przestało się mieścić — "O FIRMIE" wchodziło na logo.
   Przyczyna podwójna: logo ma max-width 260px, a siedzi w kolumnie col-lg-2
   (~190px przy kontenerze 1140px), więc wystawało poza swoją kolumnę
   i nachodziło na nawigację.
   Rozwiązanie: kolumna logo dostaje szerokość automatyczną (zmiana w HTML),
   a odstępy i wielkość liter w menu skalują się z szerokością ekranu.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.header-nav .nav-item {
		padding: 0 6px;
	}
	.header-nav .nav-item > .nav-link {
		font-size: 12px;
		letter-spacing: 0;
	}
}

@media (min-width: 1230px) {
	.header-nav .nav-item {
		padding: 0 9px;
	}
	.header-nav .nav-item > .nav-link {
		font-size: 13px;
	}
}

@media (min-width: 1400px) {
	.header-nav .nav-item {
		padding: 0 12px;
	}
	.header-nav .nav-item > .nav-link {
		font-size: 14px;
	}
}


/* --------------------------------------------------------------------------
   2. KARTY .service-card — treść przyklejona do górnej krawędzi
   Problem: szablon ma padding: 0 30px 45px, czyli GÓRNY padding = 0.
   Działało to tylko dlatego, że w demo pierwszym elementem karty było
   zawsze zdjęcie (.service-card-photo z ujemnymi marginesami), które
   celowo dotykało krawędzi. W kartach bez zdjęcia tekst dotykał ramki.
   Widoczne na: dermoceutyki, produkcja kontraktowa, Centrum Wiedzy.
   Rozwiązanie: symetryczny padding górny; karty ze zdjęciem cofają je
   ujemnym marginesem, więc wyglądają jak wcześniej.
   -------------------------------------------------------------------------- */

.service-card {
	padding-top: 45px;
}

.service-card > .service-card-photo:first-child {
	margin-top: -45px;
}

@media (max-width: 1023px) {
	.service-card {
		padding-top: 25px;
	}
	.service-card > .service-card-photo:first-child {
		margin-top: -25px;
	}
}


/* --------------------------------------------------------------------------
   3. PIKTOGRAMY w sekcji "Oferujemy produkcję"
   Problem: użyta była klasa .over-image-card-icon, która ma padding-right
   25px (bo w swoim macierzystym miejscu stoi obok tekstu, nie nad nim).
   Przez ten jednostronny padding piktogram nie był wyśrodkowany.
   Rozwiązanie: własna klasa, bez asymetrycznych marginesów.
   -------------------------------------------------------------------------- */

.forma-icon {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1;
	color: #457e77;
}

/* Od 27.08 to juz nie ikony fontowe z szablonu, tylko wlasne piktogramy
   wygenerowane w Gemini (jedna plansza 4x2, rozcieta na osiem plikow,
   biale tlo zamienione na przezroczystosc, przekolorowane na #457E77). */
.forma-icon img {
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto;
}

@media (max-width: 1023px) {
	.forma-icon img {
		width: 68px;
		height: 68px;
	}
}

.forma-icon + .service-card-name {
	margin-top: 20px;
}

/* Kreska dekoracyjna w kartach wysrodkowanych trzymala sie lewej krawedzi
   (szablon pozycjonuje ja bez marginesu automatycznego). */
.service-card.text-center .h-decor {
	margin-left: auto;
	margin-right: auto;
}


/* --------------------------------------------------------------------------
   4. KARTA NA ZDJĘCIU (.over-image-card) — wariant węższy
   Problem: szablon ustawia sztywne width: 455px. W kolumnie col-lg-6
   zdjęcie ma ~540px, więc karta zasłaniała ~83% zdjęcia i wychodziła
   poza jego lewą krawędź.
   Rozwiązanie: wariant --inset, węższy i cofnięty do wnętrza kadru.
   Stosowany w nowych sekcjach (produkcja kontraktowa, "Szukają Państwo
   dystrybutora?"), gdzie zdjęcia mają celowo zostawione wolne miejsce
   w rogu.
   -------------------------------------------------------------------------- */

/* Kontener, ktory obejmuje DOKLADNIE zdjecie — dzieki temu karta pozycjonuje
   sie wzgledem kadru, a nie wzgledem kolumny z paddingami Bootstrapa
   (wczesniej przez to wychodzila poza lewa krawedz zdjecia). */
.img-with-card {
	position: relative;
	display: block;
}

.img-with-card > img {
	display: block;
	width: 100%;
}

.over-image-card--inset {
	width: 340px;
	padding: 22px;
	display: block;
}

.over-image-card--inset h4 {
	font-size: 20px;
	margin-bottom: 6px;
}

.over-image-card--inset p {
	font-size: 14px;
	line-height: 1.45;
	margin-bottom: 16px;
}

.over-image-card--inset .over-image-card-icon {
	display: none;
}

.over-image-card--inset.pos-left {
	left: 20px;
	bottom: 20px;
}

.over-image-card--inset.pos-right {
	right: 20px;
	bottom: 20px;
}

@media (max-width: 1229px) {
	.over-image-card--inset {
		width: 300px;
		padding: 20px;
	}
	.over-image-card--inset.pos-left {
		left: 15px;
		bottom: 15px;
	}
	.over-image-card--inset.pos-right {
		right: 15px;
		bottom: 15px;
	}
}

/* Na telefonie karta rozpina sie na cala szerokosc zdjecia, rowno z jego
   lewa i prawa krawedzia.
   UWAGA na specyficznosc: .over-image-card--inset.pos-left to dwie klasy,
   wiec regula z jedna klasa jej NIE nadpisze, nawet stojac nizej w pliku.
   Wczesniej przez to zostawalo left:20px / right:20px i karty byly
   przesuniete — pos-left w prawo, pos-right w lewo. */
@media (max-width: 767px) {
	.over-image-card--inset,
	.over-image-card--inset.pos-left,
	.over-image-card--inset.pos-right {
		position: absolute;
		width: auto;
		left: 0;
		right: 0;
		bottom: 0;
		margin-top: 0;
		padding: 18px 20px;
	}

	/* Wyrownanie do srodka niezaleznie od otoczenia.
	   Bez tego karta dziedziczyla wyrownanie po kolumnie: sekcja
	   "Szukaja Panstwa dystrybutora?" ma na rodzicu text-center, wiec jej
	   karta byla wysrodkowana, a karta "Zapytanie ofertowe" przy produktach
	   nie ma tej klasy i leciala do lewej. Ustalone: na telefonie WSZYSTKIE
	   karty tego typu maja tresc wysrodkowana. */
	.over-image-card,
	.over-image-card h4,
	.over-image-card p {
		text-align: center;
	}
}


/* --------------------------------------------------------------------------
   5. TRZECI SLAJD — delikatne przyciemnienie pod tekst
   Grafika magazynu ma już ciemny środek, więc mocna warstwa nie jest
   potrzebna — spłaszczałaby zdjęcie. Zostaje słaby gradient, który
   chroni tylko dolny wiersz podpisu: jest szerszy od nagłówka i jego
   końce wchodziły na jasne kartony po bokach.
   -------------------------------------------------------------------------- */

#mainSlider .slide--scrim .img--holder {
	position: relative;
}

#mainSlider .slide--scrim .img--holder:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(ellipse 70% 60% at center,
		rgba(34, 64, 60, 0.45) 0%,
		rgba(34, 64, 60, 0.25) 55%,
		rgba(34, 64, 60, 0) 100%);
}


/* --------------------------------------------------------------------------
   6. LOGOTYPY MAREK w sekcji "Marki, które nam zaufały"
   -------------------------------------------------------------------------- */

.marka-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
}

.marka-logo img {
	max-width: 240px;
	max-height: 80px;
	width: auto;
	height: auto;
}

.marka-logo + .service-card-name {
	margin-top: 20px;
}


/* --------------------------------------------------------------------------
   7. SEKCJE NA JASNOZIELONYM TLE (.section--tinted)
   Problem: szablon na telefonie ZERUJE paddingi sekcji i zastepuje je
   marginesem (.section-top-padding -> padding-top: 0; margin-top: 40px).
   Dla sekcji bez tla to bez znaczenia, ale przy sekcji z kolorem margines
   jest NA ZEWNATRZ barwnego pasa — przez to nagłowek dotykal gornej
   krawedzi tla, a ostatni element (przycisk, karta) dolnej.
   Dotyczylo: "Razem budujemy sukces", "Szukaja Panstwo dystrybutora?",
   "Dlaczego warto wybrac Activepharm?" i kategorii w Centrum Wiedzy.
   Rozwiazanie: wspolna klasa z gwarantowanym oddechem na kazdym ekranie.
   Zastepuje tez inline style="background-color: #EDF5F4".
   -------------------------------------------------------------------------- */

.section--tinted {
	background-color: #EDF5F4;
}

@media (max-width: 767px) {
	.page-content .section--tinted.section-top-padding {
		padding-top: 45px;
		margin-top: 40px;
	}
	.page-content .section--tinted.section-bottom-padding {
		padding-bottom: 45px;
	}
}