/* Overview */
.ref-overview{display:grid;gap:20px}
@media (min-width: 900px){
  .ref-overview{grid-template-columns: 1fr}
}
.ref-card{display:grid;gap:16px;align-items:stretch;border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff}
@media (min-width: 900px){
  .ref-card{grid-template-columns: 1.2fr 1fr}
}
.ref-card-media{position:relative;overflow:hidden;border-radius:12px;min-height:220px;background:#f7f7f7}
.ref-card-media .ref-preview{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.ref-card-media .ref-preview.is-active{opacity:1}
.ref-more-badge{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px}
.ref-title{margin:0 0 8px;font-size:1.35rem;line-height:1.2}
.ref-teaser{margin:0 0 12px;color:#444}
.ref-btn{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid #111;text-decoration:none}
/* Placeholder */
.ref-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888}
/* Gallery */
.ref-gallery{position:relative}
.ref-slides{position:relative;overflow:hidden;border-radius:14px}
.ref-slide{position:relative;min-height:260px;padding-bottom:10px}
.ref-slide>.ref-img, .ref-slide>.ref-video{display:block;width:100%;height:auto;max-height:72vh;margin:0 auto;object-fit:contain;background:#000}
.ref-caption{font-size:.95rem;color:#333;margin-top:8px}
.ref-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#000;border:0;color:#fff;font-size:22px;width:40px;height:40px;border-radius:999px;opacity:.7;cursor:pointer}
.ref-prev{left:12px}
.ref-next{right:12px}
.ref-arrow:focus{outline:2px solid #111}
@media (prefers-color-scheme: dark){
  .ref-card{background:#0b0b0b;border-color:#222}
  .ref-teaser{color:#ccc}
  .ref-btn{border-color:#ddd;color:#eee}
  .ref-caption{color:#ddd}
}