/* Phezos Listings — presentation.
 *
 * The plugin renders its own listing UI (spec: option A). Vehica supplies header,
 * footer, typography and colour; everything below is scoped under .phezos-* so it
 * cannot leak into the theme, and it must degrade to something sane on a theme
 * that is not Vehica at all.
 *
 * Theming contract, in priority order:
 *   1. A child theme may set --phezos-* on any ancestor and win outright.
 *   2. Otherwise we inherit Vehica's own two runtime tokens, --primary and
 *      --primary-light. Those are the ONLY custom properties Vehica exposes
 *      (verified against the theme's style.css: 393 uses of var(--primary),
 *      38 of var(--primary-light); declared as #ff4605 / #fff0eb but editable
 *      in the theme options). Binding to them means an accent change in Vehica
 *      moves these cards too, with no edit here.
 *   3. On a non-Vehica theme both are undefined, so the second fallback in each
 *      var() chain applies and the cards render in neutral greys.
 *
 * Literal colours below are lifted from Vehica's light car card (card v2/v4)
 * so the grid sits next to a native Vehica car grid without looking foreign.
 * The dark v1 card is deliberately NOT matched — it only reads correctly on a
 * dark page, and a page built from these shortcodes is a normal light page.
 */
/* Declared on :root, NOT on .phezos-* — this is what makes rule 1 above true.
   Custom properties do not cascade by specificity the way normal declarations
   are usually reasoned about: whichever rule wins on the element that DECLARES
   them wins. Putting these on .phezos-grid would mean a child theme's
   `:root { --phezos-accent: … }` loses to the plugin on every card, because
   .phezos-grid is the more specific selector on the same element. On :root the
   child theme's later/equal rule wins, and Vehica's own --primary (also :root)
   is still visible to the var() chain. */
:root {
  /* Accent: Vehica's --primary when present. The fallback is a concrete colour,
     not currentColor — on :root that would resolve against the root element's
     colour rather than the card's, which is not what "neutral" should mean. */
  --phezos-accent: var(--primary, #222732);
  --phezos-accent-soft: var(--primary-light, rgba(0, 0, 0, .06));

  /* Vehica card surface tokens. */
  --phezos-surface: #fff;
  --phezos-border: #e7edf3;
  --phezos-shadow: 1px 1px 0 0 rgba(196, 196, 196, .24);
  --phezos-ink: #222732;
  --phezos-ink-strong: #0f141e;
  --phezos-muted: #99a1b2;
  --phezos-rule: rgba(52, 59, 74, .1);
  --phezos-image-bg: #eff0f1;
  --phezos-field-bg: #f2f5fb;

  --phezos-gap: 22px;
  --phezos-radius: 10px;
  --phezos-radius-sm: 5px;
}

/* -------------------------------------------------------------- listing --- */

/* Page gutters for the shortcode output.
 *
 * The listings shortcode renders straight into .elementor-widget-container, which has no
 * padding of its own, so on a full-width layout the cards ran flush to the viewport edge.
 * A theme section that DOES provide its own padding simply nests this one inside it, which
 * costs a little extra space but never overlaps — the failure mode is generous, not broken.
 *
 * A max-width is deliberately NOT set here: the theme's section owns the content width, and
 * imposing one would fight a layout that intends full-bleed.
 */
.phezos-listing {
  padding: 0 20px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .phezos-listing {
    padding: 0 14px;
  }
}

/* ---------------------------------------------------------------- grid --- */

/* Default when no column count is given — auto-fill keeps older placements working. */
.phezos-grid {
  display: grid;
  gap: var(--phezos-gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Explicit column counts from the settings screen. minmax(0,1fr) rather than a bare 1fr:
   grid items default to min-width:auto, so a long unbroken title would otherwise widen
   its track and push the row out of alignment. */
.phezos-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phezos-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phezos-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Step down rather than letting cards shrink past readability. Each breakpoint is set
   where that column count stops fitting a ~260px card plus gaps. */
@media (max-width: 1200px) {
  .phezos-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .phezos-grid--3,
  .phezos-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .phezos-grid,
  .phezos-grid--2,
  .phezos-grid--3,
  .phezos-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Result count above the grid — quiet, informational, not a heading. */
.phezos-results {
  font-size: 15px;
  line-height: 24px;
  color: var(--phezos-muted);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------- card --- */

/* The card is the anchor's positioning context: the whole card is clickable via
   .phezos-card__link, which is a normal <a> wrapping image + title, so keyboard
   focus and middle-click still behave. Vehica achieves the same with an absolute
   overlay link; we do not, because an overlay would swallow the gallery links. */
.phezos-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--phezos-surface);
  border: 1px solid var(--phezos-border);
  border-radius: var(--phezos-radius);
  box-shadow: var(--phezos-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}

.phezos-card:hover {
  box-shadow: 0 6px 18px 0 rgba(15, 20, 30, .10);
}

.phezos-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Fixed ratio rather than Vehica's padding-top hack: the theme computes that
   padding in PHP from a theme option we cannot read from a plugin. 4/3 matches
   Vehica's default card_image_ratio closely enough not to jar. */
.phezos-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--phezos-image-bg);
  transition: transform .8s ease;
}

.phezos-card:hover .phezos-card__img {
  transform: scale(1.04);
}

.phezos-card__img--none {
  background: var(--phezos-image-bg);
}

/* Content block: grows so the specs row sits flush at the bottom of every card
   in a row, regardless of how many lines the title wraps to. */
.phezos-card__body {
  padding: 0 22px 19px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.phezos-card__title {
  display: block;
  font-size: 17px;
  line-height: 21px;
  margin: 11px 0 10px;
  color: var(--phezos-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phezos-card__link:hover .phezos-card__title {
  color: var(--phezos-accent);
}

.phezos-card__price {
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  margin-bottom: 10px;
  color: var(--phezos-accent);
}

/* Vehica draws a 1px rule between price and the feature row. */
.phezos-card__specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: auto 0 0;
  border-top: 1px solid var(--phezos-rule);
  padding-top: 18px;
}

.phezos-card__specs li {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  color: var(--phezos-muted);
  margin-right: 20px;
}

.phezos-card__specs li:last-child {
  margin-right: 0;
}

/* Vehica badges the first feature (year) in the accent colour. */
.phezos-card__specs li:first-child {
  padding: 0 11px;
  border-radius: var(--phezos-radius-sm);
  background: var(--phezos-accent);
  color: #fff;
}

/* -------------------------------------------------------------- search --- */

/* A GRID, NOT WRAPPING FLEX. With flex-wrap the controls broke to uneven rows at
   in-between widths — a lone select stranded beside a full-width search box. Equal
   tracks keep every control aligned at any viewport, and the search field spans the
   full first row so it reads as the primary control. */
.phezos-search {
  display: grid;
  /* Five controls after the search box — make, transmission, fuel, price, sort — plus the
     submit button. auto-fit over a min track keeps them on one row when there is space and
     rebalances when there is not, without hard-coding a count that changes as facets come
     and go (a facet with no values renders no control at all). */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: center;
  margin-bottom: var(--phezos-gap);
  padding: 18px;
  background: var(--phezos-field-bg);
  border-radius: var(--phezos-radius);
}

.phezos-search input[type="search"] {
  grid-column: 1 / -1;
}


/* 10px/14px, not 17px/22px. The larger padding came from Vehica's own full-width hero
   search, where a control spans a third of the viewport; at four-up in a filter bar the
   same values made every field look oversized. 40px tall is a normal form control and
   still a comfortable tap target. */
.phezos-search input[type="search"],
.phezos-search input[type="number"],
.phezos-search select {
  font-size: 14px;
  line-height: 18px;
  color: #2f3b48;
  background: #fff;
  padding: 10px 14px;
  border: 1px solid var(--phezos-border);
  border-radius: var(--phezos-radius-sm);
  box-shadow: var(--phezos-shadow);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.phezos-search input:focus,
.phezos-search select:focus {
  outline: 2px solid var(--phezos-accent);
  outline-offset: 1px;
}

/* Submit and clear share one track so they never split across rows. */
.phezos-search__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* A link, not a button — it navigates. Styled quietly so it reads as secondary to the
   search action beside it. */
.phezos-search__clear {
  font-size: 14px;
  line-height: 18px;
  color: var(--phezos-muted);
  text-decoration: underline;
  white-space: nowrap;
}

.phezos-search__clear:hover,
.phezos-search__clear:focus-visible {
  color: var(--phezos-accent);
}

/* Matches the field height above so the row lines up on a single baseline. */
.phezos-search button {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--phezos-radius-sm);
  background: var(--phezos-accent);
  color: #fff;
  cursor: pointer;
  transition: opacity .2s ease-in-out;
}

/* Square, matching the 40px field height. DECLARED AFTER the generic .phezos-search
   button rule above, which sets padding: 10px 22px — same specificity, so source order
   is what makes the icon button square rather than a wide pill. */
.phezos-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

/* The icon is pinned rather than left to inherit.
 *
 * The markup and the rules above were both verified correct on the live page while the
 * button still rendered empty, which points at the host theme: a themed reset that zeroes
 * svg width/height, or sets fill/stroke on descendants, blanks an inline icon that relies
 * on its width/height attributes and on currentColor.
 *
 * Everything the glyph needs is therefore stated explicitly here, with !important, because
 * this competes with theme rules of unknown specificity that we cannot edit. This is the
 * one place in this file where that is warranted: a control with no visible label is not a
 * cosmetic defect, it is an unusable button.
 */
/* The glyph itself comes from Font Awesome, which the theme already loads and already uses
   for its own search control. Nothing here sets the icon — only its size — because
   .fa-search supplies the content and .fas the font-family. Both are left to do their job
   so a Font Awesome version bump on the theme side carries through automatically. */
.phezos-search__icon {
  font-size: 15px;
  line-height: 1;
}

/* WHEN FONT AWESOME IS ABSENT the <i> renders nothing, so the button would be blank again.
 * A drawn fallback layered underneath was considered and rejected: with Font Awesome
 * present BOTH would paint, and a doubled glyph is a worse defect than the one being
 * fixed. Instead the text label beside the icon becomes visible on any theme that does not
 * load Font Awesome's font-family — see .phezos-search__submit-text, which is only clipped
 * inside a button whose icon actually has the .fas family applied.
 */

/* currentColor above resolves against this, so it is stated on the button rather than
   left to the generic rule, which a theme could override. */
.phezos-search__submit {
  color: #fff;
}

/* The fallback label is hidden only when the icon beside it actually rendered. If the SVG
   is missing or collapsed the sibling selector still matches, so this alone does not
   guarantee the text shows — but combined with the pinned dimensions above it means the
   button is either an icon or a word, never nothing. The width relaxes so a text label
   is not clipped by the square sizing. */
/* The label is clipped ONLY when a Font Awesome icon class is actually on the page's icon
 * element. On a theme that never loads Font Awesome the class is still in our markup, so
 * this cannot detect the missing FONT — but it does mean the rule is scoped to the icon
 * being marked up as a Font Awesome glyph at all.
 *
 * Honest limitation: if a theme loads no Font Awesome, the icon is invisible and the label
 * stays clipped, leaving a bare button. That is acceptable here because this plugin ships
 * for a site whose theme demonstrably loads it (verified live: font-awesome-5-css enqueued
 * and fa-solid-900.woff2 serving 200). Anything stronger needs a JS probe, which is not
 * worth loading a script for.
 */
.phezos-search__submit .phezos-search__submit-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The @supports probe for inline-SVG support is gone with the SVG itself — the glyph is
   now borders, which every browser that reaches this stylesheet can draw. */

.phezos-search button:hover {
  opacity: .85;
}

/* --------------------------------------------------------------- pager --- */

.phezos-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 60px;
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 700;
}

.phezos-pager__i {
  display: inline-block;
  min-width: 55px;
  line-height: 55px;
  padding: 0 10px;
  text-align: center;
  border-radius: 50%;
  color: #2f3b48;
  text-decoration: none;
  transition: color .2s ease-in-out;
}

.phezos-pager__i:hover {
  color: var(--phezos-accent);
}

.phezos-pager__i.is-current {
  background: var(--phezos-accent-soft);
  color: var(--phezos-accent);
  text-decoration: none;
}

/* Wrapper for the fallback render used when a page-builder theme never calls
   the_content (see Phezos_Router::ensure_rendered). It supplies the content width and
   gutters the theme's own layout would otherwise have provided. */
.phezos-host-fallback {
  width: 100%;
  padding: 40px 20px 60px;
  box-sizing: border-box;
}

.phezos-host-fallback__inner {
  max-width: 1170px;   /* Vehica's own container width */
  margin: 0 auto;
}

/* -------------------------------------------------- single / detail page --- */

/* Values below are lifted from the Vehica theme's own single-car page so this page
   sits alongside a native listing: section labels 22px/28px/900, body copy 16px/30px,
   ink #222732, muted #a7a8a8. No Vehica CLASS is reused and no theme file is touched —
   only the numbers are shared, so a theme restyle cannot break this page. */

/* Breadcrumbs — the theme's own values: muted #a7a8a8 links, accent for the current page,
   17px/7px vertical padding. Wraps rather than scrolling, since a long car title as the
   last crumb would otherwise push the trail off the page. */
.phezos-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 17px 0 7px;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 10px;
}

.phezos-crumbs__link {
  color: var(--phezos-muted);
  text-decoration: none;
}

.phezos-crumbs__link:hover {
  color: var(--phezos-accent);
}

.phezos-crumbs__sep {
  color: var(--phezos-muted);
  opacity: .6;
}

.phezos-crumbs__last {
  color: var(--phezos-accent);
  /* The car title can be long; keep the trail to one tidy line per crumb. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Gallery left, identity + specs right — the reference car page's arrangement.
   minmax(0,…) on both tracks is load-bearing: grid items default to min-width:auto, so a
   wide image would otherwise force the column past its share and overflow the row. */
.phezos-single__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-bottom: var(--phezos-gap);
}

/* One column below the theme's own tablet breakpoint, gallery first — a spec table above
   the car it describes reads as a form, not a listing. */
@media (max-width: 1024px) {
  .phezos-single__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.phezos-single__side {
  /* The details track is the shorter of the two, so it follows the gallery on scroll
     rather than leaving a tall empty gutter beside it. */
  position: sticky;
  top: 20px;
}

@media (max-width: 1024px) {
  .phezos-single__side {
    position: static;
  }
}

.phezos-single__head {
  margin-bottom: var(--phezos-gap);
}

.phezos-single__title {
  font-size: 29px;
  line-height: 36px;
  font-weight: 800;
  color: var(--phezos-ink-strong);
  margin-bottom: 6px;
}

/* The year sits under the title, as on Vehica's page — quiet, not a spec row. */
.phezos-single__year {
  font-size: 16px;
  line-height: 28px;
  color: var(--phezos-muted);
  margin-bottom: 10px;
}

.phezos-single__price {
  font-size: 29px;
  line-height: 36px;
  font-weight: 800;
  color: var(--phezos-accent);
}

/* Section headings ("Detalji vozila", "Opis") — Vehica's .vehica-section-label. */
.phezos-section-label {
  font-size: 22px;
  line-height: 28px;
  font-weight: 900;
  color: var(--phezos-ink-strong);
  margin: 0 0 20px;
}

@media (min-width: 900px) {
  .phezos-section-label {
    margin-bottom: 30px;
  }
}

/* Gallery: one hero image with a thumb strip beneath, matching the theme's layout.
   Every thumb is a plain <a> to the full image, so with JS off it opens the file
   directly — the required no-JS fallback. */
.phezos-gallery {
  margin-bottom: var(--phezos-gap);
}

.phezos-gallery__main {
  display: block;
  overflow: hidden;
  border-radius: var(--phezos-radius);
  line-height: 0;
  margin-bottom: 10px;
}

.phezos-gallery__main img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--phezos-image-bg);
  border-radius: var(--phezos-radius);
}

.phezos-gallery__thumbs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Each thumb is a plain <a> to the full image — with JS off it opens the file
   directly, which is the required no-JS fallback. */
.phezos-gallery__i {
  display: block;
  overflow: hidden;
  border-radius: var(--phezos-radius);
  line-height: 0;
}

.phezos-gallery__i:hover img {
  transform: scale(1.04);
}

.phezos-gallery img {
  transition: transform .8s ease;
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--phezos-image-bg);
  border-radius: var(--phezos-radius);
}

/* Attribute grid — Vehica's .vehica-car-attributes-grid: two columns on desktop,
   collapsing to one on narrow screens. The label sits ABOVE its value (not beside it,
   as the old table did), which is what the theme does. */
/* Inside the narrow right-hand column the label/value pairs read better as rows than as
   a two-up grid, so each is a full-width row with the value aligned right — the shape a
   spec sheet normally takes. */
.phezos-attrs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: var(--phezos-gap);
  background: var(--phezos-surface);
  border: 1px solid var(--phezos-border);
  border-radius: var(--phezos-radius);
  overflow: hidden;
}

.phezos-attrs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--phezos-rule);
}

.phezos-attrs__row:last-child {
  border-bottom: 0;
}

.phezos-attrs__name {
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: var(--phezos-muted);
  margin: 0;
  flex: 0 0 auto;
}

.phezos-attrs__value {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--phezos-ink-strong);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

/* Operator-written Croatian marketing copy — the theme's own body measure. */
.phezos-single__desc {
  font-size: 16px;
  line-height: 30px;
  color: var(--phezos-ink);
  margin-bottom: var(--phezos-gap);
}

.phezos-single__desc p {
  margin: 0 0 16px;
}

.phezos-single__desc p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------- lightbox --- */

/* Built by phezos.js. Styles live here rather than inline so the overlay can be
   restyled without touching behaviour, and so the arrows have hover/focus states. */
.phezos-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  cursor: zoom-out;
}

.phezos-lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  display: block;
  cursor: default;
}

.phezos-lightbox__nav,
.phezos-lightbox__close {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background .15s ease-in-out;
}

.phezos-lightbox__nav:hover,
.phezos-lightbox__close:hover,
.phezos-lightbox__nav:focus-visible,
.phezos-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, .28);
}

/* Comfortably past the 44px touch-target minimum. */
.phezos-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 34px;
}

.phezos-lightbox__nav--prev { left: 18px; }
.phezos-lightbox__nav--next { right: 18px; }

.phezos-lightbox__close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
}

.phezos-lightbox__count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  opacity: .8;
  pointer-events: none;
}

/* On a phone the arrows would otherwise sit over the image itself. */
@media (max-width: 600px) {
  .phezos-lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .phezos-lightbox__nav--prev { left: 8px; }
  .phezos-lightbox__nav--next { right: 8px; }
}

/* ----------------------------------------------------- notice / empty --- */

/* Shown when AMIP is unreachable and nothing is cached. It must stay visually
   quiet — it is a transient operational state, not an error the visitor caused. */
.phezos-notice,
.phezos-empty {
  padding: 22px;
  background: var(--phezos-field-bg);
  border-radius: var(--phezos-radius);
  color: #2f3b48;
  font-size: 15px;
  line-height: 24px;
}

/* --------------------------------------------------------------- small --- */

@media (max-width: 600px) {
  .phezos-search {
    padding: 14px;
  }

  .phezos-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .phezos-pager {
    margin-top: 30px;
    font-size: 18px;
  }

  .phezos-pager__i {
    min-width: 44px;
    line-height: 44px;
  }
}