/* ══════════════════════════════════════════
   Referenssikuvagalleria – jaettu CSS
   Käytössä: view_answer_v2.html, public_profile.html
   Layoutit: bento-grid, thumbstrip, gallery overlay
   ══════════════════════════════════════════ */

/* ── Bento grid ── */
.va2-gallery { margin:0 0 22px; position:relative; }
.va2-gallery-header { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.va2-gallery-header h4 { font-size:14px; font-weight:600; margin:0; }
.va2-gallery-count { font-size:12px; color:#888; font-weight:400; }

.va2-bento {
	display:grid;
	/*grid-template-columns:1fr 1fr;*/
	/*aspect-ratio:3/1;*/
	grid-template-columns:3fr 2fr;  /* hero leveämpi */
    aspect-ratio:16/7;              /* tasapainoisempi */
	gap:4px;
	border-radius:12px;
	overflow:hidden;
	position:relative;
}
.va2-bento-hero { grid-row:1 / 2; }
.va2-bento-right {
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr;  /* 2×2 = 4 kuvaa */
	gap:4px;
}
.va2-bento-item {
	overflow:hidden;
	position:relative;
	cursor:pointer;
	background:#f0f0f0;
}

.va2-bento-item a { display:block; width:100%; height:100%; }
.va2-bento-item img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}
.va2-bento-item:hover img { transform:scale(1.05); }
.va2-bento-item::after {
	content:'';
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	transition:background .3s ease;
	pointer-events:none;
}
.va2-bento-item:hover::after { background:rgba(0,0,0,0.08); }

.va2-bento-more { position:relative; }
.va2-bento-more::before {
	content:'';
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.35);
	z-index:1;
	pointer-events:none;
	transition:background .2s;
}
.va2-bento-more:hover::before { background:rgba(0,0,0,0.15); }
.va2-bento-more-label {
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	color:#fff;
	font-size:15px;
	font-weight:600;
	pointer-events:none;
	text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.va2-gallery-show-all {
	position:absolute;
	bottom:12px;
	right:12px;
	background:rgba(255,255,255,0.95);
	border:1px solid #333;
	border-radius:6px;
	padding:7px 16px;
	font-size:13px;
	font-weight:600;
	color:#222;
	cursor:pointer;
	z-index:3;
	transition:background .15s, transform .1s;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
}
.va2-gallery-show-all:hover { background:#fff; transform:scale(1.03); }
.va2-gallery-show-all .fa { margin-right:5px; }
.va2-bento-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── PhotoSwipe thumbnail strip ── */
.pswp__thumbs-bar {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:76px;
	background:linear-gradient(transparent, rgba(0,0,0,0.6));
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:4px;
	padding:8px 16px 10px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	z-index:100;
}
.pswp__thumbs-bar::-webkit-scrollbar { height:0; }
.pswp__thumb {
	width:52px;
	height:52px;
	border-radius:4px;
	overflow:hidden;
	cursor:pointer;
	opacity:0.5;
	transition:opacity .2s, transform .2s;
	border:2px solid transparent;
	flex-shrink:0;
}
.pswp__thumb:hover { opacity:0.8; }
.pswp__thumb--active {
	opacity:1;
	border-color:#fff;
	transform:scale(1.08);
}
.pswp__thumb img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.pswp__caption {
	position:absolute;
	bottom:80px;
	left:0;
	right:0;
	text-align:center;
	color:rgba(255,255,255,0.85);
	font-size:13px;
	padding:6px 20px;
	pointer-events:none;
	text-shadow:0 1px 3px rgba(0,0,0,0.6);
}

@media (max-width:767px) {
	.va2-gallery-show-all { bottom:8px; right:8px; padding:6px 12px; font-size:12px; }
	.pswp__thumbs-bar { height:64px; padding:6px 10px 8px; }
	.pswp__thumb { width:42px; height:42px; }
}

/* Mobiili: muuttuu vaakasuoraan thumbnails-riviksi */
@media (max-width:767px) {
    .va2-bento {
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        aspect-ratio:auto;
        gap:4px;
    }
    .va2-bento-hero { width:120px; height:120px; flex-shrink:0; }
    .va2-bento-right { 
		display:flex; 
		flex-wrap:nowrap; 
		grid-template-columns:1fr 1fr;
		grid-template-rows:100px;
		/*.va2-bento-right .va2-bento-item:nth-child(n+3) { display:none; }*/
		}
    .va2-bento-right .va2-bento-item { width:120px; height:120px; flex-shrink:0; }
}

/* ── Gallery overlay (Airbnb-tyylinen) ── */
.va2-goverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:10000;
	background:#fff;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.va2-goverlay.va2-goverlay--open { display:block; }
.va2-goverlay-header {
	position:sticky;
	top:0;
	background:#fff;
	z-index:2;
	border-bottom:1px solid #eee;
	padding:0 20px;
}
.va2-goverlay-topbar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:56px;
}
.va2-goverlay-title { font-size:18px; font-weight:700; margin:0; }
.va2-goverlay-close {
	background:none;
	border:1px solid #ddd;
	border-radius:50%;
	width:36px;
	height:36px;
	font-size:18px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#333;
	transition:background .15s;
}
.va2-goverlay-close:hover { background:#f0f0f0; }
.va2-goverlay-tabs {
	display:flex;
	gap:4px;
	padding:8px 0 0;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.va2-goverlay-tabs::-webkit-scrollbar { height:0; }
.va2-gtab {
	padding:6px 16px;
	border:1px solid #ddd;
	border-radius:20px;
	font-size:13px;
	font-weight:500;
	color:#555;
	background:#fff;
	cursor:pointer;
	white-space:nowrap;
	transition:all .15s;
	flex-shrink:0;
}
.va2-gtab:hover { border-color:#333; color:#333; }
.va2-gtab--active {
	background:#222;
	color:#fff;
	border-color:#222;
}
.va2-gtab--active:hover { background:#333; border-color:#333; color:#fff; }
.va2-gtab-count {
	font-size:11px;
	font-weight:400;
	color:#999;
	margin-left:4px;
}
.va2-gtab--active .va2-gtab-count { color:rgba(255,255,255,0.7); }
.va2-goverlay-body {
	padding:16px 20px 40px;
	max-width:1200px;
	margin:0 auto;
}
.va2-goverlay-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
	gap:6px;
}
.va2-goverlay-img {
	overflow:hidden;
	border-radius:6px;
	cursor:pointer;
	position:relative;
	background:#f0f0f0;
}
.va2-goverlay-img img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}
.va2-goverlay-img[data-orientation="portrait"] img { aspect-ratio:3/4; }
.va2-goverlay-img[data-orientation="square"] img { aspect-ratio:1/1; }
.va2-goverlay-img:hover img { transform:scale(1.04); }
.va2-goverlay-empty {
	text-align:center;
	padding:40px 20px;
	color:#888;
	font-size:14px;
}
@media (max-width:767px) {
	.va2-goverlay-header { padding:0 14px; }
	.va2-goverlay-body { padding:12px 14px 30px; }
	.va2-goverlay-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:4px; }
	.va2-goverlay-img img { aspect-ratio:1/1; }
	.va2-gtab { padding:5px 12px; font-size:12px; }
}

/* ── Thumbstrip (neliö-thumbnailit) ── */
.va2-thumbstrip { margin:0 0 22px; }
.va2-thumbstrip-header { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.va2-thumbstrip-header h4 { font-size:14px; font-weight:600; margin:0; color:#888; }
.va2-thumbstrip-count { font-size:12px; color:#aaa; font-weight:400; }
.va2-thumbstrip-grid {
	display:flex;
	gap:6px;
	flex-wrap:wrap;
	position:relative;
}
.va2-thumbstrip-item {
	width:calc((100% - 42px) / 8);
	aspect-ratio:1/1;
	border-radius:8px;
	overflow:hidden;
	cursor:pointer;
	position:relative;
	background:#f0f0f0;
	flex-shrink:0;
}
.va2-thumbstrip-item a {
	display:block;
	width:100%;
	height:100%;
}
.va2-thumbstrip-item img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}
.va2-thumbstrip-item:hover img { transform:scale(1.05); }
.va2-thumbstrip-item::after {
	content:'';
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	transition:background .2s;
	pointer-events:none;
	border-radius:8px;
}
.va2-thumbstrip-item:hover::after { background:rgba(0,0,0,0.06); }
.va2-thumbstrip-more {
	position:relative;
}
.va2-thumbstrip-more::before {
	content:'';
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.45);
	z-index:1;
	pointer-events:none;
	border-radius:8px;
}
.va2-thumbstrip-more-label {
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:3;
	color:#fff;
	font-size:16px;
	font-weight:600;
	cursor:pointer;
}
.va2-thumbstrip-showall {
	display:inline-block;
	margin-top:8px;
	font-size:13px;
	font-weight:600;
	color:#16b0d7;
	cursor:pointer;
	background:none;
	border:none;
	padding:0;
	transition:color .15s;
}
.va2-thumbstrip-showall:hover { color:#11809c; text-decoration:underline; }
.va2-thumbstrip-showall .fa { margin-right:4px; }
.va2-thumbstrip-more-mobile::before { display:none; }
.va2-thumbstrip-more-label--mobile { display:none; }
@media (max-width:767px) {
	.va2-thumbstrip-item { width:calc((100% - 12px) / 3); height:auto; aspect-ratio:1/1; }
	.va2-thumbstrip-item:nth-child(n+7) { display:none; }
	.va2-thumbstrip-more-mobile::before { display:block; content:''; position:absolute; inset:0; background:rgba(0,0,0,0.45); z-index:1; pointer-events:none; border-radius:8px; }
	.va2-thumbstrip-more-label--mobile { display:flex; cursor:pointer; }
}