/* ==========================================================================
   Auburn Cleaning Co. — content stylesheet
   Covers admin-managed pictures, the journal (blog) and the before/after
   gallery slider — all populated at runtime by assets/content.js.
   ========================================================================== */

.service-picture{display:block;width:min(1180px,calc(100% - 40px));max-height:440px;object-fit:cover;margin:22px auto 46px}
.hero-brand img[data-custom-picture]{width:100%;max-width:430px;max-height:460px;object-fit:cover}
.about-mark[data-custom-picture]{width:100%;max-width:470px}

/* ---- Journal (blog) ---------------------------------------------------- */
.blog-grid{display:grid;gap:42px}
.blog-card{border-top:1px solid var(--line);padding-top:26px;min-width:0}
.blog-card img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:22px}
.blog-card h2{font-size:1.9rem}
.blog-card a{text-decoration:none}
.blog-card a:hover h2{color:var(--rust)}
.blog-card p{color:var(--muted)}
.blog-cover{width:100%;max-height:480px;object-fit:cover;margin-block:22px}
.blog-body p{white-space:pre-wrap}
#blog-post{min-height:50vh}
#blog-post h1{font-size:clamp(2.5rem,6vw,4.3rem)}

/* ---- Before / after comparison slider ------------------------------------*/
.gallery-pair{margin-block:42px 56px}
.gallery-pair h3{margin-bottom:6px}
.comparison-frame{position:relative;aspect-ratio:4/3;background:var(--pale);overflow:hidden;max-width:850px}
.comparison-frame img{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}
.comparison-frame .after{clip-path:inset(0 0 0 var(--reveal,50%))}
.comparison-labels{display:flex;justify-content:space-between;max-width:850px;margin-bottom:12px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--muted)}
.gallery-pair input[type=range]{width:min(850px,100%);min-height:44px;accent-color:var(--brown);margin-top:4px}
.gallery-pair label{display:block;margin-top:12px;font-size:.88rem;color:var(--muted)}
.gallery-pair p{max-width:760px;color:var(--muted)}

@media(min-width:750px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:699px){
  .hero-brand:has([data-custom-picture]){display:block;padding:10px 0 0}
  .hero-brand:has([data-custom-picture]) .brand-rule,
  .hero-brand:has([data-custom-picture]) .brand-motto,
  .hero-brand:has([data-custom-picture])>p{display:none}
}