tvarko skleidima pats, o suskleistas
tekstas lieka DOM'e, todel ji mato ir robotai, ir ekrano skaitytuvai. */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
cursor: pointer; list-style: none; position: relative;
padding: 20px 44px 20px 0;
font-family: var(--f-display); font-size: 20px; letter-spacing: 0.03em;
text-transform: uppercase; color: var(--white);
transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; position: absolute; right: 6px; top: 50%;
transform: translateY(-50%);
font-family: var(--f-body); font-size: 26px; line-height: 1; color: var(--red);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--red); }
.faq-item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.faq-answer {
padding: 0 44px 22px 0;
color: var(--gray-light); font-size: 15px; line-height: 1.75; max-width: 72ch;
}
@media (max-width: 640px) {
.faq-item summary { font-size: 17px; padding-right: 36px; }
.faq-answer { padding-right: 0; }
}
/* ── Pasitikejimo juosta ir atsiliepimai ────────────────────────────
Juosta stovi is karto po hero: tai pirmas dalykas po pazado, ir butent
ten zmogui reikia irodymo, kad pazadas ne tuscias. */
.trust {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 28px 0;
}
.trust-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 32px; flex-wrap: wrap;
}
.trust-clients { flex: 1 1 460px; min-width: 0; }
.trust-label {
font-family: var(--f-display); font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gray); margin-bottom: 10px;
}
.trust-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.trust-list li {
font-family: var(--f-display); font-size: 21px; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--gray-light);
}
.trust-rating {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: "score stars" "score count";
align-items: center; gap: 0 14px;
padding: 14px 22px; flex-shrink: 0;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r); text-decoration: none;
transition: border-color .15s;
}
.trust-rating:hover { border-color: var(--red); }
.trust-rating:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.trust-score {
grid-area: score;
font-family: var(--f-display); font-size: 48px; line-height: 0.9;
color: var(--white);
}
.trust-stars { grid-area: stars; color: var(--red); font-size: 15px; letter-spacing: 2px; }
.trust-count {
grid-area: count;
font-size: 13px; color: var(--gray); white-space: nowrap;
}
.review-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.review-card {
margin: 0; padding: 28px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r);
display: flex; flex-direction: column; gap: 20px;
}
/* flex:1 nustumdavo vardą i kortelės apacia. Kai vienoje eiluteje stovi
ilgas ir trumpas atsiliepimas, tinklelis ju korteles suvienodina, ir
trumpame tekste tarp zodziu ir vardo likdavo apie 200 px tuscios vietos.
Dabar vardas seka is karto po tekstu, o tuscia vieta lieka kortelės
apacioje, kur ji nekliudo skaityti. */
.review-text {
margin: 0; color: var(--gray-light); font-size: 15px; line-height: 1.75;
}
.review-card footer { display: flex; flex-direction: column; gap: 3px; }
.review-name {
font-family: var(--f-display); font-size: 19px; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--white); font-style: normal;
}
.review-source {
font-size: 12px; color: var(--gray);
font-family: var(--f-display); letter-spacing: 0.12em; text-transform: uppercase;
}
@media (max-width: 900px) {
.review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.trust-inner { gap: 22px; }
.trust-rating { width: 100%; justify-content: start; }
.trust-list { gap: 8px 20px; }
.trust-list li { font-size: 18px; }
}
/* Sesi atsiliepimai vietoj triju: viduriniame plotyje du stulpeliai atrodo
tvarkingiau nei trys suspausti. */
@media (max-width: 1100px) and (min-width: 901px) {
.review-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Apie mus ───────────────────────────────────────────────────────
Skaiciai virsuje: zmogus, atejes i „apie mus", pirmiausia nori suprasti
mastą, ir tik paskui skaityti. */
.about-facts {
background: var(--surface);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 32px 0;
}
.about-facts-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.about-fact { display: flex; flex-direction: column; gap: 6px; }
.about-fact-nr {
font-family: var(--f-display); font-size: 40px; line-height: 1;
color: var(--white); letter-spacing: 0.02em;
}
.about-fact-txt { font-size: 13px; color: var(--gray); line-height: 1.5; }
.about-how { display: grid; gap: 28px; max-width: 820px; }
.about-how-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.about-how-nr {
font-family: var(--f-display); font-size: 26px; color: var(--red); line-height: 1.1;
}
.about-how-item h3 {
font-family: var(--f-display); font-size: 21px; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--white); margin-bottom: 8px;
}
.about-how-item p { font-size: 15px; color: var(--gray-light); line-height: 1.75; margin: 0; }
@media (max-width: 900px) {
.about-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
.about-fact-nr { font-size: 32px; }
.about-how-item { grid-template-columns: 40px 1fr; gap: 14px; }
}
/* ── Tiesiogines transliacijos ──────────────────────────────────────
Dvi kolonos: kairėje platformos, desineje tai, kas kainuoja atskirai.
Zmogus pirmiausia klausia „ar transliuosite i mano platforma", ir tik
paskui „kiek kainuos papildomai". */
.live-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.live-where { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.live-where li {
font-family: var(--f-display); font-size: 24px; letter-spacing: 0.03em;
text-transform: uppercase; color: var(--white);
padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.live-extra { display: grid; gap: 20px; }
.live-extra-row {
display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r); padding: 22px 24px;
}
.live-extra-row h3 {
font-family: var(--f-display); font-size: 19px; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--white); margin-bottom: 6px;
}
.live-extra-row p { font-size: 14px; color: var(--gray-light); line-height: 1.7; margin: 0; }
.live-extra-price {
font-family: var(--f-display); font-size: 22px; color: var(--red);
white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 900px) {
.live-cols { grid-template-columns: 1fr; gap: 40px; }
.live-extra-row { flex-direction: column; gap: 10px; }
}
/* ── PVM zymos ──────────────────────────────────────────────────────
Pastaba po antraste buvo, bet kol zmogus nuslenka iki lenteles, jos
nebematyti. Todel „+ PVM" kartojamas prie kiekvienos kainos. */
.vat-tag {
display: block; margin-top: 2px;
font-family: var(--f-body); font-size: 11px; font-weight: 400;
letter-spacing: 0.06em; color: var(--gray); text-transform: uppercase;
}
.vat-note {
margin: 0 0 28px; padding: 12px 18px;
background: var(--card); border-left: 3px solid var(--red);
border-radius: var(--r);
font-size: 14px; color: var(--gray-light);
}
.live-extra-price .vat-tag { text-align: right; }
/* ── Spastai formoje ────────────────────────────────────────────────
Ne display:none: dalis robotu ta atpazista ir lauka praleidzia. Iskelta
uz ekrano ribu, o tabindex="-1" neleidzia i ji patekti klaviatura. */
.hp-field {
position: absolute !important;
left: -9999px !important; top: auto !important;
width: 1px !important; height: 1px !important;
overflow: hidden !important;
}
/* ── Mobili CTA juosta ──────────────────────────────────────────────
Telefone antrastes „Rezervuoti" mygtukas paslėptas, tad nuslinkus zemiau
hero nebelieka ne vieno matomo mygtuko. Juosta ta spraga uzdaro.
z-index 150 < slapuku juostos 200, o kol ta matoma, si slepiama visai. */
.mobile-cta { display: none; }
@media (max-width: 768px) {
.mobile-cta {
display: flex; gap: 10px; align-items: stretch;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(10,10,10,0.96); backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
}
body.cookie-open .mobile-cta { display: none; }
/* Vietos, kad juosta neuzdengtu footerio pabaigos. */
body { padding-bottom: 76px; }
.mobile-cta-tel {
display: flex; align-items: center; justify-content: center;
width: 52px; flex-shrink: 0;
border: 1px solid var(--border); border-radius: var(--r);
color: var(--gray-light); background: var(--card);
}
.mobile-cta-tel:hover, .mobile-cta-tel:focus-visible { color: var(--white); border-color: var(--red); }
.mobile-cta-book { flex: 1; justify-content: center; }
}
/* yra inline elementas be savo matmenu, todel jo viduje esantis
![]()
nepaveldi placio is konteinerio taip, kaip paveldedavo pats ![]()
. */
picture { display: contents; }
.studio-photo picture { display: contents; }
/* ══════════════════════════════════════════════════════════════════
DIZAINO AUDITAS 2026-08-25
══════════════════════════════════════════════════════════════════ */
/* 1. REGRESIJA. Footerio logotipas remesi height="40" atributu, o kai
prie img pridejau height:auto (kad nuotraukos nustotu tempti savo
1080 px auksti), atributas nustojo veikti ir logotipas isaugo nuo
124x40 iki 342x111. Antrastes logotipa isgelbejo .nav-logo img
taisykle; footerio tokios neturejo. */
.footer-brand img { height: 40px; width: auto; }
/* 2. Atsiliepimai telefone. Sesios kortelės viena po kita uzeme 2119 px,
t. y. 2,5 ekrano - zmogus tiesiog nustoja slinkti. Horizontali eile
su fiksavimu: matomas vienas atsiliepimas, is uz krasto kyso kitas,
todel matyti, kad ju daugiau. */
@media (max-width: 900px) {
.review-grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 84%;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
scrollbar-width: none;
}
.review-grid::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: start; }
/* Tekstas ir vardas lieka kortelės virsuje, netempiami per visa auksti:
tarpas tarp citatos ir parazo atrodytu kaip klaida. */
.review-text { flex: 0 1 auto; }
}
/* 3. Footeris telefone. Dvidesimt eiluciu vienoje kolonoje davė 1375 px.
Navigacija ir paslaugos telpa greta, o prekes zenklas ir kontaktai
lieka per visa ploti. */
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.footer-brand { grid-column: 1 / -1; }
.footer-col:last-child { grid-column: 1 / -1; }
.site-footer { padding-top: 48px; }
.footer-col li { line-height: 1.5; }
}
/* 4. Paslaugu korteles telefone: 40 px uzpildas is visu pusiu keturiose
kortelese davė 1329 px. Turinys tas pats, oro maziau. */
@media (max-width: 768px) {
.svc-card { padding: 28px 22px; }
.svc-num { font-size: 34px; margin-bottom: 12px; }
.svc-card h3 { font-size: 21px; }
}
/* 5. Klientu juosta telefone: astuoni vardai per 21 px sriftą issisklaide
i keturias eilutes. */
@media (max-width: 640px) {
.trust-list { gap: 6px 16px; }
.trust-list li { font-size: 16px; }
.trust { padding: 22px 0; }
}
/* 6. Lietimo taikiniai telefone.
Kalbu jungiklis buvo 28x32, mesainis 32x24, socialines ikonos 20x28.
Rekomenduojama riba 44x44: mazesnius pirstu pataikoma tik is antro
karto, o kalbu jungiklis stovi salia mesainio, tad prasilenkimas
atidaro meniu vietoj kalbos.
Didinamas tik lietimo plotas, ne pats piesinys: vaizdas nesikeicia. */
@media (pointer: coarse), (max-width: 768px) {
.lang-switcher { gap: 2px; }
.lang-switcher a {
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 8px;
}
.nav-toggle {
width: 44px; height: 44px;
align-items: center; justify-content: center;
padding: 0; margin-right: -8px;
}
.footer-social { gap: 4px; margin-left: -10px; }
.footer-social a {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.breadcrumb { gap: 4px; }
.breadcrumb a { padding: 10px 6px; margin: -10px -6px; }
.footer-col a { display: inline-block; padding: 4px 0; }
.cookie-reopen { padding: 8px 0; }
}
/* 7. Telefonas, el. pastas ir socialiniai profiliai telefone.
Butent sitie taikiniai yra konversija: zmogus juos spaudzia noredamas
susisiekti. 19 px aukscio eilute pirstu pataikoma sunkiai.
Mobili CTA juosta isskiriama - ji jau turi 44 px ir papildomas
uzpildas ja isteptu. */
@media (pointer: coarse), (max-width: 768px) {
a[href^="tel:"]:not(.mobile-cta-tel),
a[href^="mailto:"],
a[href*="instagram.com"]:not(.footer-social a) {
display: inline-block; padding: 9px 0;
}
/* Eilutes vienodos abiejose kolonose. Uzpildas dedamas ant , o
nuoroda ji perdengia neigiama parastė, todel lietimo plotas lieka
visos eilutes, o navigacija ir paslaugos atrodo vienodai isdestytos. */
.footer-col ul { gap: 0; }
.footer-col li { padding: 6px 0; }
.footer-col li a { display: block; padding: 6px 0; margin: -6px 0; }
}
/* 8. Kainu puslapio pakete telefone antra nuotrauka slepiama.
Dvi nuotraukos viena po kita prideda 384 px ir rodo ta pati dalyka.
Stalinėje versijoje jos stovi salia ir uzpildo desine kolona, todel
ten abi lieka. */
@media (max-width: 768px) {
.pkg-banner-inner > div:last-child picture:nth-of-type(2) { display: none; }
}
/* 9. Paslaugu ir portfolio tinkleliai buvo vieninteliai blokai, isspruko is
konteinerio: 1425 px per visa ekrana, kai antrastes, atsiliepimai ir
footeris lygiuojasi ties 1152 px. Del to korteles prasidedavo 137 px
kairiau uz antraste virs ju, ir puslapis atrode „per platus".
Kalkuliacija atitinka .container: 1200 px minus 24 px uzpildas is
abieju pusiu. */
.svc-grid,
.portfolio-grid {
max-width: calc(var(--max) - 48px);
margin-left: auto;
margin-right: auto;
}
/* 10. REGRESIJA. Padidinus lietimo taikinius kalbu jungiklis isaugo iki
136 px, ir antrastes juostoje nebeliko vietos: 111 + 136 + 34 plius
du 32 px tarpai = 345 px, kai nav plotis telefone 312. Flex suspaude
logotipa iki 86x36, t. y. iskraipė ji.
Logotipas nebesitraukia, o vietos atlaisvina mazesnis tarpas. */
.nav-logo { flex-shrink: 0; }
.nav-logo img { flex-shrink: 0; }
@media (max-width: 768px) {
.nav { gap: 12px; }
.nav-right { gap: 10px; }
}
/* Labai siauruose telefonuose (nuo 320 px) net ir to neuztenka, todel
logotipas ir jungiklis dar susitraukia, taciau lietimo plotas islieka
virs 38 px. */
@media (max-width: 380px) {
.nav-logo img { height: 30px; }
.lang-switcher a { min-width: 38px; padding: 4px 5px; }
}
/* 11. Studijos puslapyje ikureju nuorodos buvo 27 px aukscio. */
@media (pointer: coarse), (max-width: 768px) {
.owner-links a { display: inline-block; padding: 8px 0; }
}
/* ── Atsiliepimu juosta ─────────────────────────────────────────────
Devynios kortelės tinklelyje uzeme 1315 px, t. y. 1,5 ekrano. Juostoje
telpa i vienos kortelės auksti, o visos devynios lieka pasiekiamos.
Staliniame matomi keturi, o penktas kyso is uz krasto: be jo niekas
nesuprastu, kad juosta stumdoma. Telefone taisykle jau buvo ir lieka. */
.review-grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 3 * 20px) / 4 - 14px);
/* Kortelės sulyginamos iki aukščiausios. Tinklelyje buvo atvirksciai
(align-items: start), nes trys skirtingo ilgio korteles greta atrode
nelygiai. Juostoje tai neveikia: kai matomas vienas trumpas
atsiliepimas, po juo lieka 330 px juodo puslapio fono - tiesiog skyle.
Sulygintos kortelės ta pacia tuscia vieta laiko kortelės viduje, uz
remelio, ir stalinėje versijoje keturios korteles baigiasi vienoje
linijoje. */
align-items: stretch;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
/* scroll-behavior: smooth cia NENAUDOJAMAS samoningai. Su juo scrollLeft
priskyrimas virsta animacija, o scroll-snap-type: x mandatory tokia
animacija kiekviename kadre tempia atgal i artimiausia fiksavimo taska,
ir juosta nepajuda. Tiesioginis suolis veikia visada. */
-webkit-overflow-scrolling: touch;
padding-bottom: 14px;
scrollbar-width: none;
}
.review-grid::-webkit-scrollbar { display: none; }
.review-grid:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.review-card { scroll-snap-align: start; }
/* Ilgiausias atsiliepimas telefone uzeme 577 px, trumpiausias - 262 px, o
juosta visada lygi aukščiausiai kortelei. Vadinasi, prie trumpiausio
likdavo 315 px tuscios vietos: is pradziu kaip juoda skyle puslapyje, po
sulyginimo - kaip tuscia dezė. Nei vienas variantas neatrodo tvarkingas.
Todel juostoje rodoma tik teksto pradzia, o visas tekstas lieka uz
„Skaityti visus Google" mygtuko. Tai ne savivale: pati Google savo
kortelėje daro lygiai taip pat ir kerpa ties „…More". Citata nekeiciama,
tik neisskleidziama.
Riba dvylika eiluciu, ir ji parinkta ne is akies. Prie astuoniu Roman,
Gintaras ir Aida netekdavo lygiai vienos paskutinės eilutės, o joje
parasyta „Rekomenduoju" - t. y. nukirsdavo butent ta sakini, del kurio
visas atsiliepimas cia ir yra. Prie desimties tas pats nutikdavo Simonai.
Riba, kuri nukerta viena eilute, yra grynas nuostolis: aukscio ji beveik
nesutaupo, o mintį sugadina. Prie dvylikos apkerpami tik trys tikrai ilgi
atsiliepimai, ir kiekvienas ju netenka keturiu ar sesiu eiluciu, todel
matyti, kad teksto tikrai yra daugiau. Kiti astuoni matomi istisai. */
.review-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 12;
line-clamp: 12;
overflow: hidden;
}
.review-tools { display: flex; align-items: center; gap: 10px; }
.review-nav {
width: 44px; height: 44px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--card); color: var(--gray-light);
border: 1px solid var(--border); border-radius: var(--r);
font-size: 18px; cursor: pointer;
transition: border-color .15s, color .15s, opacity .15s;
}
.review-nav:hover:not(:disabled) { border-color: var(--red); color: var(--white); }
.review-nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.review-nav:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 900px) {
/* Telefone viena kortele, is uz krasto kyso kita. */
.review-grid { grid-auto-columns: 84%; }
.review-nav { display: none; }
}
/* Roman savo atsiliepima parase keturiomis eilutemis, ir jos issaugotos
pazodziui, kaip ir pats tekstas. pre-line jas parodo, o visus kitus
atsiliepimus palieka nepaliesta: ju tekste eilutes lauzimu tiesiog nera. */
.review-text { white-space: pre-line; }
/* ── /studija: faktu juosta ir nuomos salygos ───────────────────────
Faktu juosta stovi tarp antrastes ir pirmos nuotraukos. Ten ji todel,
kad nuomos uzklausai skaiciai svarbesni uz vaizda: zmogus pirmiausia
tikrina, ar apskritai tinka, ir tik paskui ziuri, ar grazu. */
.studio-facts {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface);
padding: 26px 0;
}
.facts-list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.facts-list li { display: flex; flex-direction: column; gap: 5px; }
.fact-n {
font-family: var(--f-display); font-size: 38px; line-height: 1;
color: var(--white); letter-spacing: 0.01em;
}
.fact-u { font-size: 17px; color: var(--gray-light); margin-left: 7px; }
.fact-l { font-size: 13px; color: var(--gray); line-height: 1.5; }
/* Nuomos ir erdves punktai. Ta pati dviju kolonu tinklelis kaip iranga ir
paslaugos zemiau, kad puslapis neatrodytu susiutas is skirtingu daliu. */
.term { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.term:last-of-type { border-bottom: none; }
.term h3 {
font-family: var(--f-display); font-size: 19px; letter-spacing: 0.02em;
text-transform: uppercase; color: var(--white); margin-bottom: 7px;
}
.term p { font-size: 14px; color: var(--gray-light); line-height: 1.7; margin: 0; }
@media (max-width: 768px) {
/* Keturi faktai viena eilute telefone susispaustu iki 70 px kolonos ir
skaiciai taptu neiskaitomi. Du po du telpa be lauzymo. */
.facts-list { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fact-n { font-size: 32px; }
}
/* ── Studijos galerija telefone ─────────────────────────────────────
Septyniolika nuotrauku viena po kita telefone uzeme 4297 px, t. y.
penkis su puse ekrano, ir buvo 37 % viso puslapio. Iki apacios ju
niekas nenuslenka.
Sprendimas toks pat kaip atsiliepimu juostoje, ir cia jis dar
paprastesnis: visos plyteles jau turi aspect-ratio 4/3 ir object-fit:
cover, todel juostoje jos savaime vienodo auksčio, be jokiu papildomu
taisykliu.
Plotis 86 %, o ne 100 %: is uz krasto turi kysoti kita nuotrauka, kitaip
niekas nesupras, kad ju daugiau. Procentas skaiciuojamas nuo konteinerio
vidaus, ne nuo ekrano - 375 px ekrane vidus yra 335 px, todel plytele
iseina apie 280 px. Tiek dar galima ziureti. Dvi kolonos butu davusios
183 px plyteles, o tokiame dydyje studijos erdves neivertinsi, nes
padidinimo cia nera. */
@media (max-width: 768px) {
.studio-grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 86%;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 10px;
scrollbar-width: none;
}
.studio-grid::-webkit-scrollbar { display: none; }
.studio-photo { scroll-snap-align: start; }
}
/* Vidines nuorodos i studijos puslapi. Sakinys, ne mygtukas: mygtukas
skaitomas kaip reklama ir praleidziamas, o sakinys perskaitomas kartu su
likusiu tekstu. Nuoroda pabraukta, kad ji nesusiplaktu su tekstu. */
.inline-studio {
max-width: 640px; margin: 0;
font-size: 15px; line-height: 1.75; color: var(--gray-light);
}
.inline-studio a {
color: var(--white);
text-decoration: underline;
text-decoration-color: var(--red);
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.inline-studio a:hover { color: var(--red); }
/* ── Zemelapis kontaktu puslapyje ───────────────────────────────────
Kol remelis neijungtas, blokas nera tuscias: jame stovi tai, del ko
zmogus i zemelapi ir ziuretu - kaip patekti ir kur pasistatyti masina.
Todel aukstis fiksuotas ir ijungus remeli puslapis nesokteli. */
.map-block {
position: relative;
aspect-ratio: 16 / 9;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
}
.map-inner {
height: 100%;
display: flex; flex-direction: column; justify-content: center;
gap: 22px; padding: 40px;
}
.map-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.map-facts li {
position: relative; padding-left: 18px;
font-size: 15px; line-height: 1.7; color: var(--gray-light);
}
.map-facts li::before {
content: ''; position: absolute; left: 0; top: 11px;
width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.map-note { margin: 0; font-size: 12px; color: var(--gray); line-height: 1.6; max-width: 460px; }
/* Ijungus remeli jis uzima visa bloka. */
.map-block.map-live iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 768px) {
/* 16/9 telefone paliktu apie 210 px auksčio, o ten netilptu nei faktai,
nei mygtukai. Todel telefone aukstis nustatomas pagal turini. */
.map-block { aspect-ratio: auto; min-height: 320px; }
.map-inner { padding: 28px 22px; gap: 18px; }
.map-block.map-live { aspect-ratio: 4 / 3; }
}
/* ── Kontaktu kortelės ir zemelapis ─────────────────────────────────
Iki 2026-08-27 korteliu isvaizda buvo surasyta tiesiai kontaktai.php
viduje, style atributais. Iskėlus jas i bendra faila, stiliams reikia
vardu - kartu dingo penki kartus pakartotas tas pats ilgas style. */
.contact-cards { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
background: var(--card); border: 1px solid var(--border);
padding: 20px 24px; border-radius: var(--r);
}
.cc-label {
font-family: var(--f-display); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--red); margin-bottom: 4px;
}
.contact-card a, .contact-card span { display: block; font-size: 15px; color: var(--gray-light); }
.contact-card a:hover { color: var(--white); }
/* Zemelapis. Abu sluoksniai lieka vietoje, keiciasi tik matomumas:
pirmoji versija faktus istrindavo ir grizti nebuvo kaip. */
.map-block { position: relative; }
.map-block .map-inner {
background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
display: flex; flex-direction: column; justify-content: center;
gap: 22px; padding: 40px;
}
.map-block.map-live .map-inner { display: none; }
.map-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--card); }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
background: var(--black); color: var(--white);
border: 1px solid var(--border); border-radius: var(--r);
padding: 10px 16px; min-height: 44px;
font-family: var(--f-display); font-size: 13px; letter-spacing: 0.1em;
text-transform: uppercase; cursor: pointer;
}
.map-close:hover { border-color: var(--red); }
.map-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.map-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.map-facts li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.7; color: var(--gray-light); }
.map-facts li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.map-note { margin: 0; font-size: 12px; color: var(--gray); line-height: 1.6; max-width: 460px; }
/* „Apie" puslapyje kortelės ir zemelapis stovi greta. */
.about-contact { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) {
.about-contact { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.map-block .map-inner { padding: 28px 22px; gap: 18px; }
.map-frame { aspect-ratio: 4 / 3; }
}
/* ── Rezervacijos pasirinkimas ──────────────────────────────────────
Trys korteles, kiekviena veda i Cal.com jau su konkrecia paslauga.
Visa kortele yra nuoroda, ne vien mygtukas apacioje: telefone taikinys
tada yra visas staciakampis, o ne 44 px juostele. */
.booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); }
.booking-card {
display: flex; flex-direction: column; gap: 10px;
background: var(--card); padding: 32px 28px;
transition: background .2s;
}
.booking-card:hover { background: #222; }
.booking-card:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.bc-time {
font-family: var(--f-mono, var(--f-body)); font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--red);
}
.booking-card h3 {
font-family: var(--f-display); font-size: 23px; letter-spacing: 0.02em;
text-transform: uppercase; color: var(--white); margin: 0;
}
.booking-card p { font-size: 14px; color: var(--gray-light); line-height: 1.7; margin: 0; flex: 1 0 auto; }
.bc-price { font-family: var(--f-display); font-size: 30px; color: var(--white); }
.bc-cta {
font-family: var(--f-display); font-size: 14px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--red);
}
.booking-other { margin: 28px 0 0; font-size: 14px; color: var(--gray); line-height: 1.7; max-width: 620px; }
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }
/* Kainos juosta be nuotraukos: isvaziuojamu filmavimu puslapyje studijos
nuotrauka butu melas, o savo nuotrauku dar nera. Vietoj dvieju kolonu -
viena, kad neliktu tuscios pusės. */
.pkg-banner-solo { grid-template-columns: 1fr; max-width: 720px; }
/* Isvaziuojamu filmavimu galerija: dvi nuotraukos, todel ne trys kolonos
kaip studijoje. Plytelės tos pacios .studio-photo - 4:3, object-fit
cover ir remelis, kad tamsiame fone matytusi krastas. */
.lauke-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 700px) { .lauke-grid { grid-template-columns: 1fr; } }
/* ── Du praleisti lietimo taikiniai ─────────────────────────────────
Rasta 2026-08-27 tikrinant veikima, ne koda. G8 taisymas 2026-08-25
apemė kalbu jungikli, mesaini ir socialinius zenkliukus, bet siedu
liko: footerio „Rezervuoti" atrode kaip mygtukas, taciau footerio
taisykle nuėmė jam uzpilda ir liko 75x30, o antrastes logotipas -
93x30. Riba 44x44 yra ne grozio klausimas: mazesniuose pirstu
pataikoma tik is antro karto.
Trecias radinys - nuoroda sakinio viduryje (.inline-studio a, 233x19) -
SAMONINGAI paliekama. WCAG 2.5.8 tokias nuorodas is reikalavimo isskiria,
o istempus ja iki 44 px issikreiptu pati pastraipa. */
@media (pointer: coarse), (max-width: 768px) {
.footer-col .btn {
min-height: 44px;
padding-top: 10px; padding-bottom: 10px;
align-items: center;
}
.nav-logo {
min-height: 44px;
display: inline-flex; align-items: center;
}
}
/* Gidai (/gidai/). Ilgas tekstas skaitomas kitaip nei paslaugu
puslapis: eilute iki ~70 zenklu, didesnis tarpas tarp pastraipu, lentele
su savo slinktimi, kad telefone puslapis nesislinktu i sona. */
.guide { font-size: 17px; line-height: 1.8; color: var(--gray-light); }
.guide p, .guide ul { max-width: 68ch; margin: 0 0 18px; }
.guide ul { padding-left: 20px; }
.guide li { margin-bottom: 8px; }
.guide h2 { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.3rem); text-transform: uppercase; line-height: 1.05; color: var(--white); margin: 48px 0 18px; }
.guide a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.guide-lead { font-size: 19px; color: var(--white); }
.guide-note { font-size: 14px; color: var(--gray); border-left: 2px solid var(--red); padding-left: 14px; }
.guide-table { overflow-x: auto; margin: 8px 0 14px; border: 1px solid var(--border); border-radius: var(--r); }
.guide-table table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; line-height: 1.55; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.guide-table th { font-family: var(--f-display); font-weight: 400; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); background: var(--surface); }
.guide-table tr:last-child td { border-bottom: none; }
.guide-table td:first-child { color: var(--white); }
.guide-sources { font-size: 15px; }