/*
 * Car Rental Durrës — vehicle and booking components (Stage 3).
 *
 * Loaded only where one of these components can appear: the vehicle archive and
 * taxonomy views, single vehicle pages, and any page whose content contains a
 * crd/* dynamic block. See inc/assets.php.
 *
 * Tokens come from main.css / theme.json. Nothing here redefines a token.
 *
 * Contents
 *   1. Vehicle card
 *   2. Vehicle grid
 *   3. Price + availability
 *   4. Gallery
 *   5. Specification list
 *   6. Catalogue layout + filters
 *   7. Availability form and its states
 *   8. Disclosure, unavailable, empty states
 *   9. From-price
 */

/* ============================================================
   1. Vehicle card
   ============================================================ */
.crd-vehicle-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	transition: transform var(--transition), box-shadow var(--transition);
}
.crd-vehicle-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }

.crd-vehicle-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-soft);
}
.crd-vehicle-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.crd-vehicle-card:hover .crd-vehicle-card__img { transform: scale(1.035); }
.crd-vehicle-card__placeholder {
	display: block; width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg, var(--c-soft), var(--c-soft) 12px, var(--c-paper) 12px, var(--c-paper) 24px);
}
.crd-vehicle-card__imgnote {
	position: absolute; right: 12px; bottom: 12px;
	padding: 5px 10px;
	color: var(--c-ink); background: rgba(255, 255, 255, 0.92);
	border-radius: var(--r-pill);
	font-size: 0.68rem; font-weight: 700;
}

.crd-vehicle-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.crd-vehicle-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.crd-vehicle-card__title { margin: 0 0 7px; font-size: 1.3rem; }
.crd-vehicle-card__title a { color: inherit; }
.crd-vehicle-card__title a:hover { color: var(--c-signal); }
.crd-vehicle-card__class {
	color: var(--c-muted); font-size: 0.76rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
}
.crd-vehicle-card__price { flex: none; text-align: right; }

.crd-vehicle-card__specs {
	display: flex; justify-content: space-between; gap: 8px;
	margin: 0; padding: 15px 0; list-style: none;
	border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.crd-vehicle-card__specs li {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--c-muted); font-size: 0.74rem;
}
.crd-vehicle-card__footer {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: auto; padding-top: 18px;
}
/* Compact variant: used for "similar cars". */
.crd-vehicle-card--compact .crd-vehicle-card__top { margin-bottom: 16px; }
.crd-vehicle-card--compact .crd-textlink { margin-top: auto; }

/* ============================================================
   2. Vehicle grid
   ============================================================ */
.crd-vehicle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.crd-vehicle-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crd-vehicle-grid__more { margin: 40px 0 0; text-align: center; }
.crd-related { padding-block: var(--section-y-tight); }
.crd-related__title { margin-bottom: 32px; font-size: var(--wp--preset--font-size--xxl); }

/* ============================================================
   3. Price + availability
   ============================================================ */
.crd-price { display: block; color: var(--c-muted); font-size: 0.72rem; }
.crd-price__amount { display: block; color: var(--c-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.crd-price__basis { color: var(--c-muted); font-size: 0.72rem; }
.crd-price__note { display: block; margin-top: 4px; color: var(--c-muted); font-size: 0.7rem; }
.crd-price--none { color: var(--c-muted); font-size: 0.85rem; font-weight: 600; }

.crd-availability {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--c-success); font-size: 0.76rem; font-weight: 700;
}
.crd-availability::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.crd-availability--on_request { color: var(--c-muted); }
.crd-availability--seasonal { color: #8a5b00; }
.crd-availability--unavailable { color: var(--c-danger); }

/* ============================================================
   4. Gallery
   ============================================================ */
.crd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crd-gallery--single { grid-template-columns: 1fr; }
.crd-gallery__main { grid-column: span 2; margin: 0; aspect-ratio: 16 / 9; }
.crd-gallery--single .crd-gallery__main { grid-column: auto; }
.crd-gallery__small { margin: 0; aspect-ratio: 16 / 9; }
.crd-gallery__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.crd-gallery__placeholder {
	display: block; width: 100%; height: 100%; border-radius: var(--r-md);
	background: repeating-linear-gradient(45deg, var(--c-soft), var(--c-soft) 12px, var(--c-paper) 12px, var(--c-paper) 24px);
}
.crd-gallery__note {
	grid-column: 1 / -1;
	display: flex; align-items: center; gap: 8px;
	margin: 4px 0 0; color: var(--c-muted); font-size: 0.78rem;
}

/* ============================================================
   5. Specification list
   ============================================================ */
.crd-specs {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
	margin: 30px 0; padding: 0; list-style: none;
}
.crd-specs__item { padding: 16px; background: var(--c-soft); border-radius: 14px; }
.crd-specs__item .crd-icon { color: var(--c-signal); }
.crd-specs__label {
	display: block; margin-top: 10px; color: var(--c-muted);
	font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.crd-specs__value { display: block; margin-top: 3px; color: var(--c-heading); font-size: 0.84rem; }

.crd-facts { margin: 1.25rem 0; border-top: 1px solid var(--c-line); }
.crd-facts__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--c-line); }
.crd-facts__label { margin: 0; color: var(--c-muted); }
.crd-facts__value { margin: 0; font-weight: 600; text-align: right; }

/* ============================================================
   6. Catalogue layout + filters
   ============================================================ */
.crd-catalogue__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 34px; align-items: start; }
.crd-catalogue__filters { position: sticky; top: calc(var(--header-h) + 10px); }

.crd-filters {
	padding: 28px; background: var(--c-base);
	border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.crd-filters__title { margin: 0 0 24px; font-size: 1.15rem; }
.crd-filters__group { margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--c-line); }
.crd-filters__legend { display: block; margin-bottom: 12px; padding: 0; color: var(--c-heading); font-size: 0.8rem; font-weight: 700; }
.crd-filters__count { margin-left: auto; color: var(--c-faint); font-size: 0.75rem; }
.crd-filters .crd-checkbox { justify-content: flex-start; }
.crd-filters .crd-checkbox span:first-of-type { flex: 1; }
.crd-filters__actions { margin-top: 20px; }
.crd-filters__reset { display: inline-block; margin-top: 12px; color: var(--c-muted); font-size: 0.8rem; text-decoration: underline; }
.crd-filters__reset:hover { color: var(--c-ink); }

/* ============================================================
   7. Availability form
   ============================================================ */
.crd-request {
	padding: 30px; background: var(--c-base);
	border: 1px solid var(--c-line); border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
}
.crd-request__head { margin-bottom: 24px; }
.crd-request__title { margin: 0 0 8px; font-size: 1.4rem; }
.crd-request__intro { margin: 0; font-size: 0.88rem; }
.crd-request__context {
	display: flex; align-items: center; gap: 8px;
	margin: 16px 0 0; padding: 10px 14px;
	color: var(--c-ink); background: var(--c-soft); border-radius: var(--r-input);
	font-size: 0.84rem;
}
.crd-request__context strong { font-weight: 700; }

.crd-request__form { margin: 0; }
.crd-request .crd-form-grid { gap: 14px; }
.crd-field__optional { color: var(--c-faint); font-weight: 600; text-transform: none; letter-spacing: 0; }
.crd-request__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }

/* Honeypot — hidden from people, reachable by bots. */
.crd-request__trap {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- compact variant: the homepage bar --- */
/* A flex row rather than a fixed column count, so adding or removing a field
   in CRD_Booking::variant_fields() does not need a matching CSS change. */
.crd-request--compact { padding: 20px; }
.crd-request--compact .crd-request__row {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.crd-request--compact .crd-field { flex: 1 1 180px; min-width: 0; }
.crd-request--compact .crd-request__submit { flex: 0 0 auto; margin-top: 0; }
.crd-request--compact .crd-request__submit .crd-btn { min-height: 54px; padding-inline: 24px; }
.crd-request--compact .crd-disclosure { margin-top: 14px; padding-top: 12px; }

/* --- states --- */
.crd-request__state { padding: 22px; border-radius: var(--r-input); }
.crd-request__state-title { margin: 0 0 8px; font-size: 1.15rem; }
.crd-request__state p { margin: 0 0 8px; font-size: 0.9rem; }
.crd-request__state p:last-child { margin-bottom: 0; }

.crd-request__state--success {
	text-align: center;
	background: color-mix(in srgb, var(--c-success) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--c-success) 35%, var(--c-line));
}
.crd-request__state--success .crd-icon-tile {
	margin: 0 auto 14px;
	color: var(--c-success);
	background: color-mix(in srgb, var(--c-success) 16%, #fff);
}
.crd-request__state--success .crd-request__state-title { color: var(--c-success); }
.crd-request__state-actions { margin-top: 16px; }

.crd-request__state--error {
	margin-bottom: 22px;
	background: color-mix(in srgb, var(--c-danger) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--c-danger) 40%, var(--c-line));
}
.crd-request__state--error .crd-request__state-title { color: var(--c-danger); font-weight: 700; }
.crd-request__error-list { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.crd-request__error-list a { color: var(--c-danger); text-decoration: underline; }

/* ============================================================
   8. Disclosure, unavailable, empty
   ============================================================ */
.crd-disclosure { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.crd-disclosure p {
	display: flex; align-items: flex-start; gap: 9px;
	margin: 0 0 8px; color: var(--c-muted); font-size: 0.75rem; line-height: 1.5;
}
.crd-disclosure p:last-child { margin-bottom: 0; }
.crd-disclosure .crd-icon { margin-top: 2px; color: var(--c-success); }
.crd-disclosure__hours .crd-icon { color: var(--c-signal); }

.crd-unavailable {
	padding: 30px; text-align: center;
	background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.crd-unavailable .crd-icon-tile { margin: 0 auto 16px; color: #8a5b00; background: color-mix(in srgb, var(--c-warning) 18%, #fff); }
.crd-unavailable__title { margin: 0 0 10px; font-size: 1.25rem; }
.crd-unavailable__text { margin: 0 auto; max-width: 46ch; font-size: 0.9rem; }
.crd-unavailable__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.crd-unavailable .crd-disclosure { text-align: left; }

.crd-empty {
	padding: 3rem 1.5rem; text-align: center;
	background: var(--c-paper); border: 1px dashed var(--c-line); border-radius: var(--r-md);
}
.crd-empty .crd-icon-tile { margin: 0 auto 16px; }
.crd-empty__title { margin: 0 0 0.35rem; color: var(--c-heading); font-size: 1.15rem; font-weight: 700; }
.crd-empty__text { margin: 0 auto; max-width: 46ch; color: var(--c-muted); }
.crd-empty__actions { margin: 20px 0 0; }

/* ============================================================
   9. From-price
   ============================================================ */
.crd-from-price { display: flex; flex-direction: column; margin: 0; }
.crd-from-price__prefix {
	color: var(--c-muted); font-size: 0.68rem; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
}
.crd-from-price__amount { color: var(--c-signal); font-size: 1.45rem; letter-spacing: -0.02em; }
.crd-from-price__suffix { color: var(--c-muted); font-size: 0.82rem; font-weight: 600; }
.crd-from-price__fallback { color: var(--c-muted); font-size: 0.88rem; font-weight: 600; }

/* ============================================================
   10. Homepage placements

   Two components owned by this file sit inside layout components owned by
   main.css. The rules live here, not there, because main.css is enqueued first
   — putting them beside the base rules is what guarantees they win.
   ============================================================ */

/* The "from €X / day" tag floating over the hero image. */
.crd-home-hero__media .crd-from-price {
	position: absolute; left: 18px; bottom: 18px;
	gap: 2px; padding: 13px 18px;
	background: var(--c-base); border-radius: var(--r-sm);
}

/* The availability panel under the hero grid. `.crd-request` was the crd-core
   block; the homepage now embeds the Fluent Form inside `.crd-home-hero__form`,
   the group that carries the `#crd-availability` anchor the page's "Check
   availability" buttons target — both are spaced off the grid so the bar never
   touches the hero copy above.

   scroll-margin-top is what makes that anchor usable: the header is sticky, so
   without it the jump parks the top of the form underneath the header. */
.crd-home-hero .crd-request,
.crd-home-hero > .crd-home-hero__form { margin-top: 40px; }
.crd-home-hero__form { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1050px) {
	.crd-vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crd-catalogue__layout { grid-template-columns: 1fr; }
	.crd-catalogue__filters { position: static; }
	.crd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.crd-vehicle-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crd-gallery { grid-template-columns: 1fr 1fr; }
	.crd-request { padding: 24px; }
}

@media (max-width: 560px) {
	.crd-vehicle-grid,
	.crd-vehicle-grid--2,
	.crd-vehicle-grid--3 { grid-template-columns: 1fr; }
	/* One field per line; the button stops being a tap target squeezed in a corner. */
	.crd-request--compact .crd-field,
	.crd-request--compact .crd-request__submit { flex: 1 1 100%; }
	.crd-request--compact .crd-request__submit .crd-btn { width: 100%; }
	.crd-vehicle-card__specs { flex-wrap: wrap; gap: 10px 16px; justify-content: flex-start; }
	.crd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crd-gallery { grid-template-columns: 1fr; }
	.crd-gallery__main { grid-column: auto; }
	.crd-request { padding: 20px; }
	.crd-request__submit { flex-direction: column; align-items: stretch; }
	.crd-request__submit .crd-btn { width: 100%; }
	.crd-request__submit .crd-textlink { justify-content: center; }
}