/* ==========================================================================
   works3 — gyvos peržiūros portfolio puslapyje
   Naudoja tuos pačius blokus kaip my_space.html.

   SVARBU: geometrija my_space puslapyje yra prie #laweb, ne prie .macmusic.
   Kadangi id gali būti tik vienas, čia tos pačios taisyklės perkeltos
   į klasę .laweb — kitaip .web{height:90%} neturi nuo ko skaičiuoti
   ir rėmelis susitraukia į juostelę.
   ========================================================================== */

.works3{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:0;                      /* jokiu juodu tarpu - plyteles viena prie kitos */
	padding:0;
}

.works3__cell{min-width:0}

/* Langas, kuriame gyvena sumažintas blokas. Aukštį nustato works3.js. */
.works3__scale{
	position:relative;
	width:100%;
	overflow:hidden;
}

/* Blokas renderinamas pilnu pločiu ir tik tada sumažinamas. */
.works3__scale > .laweb{
	width:1910px;
	transform-origin:0 0;
}


/* ---------- #laweb atitikmuo klasėje ---------- */
.works3 .laweb{
	position:relative;          /* be šito ikonos nuskrenda į puslapio kraštą */
	height:1200px;              /* be šito .web{height:90%} lygu nuliui */
	background-color:var(--bg,#6fccdb);
	opacity:.7;
	cursor:url('../images/iconos/white/white-zoom2.png') 40 40, auto;
}

/* Fono spalvos. Keiciamos tiesiog perrasant klase HTML'e. */
.works3 .laweb--pink   { --bg:#ff72b6 }
.works3 .laweb--teal   { --bg:#6fccdb }
.works3 .laweb--yellow { --bg:#fdf15d }
.works3 .laweb--green  { --bg:#5ac453 }
.works3 .laweb--purple { --bg:#aa8cec }

.works3 .laweb:hover{opacity:1}

.works3 .laweb > a{
	display:block;
	position:static;
}

.works3 .laweb .iconolink,
.works3 .laweb .iconomobile,
.works3 .laweb .iconodesktop{
	z-index:20;                 /* virš iframe */
}


/* ---------- pavadinimas: viduje plyteles, ne po ja ---------- */
.works3__name{
	position:absolute;
	left:5%;
	bottom:3.5%;
	margin:0;
	z-index:21;
	color:#000;
	font-size:15px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	pointer-events:none;
}


/* ---------- ikonos ---------- */
/* Serveryje pilnas ikonu komplektas yra tik rozines spalvos, todel ant
   rozines plyteles jos buvo nematomos. brightness(0) paverciam juodomis -
   taip vienodai matosi ant visu keturiu fono spalvu ir dera su pavadinimu. */
.works3 .laweb .iconolink,
.works3 .laweb .iconomobile,
.works3 .laweb .iconodesktop,
.works3 .laweb .iconodown{
	filter:brightness(0);
	opacity:.7;
	transition:opacity .2s ease;
}

.works3 .laweb a:hover .iconolink,
.works3 .laweb a:hover .iconomobile,
.works3 .laweb a:hover .iconodesktop,
.works3 .laweb a:hover .iconodown{
	opacity:1;
}

/* main.css slepia .iconodesktop - perjungima valdo works3.js per .is-mobile */
.works3 .laweb .iconodesktop{display:none}
.works3 .laweb.is-mobile .iconodesktop{display:block}
.works3 .laweb.is-mobile .iconomobile{display:none}


/* ---------- kol nnesikrauna arba neleidžia įterpti ---------- */
.works3__cell.is-blocked .works3__scale::after{
	content:"Ši svetainė neleidžia rodyti savęs rėmelyje";
	position:absolute;
	inset:0;
	display:grid;
	place-content:center;
	padding:24px;
	text-align:center;
	background:#111;
	color:#9aa0a6;
	font-size:13px;
	text-transform:none;
	letter-spacing:.04em;
}


/* ---------- adaptyvumas ---------- */
@media (max-width:900px){
	.works3{grid-template-columns:1fr}
}


/* ==========================================================================
   TELEFONAS  (2026-08)
   Svetaine renderinama 900px plociu ir sumazinama - taip matosi visas jos
   plotis, o sluoksnis atmintyje lieka mazas (ties 1910px Safari luzdavo).
   Plyteles atskirtos tarpais ir turi spalvota parastes ramsti aplink remeli.
   Tikslius matmenis skaiciuoja works3.js.
   ========================================================================== */

@media (max-width: 900px) {

	.works3 {
		gap: 18px;
		padding: 18px 16px 24px;
		background: #000;
	}

	.works3__scale {
		overflow: hidden;
		border-radius: 4px;
	}

	.works3__scale > .laweb {
		width: 100% !important;
		transform: none !important;
		height: 100%;
		padding: 0;
	}

	/* Remelis su spalvota parastes ramsciu aplink - JS deda dydzius */
	.works3 .laweb .frameborder,
	.works3 .laweb .frameborder.web {
		position: absolute;
		top: 14px;
		left: 14px;
		margin: 0;
		background: #fff;
		box-shadow: 0 4px 14px rgba(0,0,0,.3);
	}

	.works3__name {
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 13px;
		text-align: left;
		font-size: 13px;
		letter-spacing: .12em;
	}

	.works3 .laweb .iconomobile,
	.works3 .laweb .iconodesktop,
	.works3 .laweb .iconodown { display: none; }

	.works3 .laweb .iconolink {
		top: auto;
		bottom: 6px;
		right: 10px;
		margin-top: 0;
		width: 30px;
		height: auto;
	}
}