/*
 * Visoop — Project Tabs widget styles.
 * Element-level styling only; colors/spacing/typography come from Elementor
 * controls (set as inline styles by the editor) so users can re-skin
 * everything without touching this file.
 *
 * Responsive philosophy:
 *  - Desktop (≥1025px):  two-column grid with full-width image panel.
 *  - Tablet  (768–1024): same grid but tighter columns + padding.
 *  - Mobile  (≤767px):   stacks vertically, tabs become a horizontal
 *                        scrollable row, image flows to viewport width.
 * Inline styles from per-device Elementor controls override these CSS
 * defaults, so users can fine-tune at every breakpoint without losing
 * the sensible out-of-box behaviour.
 */

/* Layout-driving variables (set by the per-device Tabs Position control
   via selectors_dictionary). The fallbacks here match the "Left" preset
   so the widget still renders correctly even if those variables aren't
   defined yet — e.g. in older saved layouts. */
.visoop-pt {
	position: relative;
}

/* Tabs view — the original two-column (tabs sidebar + panel) grid. The
   per-device Layout controls set --vpt-grid-cols / --vpt-tabs-width / gap on
   THIS element now (moved off .visoop-pt so the grid view can be a sibling). */
.visoop-pt__tabsview {
	display: grid;
	grid-template-columns: var(--vpt-grid-cols, var(--vpt-tabs-width, 280px) minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

/* ─── View toggle (TABS / GRID pill) ──────────────────────────────────── */
.visoop-pt__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 24px;
}
.visoop-pt__switch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: #ece7e1;
}
.visoop-pt__switch-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .8rem;
	line-height: 1;
	padding: 10px 22px;
	border-radius: 999px;
	background: transparent;
	color: #0a0a0a;
	transition: background-color .2s ease, color .2s ease;
}
.visoop-pt__switch-btn.is-active {
	background: #0a0a0a;
	color: #fff;
}

/* ─── View visibility (root class toggles which block shows) ──────────── */
.visoop-pt.is-view-tabs .visoop-pt__grid { display: none; }
.visoop-pt.is-view-grid .visoop-pt__tabsview { display: none; }
/* The decorative shape belongs to the tabs layout (it sits behind the single
   featured image). In grid view there's no featured panel for it to sit
   against, so it just floats over the first card — hide it there. */
.visoop-pt.is-view-grid .visoop-pt__shape { display: none; }

/* ─── Grid view (responsive columns via --vpt-grid-cols-n) ────────────── */
.visoop-pt__grid {
	display: grid;
	grid-template-columns: repeat(var(--vpt-grid-cols-n, 2), minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}
.visoop-pt__card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #f0ebe5;
	padding: 16px;
}
.visoop-pt__card-media {
	line-height: 0;
	max-width: 100%;
}
.visoop-pt__card-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
.visoop-pt__card .visoop-pt__meta {
	margin-top: 14px;
}

/* ─── Tabs (left or top, both stack vertically) ──────────────────────── */
.visoop-pt__tabs {
	display: flex;
	flex-direction: var(--vpt-tabs-dir, column);
	padding: var(--vpt-tabs-pad, 0);
	gap: 12px;
	align-items: flex-start;
	position: relative;
	z-index: 3;
	min-width: 0;
}

.visoop-pt__tab {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: #0a0a0a;
	text-align: left;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.2;
	transition: color .15s ease;
	max-width: 100%;
	word-wrap: break-word;
}
.visoop-pt__tab:hover,
.visoop-pt__tab:focus-visible {
	outline: none;
}
.visoop-pt__tab.is-active {
	color: #ff5a1f;
}

/* ─── Panels (right column) ───────────────────────────────────────────── */
.visoop-pt__panels {
	position: relative;
	min-width: 0;
	z-index: 2;
}
.visoop-pt__panel {
	position: relative;
	display: none;
	background: #f0ebe5;
	padding: 24px 0 80px 80px;
}
.visoop-pt__panel.is-active {
	display: block;
	animation: visoopPtFade .25s ease both;
}
@keyframes visoopPtFade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── Custom partial left-bar (height %, vertical position) ───────────── */
.visoop-pt__panel::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background: transparent;
	pointer-events: none;
}

/* ─── Image + meta wrapper (right-aligned by default) ─────────────────── */
.visoop-pt__image-link {
	display: block;
	line-height: 0;
	max-width: 100%;
}
.visoop-pt__image-wrap {
	display: block;
	width: 75%;
	margin-left: auto;
	position: relative;
	z-index: 2;
	line-height: 0;
	max-width: 100%;
}
.visoop-pt__image-wrap img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ─── Title + Date row (sits inside the image wrapper) ────────────────── */
.visoop-pt__meta {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
	position: relative;
	z-index: 2;
	max-width: 100%;
}
.visoop-pt__title {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	line-height: 1.1;
	color: #0a0a0a;
	word-wrap: break-word;
}
.visoop-pt__title a {
	color: inherit;
	text-decoration: none;
}
.visoop-pt__title a:hover { opacity: .7; }
.visoop-pt__date {
	font-size: clamp(.82rem, 1.4vw, .95rem);
	color: #9ca3af;
	font-weight: 500;
}

/* ─── Decorative absolute shape ──────────────────────────────────────── */
.visoop-pt__shape {
	position: absolute;
	top: 280px;
	left: 40px;
	width: 140px;
	height: auto;
	opacity: .55;
	pointer-events: none;
	z-index: 10;
	max-width: 60%;
}

/* ─── Placeholder (editor only) ───────────────────────────────────────── */
.visoop-pt-placeholder {
	padding: 40px;
	border: 2px dashed #d1d5db;
	border-radius: 10px;
	color: #6b7280;
	text-align: center;
	font-style: italic;
}

/* ─── Tablet (≤ 1024px) — image-wrap + shape sizing only ───────────────
   Notes:
     - Image height: previously capped here with `max-height: 50vh`
       which defeated the per-device Image Height slider; removed.
     - Panel padding: previously hard-coded here which overrode the
       user's 0/0/0/0 entries; removed. Padding now belongs entirely
       to the Elementor responsive control.
*/
@media (max-width: 1024px) {
	.visoop-pt__image-wrap {
		width: 85%;
	}
	.visoop-pt__shape {
		max-width: 50%;
	}
}

/* ─── Mobile (≤ 767px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.visoop-pt__image-wrap {
		width: 100%;
		margin-left: 0;
	}
	.visoop-pt__meta {
		gap: 8px;
	}
	/* Shrink the design shape so it doesn't dominate the mobile layout
	   when the user only customised desktop sizing. */
	.visoop-pt__shape {
		max-width: 38%;
	}
}

/* ─── Small phones (≤ 480px) — tighter spacing ────────────────────────── */
@media (max-width: 480px) {
	.visoop-pt__tabsview {
		gap: 16px;
	}
	.visoop-pt__meta {
		flex-direction: column;
		align-items: flex-start;
	}
}