/* Photos (stock/sample imagery — replace with Savisa Cuts' own job photos before launch).
   Uses palette variables only, so ?palette=N previews keep working. */
.photo{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;min-height:220px;background:var(--tint)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo.tall{min-height:440px}.photo.wide{min-height:300px}
.svc-card .photo{border-radius:0;min-height:180px}
.gallery .photo{min-height:0}
.stock-tag{position:absolute;left:10px;bottom:10px;z-index:1;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:5px;max-width:calc(100% - 20px)}
.gallery-note{display:inline-block;margin-top:6px;font-size:.85rem;font-weight:700;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:4px 12px}
/* hero photo backgrounds with a palette-tinted overlay to keep text readable */
.has-photo .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.has-photo .hero-bg{z-index:1;background:linear-gradient(95deg,color-mix(in srgb,var(--primary-deep) 94%,transparent) 0%,color-mix(in srgb,var(--primary-deep) 82%,transparent) 50%,color-mix(in srgb,var(--primary-deep) 55%,transparent) 100%)}
.has-photo .wrap{z-index:2}
.has-photo .hero-photo-tag{left:auto;right:12px;bottom:12px;z-index:2}
.hero-card .photo{border-radius:calc(var(--radius) - 4px)}
@media (max-width:900px){
  .photo.tall{min-height:300px}
  .has-photo .hero-bg{background:linear-gradient(180deg,color-mix(in srgb,var(--primary-deep) 88%,transparent) 0%,color-mix(in srgb,var(--primary-deep) 80%,transparent) 100%)}
}