/* 360xBali Portfolio plugin styles — scoped under .x360p-wrap / .x360p-modal
   so they don't leak into the rest of the site. Palette matches the
   360xBali Elegant theme (red / black / white) but doesn't depend on it. */

.x360p-wrap {
	--x360p-red: #c8102e;
	--x360p-red-dark: #96091f;
	--x360p-ink: #0a0a0a;
	--x360p-line: rgba(255,255,255,0.18);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.x360p-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2rem; }
.x360p-filter button {
	background: rgba(255,255,255,0.08); border: 1px solid var(--x360p-line); color: rgba(255,255,255,0.85);
	padding: 9px 18px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
	transition: all .2s ease; font-family: inherit;
}
.x360p-filter button:hover, .x360p-filter button.is-active {
	background: var(--x360p-red); border-color: var(--x360p-red); color: #fff;
}

.x360p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.x360p-card {
	position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: #000;
	border: none; padding: 0; display: block; width: 100%; cursor: pointer; font-family: inherit;
}
.x360p-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.x360p-card:hover img { transform: scale(1.08); }
.x360p-card::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.92) 100%);
}
.x360p-badge {
	position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--x360p-red); color: #fff;
	font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 100px;
	white-space: nowrap;
}
.x360p-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.85); z-index: 1;
	width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.18);
	backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: all .25s ease;
}
.x360p-play svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }
.x360p-card:hover .x360p-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.x360p-label {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.1rem 1.2rem; text-align: left;
}
.x360p-label .loc { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--x360p-red); font-weight: 700; margin-bottom: 2px; }
.x360p-label .name { display: block; font-weight: 700; font-size: 0.98rem; color: #fff; }

.x360p-modal {
	/* Docked below the site header (kept always visible/usable) instead of
	   covering the full viewport — the tour still gets the rest of the
	   screen, but the normal site nav is never hidden or trapped behind it. */
	position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 850;
	background: #000;
	display: flex; flex-direction: column;
	opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.x360p-modal.is-open { opacity: 1; pointer-events: auto; }
.x360p-modal-bar {
	flex: 0 0 auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 14px 16px; background: #0a0a0a; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.x360p-modal-caption-top {
	color: rgba(255,255,255,0.85); font-weight: 700; font-size: 0.95rem;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.x360p-viewer { flex: 1 1 auto; width: 100%; min-height: 0; }
.x360p-modal-footer {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 14px 20px; background: #0a0a0a; color: #fff; flex-wrap: wrap;
}
.x360p-modal-footer span { font-weight: 600; }
.x360p-cta {
	background: var(--x360p-red); color: #fff; padding: 10px 20px; border-radius: 100px;
	font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap;
	transition: background .2s ease;
}
.x360p-cta:hover { background: var(--x360p-red-dark); }
.x360p-close {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
	color: #fff; padding: 10px 18px; border-radius: 100px; font-weight: 700; font-size: 0.9rem;
	font-family: inherit; cursor: pointer; transition: background .2s ease;
}
.x360p-close span { font-size: 1.3rem; line-height: 1; }
.x360p-close:hover { background: var(--x360p-red); border-color: var(--x360p-red); }

.x360p-featured { width: 100%; margin: 0 auto; }
.x360p-featured-frame {
	/* Full width, like the other homepage sections — height follows in
	   true 16:9 proportion instead of a fixed px value, so it can never
	   look stretched or squished at any container width. */
	position: relative; width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	border-radius: 20px; overflow: hidden; box-shadow: 0 20px 45px -18px rgba(0,0,0,0.35);
	border: 1px solid rgba(0,0,0,0.08); background: #000;
}
.x360p-featured-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.x360p-featured-caption { text-align: center; margin: 14px 0 0; font-weight: 700; color: var(--x360p-ink, #0a0a0a); }
@media (max-width: 640px) {
	/* The embedded tour's own on-screen menu needs real vertical room to
	   render without being clipped — a pure vw-based height gets too
	   short on narrow phones, so we guarantee a sane minimum here. */
	.x360p-featured-frame { height: clamp(320px, 78vw, var(--x360p-featured-height, 420px)); border-radius: 14px; }
}

@media (max-width: 1080px) { .x360p-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .x360p-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .x360p-grid { grid-template-columns: 1fr; } .x360p-modal-footer { flex-direction: column; align-items: flex-start; } }