/**
 * Axadle Listings — Publisher Element Enhancement
 *
 * Philosophy (learned from breakage):
 *  ✅ CSS Grid replaces float columns   — safe, structural
 *  ✅ overflow: hidden on image wrappers — enables zoom, non-destructive
 *  ✅ Image zoom on hover (transform)   — additive, non-destructive
 *  ✅ Card lift on hover                — additive
 *  ✅ Typography (weight, spacing)      — additive
 *
 *  ❌ NEVER: padding:0 / height:auto !important on .featured/.img-holder
 *     → kills Publisher's padding-top aspect-ratio mechanism → images collapse
 *  ❌ NEVER: override Publisher's category badge / link / header colours
 *     → use Publisher's colour tokens, not --ax-primary
 *  ❌ NEVER: change display/flex-direction on existing listing types
 *     → Publisher sets these; fighting them breaks layout
 *
 * @package Axadle
 * @version 1.2.0
 */

/* ============================================================
   1. COLUMN GRID — replaces Publisher's float .columns-X
   ============================================================ */

/* Kill float-based clearfix only where we apply grid */
.listing.columns-1::before, .listing.columns-1::after,
.listing.columns-2::before, .listing.columns-2::after,
.listing.columns-3::before, .listing.columns-3::after,
.listing.columns-4::before, .listing.columns-4::after { display: none !important; }

.listing.columns-1 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.listing.columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.listing.columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.listing.columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.listing.scolumns-1 { display: grid; grid-template-columns: 1fr; gap: 0; }
.listing.scolumns-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.listing.scolumns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.listing.scolumns-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.listing.scolumns-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.65rem; }

/* Reset floats on grid children */
.listing.columns-1 > .listing-item,
.listing.columns-2 > .listing-item,
.listing.columns-3 > .listing-item,
.listing.columns-4 > .listing-item,
.listing.scolumns-2 > .listing-item,
.listing.scolumns-3 > .listing-item,
.listing.scolumns-4 > .listing-item,
.listing.scolumns-5 > .listing-item {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Responsive column collapse */
@media (max-width: 1024px) {
  .listing.columns-4 { grid-template-columns: repeat(3, 1fr); }
  .listing.scolumns-5 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .listing.columns-3,
  .listing.columns-4 { grid-template-columns: repeat(2, 1fr); }
  .listing.scolumns-3,
  .listing.scolumns-4 { grid-template-columns: repeat(2, 1fr); }
  .listing.scolumns-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .listing.columns-2,
  .listing.columns-3,
  .listing.columns-4 { grid-template-columns: 1fr; gap: 1rem; }
  .listing.scolumns-2,
  .listing.scolumns-3,
  .listing.scolumns-4 { grid-template-columns: 1fr; }
  .listing.scolumns-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   2. IMAGE HOVER — zoom only, never touch sizing/padding
   ============================================================ */

/* Enable zoom clipping without touching Publisher's height/padding mechanism */
.listing-item .featured,
.listing-item .img-holder {
  overflow: hidden;
}

/* Smooth zoom on all listing images */
.listing-item .featured img,
.listing-item .img-holder img,
.listing-item .featured .img-cont,
.listing-item .img-holder .img-cont {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.listing-item:hover .featured img,
.listing-item:hover .img-holder img {
  transform: scale(1.06);
}

/* Background-image based slides (sliders use .img-cont) */
.listing-item:hover .featured .img-cont,
.listing-item:hover .img-holder .img-cont {
  transform: scale(1.06);
}

/* ============================================================
   3. CARD HOVER — lift + shadow (grid / blog cards)
   ============================================================ */

.listing-item-grid-1,
.listing-item-blog-1,
.listing-item-blog-2,
.listing-item-blog-5 {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.listing-item-grid-1:hover,
.listing-item-blog-1:hover,
.listing-item-blog-2:hover,
.listing-item-blog-5:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
}

/* Classic-1/2 horizontal cards — background tint on hover */
.listing-item-classic-1,
.listing-item-classic-2 {
  transition: background 0.2s ease;
  border-radius: 4px;
}

.listing-item-classic-1:hover,
.listing-item-classic-2:hover {
  background: rgba(0, 0, 0, 0.025);
}

/* ============================================================
   4. TYPOGRAPHY — weight & spacing improvements (colour-neutral)
   ============================================================ */

/* Post titles — heavier weight, tighter leading */
.listing-item .title a,
.listing-item .post-title a {
  font-weight: 700;
  line-height: 1.28;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.listing-item:hover .title a,
.listing-item:hover .post-title a {
  opacity: 0.78;
}

/* Grid & blog titles — fluid sizing */
.listing-item-grid-1 .title,
.listing-item-blog-1 .title,
.listing-item-blog-2 .title,
.listing-item-blog-5 .title {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.listing-item-blog-5 .title {
  font-size: clamp(1rem, 2vw, 1.35rem);
}

/* Classic-1/2 titles — compact */
.listing-item-classic-1 .title,
.listing-item-classic-2 .title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Post meta — slightly smaller, consistent spacing */
.listing-item .post-meta,
.listing-item .loop-post-meta {
  font-size: 0.72rem;
  line-height: 1.4;
}

/* ============================================================
   5. READING TIME BADGE
   ============================================================ */

/* .ax-reading-time base style lives in axadle-modern.css */

/* ============================================================
   6. SECTION HEADERS — additive accent only
      Publisher's original border/tab styles are preserved;
      we only add a left-side accent bar on the ::before.
   ============================================================ */

.bs-shortcode .block-head {
  position: relative;
}

/* ============================================================
   7. SLIDER IMAGE CONTAINERS — zoom only
   ============================================================ */

.bs-slider-1 .img-cont,
.bs-slider-2 .img-cont,
.bs-slider-3 .img-cont,
.better-slider .img-cont {
  transition: transform 0.8s ease;
}

/* Slider navigation arrows — modernize without breaking layout */
.bs-slider-1 .flex-prev,
.bs-slider-1 .flex-next,
.bs-slider-2 .flex-prev,
.bs-slider-2 .flex-next,
.bs-slider-3 .flex-prev,
.bs-slider-3 .flex-next {
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s !important;
}

.bs-slider-1 .flex-prev:hover,
.bs-slider-1 .flex-next:hover,
.bs-slider-2 .flex-prev:hover,
.bs-slider-2 .flex-next:hover,
.bs-slider-3 .flex-prev:hover,
.bs-slider-3 .flex-next:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* FlexSlider pager dots */
.bs-slider-1 .flex-control-pager li a,
.bs-slider-2 .flex-control-pager li a,
.bs-slider-3 .flex-control-pager li a {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  transition: background 0.2s, transform 0.2s !important;
}

.bs-slider-1 .flex-control-pager li a.flex-active,
.bs-slider-2 .flex-control-pager li a.flex-active,
.bs-slider-3 .flex-control-pager li a.flex-active {
  background: #fff !important;
  transform: scale(1.3);
}

/* ============================================================
   8. NEWSLETTER FORM — visual polish
   ============================================================ */

.bs-subscribe-newsletter input[type="email"],
.bs-mailchimp-newsletter input[type="email"],
.bs-feedburner-newsletter input[type="text"] {
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bs-subscribe-newsletter input[type="email"]:focus,
.bs-mailchimp-newsletter input[type="email"]:focus,
.bs-feedburner-newsletter input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   9. PAGINATION — modern but colour-neutral
   ============================================================ */

.bs-pagination a,
.bs-pagenavi a,
.bs-pagenavi span,
.page-nav a {
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.bs-pagination a:hover,
.bs-pagenavi a:hover,
.page-nav a:hover {
  opacity: 0.8;
}

/* ============================================================
   10. LOAD MORE BUTTON
   ============================================================ */

.bs-load-more-btn,
.load-more-btn {
  border-radius: 4px;
  transition: opacity 0.2s, transform 0.15s;
}

.bs-load-more-btn:hover,
.load-more-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ============================================================
   11. LAZY-LOAD FADE-IN
   ============================================================ */

.listing-item img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.listing-item img[loading="lazy"].lazyloaded,
.listing-item img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* Ensure images that load natively (no JS) still appear */
.listing-item img[loading="lazy"]:not([data-src]) {
  opacity: 1;
}

/* ============================================================
   12. DARK MODE — handled by CSS filter in axadle-modern.css section 18
   ============================================================ */

/* ============================================================
   13. PRINT
   ============================================================ */

@media print {
  .bs-slider-1,
  .bs-slider-2,
  .bs-slider-3,
  .better-slider { display: none !important; }

  .listing-item { break-inside: avoid; }
}