/* Classifieds module — search header, category sidebar, polished cards.
   Unlayered, .ac-plugin-scoped. The .ac-classifieds-layout grid is reused by
   the member directory too (same markup), so it's shared here. */

.ac-plugin .ac-classifieds-header { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.ac-plugin .ac-classifieds-search { flex: 1; min-width: 12rem; }
.ac-plugin .ac-classifieds-submit-cta { white-space: nowrap; }

/* Single column by default; add the sidebar column only when a sidebar is present
   (no categories/membership-types => full-width card grid, not a squeezed column). */
.ac-plugin .ac-classifieds-layout { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; margin-top: 1.1rem; }
.ac-plugin .ac-classifieds-layout:has(.ac-classifieds-sidebar) { grid-template-columns: 180px 1fr; }
.ac-plugin .ac-classifieds-sidebar ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.ac-plugin .ac-cat-btn { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: .9rem; color: var(--ac-muted); background: transparent; border: 0; padding: .42rem .6rem; border-radius: 8px; }
.ac-plugin .ac-cat-btn:hover { background: var(--ac-soft); color: var(--ac-ink); }
.ac-plugin .ac-cat-btn.is-active { background: var(--ac-primary); color: var(--ac-primary-ink); font-weight: 600; }

/* responsive card grid — shared by classifieds and directory (both use .ac-classifieds-layout) */
.ac-plugin .ac-classifieds-layout .ac-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }

.ac-plugin .ac-card--linked { transition: transform .12s, box-shadow .15s, border-color .15s; }
.ac-plugin .ac-card--linked:hover { transform: translateY(-3px); border-color: var(--ac-primary); box-shadow: 0 20px 40px -22px rgba(27,37,48,.5); }
.ac-plugin .ac-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.ac-plugin .ac-classified-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ac-plugin .ac-classified-card__thumb { aspect-ratio: 16 / 10; background: var(--ac-soft); display: flex; align-items: center; justify-content: center; color: var(--ac-muted); }
.ac-plugin .ac-classified-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ac-plugin .ac-classified-card__thumb--empty .ac-tile__icon { width: 40px; height: 40px; opacity: .5; }
/* No z-index here. The card's whole surface is a link (.ac-card__link, z-index 1) and a
   z-index of 2 on the body painted it above that overlay — so the title, price and
   excerpt swallowed every click and only the thumbnail was clickable. The body needs no
   stacking of its own; genuine nested links are lifted by the .ac-card--linked
   a:not(.ac-card__link) rule instead. */
.ac-plugin .ac-classified-card__body { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ac-plugin .ac-classified-card__badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.ac-plugin .ac-classified-card__title { font-size: 1.02rem; }
.ac-plugin .ac-classified-card__price { margin: 0; font-weight: 720; font-size: 1.12rem; color: var(--ac-accent); font-variant-numeric: tabular-nums; }
.ac-plugin .ac-classified-card__excerpt { margin: 0; color: var(--ac-muted); font-size: .9rem; }

@media (max-width: 640px) {
  /* Repeat the :has() variant: its extra specificity otherwise beats this rule
     and the sidebar layout never collapses on mobile (F4). */
  .ac-plugin .ac-classifieds-layout,
  .ac-plugin .ac-classifieds-layout:has(.ac-classifieds-sidebar) { grid-template-columns: 1fr; }
  .ac-plugin .ac-classifieds-sidebar ul { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ac-plugin .ac-card--linked { transition: none; } }

/* Post-a-listing / My-Listings toolbar + the My-Listings header row. */
.ac-plugin .ac-classifieds-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.ac-plugin .ac-my-classifieds-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.ac-plugin .ac-my-classifieds-head h2 { margin: 0; }

/* Listing gallery (up to 5 images). One column for a single photo so it keeps the
   previous full-width look; a responsive grid once there is more than one. */
.ac-plugin .ac-classified-gallery__item { margin: 0; }
.ac-plugin .ac-classified-gallery__item img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-sm); }

.ac-plugin .ac-classified-gallery--multiple {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: .7rem;
	align-items: start;
}
/* The first image is the hero, so let it span the full width on wider screens. */
.ac-plugin .ac-classified-gallery--multiple .ac-classified-gallery__item:first-child { grid-column: 1 / -1; }

/* Existing photos shown above the edit form's file input. */
.ac-plugin .ac-classified-current-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.ac-plugin .ac-classified-current-photos img { border-radius: var(--ac-radius-sm); }