@charset "utf-8";
/* ==========================================================================
   perkisau.lt: Blogas. Maketas „Perkisau blogas v2.dc.html".

   Vienas failas dviem puslapių tipams, nes juos abu piešia ta pati blog()
   funkcija: sąrašui (/blogas) ir 24 įrašų puslapiams (/blogas/<m_id>). Įrašo
   puslapio makete nėra, tad jis piešiamas ta pačia dizaino kalba.

   GRIEŽTA TAISYKLĖ: kiekviena taisyklė prasideda `#content .apm` arba
   `body.reskin`. Be to stilius nuteka į prekių puslapius ir krepšelį.

   Savybės (dydis, svoris, tarpai, text-transform, spalva) skelbiamos aiškiai,
   nes `style.min.css` turi `#content h2{font-size:20px; text-transform:
   uppercase; margin:35px 6px 0 0}` ir `#content a{color:#e76496}`. Didesnio
   svorio neužtenka: nedeklaruota savybė lieka senoji.

   Deklaracijos grupuojamos po kelias eilutėje sąmoningai: failas privalo tilpti
   į projekto 400 eilučių ribą, o po vieną eilutę jis buvo 505 eilučių.

   Kuo skiriasi nuo maketo (temų filtrų, puslapiavimo ir naujienlaiškio nėra,
   kortelės nuotrauka kvadratinė) ir kodėl: wiki/concepts/dizaino-atnaujinimas.
   ========================================================================== */

#content .apm-blog .apm-blog-meta {
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 300; font-size: 12.5px; line-height: 1.5; color: #6E5F64;
}
#content .apm-blog .apm-blog-taskas { margin: 0 4px; color: #D26A8E; }

/* --------------------------------------------------------------------------
   Naujausias įrašas. Makete čia ženklas „Populiariausias", bet peržiūrų niekas
   neskaičiuoja, tad rodom „Naujausias": sąrašas rikiuojamas pagal datą.
   -------------------------------------------------------------------------- */

#content .apm-blog-svarbiausias {
	display: grid; grid-template-columns: 1fr 340px; align-items: center;
	box-sizing: border-box; min-height: 300px; margin: 0 0 38px;
	border-radius: 10px; overflow: hidden; background: #F8EEF0;
}
/* Be nuotraukos tuščio stulpelio nelieka. */
#content .apm-blog-svarbiausias.apm-blog-be-nuotraukos { grid-template-columns: 1fr; }
#content .apm-blog-sv-tekstas { padding: 40px 40px 40px 44px; }
#content .apm-blog .apm-blog-zyme {
	display: inline-block; margin: 0 0 16px; padding: 7px 15px;
	border-radius: 40px; background: rgba(255, 255, 255, 0.75);
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 600; font-size: 10px; line-height: 1.2;
	letter-spacing: 0.28em; text-transform: uppercase; color: #8A3355;
}
#content .apm-blog-svarbiausias h2 {
	max-width: 620px; margin: 0 0 14px;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500; font-size: 34px; line-height: 1.15;
	letter-spacing: 0.01em; text-transform: none;
}
#content .apm-blog-svarbiausias h2 a { color: #221B1E; text-decoration: none; }
#content .apm-blog-svarbiausias h2 a:hover { color: #8A3355; text-decoration: none; }
#content .apm-blog-svarbiausias p {
	max-width: 620px; margin: 0 0 22px;
	font-size: 15px; line-height: 1.65; color: #4A3F44;
}
#content .apm-blog-sv-apacia {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
}
#content .apm-blog-sv-nuotrauka { align-self: stretch; min-height: 300px; }
#content .apm-blog-sv-nuotrauka img {
	display: block; width: 100%; height: 100%; min-height: 300px;
	object-fit: cover; object-position: center 30%;
}

/* --------------------------------------------------------------------------
   Kortelių tinklelis
   -------------------------------------------------------------------------- */

#content .apm-blog-sarasas {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
	margin: 0 0 38px; padding: 0; list-style: none;
}
#content .apm-blog-kortele {
	display: flex; flex-direction: column; box-sizing: border-box;
	border: 1px solid rgba(34, 27, 30, 0.08); border-radius: 10px;
	overflow: hidden; background: #fff;
	transition: box-shadow .22s ease, transform .22s ease;
}
#content .apm-blog-kortele:hover {
	box-shadow: 0 26px 50px -32px rgba(34, 27, 30, 0.5);
	transform: translateY(-3px);
}
/* Kvadratas, ne maketo 16:10: nuotraukų proporcijos svyruoja nuo 0,67 (799x1200
   stačia) iki 3,49 (828x237 juostelė), o prekių nuotraukos yra 3:4. Kvadratas
   apkerpa abi puses švelniai, o 16:10 stačiai nukirstų galvą. */
#content .apm-blog-k-nuotrauka {
	display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #F1E9E4;
}
#content .apm-blog-k-nuotrauka img {
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: center 30%;
}
#content .apm-blog-k-turinys {
	display: flex; flex-direction: column; flex: 1; padding: 19px 20px 22px;
}
#content .apm-blog .apm-blog-k-antraste {
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 500; font-size: 16.5px; line-height: 1.32;
	color: #221B1E; text-decoration: none;
}
#content .apm-blog .apm-blog-k-antraste:hover { color: #8A3355; text-decoration: none; }
#content .apm-blog-kortele p {
	flex: 1; margin: 10px 0 16px;
	font-size: 13px; line-height: 1.6; color: #6E5F64;
}
#content .apm-blog-k-apacia {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding-top: 13px; border-top: 1px solid rgba(34, 27, 30, 0.08);
	font-size: 12px; color: #9A8B90;
}
#content .apm-blog .apm-blog-k-apacia a {
	flex: none; font-weight: 500; font-size: 12.5px;
	color: #8A3355; text-decoration: none;
}
#content .apm-blog .apm-blog-k-apacia a:hover { color: #D26A8E; text-decoration: none; }

/* Devyniems įrašams be nuotraukos priskirtos prekių nuotraukos, bet taisyklė
   reikalinga: naujas įrašas be photo reikšmės privalo atrodyti pilnai, ne su
   pilka skyle. Antraštė tada didesnė, Bodoni, ant rausvo fono. */
#content .apm-blog-kortele.apm-blog-be-nuotraukos { background: #F8EEF0; }
#content .apm-blog-kortele.apm-blog-be-nuotraukos .apm-blog-k-turinys { padding-top: 26px; }
#content .apm-blog-kortele.apm-blog-be-nuotraukos .apm-blog-k-antraste {
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: 0.01em;
}
#content .apm-blog-kortele.apm-blog-be-nuotraukos .apm-blog-k-apacia {
	border-top-color: rgba(34, 27, 30, 0.12);
}

/* --------------------------------------------------------------------------
   Kvietimas į katalogą, maketo naujienlaiškio vietoje
   -------------------------------------------------------------------------- */

#content .apm-blog-kvietimas {
	box-sizing: border-box; padding: 30px 34px;
	border-radius: 10px; background: #F8EEF0;
}
#content .apm-blog-kvietimas h2 {
	margin: 0 0 7px; font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500; font-size: 24px; line-height: 1.2;
	letter-spacing: 0.01em; text-transform: none; color: #221B1E;
}
#content .apm-blog-kvietimas p {
	max-width: 640px; margin: 0 0 18px; font-size: 14px; line-height: 1.6;
}
#content .apm-blog-kv-nuorodos { display: flex; flex-wrap: wrap; gap: 10px; }
#content .apm-blog .apm-blog-kv-nuorodos a {
	padding: 10px 20px; border: 1px solid rgba(34, 27, 30, 0.16);
	border-radius: 40px; background: #FCFBFA;
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 500; font-size: 12.5px; line-height: 1.2;
	color: #4A3F44; text-decoration: none;
}
#content .apm-blog .apm-blog-kv-nuorodos a:hover {
	border-color: #D26A8E; color: #8A3355; text-decoration: none;
}

/* --------------------------------------------------------------------------
   Įrašo puslapis

   Pavadinimas yra apvalkalo #name h1 ir tokiu lieka: puslapyje privalo būti
   lygiai vienas h1. Bendrame faile jis perdažytas maža rausva piliule, o įrašo
   pavadinimui tai netinka. Svoris toks pat, bet šis failas kraunamas vėliau,
   tad nugali. Sąrašo puslapyje piliulė lieka, nes .apm-blog-irasas ten nėra.
   -------------------------------------------------------------------------- */

body.reskin:has(.apm-blog-irasas) #name h1 {
	display: block; margin: 0 0 2px; padding: 0;
	border-radius: 0; background: none;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500; font-size: 34px; line-height: 1.16;
	letter-spacing: 0.01em; text-transform: none; color: #221B1E;
}
#content .apm-blog-irasas .apm-blog-meta {
	margin: 0 0 24px; padding-bottom: 20px;
	border-bottom: 1px solid rgba(34, 27, 30, 0.08);
}
#content .apm-blog-tekstas { font-size: 15px; line-height: 1.75; color: #4A3F44; }
/* Turinys eina iš duomenų bazės, tad jo HTML nekontroliuojam: plačiausia
   nuotrauka yra 1600px ir be šios taisyklės išplėstų puslapį.

   height !important yra būtinas, ne atsargumas. CKEditor prie nuotraukų prirašo
   inline style="width:404px; height:539px", o inline stilius paprastą taisyklę
   nugali. Tada telefone plotį apkerpa max-width, bet aukštis lieka senas, ir
   nuotrauka susispaudžia: išmatuota 328x539 vietoj 328x437 (santykis 0,61 vietoj
   0,75). Saugu, nes taikoma tik blogo įrašo tekstui. */
#content .apm-blog-tekstas img {
	max-width: 100%; height: auto !important; margin: 8px 0; border-radius: 8px;
}
#content .apm-blog-tekstas p { margin: 0 0 16px; }
#content .apm-blog-tekstas h2,
#content .apm-blog-tekstas h3 {
	margin: 28px 0 10px; font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500; font-size: 22px; line-height: 1.25;
	text-transform: none; color: #221B1E;
}
#content .apm-blog-tekstas ul,
#content .apm-blog-tekstas ol { margin: 0 0 16px; padding-left: 22px; }
#content .apm-blog-tekstas li { margin: 0 0 6px; }
#content .apm-blog-navigacija {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 38px 0 0; padding-top: 22px;
	border-top: 1px solid rgba(34, 27, 30, 0.08);
}
#content .apm-blog .apm-blog-nav,
#content .apm-blog .apm-blog-visi {
	padding: 11px 20px; border: 1px solid rgba(34, 27, 30, 0.16);
	border-radius: 40px; font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 500; font-size: 12.5px; line-height: 1.2;
	color: #4A3F44; text-decoration: none; white-space: nowrap;
}
#content .apm-blog .apm-blog-visi {
	border-color: transparent; background: #F8EEF0; color: #8A3355;
}
#content .apm-blog .apm-blog-nav:hover,
#content .apm-blog .apm-blog-visi:hover {
	border-color: #D26A8E; color: #8A3355; text-decoration: none;
}
/* Pirmas ir paskutinis įrašas vienos nuorodos neturi. Tuščias tarpas išlaiko
   „Visi įrašai" viduryje, kad mygtukai nešokinėtų. */
#content .apm-blog-nav-tuscia { display: block; width: 1px; }

/* --------------------------------------------------------------------------
   Telefonas. Riba 500px sutampa su info.php inline @media bloku.
   GRĖBLYS, pagautas jau dukart: prefiksą čia praleisti lengviausia, ir tada
   telefono taisyklės tyliai neveikia, nors failas atrodo teisingas.
   -------------------------------------------------------------------------- */

@media all and (max-width: 500px) {

	body.reskin:has(.apm-blog-irasas) #name h1 { margin-left: 16px; font-size: 25px; }

	/* Makete naujausias įrašas telefone yra vienu stulpeliu: nuotrauka viršuje. */
	#content .apm-blog-svarbiausias {
		display: flex; flex-direction: column; min-height: 0; margin-bottom: 22px;
	}
	#content .apm-blog-sv-nuotrauka { order: -1; min-height: 0; }
	#content .apm-blog-sv-nuotrauka img { height: 170px; min-height: 0; }
	#content .apm-blog-sv-tekstas { padding: 20px; }
	#content .apm-blog-svarbiausias h2 {
		margin-bottom: 10px; font-size: 25px; line-height: 1.16;
	}
	#content .apm-blog-svarbiausias p { margin-bottom: 16px; font-size: 13.5px; }
	#content .apm-blog .apm-blog-zyme {
		margin-bottom: 12px; font-size: 9px; letter-spacing: 0.24em;
	}
	#content .apm-blog-sv-apacia { display: block; }
	#content .apm-blog-sv-apacia .apm-blog-meta {
		display: block; margin-top: 12px; text-align: center;
	}

	/* Makete kortelė telefone horizontali: 96px nuotrauka kairėje. Taip 24
	   įrašai sutelpa į protingą aukštį. */
	#content .apm-blog-sarasas { display: block; margin-bottom: 24px; }
	#content .apm-blog-kortele {
		flex-direction: row; gap: 14px; margin: 0 0 14px; padding: 12px;
	}
	#content .apm-blog-kortele:hover { box-shadow: none; transform: none; }
	#content .apm-blog-k-nuotrauka {
		flex: none; width: 96px; height: 96px; border-radius: 7px;
	}
	#content .apm-blog-k-turinys { min-width: 0; padding: 0; }
	#content .apm-blog .apm-blog-k-antraste { font-size: 14px; }
	#content .apm-blog-kortele.apm-blog-be-nuotraukos .apm-blog-k-antraste { font-size: 17px; }
	#content .apm-blog-kortele.apm-blog-be-nuotraukos .apm-blog-k-turinys { padding-top: 0; }
	/* Telefone kortelė žema, tad iškarpa nebetelpa. Makete jos irgi nėra. */
	#content .apm-blog-kortele p { display: none; }
	#content .apm-blog-k-apacia {
		margin-top: auto; padding-top: 8px; border-top: 0; font-size: 11.5px;
	}

	#content .apm-blog-kvietimas { padding: 22px 20px 24px; }
	#content .apm-blog-kvietimas h2 { font-size: 20px; }
	#content .apm-blog-kvietimas p { font-size: 13px; }
	#content .apm-blog .apm-blog-kv-nuorodos a { padding: 9px 16px; font-size: 12px; }

	#content .apm-blog-irasas .apm-blog-meta { margin-bottom: 18px; padding-bottom: 14px; }
	#content .apm-blog-tekstas { font-size: 13.5px; }
	#content .apm-blog-navigacija {
		flex-wrap: wrap; justify-content: center; margin-top: 26px;
	}
	#content .apm-blog .apm-blog-nav,
	#content .apm-blog .apm-blog-visi { padding: 10px 16px; font-size: 12px; }
	#content .apm-blog-nav-tuscia { display: none; }
}