/* Simple Auto Plugin - frontend (grid + single hero + gallery) */

/* Grid: 2 kolommen op desktop, 1 kolom op mobiel */
.sap-grid-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:768px){.sap-grid-list{grid-template-columns:1fr}}

/* Kaarten */
.sap-card{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.sap-thumb{display:block;background:#f3f4f6}

/* Afbeeldingen */
.sap-fit-contain img{width:100%;height:auto;display:block;object-fit:contain}
.sap-fit-cover{aspect-ratio:16/9;overflow:hidden}
.sap-fit-cover img{width:100%;height:100%;display:block;object-fit:cover}

/* Body */
.sap-card-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.sap-title{margin:0;font-size:1.05rem;line-height:1.3}
.sap-title a{text-decoration:none}
.sap-meta{list-style:none;padding:0;margin:2px 0 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;line-height:1.25}
.sap-meta li{margin:0;padding:0;display:inline-flex;align-items:center;white-space:nowrap;line-height:1.25}
.sap-meta li+li{position:relative;padding-left:12px}
.sap-meta li+li:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;opacity:.35}
.sap-price{font-weight:700;font-size:1.1rem}
.sap-btn{align-self:flex-start;border:1px solid #111;padding:6px 10px;border-radius:6px;text-decoration:none}

/* Single hero */
.sap-single-hero{margin:0 auto 24px;max-width:900px}
.sap-single-hero-img{display:block;width:100%;height:auto;object-fit:contain}

/* Gallery */
.sap-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 auto 24px;max-width:1100px}
@media(max-width:900px){.sap-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sap-gallery{grid-template-columns:1fr}}
.sap-gallery img{width:100%;height:auto;display:block;object-fit:cover;border:1px solid #eee;border-radius:6px}

/* Lightbox (vanilla) */
.sap-lightbox{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:9999}
.sap-lightbox.open{display:flex}
.sap-lightbox img{max-width:95vw;max-height:90vh;display:block}
.sap-lightbox .sap-close{position:absolute;right:18px;top:12px;font-size:28px;color:#fff;cursor:pointer}

/* === Fixed hero size (per request) === */
.sap-single-hero-img {
  display: block;
  width: 500px;
  height: 450px;
  object-fit: contain;
  margin: 0 auto; /* center */
}

/* === Centered hero container and fixed hero size === */
.sap-single-hero {
  max-width: 500px;
  margin: 0 auto 24px auto;
}
.sap-single-hero-img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: contain;
}

/* === Hero alignment & reset (strong) === */
body.single-auto .sap-single-hero{
  max-width: 500px !important;
  margin: 0 auto 24px !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.single-auto .sap-single-hero-img{
  display: block !important;
  width: 100% !important;
  height: 450px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* If theme gives all images box-shadow on single posts, neutralize within entry content */
body.single-auto .entry-content img.sap-single-hero-img{ box-shadow:none !important; }
/* Optional: keep gallery wide; if you prefer same width as hero, uncomment next line */
/* body.single-auto .sap-gallery{ max-width:500px !important; } */

/* === Force hero LEFT aligned inside Astra entry-content === */
body.single-auto .entry-content[data-ast-blocks-layout] > .sap-single-hero{
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 500px !important;
}
body.single-auto .sap-single-hero{
  margin-left: 0 !important;
  margin-right: auto !important;
}