/*
Theme Name: EV Garazas
Author: Tu
Version: 1.0
Requires at least: 6.5
Requires PHP: 8.0
*/

/* ---------------------------------------------------------------------------
   Car listing cards (VINMOTORS-style)
--------------------------------------------------------------------------- */

.ev-car-card {
	overflow: hidden;
	border-radius: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ev-car-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Media wrapper holds the image and the status badge on top of it. */
.ev-car-card__media {
	position: relative;
}

.ev-car-card__media img {
	display: block;
	width: 100%;
	border-radius: 12px 12px 0 0;
}

/* The car title is a link, so it inherits the (dark) link colour. On the dark
   card we force it white, with the accent on hover. */
.ev-car-card .wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.ev-car-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* Status badge bound to the `statusas` meta. Hidden when the field is empty
   (i.e. the car is still for sale) thanks to :empty. */
.ev-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.02em;
	z-index: 2;
}

.ev-badge:empty {
	display: none;
}

/* When sold, show the photo fully black-and-white. */
.ev-car-card:has(.ev-badge:not(:empty)) .ev-car-card__media img {
	filter: grayscale(1);
}

/* Sold cars are not clickable — disable the image and title links. */
.ev-car-card:has(.ev-badge:not(:empty)) .wp-block-post-featured-image a,
.ev-car-card:has(.ev-badge:not(:empty)) .wp-block-post-title a {
	pointer-events: none;
	cursor: default;
}

/* Spec rows: muted label, then value, separated by a hairline. */
.ev-spec-row {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Fixed-width label so the values line up in a column. */
.ev-spec-row > p:first-child {
	min-width: 80px;
	flex-shrink: 0;
}

.ev-spec-row:last-child {
	border-bottom: none;
}

/* Hide a whole spec row when its value field is empty (e.g. mileage not entered). */
.ev-spec-row:has(.ev-spec-val:empty) {
	display: none;
}

/* Keep the price number and the "€" sign on one baseline. */
.ev-price {
	align-items: baseline;
}

/* Listings pagination — plain links are invisible on the dark section, so give
   the numbers pill styling and highlight the current page in the accent color. */
.ev-listings .wp-block-query-pagination {
	gap: 0.5rem;
}

.ev-listings .wp-block-query-pagination a,
.ev-listings .wp-block-query-pagination .page-numbers {
	text-decoration: none;
	color: #fff;
}

.ev-listings .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ev-listings .wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: #fff;
	color: #fff;
}

.ev-listings .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.ev-listings .wp-block-query-pagination-previous,
.ev-listings .wp-block-query-pagination-next {
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	transition: color 0.15s ease;
}

.ev-listings .wp-block-query-pagination-previous:hover,
.ev-listings .wp-block-query-pagination-next:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Front page
--------------------------------------------------------------------------- */

/* The home page is built from full-width dark sections. Make the page
   background dark too, so the block gaps between sections don't flash white.
   Scoped to .home, so light inner pages (single car, generic pages) keep
   their white background. */
body.home,
body.single-car {
	background-color: var(--wp--preset--color--contrast);
}

/* Smoothly scroll to in-page anchors, e.g. the "← Visi automobiliai" link that
   jumps back to the #automobiliai listings section. */
html {
	scroll-behavior: smooth;
}

#automobiliai {
	scroll-margin-top: 1.5rem;
}

/* Site logo in the header. */
.site-logo-img {
	margin: 0;
	line-height: 0;
}

.site-logo-img img {
	height: 96px;
	width: auto;
	display: block;
	/* The logo JPEG has a dark background; "lighten" lets it blend into the dark
	   header so only the bright logo art shows — looks transparent without editing
	   the file. Works because the header background is lighter than the logo's. */
	mix-blend-mode: lighten;
}

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */

/* Vertically centre the hero content within its tall section. */
.ev-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Glassy trust cards on the gradient. */
.ev-trust-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	backdrop-filter: blur(4px);
}

.ev-trust-card h3 {
	margin: 0 0 0.4rem;
}

.ev-trust-card p {
	margin: 0;
}

/* Pill buttons used in the hero. */
.ev-pill .wp-block-button__link {
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   Single car page — gallery slider
--------------------------------------------------------------------------- */

.ev-gallery__main {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.ev-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ev-gallery__track::-webkit-scrollbar {
	display: none;
}

.ev-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	aspect-ratio: 4 / 3;
}

.ev-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
}

/* Full-screen image overlay (lightbox). */
.ev-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, 0.9);
	cursor: zoom-out;
}

.ev-lightbox img {
	max-width: 95vw;
	max-height: 95vh;
	object-fit: contain;
	border-radius: 8px;
}

.ev-gallery__counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 3px 10px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.8rem;
}

/* Prev / next arrows over the main photo. */
.ev-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ev-gallery__nav:hover {
	background: rgba(0, 0, 0, 0.8);
}

.ev-gallery__nav--prev {
	left: 12px;
}

.ev-gallery__nav--next {
	right: 12px;
}

/* Keep the gallery (and its scrolling thumb strip) within its column instead of
   forcing the flex column wider. */
.ev-gallery-col,
.ev-gallery {
	min-width: 0;
}

.ev-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 10px;
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 4px;
}

.ev-gallery__thumb {
	flex: 0 0 92px;
	width: 92px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.ev-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ev-gallery__thumb:hover {
	opacity: 1;
}

.ev-gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   Single car page — info card
--------------------------------------------------------------------------- */

.ev-info {
	background: var(--wp--preset--color--deep);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 2rem;
}

.ev-info__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}

.ev-info__title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.ev-info__price {
	margin: 0.5rem 0 1.5rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
}

.ev-info__specs {
	display: flex;
	flex-direction: column;
}

.ev-spec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ev-spec:last-child {
	border-bottom: none;
}

.ev-spec__label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--muted);
}

.ev-spec__icon {
	flex: 0 0 auto;
}

.ev-spec__value {
	font-weight: 600;
	color: #fff;
	text-align: right;
}

.ev-info__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

/* Phone button: white solid. Message button: transparent outline — matches the
   hero and the bottom CTA so all "Siųsti užklausą" buttons look identical. */
.ev-info__actions .ev-btn--solid {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border: none;
}

.ev-info__actions .ev-btn--solid:hover {
	background: #e9e4f2;
}

.ev-info__actions .ev-btn--outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.ev-info__actions .ev-btn--outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
}

.ev-btn {
	display: block;
	text-align: center;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.ev-btn--solid {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}

.ev-btn--solid:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.ev-btn--outline {
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.ev-btn--outline:hover {
	border-color: #fff;
}

/* ---------------------------------------------------------------------------
   Technical data grid (single car page)
--------------------------------------------------------------------------- */

.ev-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 3rem;
	margin-top: 1.5rem;
}

.ev-specs__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ev-specs__label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--muted);
}

.ev-specs__label .ev-spec__icon {
	flex: 0 0 auto;
}

.ev-specs__value {
	font-weight: 600;
	color: #fff;
	text-align: right;
}

@media (max-width: 781px) {
	.ev-specs {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

/* ---------------------------------------------------------------------------
   Equipment / features grid (single car page)
--------------------------------------------------------------------------- */

.ev-feat-section {
	margin-top: var(--wp--preset--spacing--60);
}

.ev-feat-section__title {
	margin: 0 0 1.5rem;
	color: #fff;
}

.ev-feat {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

.ev-feat__card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 1.75rem;
}

.ev-feat__title {
	margin: 0 0 1.1rem;
	color: #fff;
	font-size: 1.15rem;
}

.ev-feat__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.ev-feat__list li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.ev-feat__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

@media (max-width: 1024px) {
	.ev-feat {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ev-feat {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Description card (single car page)
--------------------------------------------------------------------------- */

.ev-desc-section {
	margin-top: var(--wp--preset--spacing--60);
}

.ev-desc-section__title {
	margin: 0 0 1.5rem;
	color: #fff;
}

.ev-desc {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 2rem 2.25rem;
	color: var(--wp--preset--color--muted);
}

.ev-desc > :first-child {
	margin-top: 0;
}

.ev-desc > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Contact CTA card (single car page)
--------------------------------------------------------------------------- */

.ev-cta {
	margin-top: var(--wp--preset--spacing--60);
	padding: 3rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	text-align: center;
}

.ev-cta__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: #fff;
}

.ev-cta__text {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted);
}

.ev-cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* The core "is-style-outline" button CSS is only enqueued when a real button
   block is on the page; this block outputs static markup, so the outline
   (transparent) look is defined here explicitly. */
.ev-cta__actions .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid #ffffff55;
	color: #fff;
}

.ev-cta__actions .is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: #fff;
}

/* ---------------------------------------------------------------------------
   Inquiry modal + form
--------------------------------------------------------------------------- */

.ev-notice {
	padding: 0.9rem 1.25rem;
	border-radius: 10px;
	margin-bottom: 1.25rem;
	font-weight: 600;
}

.ev-notice--ok {
	background: rgba(0, 200, 120, 0.15);
	border: 1px solid rgba(0, 200, 120, 0.35);
	color: #7af0c0;
}

.ev-notice--err {
	background: rgba(255, 80, 80, 0.12);
	border: 1px solid rgba(255, 80, 80, 0.35);
	color: #ffb0b0;
}

/* Toast / snackbar shown after the inquiry form is submitted. */
.ev-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 2000;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 90vw;
	padding: 0.9rem 1.25rem;
	border-radius: 12px;
	font-weight: 600;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateX(-50%) translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ev-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.ev-toast--ok {
	background: #10301f;
	border: 1px solid rgba(0, 200, 120, 0.4);
	color: #7af0c0;
}

.ev-toast--err {
	background: #3a1414;
	border: 1px solid rgba(255, 80, 80, 0.4);
	color: #ffb0b0;
}

.ev-toast__close {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}

.ev-toast__close:hover {
	opacity: 1;
}

.ev-modal[hidden] {
	display: none;
}

.ev-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.ev-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 10, 32, 0.6);
	backdrop-filter: blur(3px);
}

.ev-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--wp--preset--color--deep);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	color: #fff;
}

.ev-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 1.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ev-modal__head h2 {
	margin: 0;
	font-size: 1.25rem;
}

.ev-modal__close {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.ev-modal__close:hover {
	opacity: 1;
}

.ev-modal__car {
	padding: 1.25rem 1.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ev-modal__brand {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}

.ev-modal__model {
	margin: 0.1rem 0;
	font-size: 1.1rem;
}

.ev-modal__price {
	margin: 0.1rem 0 0;
	font-weight: 700;
	font-size: 1.1rem;
}

.ev-form {
	padding: 1.5rem 1.75rem;
}

.ev-form__row {
	display: flex;
	gap: 1rem;
}

.ev-form__row .ev-form__field {
	flex: 1;
}

.ev-form__field {
	margin-bottom: 1.1rem;
}

.ev-form__field label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
}

.ev-form__field input,
.ev-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: #fff;
	font: inherit;
}

.ev-form__field input:focus,
.ev-form__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.ev-form__field textarea {
	resize: none;
}

.ev-form__submit {
	width: 100%;
	margin-top: 0.5rem;
	border: none;
	cursor: pointer;
}

@media ( max-width: 480px ) {
	.ev-form__row {
		flex-direction: column;
		gap: 0;
	}
}