/* Stayfit (agentas S): portfolio „Darbai“ (portfolio.php) – prieš / po slankiklis, tinklelis, kortelės ženkliukas; push kortelė (push.php). */

/* ---------- Skiltis ---------- */
.dpf { margin: 0 0 28px; }
.dpf .domus-section__title { margin-bottom: 14px; }
.dpf-bas { display: grid; gap: 18px; margin: 0 0 16px; }

/* ---------- Prieš / po (domus.js: data-component="domus-ba" keičia .domus-ba__before-wrap plotį ir .domus-ba__handle left) ---------- */
.dpf-ba { margin: 0; }
.dpf-ba .domus-ba__frame { position: relative; aspect-ratio: 4 / 3; max-height: 560px; border-radius: 18px; overflow: hidden; background: var(--m-line, #E1E7E3); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.dpf-ba .domus-ba__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dpf-ba .domus-ba__before-wrap { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; }
.dpf-ba .domus-ba__before { position: absolute; top: 0; left: 0; height: 100%; max-width: none; object-fit: cover; display: block; }
.dpf-ba .domus-ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 2px solid #fff; box-shadow: 0 0 0 1px rgba(23,28,30, .18); transform: translateX(-1px); pointer-events: none; }
.dpf-ba .domus-ba__handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(23,28,30, .22); display: flex; align-items: center; justify-content: center; }
.dpf-ba .domus-ba__handle span::before, .dpf-ba .domus-ba__handle span::after { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--m-ink, #171C1E); border-left: 2px solid var(--m-ink, #171C1E); }
.dpf-ba .domus-ba__handle span::before { transform: rotate(-45deg); margin-right: 8px; }
.dpf-ba .domus-ba__handle span::after { transform: rotate(135deg); }
.dpf-ba .domus-ba__label { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--m-ink, #171C1E); background: rgba(255, 253, 248, .92); pointer-events: none; }
.dpf-ba .domus-ba__label--before { left: 12px; }
.dpf-ba .domus-ba__label--after { right: 12px; background: var(--m-brand, #2A3539); color: #fff; }
/* range – klaviatūrai ir ekrano skaitytuvui; vizualiai – neperteklinis, plonas */
.dpf-ba .domus-ba__range { display: block; width: 100%; margin: 10px 0 0; accent-color: var(--m-brand, #2A3539); height: 20px; cursor: pointer; }
.dpf-ba:focus-within .domus-ba__handle span { box-shadow: 0 0 0 3px rgba(42,53,57, .35), 0 2px 10px rgba(23,28,30, .22); }
.dpf-ba__cap { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--m-ink2, #5C6668); }

/* ---------- Tinklelis ---------- */
.dpf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dpf-grid__i { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--m-line, #E1E7E3); }
.dpf-grid__i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .dpf-grid__i:hover img { transform: scale(1.04); } }
.dpf-grid__i:focus-visible { outline: 2px solid var(--m-brand, #2A3539); outline-offset: 2px; }
.dpf-grid__i:nth-child(1):nth-last-child(n+5) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 767px) {
	.dpf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.dpf-grid__i:nth-child(1):nth-last-child(n+5) { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
	.dpf-ba .domus-ba__frame { border-radius: 14px; }
	.dpf-ba .domus-ba__handle span { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

/* ---------- Kortelės ženkliukas „N darbų nuotraukos“ (korteles.php) ---------- */
.dpf-badge { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--m-ink2, #5C6668); }
.dpf-badge svg { flex: 0 0 auto; margin-right: 5px; color: var(--m-ink3, #67706F); }

/* ---------- Skydo raginimas ---------- */
.dpf-nudge { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--m-warn, #fbe9c3); color: #5c3f0a; font-size: 14.5px; line-height: 1.5; }
.dpf-nudge svg { flex: 0 0 auto; margin-top: 2px; }
.dpf-nudge a { color: #5c3f0a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Push kortelė (push.php / push.js) ---------- */
.dpush { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; margin: 0 0 18px; padding: 18px 20px; border-radius: var(--r-card, 22px); background: var(--m-card, #FFFFFF); box-shadow: inset 0 0 0 1px var(--m-line, #E1E7E3); }
.dpush[hidden] { display: none; }
.dpush__ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--m-brand-soft, #E4E9E5); color: var(--m-brand-d, #171C1E); }
.dpush__t h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--m-ink, #171C1E); }
.dpush__t p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--m-ink2, #5C6668); }
.dpush__ios { margin-top: 6px !important; color: #5c3f0a !important; background: var(--m-warn, #fbe9c3); border-radius: 10px; padding: 8px 10px; }
.dpush__ios[hidden] { display: none; }
.dpush__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dpush__state { font-size: 12.5px; font-weight: 700; color: var(--m-ink2, #5C6668); padding: 3px 10px; border-radius: 999px; background: #EEF2EF; }
.dpush[data-state="on"] .dpush__state { color: var(--m-brand-d, #171C1E); background: var(--m-brand-soft, #E4E9E5); }
.dpush[data-state="denied"] .dpush__state { color: #a8432f; background: #fbe4df; }
.dpush__btn { appearance: none; border: 0; min-height: 42px; padding: 0 18px; border-radius: var(--r-btn, 16px); background: var(--m-brand, #2A3539); color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
.dpush__btn:active { transform: scale(.97); }
.dpush__btn:disabled { opacity: .6; cursor: default; }
.dpush__btn[hidden] { display: none; }
.dpush[data-state="on"] .dpush__btn { background: #EEF2EF; color: var(--m-ink, #171C1E); }
@media (hover: hover) { .dpush__btn:not(:disabled):hover { background: var(--m-brand-d, #171C1E); } .dpush[data-state="on"] .dpush__btn:not(:disabled):hover { background: #E1E7E3; } }
.dpush__btn:focus-visible { outline: 2px solid var(--m-brand, #2A3539); outline-offset: 3px; }
@media (max-width: 767px) {
	.dpush { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
	.dpush__act { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
	.dpush__btn { min-height: 46px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) { .dpf-grid__i img, .dpush__btn { transition: none; } }