@charset "utf-8";
/* ==========================================================================
   perkisau.lt: pradinio „Populiarios kategorijos" ir pirmojo ekrano tvarka
   telefone (2026-10-08). HTML piešia function/pradinio-kategorijos.php, o
   blokas guli pirmojo ekrano (.apm-pradinis-hero) viduje po nuotrauka.

   Kodėl taip: per pradinį įeina daugiausia žmonių (111 iš 273 per savaitę), o
   iki šiol telefone pirmame ekrane nebuvo nė vienos kategorijos. Skaičiai:
   docs/2026-10-08-pradinis-puslapis-telefone-pasiulymas.md.

   Kiekviena taisyklė su `body.puslapis-pradinis`, kaip ir reskin-pradinis.css:
   be žymės stilius nutekėtų į kitus puslapius.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kompiuteris: visa eilė po tekstu ir nuotrauka, aštuonios kategorijos.
   -------------------------------------------------------------------------- */
body.puslapis-pradinis .apm-pop {
	grid-column: 1 / -1; margin: 0 24px 24px 40px; padding: 18px 20px 16px;
	background: #fff; border: 1px solid #EFE4E7; border-radius: 10px; }
body.puslapis-pradinis .apm-pop-galva {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
/* Senasis style.min.css h2 turi savo dydį, spalvą ir tarpus: paskelbta viskas. */
body.puslapis-pradinis .apm-pradinis-hero h2.apm-pop-antraste {
	width: auto; margin: 0; padding: 0; border: none; background: none; text-transform: none; letter-spacing: 0;
	font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 20px; line-height: 1.2; color: #221B1E; }
body.puslapis-pradinis a.apm-pop-visos {
	flex: none; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500;
	color: #B5446E; text-decoration: none; white-space: nowrap; }
body.puslapis-pradinis a.apm-pop-visos:hover { text-decoration: underline; }
body.puslapis-pradinis .apm-pop-tinklas {
	display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
body.puslapis-pradinis a.apm-pop-kat { display: block; min-width: 0; color: #221B1E; text-decoration: none; }
/* Kvadratas per `padding-bottom`, o ne `aspect-ratio`: veikia ir senesnėse
   naršyklėse, o vieta nuotraukai rezervuota dar jai nepasikrovus. */
body.puslapis-pradinis .apm-pop-nuotrauka {
	position: relative; display: block; height: 0; padding-bottom: 100%;
	border-radius: 10px; overflow: hidden; background: #F1E9E4; }
body.puslapis-pradinis .apm-pop-nuotrauka img {
	position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; }
body.puslapis-pradinis .apm-pop-vardas {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.5em; margin-top: 7px; font-family: 'Outfit', sans-serif; font-size: 12.5px; line-height: 1.25; }
body.puslapis-pradinis a.apm-pop-kat:hover .apm-pop-vardas,
body.puslapis-pradinis a.apm-pop-kat:focus-visible .apm-pop-vardas { color: #8A3355; text-decoration: underline; }

/* --------------------------------------------------------------------------
   2. Telefonas. Riba 500px kaip reskin-pradinis.css ir home.php galvutėje.

   Tvarka: žymė, antraštė (h1), kategorijos, nuotrauka, sakinys, mygtukai.
   HTML'e h1 lieka pirmas, o kategorijos stovi po nuotrauka: tvarką keičia tik
   `order`. `display: contents` teksto dėžutei leidžia jos vaikams stoti į tą
   pačią eilę su nuotrauka ir kategorijomis.
   -------------------------------------------------------------------------- */
@media all and (max-width: 500px) {
	body.puslapis-pradinis .apm-pradinis-hero-su-kat { display: flex; flex-direction: column; margin-top: 6px; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat .apm-pradinis-hero-tekstas { display: contents; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat .apm-pradinis-hero-zyme {
		order: 1; align-self: flex-start; margin: 12px 14px 6px; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat #top { order: 2; width: auto; margin: 0; padding: 0 14px; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat #top #name { width: auto; margin: 0; padding: 0; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat #top #name h1 { font-size: 20px; margin: 0 0 10px; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat .apm-pop {
		order: 3; margin: 0 12px 14px; padding: 0; background: none; border: none; border-radius: 0; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat .apm-pradinis-hero-juosta { order: 4; width: 100%; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat .apm-pradinis-hero-p { order: 5; margin: 0; padding: 14px 16px 14px; }
	body.puslapis-pradinis .apm-pradinis-hero-su-kat .apm-pradinis-hero-mygtukai { order: 6; align-self: stretch; padding: 0 16px 18px; }

	body.puslapis-pradinis .apm-pop-galva { margin-bottom: 8px; }
	body.puslapis-pradinis .apm-pradinis-hero h2.apm-pop-antraste { font-size: 16px; }
	body.puslapis-pradinis a.apm-pop-visos { font-size: 11.5px; }
	body.puslapis-pradinis .apm-pop-tinklas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
	body.puslapis-pradinis .apm-pop-vardas { margin-top: 6px; font-size: 11px; }
}

@media all and (max-width: 360px) {
	body.puslapis-pradinis .apm-pradinis-hero-su-kat #top #name h1 { font-size: 18px; }
	body.puslapis-pradinis .apm-pradinis-hero h2.apm-pop-antraste { font-size: 14px; }
	body.puslapis-pradinis a.apm-pop-visos { font-size: 11px; }
	body.puslapis-pradinis .apm-pop-tinklas { gap: 8px 6px; }
	body.puslapis-pradinis .apm-pop-vardas { font-size: 10.5px; }
}