/*
Theme Name: Saitai
Description: Kuruojama lietuviška interneto studijų platforma — a Swiss/minimal marketplace theme connecting clients with web-design studios. Requires the "Saitai Core" plugin (domain layer). Light-only, Awwwards-grade GSAP motion arrives in P1+.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: saitai
*/

/* ============================================================
   Typeface — self-hosted so Lithuanian diacritics (ą č ę ė į š ų ū ž)
   render in the SAME face as the rest of the text. The latin-ext subset
   carries them; without it the browser substitutes a mismatched font.
   ============================================================ */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design tokens — Swiss / International Typographic Style.
   Light-only by product decision. Single electric-blue accent.
   ============================================================ */
:root {
	--sans: 'Inter', "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--canvas: #ffffff;
	--panel: #f7f8fa;
	--panel-2: #eef0f4;
	--ink: #0a0a0a;
	--ink-soft: #2b2d33;
	--muted: #6b7078;
	--hairline: #e4e6eb;
	--hairline-strong: #c7cad2;
	--accent: #1a1aff;
	--accent-ink: #ffffff;
	--accent-soft: rgba(26, 26, 255, 0.06);
	/* brand purple — the violet the hero's client block already runs into */
	--purple: #7c3aed;
	--purple-soft: #a78bfa;

	/* Full-bleed: the container spans the viewport and only the gutter keeps
	   content off the edges. */
	--container: 100%;
	--gutter: 24px;
	--radius: 2px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 3px; }

h1, h2, h3, h4 {
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius);
}

/* ============================================================
   Layout
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main { min-height: 60vh; padding-block: 0 96px; }

/* ============================================================
   Header
   ============================================================ */
/* Floating rounded island — matches the rounded blocks + pill CTAs.
   The bar itself is transparent so page content scrolls past around it;
   pointer-events are re-enabled only on the pill so the gaps stay clickable. */
/* Back link (styled as a button) at the top of single listing / studio pages. */
.back-link { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 4px; padding: 9px 16px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); font: 600 0.85rem/1 var(--sans); color: var(--ink); text-decoration: none; transition: border-color .15s, color .15s; }
.back-link:hover { border-color: var(--accent); color: var(--accent); }
/* The whole top zone — greeting bar, category marquee and header — sticks as one. */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--canvas); }
.site-header {
	position: static;
	background: transparent;
	border-bottom: 0;
	padding-block: 14px;
	pointer-events: none;
}

.site-header__inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
	padding-inline: 26px;
	background: var(--canvas);
	border: 1px solid var(--hairline-strong);
	border-radius: 999px;
	box-shadow: 0 10px 30px -14px rgba(10, 10, 30, 0.22);
}

.wordmark {
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	text-decoration: none;
	/* Same blue as the primary "Prisijungti" button. */
	color: var(--accent);
}
/* Signed in the logo is a plain label, not a link. */
.wordmark--static { cursor: default; }
/* keep the two-tone wordmark — the tld is the same blue, just lighter */
.wordmark__tld { color: var(--accent); opacity: 0.55; font-weight: 400; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__list {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
}
.site-nav__list a {
	position: relative;
	color: var(--ink-soft);
	text-decoration: none;
	padding-block: 5px;
}
/* accent rule wipes in — the same gesture the editorial pages use for accent */
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav__list a:hover { color: var(--accent); }
.site-nav__list a:hover::after { transform: scaleX(1); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1;
	text-decoration: none;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--ink); color: var(--canvas); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 82%, #000); border-color: transparent; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	border-top: 1px solid var(--hairline);
	color: var(--muted);
	font-size: 0.85rem;
}
.site-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 28px;
}

/* ============================================================
   Utilities
   ============================================================ */
.kicker {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}

/* ---- Burger menu ---- */
.nav-burger {
	display: none; /* shown at the mobile breakpoint */
	flex-direction: column; justify-content: center; gap: 5px;
	width: 44px; height: 44px; padding: 0;
	border: 0; background: none; cursor: pointer; z-index: 1001; /* above the open sheet so × stays tappable */
}
.nav-burger__bar { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; }
/* × when open (GSAP also animates the panel; these are the resting states). */
.nav-open .nav-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
	:root { --gutter: 14px; }
	.nav-burger { display: flex; }

	/* Full-screen sheet holding every nav item. Hidden by default; GSAP reveals
	   it, with this as the no-JS / reduced-motion fallback via .nav-open. */
	.site-nav {
		position: fixed; inset: 0; z-index: 55;
		flex-direction: column; align-items: stretch; justify-content: flex-start;
		gap: 4px; padding: 88px 24px 32px;
		background: var(--canvas);
		transform: translateX(100%);
		visibility: hidden;
		overflow-y: auto;
	}
	.nav-open .site-nav { transform: none !important; visibility: visible !important; z-index: 1000; }
.nav-open .site-nav > * { opacity: 1; }
	.nav-open { overflow: hidden; }

	/* Every item becomes a big, tappable full-width row. */
	.site-nav__list { display: flex; flex-direction: column; gap: 4px; }
	.site-nav__list,
	.site-nav__list li { width: 100%; }
	.site-nav a,
	.site-nav__cta,
	.site-nav .btn,
	.site-nav__staff {
		display: flex; align-items: center; width: 100%;
		padding: 15px 4px; font-size: 1.15rem; border-radius: var(--radius);
	}
	.site-nav__list a { border-bottom: 1px solid var(--hairline); border-radius: 0; }
	.site-nav .btn { justify-content: center; margin-top: 12px; }
	.nav-badge { margin-left: 8px; }
}

/* ============================================================
   Sections / shared
   ============================================================ */
.section-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 24px;
	padding-top: 14px;
	border-top: 2px solid var(--ink);
}
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-top: 2px solid var(--ink);
	padding-top: 14px;
	margin-bottom: 24px;
}
.section-head .section-title { border: 0; padding: 0; margin: 0; }
.section-head__link { font-size: 0.92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-head__link:hover { text-decoration: underline; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-block: 72px 56px; }
.hero .kicker { margin-bottom: 20px; }
.hero__title {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin: 0 0 24px;
	max-width: 16ch;
}
.hero__lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; margin: 0 0 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   Steps
   ============================================================ */
.steps { padding-block: 40px; }
.steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
}
.step__soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.step { border-top: 1px solid var(--hairline-strong); padding-top: 18px; }
.step__n { display: block; font-size: 2rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 10px; }
.step__title { font-size: 1.1rem; margin: 0 0 6px; }
.step__text { color: var(--muted); margin: 0; font-size: 0.96rem; }

/* ============================================================
   Studio grid + card
   ============================================================ */
.teaser { padding-block: 48px; }
.studio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px 24px;
}
.studio-card { display: flex; flex-direction: column; }
.studio-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--panel-2);
	border: 1px solid var(--hairline);
	overflow: hidden;
}
.studio-card__cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.studio-card__media:hover .studio-card__cover { transform: scale(1.03); }
.studio-card__cover--empty { display: block; }
.studio-card__badge {
	position: absolute; top: 10px; left: 10px;
	font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
	background: var(--canvas); color: var(--muted);
	border: 1px solid var(--hairline-strong); padding: 3px 8px; border-radius: var(--radius);
}
.studio-card__body { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 8px; }
.studio-card__head { display: flex; align-items: center; gap: 10px; }
.studio-card__logo img { width: 32px; height: 32px; object-fit: contain; border: 1px solid var(--hairline); border-radius: var(--radius); }
.studio-card__name { font-size: 1.08rem; margin: 0; letter-spacing: -0.01em; }
.studio-card__name a { color: var(--ink); text-decoration: none; }
.studio-card__name a:hover { color: var(--accent); }
/* One line, ellipsised — a long tagline would otherwise make one card in the
   grid taller than the rest and break the row's alignment. */
.studio-card__tagline {
	margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.45;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-card__meta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 0.86rem; }
.tag-row { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 0.76rem; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 10px; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { border-top: 1px solid var(--hairline); margin-top: 64px; }
.cta-band__inner { text-align: center; padding-block: 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-band__title { font-size: 2rem; margin: 0; }
.cta-band__text { color: var(--muted); margin: 0 0 12px; }

/* ============================================================
   Archive (directory)
   ============================================================ */
.archive-head { padding-block: 48px 24px; }
/* Same scale as .search-page__title so both archive headings match. */
.archive-title { font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 8px 0 6px; }
.archive-count { color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }
.archive-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; padding-bottom: 96px; }

.facets { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.facet { display: flex; flex-direction: column; gap: 6px; }
.facet__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.facet__input {
	font: inherit; font-size: 0.92rem; padding: 9px 11px;
	border: 1px solid var(--hairline-strong); border-radius: var(--radius);
	background: var(--canvas); color: var(--ink); width: 100%;
}
.facet--check { flex-direction: row; align-items: center; gap: 9px; font-size: 0.92rem; cursor: pointer; }
.facet--check input { width: 16px; height: 16px; accent-color: var(--accent); }
.facet__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.facet__clear { font-size: 0.88rem; color: var(--muted); }

.archive-results { min-width: 0; }
.empty-state { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 48px 32px; text-align: center; }
/* On the messaging page the empty-state sits over the hero gif — give it a solid card. */
.is-messenger .empty-state { background: var(--canvas); margin: 24px auto; max-width: 560px; box-shadow: 0 8px 30px rgba(10,10,30,0.12); }
.empty-state h2 { font-size: 1.3rem; margin: 0 0 10px; }
.empty-state p { color: var(--muted); max-width: 44ch; margin: 0 auto 20px; }

.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--hairline-strong); border-radius: var(--radius);
	text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Single studio
   ============================================================ */
/* Inset to the content column so the rounded corners actually read — a
   full-bleed rounded band would just clip at the viewport edges. */
.studio__cover {
	width: calc(100% - var(--gutter) * 2);
	max-width: calc(var(--container) - var(--gutter) * 2);
	margin: 16px auto 0;
	background: var(--panel-2);
	aspect-ratio: 3 / 1;
	overflow: hidden;
	border-radius: 22px;
}
.studio__cover-img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Spinning gallery: the studio's work on a rotating 3D ring ---- */
.spin {
	position: relative;
	width: 100%; height: 100%;
	display: grid; place-items: center;
	overflow: hidden;
	perspective: 1500px;
	background: linear-gradient(140deg, hsl(var(--ph-h, 220) 64% 94%), hsl(calc(var(--ph-h, 220) + 42) 56% 86%));
}
/* WebGL canvas fills the band; the CSS ring below is the fallback. */
.spin__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spin.is-webgl .spin__ring { display: none; }

.spin__ring {
	position: relative;
	width: 240px; height: 152px;
	transform-style: preserve-3d;
	animation: saitai-spin 34s linear infinite;
}
.spin__card {
	position: absolute; inset: 0; margin: 0;
	/* fan the cards evenly around the ring and push them out from the centre */
	transform: rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(330px);
	border-radius: 12px;
	overflow: hidden;
	background: var(--canvas);
	border: 1px solid rgba(255, 255, 255, 0.65);
	box-shadow: 0 26px 50px -20px rgba(10, 10, 30, 0.45);
}
.spin__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* NB: don't set display here — .ph needs its grid centring for the monogram. */
.spin__card .ph { width: 100%; height: 100%; }
.spin__card .ph__mono { font-size: 1.5rem; }
@keyframes saitai-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin__ring { animation: none; } }
@media (max-width: 720px) {
	.spin__ring { width: 170px; height: 108px; }
	.spin__card { transform: rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(220px); }
}
.studio__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 28px 8px; }
.studio__identity { display: flex; align-items: center; gap: 16px; }
.studio__logo img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); }
/* Same scale as the archive / search / messages page titles. */
.studio__name { font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.studio__tagline { color: var(--ink-soft); margin: 6px 0 0; font-size: 1.05rem; }
.studio__site {
	display: inline-flex; align-items: center; gap: 5px;
	margin-top: 9px;
	font-size: 0.92rem; font-weight: 500;
	color: var(--accent); text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.studio__site:hover { border-bottom-color: var(--accent); }
.studio__site-arrow { font-size: 0.85em; transition: transform 0.2s ease; }
.studio__site:hover .studio__site-arrow { transform: translate(2px, -2px); }
.studio__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-block: 32px 96px; }
.studio__section { margin-bottom: 48px; }
.studio__about { color: var(--ink-soft); max-width: 68ch; }
.studio__about p { margin: 0 0 1em; }

.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.package { border: 1px solid var(--hairline); border-top: 2px solid var(--ink); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.package__name { margin: 0; font-size: 1.1rem; }
.package__price { margin: 0; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.package__price-to { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.package__desc { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.package__meta { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 0.86rem; display: flex; flex-direction: column; gap: 4px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.gallery__item { margin: 0; }
.gallery__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--hairline); overflow: hidden; }
.gallery__cap { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; min-width: 0; }
/* A pasted string with no spaces (a filename, a key) would otherwise run past
   the card edge — break it instead of overflowing. */
.gallery__title,
.gallery__desc,
.gallery__url { overflow-wrap: anywhere; word-break: break-word; }
.gallery__title { font-weight: 600; font-size: 0.96rem; }
.gallery__desc { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }

.fact-box { border-top: 2px solid var(--ink); margin: 0 0 20px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.fact dt { color: var(--muted); font-size: 0.86rem; margin: 0; }
.fact dd { margin: 0; text-align: right; font-size: 0.92rem; }
.link-box { display: flex; flex-direction: column; margin-bottom: 20px; }
.link-box__item { padding: 10px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; font-size: 0.94rem; }
.link-box__item:hover { color: var(--accent); }
/* ---- Contact = a live-message bubble, not a flat CTA ---- */
.bubble-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	/* speech-bubble silhouette: rounded with one squared-off tail corner */
	border-radius: 18px 18px 18px 4px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 22px -8px rgba(26, 26, 255, 0.6);
}
.bubble-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(26, 26, 255, 0.7); }
.bubble-cta__icon { display: flex; width: 20px; height: 20px; }
.bubble-cta__icon svg { width: 100%; height: 100%; }

/* Sticks alongside the profile so contacting the studio is always one click
   away. top clears the floating header island (14px offset + 64px pill). */
.msgbox {
	position: sticky;
	top: 100px;
	border: 1px solid var(--hairline);
	border-radius: 14px;
	padding: 16px;
	background: var(--canvas);
	box-shadow: 0 14px 34px -20px rgba(10, 10, 20, 0.3);
}
.msgbox__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.msgbox__av { width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); }
.msgbox__av img, .msgbox__av .ph { width: 100%; height: 100%; object-fit: cover; }
.msgbox__av .ph__mono { font-size: 1.2rem; }
.msgbox__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msgbox__who strong { font-size: 0.95rem; letter-spacing: -0.01em; }
.msgbox__status { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); }
.msgbox__status i { width: 7px; height: 7px; border-radius: 50%; background: #0a7f4f; flex: none; }

/* incoming bubble — tail on the bottom-left */
.msgbox__bubble {
	margin: 0 0 14px;
	background: var(--panel);
	border-radius: 14px 14px 14px 4px;
	padding: 12px 14px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ink-soft);
}
.msgbox__input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid var(--hairline-strong);
	border-radius: 999px;
	padding: 9px 9px 9px 16px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.msgbox__input:hover { border-color: var(--accent); }
.msgbox__placeholder { color: var(--muted); font-size: 0.88rem; }
.msgbox__send {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; flex: none;
	border-radius: 50%; background: var(--accent); color: #fff;
	transition: transform 0.2s ease;
}
.msgbox__send svg { width: 15px; height: 15px; }
.msgbox__input:hover .msgbox__send { transform: translateX(2px); }
.msgbox__note { margin: 12px 0 0; font-size: 0.76rem; color: var(--muted); text-align: center; }

/* profile composer (sends a real message) */
.msgbox__form {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--hairline-strong); border-radius: 999px;
	padding: 5px 5px 5px 14px;
	transition: border-color 0.2s ease;
}
.msgbox__form:focus-within { border-color: var(--accent); }
.msgbox__form textarea {
	flex: 1; border: 0; background: none; resize: none; font: inherit;
	font-size: 0.88rem; padding: 6px 0; max-height: 90px; color: var(--ink);
}
.msgbox__form textarea:focus { outline: none; }
.msgbox__form .msgbox__send { border: 0; cursor: pointer; }


/* Wide extra cover image under the works gallery. */

/* ---- Service search (archive) ---- */
.search-page { padding-block: 0 88px; }
/* Hero banner: 30% of the viewport height, rounded. The header pill IS the
   container box, so cancel the container's gutter to match its width exactly. */
.svc-hero {
	height: 30vh;
	min-height: 200px;
	margin-inline: calc(var(--gutter) * -1);
	margin-bottom: 32px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--panel);
}
.svc-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.search-page__title { margin: 8px 0 24px; font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; }
.svc-search { margin-bottom: 32px; }
.svc-search__bar { display: flex; gap: 10px; margin-bottom: 12px; }
.svc-search__bar input[type="search"] {
	flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 14px 18px;
	border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--canvas); color: var(--ink);
}
.svc-search__bar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.svc-search__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svc-search__filters select {
	font: inherit; font-size: 0.9rem; padding: 9px 12px;
	border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); color: var(--ink);
}
.svc-search__studios { margin-left: auto; font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.svc-grid--archive { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* ---- Single service listing (eBay/Vinted style) ---- */
.listing { padding-block: 32px 80px; }
/* The listing is a reading page, so it gets a wider inset than the full-bleed
   default — content shouldn't run to the window edge on a large monitor. */
.listing { padding-inline: clamp(0px, 4vw, 96px); }
/* Same inset on the studio profile. Applied to the inner containers rather than
   the <article>, so the full-bleed picture strip still runs edge to edge. */
.studio > .container { padding-inline: calc(var(--gutter) + clamp(0px, 4vw, 96px)); }

/* Everything on the page shares one grid: the content stacks down column 1
   (photos → description → related → studio card → ratings) while the buy panel
   holds column 2 and sticks as that column scrolls past it. */
.listing__layout {
	/* Right panel ~30% narrower, with a wider gutter between the two sections so
	   the extra room reads as separation rather than a stretched left column. */
	display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.7fr);
	gap: 40px 96px; align-items: start;
	/* The sticky panel spans every row (grid-row: 1 / -1). Without min-content
	   rows the grid spreads its height across those rows, which tears a gap
	   under the title that looks like a margin but isn't one. */
	grid-auto-rows: min-content;
}
.listing__layout > *:not(.listing__panel) { grid-column: 1; min-width: 0; }
/* Studio card on top spanning the full panel width, buy box beneath it. */
.listing__panel {
	grid-column: 2; grid-row: 1 / -1; position: sticky; top: 96px; align-self: start;
	display: flex; flex-direction: column; gap: 24px;
}
.listing__buy { min-width: 0; }
.listing__panel > .meet { margin-top: 0; }
@media (max-width: 1200px) {
	.listing__panel .meet__facts { grid-template-columns: minmax(0, 1fr); }
}
.listing__main { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel); }
/* Star rating badge in the corner of the main photo. */
.rating-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.72);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	backdrop-filter: blur(6px);
}
.rating-badge__star { color: #f5a623; font-size: 0.95rem; line-height: 1; }
.rating-badge__count { font-weight: 500; opacity: 0.75; }
.rating-badge--new .rating-badge__star { color: #cfd3da; }
.rating-badge--new { font-weight: 600; }
.listing__main-img, .listing__main .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.listing__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.listing__thumb { width: 68px; height: 68px; padding: 0; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: none; cursor: pointer; }
.listing__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__thumb.is-active { border-color: var(--accent); outline: 1px solid var(--accent); }
.listing__photo-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.listing__photo-admin form { margin: 0; }
.listing__photo-del { position: relative; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: none; cursor: pointer; line-height: 0; }
.listing__photo-del img { width: 44px; height: 44px; object-fit: cover; display: block; }
.listing__photo-del span { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.75rem; }
.listing__photo-del:hover span { background: #c0392b; }

.listing__cat { margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Title + categories head the left column, above the photos. Chips keep the
   pill treatment they had over the image, just on the page background now. */
.listing__head { grid-column: 1; margin-bottom: 18px; }
.listing__head .listing__title { margin: 0 0 10px; text-wrap: balance; }
.listing__cat { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.listing__cat span {
	padding: 5px 12px; border-radius: 999px;
	background: var(--panel); border: 1px solid var(--hairline-strong); color: var(--ink);
	text-transform: none; letter-spacing: 0;
}
.listing__cat--over span {
	padding: 6px 12px; border-radius: 999px;
	background: var(--canvas); color: var(--ink);
	box-shadow: 0 8px 20px -10px rgba(10, 10, 30, 0.5);
}
.listing__title { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; }
.listing__price { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.listing__unit { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.listing__meta { margin: 0 0 18px; font-size: 0.88rem; color: var(--muted); }
.listing__studio { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 20px; border: 1px solid var(--hairline); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.listing__studio:hover { border-color: var(--accent); }
.listing__studio-av { width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 10px; border: 1px solid var(--hairline); }
.listing__studio-av img, .listing__studio-av .ph { width: 100%; height: 100%; object-fit: cover; }
.listing__studio-sub { display: block; font-size: 0.78rem; color: var(--accent); }
.listing__compose { display: flex; flex-direction: column; gap: 8px; }
.listing__compose-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.listing__compose textarea { font: inherit; font-size: 0.92rem; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); resize: vertical; color: var(--ink); background: var(--canvas); }
.listing__compose textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.listing__own { font-size: 0.88rem; color: var(--muted); font-style: italic; }

/* The listing's message box sits inside the package block now, so it neither
   floats as a chat widget nor sticks — the block scrolls as one. */
.listing__msg .msgbox { position: static; border: 0; box-shadow: none; padding: 0; }

/* Short "about the company", sits under the message box in the right panel. */
.about-co { margin-top: 18px; padding: 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel); }
.about-co__title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.about-co__tagline { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.about-co__text { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.about-co__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 0.82rem; color: var(--muted); }
.about-co__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
/* Big circular avatar, like a profile picture. */
.about-co__logo {
	width: 84px;
	height: 84px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid var(--canvas);
	box-shadow: 0 0 0 1px var(--hairline-strong);
	background: var(--canvas);
}
.about-co__logo img, .about-co__logo .ph { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.about-co__logo .ph__mono { font-size: 1.5rem; }
.about-co__co-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

/* Locked contacts: a blurred dummy for logged-out visitors. */

.about-co__contacts { margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.about-co__sub { margin: 0 0 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.about-co__contact { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 1rem; color: var(--ink); text-decoration: none; word-break: break-word; }
.about-co__contact:hover { color: var(--accent); }
.about-co__contact svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.about-co__contact:hover svg { color: var(--accent); }
.about-co__note { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); }
.about-co__socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; font-size: 0.84rem; font-weight: 600; }
.about-co__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); }

/* Ratings. */
.listing__ratings { margin-top: 56px; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rating--empty { flex-direction: column; align-items: flex-start; gap: 8px; }
.rating__stars { display: inline-flex; gap: 2px; font-size: 1.5rem; line-height: 1; }
.rating__star { color: var(--hairline-strong); }
.rating__star.is-on { color: #f5a623; }
.rating__score { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.rating__count { font-size: 0.9rem; color: var(--muted); }

/* Lower half now lives inside column 1, so it stacks rather than splitting. */
.listing__lower { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; margin-top: 56px; }
.gallery--related { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Breathing room under the related work before the studio card. The captions
   are variable-height, so the gap has to come from the section, not the cards. */
.listing__related { margin-bottom: 32px; }

/* Description: an opening lead paragraph, then check-marked feature rows. */
.listing__desc { margin-top: 0; }
.listing__body { max-width: 72ch; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.listing__body > p { margin: 0 0 18px; }
/* Lead paragraph: still larger and darker than the body, but no accent rule —
   the size alone is enough to set it apart. */
.listing__body > p:first-of-type {
	margin-bottom: 24px;
	font-size: 1.18rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--ink);
}
.listing__list { list-style: none; display: grid; gap: 12px; margin: 24px 0 28px; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel); }
.listing__list li { position: relative; padding-left: 32px; color: var(--ink); }
.listing__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	/* white check drawn as a mask so it scales crisply */
	background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
	background-size: 6px 2px, 2px 9px;
	background-position: 4px 10px, 8px 4px;
	background-repeat: no-repeat;
	transform: rotate(-45deg);
	box-shadow: 0 0 0 0 var(--accent-soft);
}
/* One column on narrow screens: the panel drops back into the flow, unstuck,
   and follows the photos instead of holding a column of its own. */
@media (max-width: 860px) {
	.listing__layout { grid-template-columns: 1fr; gap: 24px; }
	.listing__layout > *:not(.listing__panel) { grid-column: 1; }
	.listing__panel { grid-column: 1; grid-row: auto; position: static; }
}

/* "Mano profilis" — service management rows. */
.svc-manage { margin-bottom: 12px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); }
.svc-manage__row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.svc-manage__row::-webkit-details-marker { display: none; }
.svc-manage__thumb { width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--hairline); }
.svc-manage__thumb img, .svc-manage__thumb .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-manage__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.svc-manage__price { font-size: 0.82rem; color: var(--muted); }
.svc-manage__toggle { flex: none; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.svc-manage[open] .svc-manage__toggle { color: var(--muted); }
.svc-manage__body { display: flex; flex-direction: column; gap: 18px; padding: 4px 14px 18px; border-top: 1px solid var(--hairline); }
.svc-manage__form { display: flex; flex-direction: column; gap: 14px; }
.svc-manage__actions { display: flex; gap: 10px; align-items: center; }
.svc-manage__form input[type="text"], .svc-manage__form input[type="number"], .svc-manage__form input[type="file"], .svc-manage__form select, .svc-manage__form textarea {
	width: 100%; font: inherit; font-size: 0.92rem; padding: 10px 12px;
	border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); color: var(--ink);
}
.svc-manage__form textarea { resize: vertical; }

/* Listing tabs (description / seller info + contacts). */
.listing__tabs { margin-top: 48px; }
.tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.tabs__btn { padding: 12px 18px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs__btn:hover { color: var(--ink); }
.tabs__btn.is-active { color: var(--ink); border-bottom-color: var(--accent); }
/* Without JS every panel stays visible; JS adds .tabs-ready then hides inactive. */
.tabs-ready .tabs__panel { display: none; }
.tabs-ready .tabs__panel.is-active { display: block; }

/* ---- "Susipažinkite" card: the studio behind the work, where reviews go ----
   Head, rating and CTA sit outside the box; the box holds only the facts and
   the bio, matching how the reference marketplace stacks the block. */
.meet__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.meet__av { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: block; }
.meet__av img, .meet__av .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet__who { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.meet__name { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meet__name strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.meet__role { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.meet__rating { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.meet__star { color: var(--ink); }
.meet__count { color: var(--muted); }
/* Online reads as a pill, not a status line — it is the one live fact here. */
.meet__seen {
	font-size: 0.76rem; color: var(--muted);
	border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 2px 10px;
}
.meet__seen.is-online {
	color: #1a7f4b; border-color: #9ad9b6;
	display: inline-flex; align-items: center; gap: 6px;
}
.meet__seen.is-online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1faa5f; }
.meet__cta { margin-bottom: 22px; }
/* Client profile: avatar picker sits beside the current picture. */
.cp-avatar { display: flex; align-items: center; gap: 14px; }
.cp-avatar__img { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 1px solid var(--hairline-strong); }
.cp-avatar__img img, .cp-avatar__img .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sticky-panel card, halved again: the height was going into stacked blocks
   (head, CTA, facts, bio, contacts) each with its own vertical padding. The
   fixes are structural — put the CTA next to the name, run facts and contacts
   in three columns, and clamp the bio to two lines. */
/* NB: .meet__cta is a SIBLING of .meet__head, not a child — anchor it to .meet
   or it positions against the sticky panel and lands over the packages box. */
.listing__panel .meet { margin-top: 0; position: relative; }
.listing__panel .meet__card { padding: 12px 16px; }

/* Head row carries the CTA on its right instead of a full-width button below. */
.listing__panel .meet__head {
	flex-direction: row; align-items: center; gap: 12px; margin-bottom: 10px;
	padding-right: 150px;
}
.listing__panel .meet__av { width: 48px; height: 48px; }
.listing__panel .meet__who { gap: 2px; }
.listing__panel .meet__name strong { font-size: 0.98rem; }
.listing__panel .meet__role,
.listing__panel .meet__rating { font-size: 0.8rem; }
.listing__panel .meet__cta {
	/* z-index so a neighbouring block's edit overlay can never sit on top of it
	   and swallow the click. */
	position: absolute; right: 0; top: 2px; z-index: 6;
	margin: 0; width: auto; padding: 8px 16px; font-size: 0.82rem;
}

/* Contacts side by side rather than a four-row stack. Now the card's only
   body content, so no divider above it. */
.listing__panel .meet__contacts {
	margin-top: 0; padding-top: 0; border-top: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
}
.listing__panel .about-co__sub { margin: 0; width: 100%; }
.listing__panel .about-co__contact { padding: 2px 0; font-size: 0.8rem; gap: 7px; }
.listing__panel .about-co__contact svg { width: 15px; height: 15px; }

@media (max-width: 1200px) {
	.listing__panel .meet__head { padding-right: 0; }
	.listing__panel .meet__cta { position: static; width: 100%; text-align: center; margin-top: 10px; }
}

/* In the studio profile's right column the card is narrow, so the head stacks
   and the facts drop to a single column instead of squeezing two. */
.studio__aside .meet { position: sticky; top: 96px; }
.studio__aside .meet__head { flex-direction: column; align-items: flex-start; gap: 10px; }
.studio__aside .meet__av { width: 64px; height: 64px; }
.studio__aside .meet__card { padding: 18px; }
.studio__aside .meet__facts { grid-template-columns: 1fr; gap: 14px; }
/* Contacts under the studio title: icon + label chips, wrapping in one row. */
.studio__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.studio__contact {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 15px; border-radius: 999px;
	border: 1px solid var(--hairline-strong); background: var(--canvas);
	font-size: 1rem; line-height: 1; color: var(--ink); text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.studio__contact svg { flex: none; width: 20px; height: 20px; color: var(--muted); transition: color 0.15s ease; }
.studio__contact:hover { color: var(--accent); border-color: var(--accent); }
.studio__contact:hover svg { color: var(--accent); }
/* "+N" chip: same shape as a tag, but clearly a control. */
.tag--more { border-style: dashed; cursor: pointer; font: inherit; font-size: inherit; color: var(--muted); background: none; }
.tag--more:hover { color: var(--accent); border-color: var(--accent); }

/* Pencil beside the studio title (owner only). */
.studio__name-edit {
	margin-left: 12px; vertical-align: middle;
	width: 34px; height: 34px; padding: 0;
	border: 1px solid var(--hairline-strong); border-radius: 50%;
	background: var(--canvas); color: var(--muted);
	font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.studio__name-edit:hover { color: var(--accent); border-color: var(--accent); }

/* Self-hosted video: match the iframe frame's shape. */
.studio__video-frame--file video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #000; }

/* Work photos shown in the gallery dialog: not deletable here, but linked. */
.hero-thumb--linked { position: relative; }
.hero-thumb__go {
	position: absolute; left: 4px; right: 4px; bottom: 4px;
	padding: 4px 0; border: 0; border-radius: 6px; cursor: pointer;
	background: rgba(10, 10, 30, 0.72); color: #fff; font: inherit; font-size: 0.7rem;
}
.hero-thumb__go:hover { background: var(--accent); }

/* ---- Smart-ID verification + verified badge ---- */
.verified-badge { display: inline-flex; align-items: center; gap: 6px; color: #1a6dff; font-size: 0.8rem; font-weight: 600; vertical-align: middle; }
.verified-badge svg { width: 18px; height: 18px; flex: none; }
.verified-badge span { color: var(--ink); }

.sid { border: 1px solid var(--hairline-strong); border-radius: var(--radius); padding: 18px; }
.sid__form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sid__form .field { flex: 1 1 220px; margin: 0; }
/* The code is the anti-phishing check — make it impossible to miss. */
.sid__vc {
	margin: 16px 0 0; font-size: 2.4rem; font-weight: 800; letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums; color: var(--accent);
}
.sid__qr { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 16px 0; }
.sid__qr svg { width: 220px; height: 220px; border: 1px solid var(--hairline); border-radius: 8px; }
.sid__open { align-self: center; }
.sid__status { margin: 8px 0 0; font-size: 0.88rem; color: var(--muted); }
.sid__status--err { color: #b3261e; }
.sid__status--ok { color: #0a7f4f; }
.sid__done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.sid__done-name { font-weight: 600; }
.btn--danger { color: #b3261e; border-color: #e6b4b0; }
.btn--danger:hover { background: #b3261e; border-color: #b3261e; color: #fff; }

/* Preview sits apart from the cancel/save pair. */
.edit-form__preview { margin-right: auto; }

/* Per-type admin row inside a package panel. */
.pkgtabs__admin { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.pkgtabs__btn--add { color: var(--accent); }

/* Delete forms targeted by a button's `form` attribute — never displayed. */
.is-hidden-form { display: none; }

/* A work's categories on its card. */
.gallery__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.gallery__tag { padding: 3px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--hairline); font-size: 0.72rem; color: var(--ink-soft); }

/* Tag picker: categories as toggleable chips (used for a work's categories). */
.tag-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pick__item { cursor: pointer; }
.tag-pick__item input { position: absolute; opacity: 0; pointer-events: none; }
.tag-pick__item span {
	display: inline-block; padding: 7px 13px; border-radius: 999px;
	border: 1px solid var(--hairline-strong); font-size: 0.85rem; line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tag-pick__item input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.tag-pick__item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Owner-only chip that opens the contacts dialog. */
.studio__contact--edit { border-style: dashed; color: var(--muted); cursor: pointer; font: inherit; font-size: 1rem; }
.studio__contact--edit:hover { color: var(--accent); border-color: var(--accent); }

.meet__card { border: 1px solid var(--hairline-strong); border-radius: var(--radius); padding: 26px; }
.meet__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 0; }
.meet__fact dt { font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; }
.meet__fact dd { margin: 0; font-size: 0.95rem; font-weight: 600; }
.meet__about { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 0.95rem; color: var(--ink-soft); }
.meet__about p { margin: 0 0 14px; }
.meet__about p:last-child { margin-bottom: 0; }
.meet__contacts { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.meet__link { display: inline-block; margin-top: 18px; font-weight: 600; }
@media (max-width: 560px) {
	.meet__facts { grid-template-columns: 1fr; }
	.meet__av { width: 64px; height: 64px; }
}

/* The composer sits inside the package block, so the two read as one card:
   the tabs box loses its bottom edge and the composer picks it up. */
.listing__msg--attached {
	border: 1px solid var(--hairline-strong); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: 16px; margin-top: -19px; margin-bottom: 18px;
}
.pkgtabs:has(+ .listing__msg--attached) { border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; }
/* The chosen type inside the composer: its name, with the category called out
   as a filled chip so it reads as the thing being asked about. */
.msgbox__pkg { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msgbox__pkg-name {
	padding: 6px 12px; border-radius: 999px;
	background: var(--panel-2); font-size: 0.78rem; font-weight: 600;
}
.msgbox__pkg-cat {
	padding: 6px 12px; border-radius: 999px;
	background: var(--ink); color: var(--canvas);
	font-size: 0.78rem; font-weight: 600;
}

/* ---- Package selector in the listing panel ----
   One tab per package the studio defined — no fixed tier count, so the nav
   scrolls sideways rather than trying to fit everything. */
.pkgtabs { border: 1px solid var(--hairline-strong); border-radius: var(--radius); margin: 0 0 18px; overflow: hidden; }
.pkgtabs__nav {
	display: flex; overflow-x: auto; scrollbar-width: none;
	border-bottom: 1px solid var(--hairline-strong); background: var(--panel-2);
}
.pkgtabs__nav::-webkit-scrollbar { display: none; }
.pkgtabs__btn {
	flex: 0 0 auto; padding: 11px 16px; border: 0; border-bottom: 2px solid transparent;
	background: none; font: inherit; font-size: 0.85rem; font-weight: 600;
	color: var(--muted); cursor: pointer; white-space: nowrap;
}
.pkgtabs__btn:hover { color: var(--ink); }
.pkgtabs__btn.is-active { color: var(--ink); background: var(--canvas); border-bottom-color: var(--accent); }
.pkgtabs__panel { padding: 16px; }
.pkgtabs__panel .listing__price { margin-bottom: 8px; }
.pkgtabs__desc { margin: 0 0 12px; font-size: 0.86rem; color: var(--ink-soft); }
.pkgtabs__facts { list-style: none; margin: 0 0 14px; padding: 0; font-size: 0.82rem; color: var(--muted); }
.pkgtabs__facts li + li { margin-top: 4px; }
.pkgtabs__facts strong { color: var(--ink); font-weight: 600; }
/* Same progressive-enhancement contract as .tabs: no JS → all packages readable. */
.pkgtabs-ready .pkgtabs__panel { display: none; }
.pkgtabs-ready .pkgtabs__panel.is-active { display: block; }

/* Seller block lives in the listing's right-hand panel. */
.seller { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.seller__sub { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.seller__head { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.seller__head:hover { border-color: var(--accent); }
.seller__name { display: block; font-size: 1rem; }
.seller__tagline { display: block; margin-top: 2px; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.seller__facts { width: 100%; }
.seller__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Service listing cards (the thing deals are negotiated around). */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
/* Phones: keep two columns instead of collapsing to one. */
@media (max-width: 600px) {
	.svc-grid, .svc-grid--archive { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); }
.svc-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card__media img, .svc-card__media .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.svc-card__title { margin: 0; font-size: 0.98rem; }
.svc-card__title a { color: var(--ink); text-decoration: none; }
.svc-card__title a:hover { color: var(--accent); }
.svc-card__price { margin: 0; font-weight: 700; font-size: 0.95rem; }
.svc-card__meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.svc-card:hover .gallery__tools, .svc-card:focus-within .gallery__tools { opacity: 1; }

/* Editable content gallery (unlimited photo grid). */
.cgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cgallery__item { margin: 0; }
.cgallery__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }

/* "View full conversation" link for a returning client. */
.msgbox__continue { display: inline-block; margin-bottom: 8px; font-size: 0.82rem; font-weight: 600; color: var(--accent); }

/* Service selector shown above the profile message box. */
.msgbox__compose { display: flex; flex-direction: column; gap: 10px; }
.msgbox__service { display: flex; flex-direction: column; gap: 5px; }
.msgbox__service-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.msgbox__service select {
	width: 100%;
	font: inherit;
	font-size: 0.86rem;
	padding: 9px 12px;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
}
.msgbox__service select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Details sidebar: the request's own column, scrolling independently so a long
   fact list never steals height from the conversation. */
.thread-brief {
	border-left: 1px solid var(--hairline); background: var(--canvas);
	padding: 18px; overflow-y: auto; min-height: 0;
}
/* Listing card at the top: thumbnail + name + price, the whole thing a link. */
.thread-brief__card {
	display: flex; gap: 12px; align-items: flex-start;
	padding-bottom: 16px; margin-bottom: 16px;
	border-bottom: 1px solid var(--hairline);
	text-decoration: none; color: var(--ink);
}
.thread-brief__thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--hairline); }
.thread-brief__thumb img, .thread-brief__thumb .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.thread-brief__thumb .ph__mono { font-size: 0.85rem; }
.thread-brief__card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.thread-brief__card-body strong { font-size: 0.92rem; line-height: 1.3; }
.thread-brief__price { font-size: 0.82rem; color: var(--muted); }
.thread-brief__card:hover strong { text-decoration: underline; }

.thread-brief__title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; }
/* Label left, value right — a ledger, not chips, so values line up to scan. */
.thread-brief__facts { margin: 0 0 18px; }
.thread-brief__fact {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; padding: 5px 0;
}
.thread-brief__fact dt { font-size: 0.82rem; color: var(--muted); flex: none; }
.thread-brief__fact dd { margin: 0; font-size: 0.82rem; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.thread-brief__facts--contacts { margin-bottom: 0; padding-top: 14px; border-top: 1px solid var(--hairline); }

/* Signed contract: pinned to the bottom of the sidebar and deliberately a full
   primary button — the agreement is the one thing both sides come back for. */
.thread-brief { display: flex; flex-direction: column; }
.thread-brief__foot { margin-top: auto; padding-top: 18px; }
.thread-brief__contract { display: block; width: 100%; text-align: center; }
.thread-brief__signed { display: block; margin-top: 8px; text-align: center; font-size: 0.76rem; color: var(--muted); }
.thread-brief__close { display: block; width: 100%; margin-bottom: 10px; }
.thread-brief__closed { margin: 0 0 10px; text-align: center; font-size: 0.8rem; color: var(--muted); }
/* Destructive: red text, and red fill on hover so the intent is unmistakable. */
.thread-brief__delete { display: block; width: 100%; margin-bottom: 10px; color: #b3261e; border-color: #e6b4b0; }
.thread-brief__delete:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
/* Owner actions (publish + delete) — a bar at the very top of the listing page. */
.listing__owner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.listing__owner-actions form { margin: 0; }
.listing__delete-btn { color: #b3261e; border-color: #e6b4b0; }
.listing__delete-btn:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
.listing__pending-note { margin: 0 0 18px; font-size: 0.86rem; color: var(--ink-soft); }
/* Password field: show/hide (eye) toggle. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 6px; background: none; border: 0; cursor: pointer; color: var(--ink-soft); line-height: 0; }
.pw-eye:hover { color: var(--ink); }

/* Live (no-reload) field validation messages. */
.field-error { margin: 5px 0 0; font-size: 0.82rem; color: #b3261e; }
.field.has-error input, .field.has-error .tel-wrap { border-color: #b3261e; }
.field.has-error .tel-wrap input { border-color: #b3261e; }
.field.has-error input:focus { outline-color: #b3261e; }

/* Lithuanian phone input: fixed +370 prefix, user types the local 6xxxxxxx. */
.tel-wrap { display: flex; align-items: stretch; }
.tel-prefix { display: flex; align-items: center; padding: 0 12px; font-weight: 600; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--hairline-strong); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.tel-wrap > input { flex: 1; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Read-only footer where the composer used to be. */
.msg-closed {
	flex: none; margin: 0; padding: 18px 14px; text-align: center;
	border-top: 1px solid var(--hairline); background: var(--panel);
	font-size: 0.86rem; color: var(--muted);
}

/* ============================================================
   Messaging page
   ============================================================ */
.msg-page { padding-block: 40px 96px; }
.msg-page__title { font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 8px 0 24px; }
/* ---- Messenger: the app fills the viewport and never scrolls the page ----
   The whole point of a messenger is that the inbox and the thread stay put;
   if the page scrolls, you lose both. So the page itself is locked and only
   the two inner panes scroll. */
/* 100dvh, not vh: on mobile the browser chrome would otherwise push the
   composer below the fold. The body becomes the flex column so <main> can
   claim exactly the space the top bars leave. */
.is-messenger { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; background: url('assets/img/profilis-hero.gif') center / cover no-repeat fixed; }
.is-messenger .site-main { min-height: 0; flex: 1; padding-block: 0; display: flex; }
.is-messenger .msg-page { display: flex; flex-direction: column; min-height: 0; flex: 1; padding-block: 14px 0; }
/* The hero and the big title are page furniture — they'd eat the height the
   conversation needs, so they go on this page only. */
.is-messenger .svc-hero,
.is-messenger .msg-page__head { display: none; }
.is-messenger .site-footer { display: none; }
.is-messenger .msg-layout { flex: 1; min-height: 0; height: auto; margin-bottom: 14px; }

.msg-layout {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr) 320px;
	gap: 0;
	border: 1px solid var(--hairline);
	border-radius: 14px;
	overflow: hidden;
	height: clamp(560px, 80vh, 900px);
}

/* min-height:0 on both grid items is load-bearing: a grid item defaults to
   min-height:auto, so a tall thread makes .msg-thread grow past the layout's
   clamped height and the composer gets clipped off the bottom. */
.msg-list { border-right: 1px solid var(--hairline); background: var(--panel); overflow-y: auto; min-height: 0; }
.msg-list__title {
	position: sticky; top: 0; z-index: 1;
	margin: 0; padding: 14px 16px;
	font-size: 0.95rem; font-weight: 700;
	background: var(--panel); border-bottom: 1px solid var(--hairline);
}
.msg-item { display: flex; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); transition: background 0.15s ease; }
.msg-item:hover { background: var(--panel-2); }
.msg-item.is-active { background: var(--canvas); box-shadow: inset 3px 0 0 var(--accent); }
.msg-item__av { width: 36px; height: 36px; flex: none; border-radius: 9px; overflow: hidden; border: 1px solid var(--hairline); }
.msg-item__av img, .msg-item__av .ph { width: 100%; height: 100%; object-fit: cover; }
.msg-item__av .ph__mono { font-size: 0.75rem; }
.msg-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.msg-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg-item__top strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item__badge { flex: none; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
.msg-item__last { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mobile-only "view all info" toggle + the info sidebar's back-to-conversation button. */
.msg-thread__info { margin-left: auto; padding: 7px 13px; border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--canvas); font: 600 0.76rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.thread-brief__back { align-self: flex-start; margin-bottom: 12px; padding: 8px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); font: 600 0.82rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.msg-thread__info, .thread-brief__back { display: none; }

.msg-thread { display: flex; flex-direction: column; background: var(--canvas); min-height: 0; overflow: hidden; }
.msg-thread__head { display: flex; align-items: center; gap: 11px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.msg-thread__av { width: 38px; height: 38px; flex: none; border-radius: 10px; overflow: hidden; border: 1px solid var(--hairline); }
.msg-thread__av img, .msg-thread__av .ph { width: 100%; height: 100%; object-fit: cover; }
.msg-thread__av .ph__mono { font-size: 0.8rem; }
.msg-thread__head strong { display: block; font-size: 0.95rem; }
.msg-thread__sub { font-size: 0.78rem; color: var(--muted); }

/* justify-content:flex-end makes messages sit at the bottom like a real chat,
   and still scrolls correctly once they overflow. */
/* Bottom-anchored but fully scrollable. justify-content:flex-end would push
   overflow past the TOP of the scroll box, making older messages unreachable —
   margin-top:auto on the first child gets the same look without breaking scroll. */
.msg-stream { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.msg-stream > *:first-child { margin-top: auto; }
.msg-stream__empty { color: var(--muted); font-size: 0.9rem; margin: auto; }
.msg-bubble {
	align-self: flex-start; max-width: 68%;
	background: var(--panel); border-radius: 14px 14px 14px 4px;
	padding: 10px 13px;
}
.msg-bubble--mine { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg-bubble__body { margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg-bubble__meta { display: block; margin-top: 4px; font-size: 0.68rem; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* flex:none so the composer can never be shrunk away by a tall message stream. */
/* position+z-index so nothing in the stream (a tall contract card, an inline
   dialog) can paint over the writing field and swallow its clicks. */
.msg-composer { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--hairline); padding: 12px 14px; background: var(--canvas); position: relative; z-index: 2; }
.msg-composer textarea {
	/* min-width:0 + a sane basis so the wide "Siųsti sutartį" button can never
	   squeeze the writing field down to nothing. */
	flex: 1 1 180px; min-width: 0; min-height: 42px; border: 1px solid var(--hairline-strong); border-radius: 20px;
	padding: 10px 16px; font: inherit; font-size: 0.9rem; resize: none; max-height: 110px; color: var(--ink); background: var(--canvas);
}
.msg-composer textarea:focus { outline: none; border-color: var(--accent); }
.msg-composer__send {
	flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: var(--accent); color: #fff; cursor: pointer;
	display: grid; place-items: center; transition: transform 0.2s ease;
}
.msg-composer__send:hover { transform: translateX(2px); }
.msg-composer__send svg { width: 17px; height: 17px; }

@media (max-width: 1100px) {
	/* No room for a third column — the details fold back above the stream. */
	.msg-layout { grid-template-columns: 290px minmax(0, 1fr); }
	.thread-brief { grid-column: 1 / -1; grid-row: 1; border-left: 0; border-bottom: 1px solid var(--hairline); }
}
/* The back arrow only exists on mobile; desktop keeps both panes side by side. */
.msg-thread__back {
	display: none; place-items: center;
	width: 38px; height: 38px; flex: none; margin-right: 2px;
	border: 0; border-radius: 10px; background: none; cursor: pointer;
	color: var(--ink); text-decoration: none;
}
.msg-thread__back:hover { background: var(--panel-2); }
.msg-thread__back svg { width: 20px; height: 20px; }

/* ---- Mobile messenger: one pane at a time (inbox OR thread) ----
   Stacking both panes on a phone leaves each too short to use. Instead the
   layout becomes a single full-height column and we show whichever pane the URL
   asked for: the inbox by default, the thread once one is opened. The desktop
   grid is untouched above this breakpoint. */
@media (max-width: 860px) {
	.msg-layout { display: block; height: 100%; border: 0; border-radius: 0; }
	.msg-list, .msg-thread { height: 100%; }
	.msg-list { border-right: 0; }

	/* Both panes overlay the same space; the active-view class reveals one. */
	.msg-layout.is-viewing-list .msg-thread,
	.msg-layout.is-viewing-list .thread-brief { display: none; }
	.msg-layout.is-viewing-thread .msg-list { display: none; }

	/* On mobile the conversation gets the whole screen; the details sidebar is
	   hidden until "Visa informacija" reveals it as its own full view. */
	.msg-layout.is-viewing-thread .thread-brief { display: none; }
	.msg-layout.is-viewing-info .msg-list,
	.msg-layout.is-viewing-info .msg-thread { display: none; }
	.msg-layout.is-viewing-info .thread-brief {
		display: flex; height: 100%; max-height: none; overflow-y: auto;
		border-left: 0; padding: 16px;
	}
	.msg-thread__info, .thread-brief__back { display: inline-flex; }

	.msg-thread__back { display: inline-grid; }
	.msg-item { padding: 16px; }            /* roomier tap targets */
	.msg-bubble, .msg-contract, .msg-offer { max-width: 88%; }
	.msg-composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
	.msg-composer textarea { font-size: 16px; } /* 16px stops iOS zoom-on-focus */
}


/* ============================================================
   Responsive — directory + profile
   ============================================================ */
@media (max-width: 900px) {
	.steps__list { grid-template-columns: 1fr; gap: 0; }
	.step { border-top: 1px solid var(--hairline); }
	.archive-layout { grid-template-columns: 1fr; gap: 24px; }
	.facets { position: static; }
	.studio__layout { grid-template-columns: 1fr; gap: 32px; }
	.studio__cover { aspect-ratio: 16 / 7; }
}

/* ============================================================
   Brief form
   ============================================================ */
.brief-wrap { max-width: 760px; padding-block: 48px 96px; }
.brief-head { margin-bottom: 24px; }
.brief-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin: 8px 0 12px; }
.brief-lead { color: var(--ink-soft); }
.form-error-summary { color: #b3261e; font-weight: 600; margin-top: 12px; }
.brief-form { display: flex; flex-direction: column; }
.brief-step { border: 0; border-top: 2px solid var(--ink); margin: 24px 0 0; padding: 18px 0 4px; min-width: 0; }
.brief-step legend { font-weight: 700; font-size: 1.1rem; padding: 0; display: flex; align-items: baseline; gap: 10px; }
.brief-step__n { color: var(--accent); font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
/* .field's display:flex overrides the UA [hidden]{display:none}, so a hidden
   field (e.g. "Studijos pavadinimas" for clients) still showed. Re-assert it. */
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.field-row .field { margin-top: 0; }
.field > label { font-size: 0.9rem; font-weight: 600; }
.req { color: var(--accent); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="url"], .field input[type="number"], .field select, .field textarea {
	font: inherit; font-size: 0.95rem; padding: 10px 12px;
	border: 1px solid var(--hairline-strong); border-radius: var(--radius);
	background: var(--canvas); color: var(--ink); width: 100%;
}
.field textarea { resize: vertical; }
.field--error input, .field--error textarea, .field--error select { border-color: #b3261e; outline-color: #b3261e; }
/* A checkbox has no border to redden, so colour its label instead. */
.field--consent.field--error { color: #b3261e; }
.field--consent.field--error input { outline: 2px solid #b3261e; outline-offset: 2px; }
.radio-row, .check-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.radio, .check { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }
.radio input, .check input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.field--consent { margin-top: 24px; }
.field--consent .check { align-items: flex-start; }
.field--consent .check span { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.brief-actions { margin-top: 28px; }
.btn--lg { padding: 14px 28px; font-size: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief-confirm { padding-block: 64px; max-width: 52ch; }
.brief-confirm h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.02em; margin: 8px 0 12px; }
.brief-confirm p { color: var(--ink-soft); }
.brief-confirm__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 640px) { .field-row, .check-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Auth (login / register)
   ============================================================ */
.auth-wrap { display: flex; justify-content: center; padding-block: 56px 96px; }
.auth-card { width: 100%; max-width: 440px; }
.auth-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.02em; margin: 8px 0 20px; }
.auth-form { display: flex; flex-direction: column; }
.auth-form .btn { margin-top: 24px; }
.auth-alt { margin-top: 20px; color: var(--muted); font-size: 0.92rem; }
.field__hint { font-size: 0.82rem; color: var(--muted); }
.auth-remember { margin-top: 16px; font-size: 0.9rem; }
/* Category marquee as the site's top strip: grey band, blue text, sliding
   forever. Reuses the saitai-marquee keyframes (translateX 0 → -50%); the track
   holds the categories twice, so the loop never visibly restarts. */
.topbar { background: var(--panel); overflow: hidden; border-bottom: 1px solid var(--hairline); }
.topbar__track {
	display: inline-flex; align-items: center; white-space: nowrap;
	padding: 7px 0; will-change: transform;
	animation: saitai-marquee 48s linear infinite;
}
.topbar__track span {
	padding: 0 22px; font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.01em; color: var(--accent);
}
.topbar:hover .topbar__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .topbar__track { animation: none; } }

/* Greeting strip: the site's very top line — brand blue, white text. */
.greetbar { background: var(--accent); color: #fff; }
.greetbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 0.78rem; }
/* Line the offer up with the wordmark's first letter. The pill's 26px inset is
   optically wider than the letterform starts, so back off ~18px of it. */
.greetbar__inner { padding-inline: calc(var(--gutter) + 8px); }
.greetbar__offer { font-weight: 600; }
.greetbar strong { font-weight: 600; }

.site-nav__cta { font-weight: 600; text-decoration: none; color: var(--ink); font-size: 0.95rem; }
.site-nav__cta:hover { color: var(--accent); }
/* Staff (wp-admin session) — deliberately not styled as an account. */
.site-nav__staff {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--muted); border: 1px solid var(--hairline-strong);
	border-radius: 999px; padding: 4px 10px; cursor: default;
}

.role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-option {
	display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
	border: 1px solid var(--hairline-strong); border-radius: var(--radius); padding: 12px;
	font-size: 0.9rem; transition: border-color 0.15s ease;
}
.role-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.role-option input { margin-top: 2px; accent-color: var(--accent); }
.role-option em { display: block; color: var(--muted); font-style: normal; font-size: 0.8rem; }

.notice { padding: 12px 14px; border-radius: var(--radius); font-size: 0.92rem; margin: 0 0 14px; border: 1px solid var(--hairline-strong); }
.notice--ok { background: rgba(10, 127, 79, 0.08); border-color: rgba(10, 127, 79, 0.4); color: #0a7f4f; }
.notice--err { background: rgba(179, 38, 30, 0.06); border-color: rgba(179, 38, 30, 0.4); color: #b3261e; }
@media (max-width: 480px) { .role-toggle { grid-template-columns: 1fr; } }

/* ============================================================
   Dashboard
   ============================================================ */
.dash { padding-block: 0 96px; max-width: 860px; }
/* Same scale as the archive / search / messages / studio page titles. */
.dash__title { font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 8px 0 0; }
/* Client profile: big avatar right beside the title. */
.dash__head--avatar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dash__head--avatar .dash__head-text { flex: 1; min-width: 240px; }
.dash__avatar { width: 132px; height: 132px; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid var(--hairline); background: var(--panel); }
.dash__avatar img, .dash__avatar .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash__section { margin-top: 48px; }
.muted { color: var(--muted); }
.status-banner { padding: 14px 16px; border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: 0.95rem; }
.status-banner--publish { border-left-color: #0a7f4f; }
.status-banner a { margin-left: 6px; }
.proj-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); margin-bottom: 24px; }
.proj-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.proj-item__img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--hairline); flex: none; }
.proj-item__img--empty { background: var(--panel-2); display: block; }
.proj-item__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.proj-item__desc { color: var(--muted); font-size: 0.86rem; }
.proj-item__del { margin: 0; }
.link-danger { background: none; border: 0; color: #b3261e; cursor: pointer; font: inherit; font-size: 0.86rem; text-decoration: underline; }
.proj-add { border-top: 2px solid var(--ink); padding-top: 18px; }
.proj-add__title { font-size: 1rem; margin: 0 0 4px; }
.proj-add .btn { margin-top: 16px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dash-table th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--hairline-strong); }
.dash-table td { padding: 10px; border-bottom: 1px solid var(--hairline); }
.acf-form .acf-form-submit { margin-top: 20px; }

/* ============================================================
   Editorial pages (Kaip tai veikia / Apie)
   ============================================================ */
.page-hero { padding-block: 88px 56px; max-width: 1180px; }
.page-hero .kicker { margin-bottom: 20px; }
.page-hero__title {
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	line-height: 0.99;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin: 0 0 24px;
	max-width: 15ch;
}
.page-hero__lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; margin: 0; }

/* ---- Two tracks of numbered steps ---- */
.track {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	padding-block: 56px 64px;
	border-top: 2px solid var(--ink);
}
.track__label { position: sticky; top: 96px; align-self: start; }
.track__label .kicker { color: var(--ink); font-size: 13px; }
.track__note { color: var(--muted); font-size: 0.92rem; margin: 10px 0 18px; max-width: 26ch; }
.track__cta { font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.track__cta:hover { text-decoration: underline; }

.track__steps { list-style: none; margin: 0; padding: 0; }
.tstep {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 20px;
	padding: 26px 0;
	border-bottom: 1px solid var(--hairline);
	align-items: start;
	transition: background 0.25s ease;
}
.tstep:first-child { border-top: 1px solid var(--hairline); }
.tstep__n {
	font-size: 2.4rem;
	line-height: 0.9;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	transition: transform 0.25s ease;
}
.tstep:hover .tstep__n { transform: translateX(6px); }
.tstep__title { font-size: 1.2rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.tstep__text { margin: 0; color: var(--muted); max-width: 56ch; line-height: 1.6; }

/* ---- Stat row ---- */
/* No rule of its own — the next section's black rule already divides them. */
.stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding-block: 8px 16px;
}
.stat { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--hairline); padding-left: 18px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n {
	font-size: clamp(2.4rem, 4.5vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.stat__l { font-size: 0.86rem; color: var(--muted); }

/* ---- Principles ---- */
.principles { padding-block: 64px 8px; }
.principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.principle { border-top: 1px solid var(--hairline-strong); padding-top: 18px; }
.principle__n { display: block; font-size: 0.9rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.principle__title { font-size: 1.15rem; margin: 0 0 8px; }
.principle__text { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.95rem; }

/* ---- Pull quote ---- */
.pull { padding-block: 72px 8px; }
.pullquote {
	margin: 0;
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 22ch;
	border-left: 3px solid var(--accent);
	padding-left: 28px;
	text-wrap: balance;
}

@media (max-width: 900px) {
	.track { grid-template-columns: 1fr; gap: 24px; padding-block: 40px 48px; }
	.track__label { position: static; }
	.tstep { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
	.tstep__n { font-size: 1.8rem; }
	.stat-row { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
	.stat:nth-child(3) { border-left: 0; padding-left: 0; }
	.principles__grid { grid-template-columns: 1fr; gap: 24px; }
	.pullquote { max-width: none; font-size: 1.4rem; }
}

/* ============================================================
   Content pages
   ============================================================ */
.page-content { max-width: 760px; padding-block: 48px 96px; }
.page-title { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 32px; }
.entry h2 { font-size: 1.25rem; margin: 36px 0 10px; padding-top: 16px; border-top: 1px solid var(--hairline-strong); }
.entry p, .entry li { color: var(--ink-soft); line-height: 1.7; }
.entry ol, .entry ul { padding-left: 1.3em; }
.entry li { margin: 6px 0; }
.entry a { color: var(--accent); }

/* ============================================================
   Generated placeholders (no image → designed monogram, never a blank box)
   ============================================================ */
.ph {
	position: relative; display: grid; place-items: center;
	width: 100%; height: 100%; overflow: hidden;
	background: linear-gradient(140deg, hsl(var(--ph-h, 220) 74% 66%), hsl(calc(var(--ph-h, 220) + 48) 64% 44%));
}
.ph::after {
	content: ""; position: absolute; inset: 0;
	background-image:
		radial-gradient(120% 90% at 25% 18%, rgba(255, 255, 255, 0.28), transparent 55%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px);
	mix-blend-mode: soft-light;
}
.ph__mono { position: relative; z-index: 1; color: #fff; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.8rem, 5.5vw, 3.2rem); }
.ph--logo .ph__mono { font-size: 0.9rem; }

.studio-card__logo { width: 34px; height: 34px; display: block; flex: none; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.studio-card__logo img, .studio-card__logo .ph { width: 100%; height: 100%; object-fit: cover; }
.studio__logo { width: 192px; height: 192px; flex: none; display: block; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); }
.studio__logo img, .studio__logo .ph { width: 100%; height: 100%; object-fit: cover; }
.studio__logo .ph__mono { font-size: 4.5rem; }
/* A 192px block would crowd a phone — scale it back below the identity row's
   breakpoint rather than letting it eat the screen. */
@media (max-width: 620px) {
	.studio__logo { width: 110px; height: 110px; }
	.studio__logo .ph__mono { font-size: 2.6rem; }
}

/* ============================================================
   Bolder hero + card lift + category marquee
   ============================================================ */
/* ---- Hero with its soft gradient backdrop ---- */
.hero-wrap { position: relative; overflow: hidden; }

/* Full-bleed background layer, starting above the hero box so the wash runs up
   behind the floating header pill. */
.hero__bg {
	position: absolute;
	top: -70px; left: 0; right: 0;
	height: 620px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, var(--panel) 0%, var(--canvas) 100%);
}
/* fade it out into the page rather than cutting it off */
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 46%, var(--canvas) 94%);
}
/* sits on top of the backdrop, tight under the header */
.hero { position: relative; z-index: 1; padding-block: 12px 40px; }
.hero__intro { margin-bottom: 32px; }
@media (max-width: 720px) { .hero__bg { height: 460px; } }
/* Spans the full section — no measure cap, and balance off so the lines
   actually fill the width instead of being evened out short. */
.hero__title {
	font-size: clamp(1.9rem, 4.2vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	max-width: none;
	text-wrap: normal;
	margin-bottom: 0;
}
.hero__lead { font-size: 1.08rem; max-width: 48ch; }

/* ============================================================
   Split hero — two audiences, two big blocks
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split__block {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 580px;
	padding: 44px;
	border-radius: 22px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.split__block:hover { transform: translateY(-6px); }

/* Two vivid grounds — the client side in the brand blue, the studio side
   in emerald so the audiences read apart instantly. */
.split__block--client { background: linear-gradient(150deg, #1a1aff 0%, #6d28d9 55%, #9333ea 100%); }
.split__block--client:hover { box-shadow: 0 34px 60px -26px rgba(63, 23, 210, 0.65); }
.split__block--studio { background: linear-gradient(150deg, #059669 0%, #0d7a6f 55%, #115e59 100%); }
.split__block--studio:hover { box-shadow: 0 34px 60px -26px rgba(5, 120, 90, 0.6); }

/* soft light source so the colour has depth instead of reading flat */
.split__block::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 60% at 20% 8%, rgba(255, 255, 255, 0.26), transparent 60%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 18px);
	pointer-events: none;
	z-index: 1;
}

.split__body { position: relative; z-index: 2; }
.split__kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.66); }
.split__title { font-size: clamp(2.1rem, 3.4vw, 3.2rem); letter-spacing: -0.03em; margin: 14px 0 12px; color: #fff; }
.split__text { margin: 0 0 26px; max-width: 34ch; color: rgba(255, 255, 255, 0.82); font-size: 1.04rem; line-height: 1.55; }
.split__cta {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 700; font-size: 1rem; color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 11px 22px;
	transition: background 0.25s ease;
}
.split__block:hover .split__cta { background: rgba(255, 255, 255, 0.24); }
.split__arrow { transition: transform 0.25s ease; }
.split__block:hover .split__arrow { transform: translateX(5px); }

.split__visual { position: relative; z-index: 2; flex: 1; margin-top: 22px; min-height: 240px; }

/* previews, scaled for the block */
.split__visual .mock { width: 204px; box-shadow: 0 24px 46px -14px rgba(10, 10, 40, 0.45); }
.split__visual .mock--1 { top: 44px; left: 0; }
.split__visual .mock--2 { top: 0; right: 4px; width: 176px; }
.split__visual .mock--3 { bottom: 0; left: 74px; width: 192px; }

/* GIF as the full bleed of a split block, with a scrim so the text stays legible. */
.split__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hero search: jumps straight into the services catalog. */
.hero-search { margin: 20px 0 34px; max-width: 720px; }
.hero-search__label { display: block; margin-bottom: 10px; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.hero-search__bar { display: flex; gap: 10px; }
.hero-search__bar input[type="search"] {
	flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 14px 18px;
	border: 1px solid var(--hairline-strong); border-radius: 999px;
	background: var(--canvas); color: var(--ink);
}
.hero-search__bar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.hero-search__bar .btn { flex: none; border-radius: 999px; padding-inline: 26px; }

/* Subtitle under each split-block title. */
.split__sub { margin: 10px 0 0; max-width: 42ch; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }

.split__block:has(.split__bg)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Weighted to the top, where the copy sits — so the artwork below stays
	   bright instead of the whole block being dimmed. */
	background: linear-gradient(180deg, rgba(6, 10, 22, 0.66) 0%, rgba(6, 10, 22, 0.34) 34%, rgba(6, 10, 22, 0.08) 62%, rgba(6, 10, 22, 0.16) 100%);
}
/* Small shadow keeps the text crisp over the lighter areas. */
.split__block:has(.split__bg) .split__title,
.split__block:has(.split__bg) .split__sub { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }

/* incoming requests (studio side) */
.split__visual--reqs { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.req {
	position: relative;
	display: flex; align-items: center; gap: 13px;
	background: rgba(255, 255, 255, 0.13);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	padding: 15px 16px;
	backdrop-filter: blur(3px);
}
.req__av { width: 34px; height: 34px; flex: none; border-radius: 9px; background: linear-gradient(135deg, #fbbf24, #f97316); }
.req__av--2 { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.req__av--3 { background: linear-gradient(135deg, #f472b6, #db2777); }
.req__lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.req__lines i { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.34); }
.req__lines i.w55 { width: 55%; }
.req__lines i.w72 { width: 72%; }
.req__lines i.w45 { width: 45%; }
.req__dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #34d399; }

@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; }
	.split__block { min-height: 0; }
	.split__visual { min-height: 230px; }
}
.mock {
	position: absolute;
	width: 300px;
	background: var(--canvas);
	border: 1px solid var(--hairline);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 30px 60px -18px rgba(10, 10, 20, 0.28), 0 8px 20px -8px rgba(10, 10, 20, 0.12);
}
.mock--1 { top: 44px; left: 0; transform: rotate(-5deg); z-index: 2; }
.mock--2 { top: 0; right: 4px; width: 268px; transform: rotate(4.5deg); z-index: 3; }
.mock--3 { bottom: 0; left: 96px; width: 286px; transform: rotate(-1.5deg); z-index: 1; }

.mock__bar { height: 22px; background: var(--panel); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 5px; padding-left: 9px; }
.mock__bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong); }
.mock__body { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.mock__hero { height: 84px; border-radius: 5px; }
.mock__hero--sm { height: 62px; flex: 0 0 44%; }
.mock__line { height: 7px; border-radius: 3px; background: var(--panel-2); }
.mock__line--short { width: 58%; }
.mock__row { display: flex; gap: 7px; }
.mock__row i { flex: 1; height: 36px; border-radius: 5px; background: var(--panel-2); }
.mock__split { display: flex; gap: 9px; align-items: stretch; }
.mock__stack { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.mock__chip { width: 46%; height: 14px; border-radius: 999px; background: var(--accent); opacity: 0.85; }
.mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mock__grid i { height: 44px; border-radius: 5px; background: var(--panel-2); }

/* Each preview reads as a different site design */
.mock--1 .mock__hero { background: linear-gradient(135deg, #1a1aff, #7b86ff); }
.mock--2 .mock__hero { background: linear-gradient(135deg, #0aa06e, #34d399); }
.mock--3 .mock__grid i:nth-child(1) { background: linear-gradient(135deg, #ff7a45, #ffb545); }
.mock--3 .mock__grid i:nth-child(4) { background: linear-gradient(135deg, #c026d3, #f472b6); }

@media (max-width: 1024px) {
	.hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.hero__title, .hero__lead { max-width: none; }
	.hero__visual { height: 360px; max-width: 560px; }
	.mock { width: 250px; }
	.mock--2 { width: 224px; }
	.mock--3 { width: 238px; left: 70px; }
}
@media (max-width: 620px) { .hero__visual { display: none; } }

.studio-card { transition: transform 0.25s ease; }
.studio-card:hover { transform: translateY(-3px); }

.cat-strip { overflow: hidden; margin-top: 40px; }
.cat-strip__track { display: inline-flex; align-items: center; padding: 14px 0; white-space: nowrap; will-change: transform; animation: saitai-marquee 42s linear infinite; }
.cat-strip__track span { padding: 0 30px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-soft); }
@keyframes saitai-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cat-strip__track { animation: none; } }

/* ---- Studio profile: full-bleed picture marquee above the title ----
   Same trick as .cat-strip — the track holds the tiles twice and slides -50%,
   so the loop is seamless. Hovering parks it so a picture can be looked at. */
.studio-strip { overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--panel-2); }
.studio-strip__track {
	display: inline-flex; align-items: stretch; padding: 14px 0;
	will-change: transform; animation: saitai-marquee 60s linear infinite;
}
.studio-strip:hover .studio-strip__track { animation-play-state: paused; }
.studio-strip__item {
	/* Spacing lives on the item, not as a track `gap` — an even per-item width is
	   what makes the -50% loop land seamlessly. */
	flex: 0 0 auto; margin: 0 14px 0 0;
	width: clamp(200px, 26vw, 380px);
	aspect-ratio: 4 / 3;
	border-radius: 16px; overflow: hidden;
	background: var(--canvas);
	box-shadow: 0 18px 36px -22px rgba(10, 10, 30, 0.45);
}
.studio-strip__img, .studio-strip__item .ph { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover a tile → a zoom affordance; clicking it runs the GSAP expand (strip.js). */
.studio-strip__item { position: relative; }
.studio-strip__zoom {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	border: 0; padding: 0; cursor: zoom-in;
	font-size: 1.5rem; color: #fff;
	background: rgba(10, 10, 30, 0.42);
	opacity: 0; transition: opacity 0.25s ease;
}
.studio-strip__item:hover .studio-strip__zoom,
.studio-strip__zoom:focus-visible { opacity: 1; }
/* Parked while a picture is open, so the strip doesn't slide under the overlay. */
.studio-strip.is-parked .studio-strip__track { animation-play-state: paused; }

.strip-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(10, 10, 30, 0.82); }
.strip-lightbox[hidden] { display: none; }
.strip-lightbox__img { position: fixed; object-fit: contain; border-radius: 8px; background: var(--canvas); }
.strip-lightbox__close {
	position: fixed; top: 18px; right: 22px; z-index: 1;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	font-size: 1.6rem; line-height: 1; cursor: pointer;
	color: var(--ink); background: var(--canvas);
}
body.has-lightbox { overflow: hidden; }
@media (max-width: 620px) { .studio-strip__track { padding: 10px 0; } .studio-strip__item { margin-right: 10px; } }
@media (prefers-reduced-motion: reduce) { .studio-strip__track { animation: none; } }

/* ============================================================
   Footer (multi-column)
   ============================================================ */
/* Bookend to the header: opens on the same 2px black rule as the sections. */
.site-footer { margin-top: 96px; border-top: 2px solid var(--ink); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-block: 56px 40px; }
.site-footer__brand .wordmark { font-size: 1.5rem; text-decoration: none; }
.site-footer__tag { color: var(--muted); margin: 14px 0 0; max-width: 34ch; font-size: 0.9rem; line-height: 1.55; }
/* same kicker treatment as the page section eyebrows */
.site-footer__col h4 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: 600; }
.site-footer__col a {
	position: relative;
	/* block keeps them stacked; fit-content keeps the underline to the text width */
	display: block;
	width: fit-content;
	color: var(--ink-soft);
	text-decoration: none;
	padding: 5px 0;
	font-size: 0.92rem;
}
.site-footer__col a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 2px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__col a:hover { color: var(--accent); }
.site-footer__col a:hover::after { transform: scaleX(1); }
.site-footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } .site-footer__brand { grid-column: 1 / -1; } }

/* ============================================================
   Motion — FOUC guard: hidden ONLY once JS confirms it can animate.
   No-JS / reduced-motion / load-failure leaves everything visible.
   ============================================================ */
html.gsap-ready [data-reveal] { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) { html.gsap-ready [data-reveal] { opacity: 1; transform: none; } }

/* ============================================================
   Fixes found by looking at the rendered pages
   ============================================================ */

/* Skip link was rendering as a visible link at the top of every page. */
/* Visually hidden but readable by screen readers (never becomes visible). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-shortcut {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ink); color: var(--canvas);
	padding: 10px 16px; text-decoration: none; font-size: 0.9rem;
	border-radius: var(--radius);
}
.screen-reader-shortcut:focus { left: 8px; top: 8px; }

/* Monograms sit inside the card link and were inheriting its underline. */
.studio-card__media, .studio-card__media:hover { text-decoration: none; }
.ph, .ph__mono { text-decoration: none; }

/* The profile CTA stretched across the whole content column. */
.studio__cta { width: auto; align-self: flex-start; }
.studio__aside-cta { width: 100%; }

/* Directory read as 2 oversized columns — tighten to 3. */
.archive-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 36px; }
.archive-results .studio-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px) {
	.archive-layout { grid-template-columns: 1fr; gap: 24px; }
	.archive-results .studio-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ============================================================
   On-page profile editor (owner/moderator only)
   ============================================================ */

/* Empty-state hints shown to the owner where a block has no content yet. */
.studio__empty { margin: 8px 0 0; color: var(--muted); font-style: italic; }

/* Package pricing unit (hourly vs whole-project). */
.package__unit { font-size: 0.82rem; color: var(--muted); font-weight: 500; }

/* --- The darkened "+" affordance over each editable block --- */
.editable { position: relative; }

.sec-edit {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 10px;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 4;
	transition: background 0.18s ease;
}
.sec-edit:hover,
.sec-edit:focus-visible { background: rgba(10, 10, 10, 0.34); outline: none; }
.sec-edit__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--radius);
	font: 600 0.8rem/1 var(--sans);
	opacity: 0.5;
	transition: opacity 0.18s ease, background 0.18s ease;
}
.sec-edit:hover .sec-edit__badge,
.sec-edit:focus-visible .sec-edit__badge { opacity: 1; background: var(--accent); }
.sec-edit__plus { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.sec-edit--cover { align-items: center; justify-content: center; }
.sec-edit--pic { align-items: center; justify-content: center; padding: 0; }
.sec-edit--pic .sec-edit__text { display: none; }
.sec-edit--pic .sec-edit__badge { padding: 6px 9px; }

/* --- Gallery item tools + "add work" tile --- */
.gallery__item--editable { position: relative; }
.gallery__tools {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 3;
}
.gallery__item--editable:hover .gallery__tools,
.gallery__item--editable:focus-within .gallery__tools { opacity: 1; }
.gallery__tools form { margin: 0; }
.gallery__tool {
	font: 600 0.76rem/1 var(--sans);
	padding: 6px 10px;
	border: 1px solid var(--hairline-strong);
	background: var(--canvas);
	color: var(--ink);
	border-radius: var(--radius);
	cursor: pointer;
}
a.gallery__tool { display: inline-block; text-decoration: none; }
.gallery__tool:hover { border-color: var(--accent); color: var(--accent); }
/* The add-service button is wrapped in a POST form; keep it a grid cell. */
.gallery__add-form { display: contents; }
.gallery__tool--danger:hover { border-color: #c0392b; color: #c0392b; }
.gallery__url { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--accent); }
.gallery__add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	border: 1px dashed var(--hairline-strong);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--ink-soft);
	font: 600 0.9rem/1 var(--sans);
	cursor: pointer;
}
.gallery__add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gallery__add-plus { font-size: 1.6rem; font-weight: 700; }

/* Owner-view banner replacing the "message" CTA. */
.bubble-cta--ghost { background: var(--panel); color: var(--ink-soft); border: 1px dashed var(--hairline-strong); }
.bubble-cta--ghost strong { color: var(--accent); }

/* --- Presentation video (bottom of the profile) --- */
/* The video sits in its own full-width section, but should read as part of the
   content column — so cap it to the same width Darbai gets: the grid's first
   column, i.e. everything minus the 300px aside and its 48px gap. */
/* A quarter of the content column — a talking-head clip doesn't need the full
   width, and at 25% it reads as a supporting element beside Darbai. */
.studio__video { margin-top: 8px; }
.studio__video .studio__video-frame { width: 25%; min-width: 220px; }
@media (max-width: 900px) { .studio__video .studio__video-frame { width: 60%; } }
@media (max-width: 620px) { .studio__video .studio__video-frame { width: 100%; } }
.studio__video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: #000;
}
.studio__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Modal dialogs --- */
.edit-dialog {
	width: min(680px, 92vw);
	max-width: 92vw;
	padding: 0;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.edit-dialog::backdrop { background: rgba(10, 10, 10, 0.5); }
.edit-form { display: flex; flex-direction: column; max-height: 88vh; }
.edit-form__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid var(--hairline);
	background: var(--canvas);
}
.edit-form__title { margin: 0; font-size: 1.05rem; }
.edit-form__close {
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0 4px;
}
.edit-form__close:hover { color: var(--ink); }
.edit-form__body { display: flex; flex-direction: column; gap: 16px; padding: 22px; overflow: auto; }
.edit-form__foot {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 22px;
	border-top: 1px solid var(--hairline);
	background: var(--canvas);
}

/* --- Form fields inside dialogs --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label,
.field legend { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.edit-form input[type="text"],
.edit-form input[type="url"],
.edit-form input[type="number"],
.edit-form input[type="file"],
.edit-form select,
.edit-form textarea {
	width: 100%;
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
}
.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.edit-form textarea { resize: vertical; }
.field__hint { margin: 0; font-size: 0.78rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.field--group { gap: 10px; border: 0; padding: 0; margin: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.check-grid--cols { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 400; color: var(--ink); }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
/* Custom package rows (add/remove, no fixed tiers). */
.pkg-row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	margin: 0 0 12px;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius);
}
.pkg-row__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--hairline-strong);
	border-radius: 50%;
	background: var(--canvas);
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}
.pkg-row__remove:hover { border-color: #c0392b; color: #c0392b; }
.pkg-add { align-self: flex-start; }

/* The required-asterisk `.req` collides with the front-page "request card"
   `.req` (a translucent white pill, defined later in this file). Re-assert the
   plain inline marker wherever it's actually a form asterisk, so it stays a
   clearly visible accent "*" instead of an invisible box. */
.field .req, .field label .req, .auth-form .req, .edit-form .req, .msgbox .req {
	position: static;
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--accent);
	font-weight: 700;
}

/* Unread-messages badge on the header "Žinutės" link. */
.nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

/* Message attachments (bubbles). */
.msg-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.msg-att { display: inline-flex; text-decoration: none; border-radius: var(--radius); overflow: hidden; }
.msg-att--img img { display: block; max-width: 200px; max-height: 180px; width: auto; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius); }
.msg-att--file { align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--hairline-strong); color: var(--ink); font-size: 0.86rem; max-width: 240px; }
.msg-att--file:hover { border-color: var(--accent); color: var(--accent); }
.msg-att__icon { flex: none; }
.msg-att__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-bubble--mine .msg-att--file { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* Composer paperclip / file picker. */
.msg-composer__attach { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; color: var(--muted); cursor: pointer; border-radius: var(--radius); }
.msg-composer__attach:hover { color: var(--accent); background: var(--panel); }
.msg-composer__attach input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.msg-composer__attach svg { width: 20px; height: 20px; }
.msg-composer__attach-count { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.66rem; font-weight: 700; }

/* Contract button (studio side) in the composer — a compact text button. */
.msg-composer__contract { flex: none; white-space: nowrap; }

/* Inline PDF reader. */
.pdf-viewer { width: min(920px, 94vw); height: 88vh; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); }
.pdf-viewer[open] { display: flex; flex-direction: column; }
.pdf-viewer::backdrop { background: rgba(10, 10, 10, 0.55); }
.pdf-viewer__head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.pdf-viewer__title { flex: 1; min-width: 0; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-viewer__open { flex: none; font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.pdf-viewer__close { flex: none; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
.pdf-viewer__close:hover { color: var(--ink); }
.pdf-viewer__frame { flex: 1; width: 100%; border: 0; }

/* Price offer card (Vinted-style: client proposes, studio accepts/rejects). */
.msg-offer { align-self: flex-start; max-width: 80%; margin: 2px 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); }
.msg-offer--mine { align-self: flex-end; }
.msg-offer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msg-offer__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.msg-offer__status { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: #fff4e5; color: #b26a00; }
.msg-offer--accepted .msg-offer__status { background: #e6f6ec; color: #1a7f37; }
.msg-offer--rejected .msg-offer__status { background: #fdecea; color: #b3261e; }
.msg-offer__amount { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.msg-offer--rejected .msg-offer__amount { text-decoration: line-through; opacity: 0.6; }
.msg-offer__actions { display: flex; gap: 8px; }
.msg-offer__actions form { margin: 0; }
.msg-offer .msg-bubble__meta { align-self: flex-end; }

/* Contract card in the message stream. */
.msg-contract { position: relative; z-index: 0; align-self: flex-start; max-width: 80%; margin: 2px 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--canvas); }
.msg-contract--mine { align-self: flex-end; }
.msg-contract__head { display: flex; align-items: center; gap: 8px; }
.msg-contract__icon { font-size: 1.1rem; }
.msg-contract__title { flex: 1; font-size: 0.95rem; }
.msg-contract__status { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.msg-contract__status--pending { background: #fff4e5; color: #b26a00; }
.msg-contract__status--signed { background: #e6f6ec; color: #1a7f37; }
.msg-contract__terms { padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); white-space: pre-wrap; }
.msg-contract__foot { display: flex; align-items: center; gap: 8px; }
.msg-contract__signed { font-size: 0.82rem; font-weight: 600; color: #1a7f37; }
.msg-contract__await { font-size: 0.82rem; color: var(--muted); }
.msg-contract .msg-bubble__meta { align-self: flex-end; }
.btn--sm { padding: 6px 14px; font-size: 0.82rem; }

/* Signature pad + captured signature on a signed contract. */
.sign-pad { display: block; width: 100%; max-width: 560px; aspect-ratio: 560 / 200; margin-bottom: 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: #fff; touch-action: none; cursor: crosshair; }
.msg-contract__sig { display: inline-flex; }
.msg-contract__sig img { max-width: 180px; height: auto; margin-left: 8px; border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; vertical-align: middle; }

/* Hero-picture manager (multiple images inside the cover dialog). */
.hero-manage { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-thumb { position: relative; width: 84px; height: 84px; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--hairline-strong); border-radius: var(--radius); }
.hero-thumb form { position: absolute; top: -7px; right: -7px; margin: 0; }
.hero-thumb__del {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
}
.hero-thumb__del:hover { background: #c0392b; }
.hero-add { margin-top: 4px; }

/* Ghost button used for the dialog "Cancel" action. */
.btn--ghost { background: transparent; border-color: var(--hairline-strong); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--panel); color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.sec-edit, .sec-edit__badge, .gallery__tools { transition: none; }
}


/* "Peržiūrėti" sits beside "Redaguoti" in the service row. */
.svc-manage__view {
	flex: none; margin-left: auto; padding: 7px 13px;
	border: 1px solid var(--hairline-strong); border-radius: 999px;
	font-size: 0.82rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.svc-manage__view:hover { border-color: var(--accent); color: var(--accent); }
.svc-manage__view + .svc-manage__toggle { margin-left: 10px; }

/* Description: the real WordPress editor, boxed to match the other fields. */
.desc-editor .wp-editor-container { border: 1px solid var(--hairline-strong); border-radius: var(--radius); overflow: hidden; }
.desc-editor .wp-editor-tabs { margin-bottom: 4px; }
.desc-editor textarea { line-height: 1.55; border: 0; }
.desc-editor .mce-panel { border-color: var(--hairline) !important; }

/* ---- Projekto tipai editor (dashboard service form) ----
   Controls on one line, the description block on the next. */
.lvl-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.lvl-row { display: grid; grid-template-columns: 1.3fr 0.6fr 0.7fr 0.9fr 1fr 1.1fr auto; gap: 8px; align-items: center; }
/* The description is a block: it drops to its own full-width line under the
   controls rather than being squeezed into a column. */
.lvl-row textarea { grid-column: 1 / -1; resize: vertical; min-height: 62px; font: inherit; }
.lvl-row input, .lvl-row select { width: 100%; }
.lvl-del {
	width: 32px; height: 32px; border: 1px solid var(--hairline-strong); border-radius: 8px;
	background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted);
}
.lvl-del:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 860px) { .lvl-row { grid-template-columns: 1fr 1fr; } }