/* Sewa Rent — media (E4.8). Prefix .sewa-media-*, tokens from tokens.css. Mobile-first.
   Placeholder band on the single listing (after the Listeo titlebar) + owner-only notices.
   Card placeholders need no CSS: the SVG is the <img> Listeo prints (object-fit: cover from Listeo). */

/* Placeholder band */
.sewa-media-ph{position:relative;overflow:hidden;border-radius:var(--sewa-radius);background:var(--sewa-navy)}
.sewa-media-ph img{display:block;width:100%;height:100%;object-fit:cover}
.sewa-media-ph--hero{aspect-ratio:16/10;max-height:240px;margin:0 0 var(--sewa-space-4)}
.sewa-media-ph-caption{position:absolute;left:var(--sewa-space-3);bottom:var(--sewa-space-3);padding:4px 12px;border-radius:var(--sewa-radius-pill);background:rgba(0,0,0,.35);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.6;backdrop-filter:blur(2px)}
@media (min-width:768px){.sewa-media-ph--hero{max-height:360px;margin-bottom:var(--sewa-space-6)}.sewa-media-ph-caption{left:var(--sewa-space-4);bottom:var(--sewa-space-4);font-size:var(--sewa-font-size-sm)}}
@media (min-width:1200px){.sewa-media-ph--hero{max-height:420px}}
/* W5 QA 2026-10-10 (desktop CLS 0.17): from 992px the band belongs in the content column (inline mover in media.php,
   listing.js on resize); in its original place above the row it never takes space, so the row is painted at its final
   position even when the browser paints before the mover runs. */
@media (min-width:992px){
.sewa-media-ph--hero[data-sewa-media-scope="single"],.sewa-media-ph--hero[data-sewa-media-scope="single"] ~ .sewa-media-notice{display:none}
.listeo-single-listing-content > .sewa-media-ph--hero[data-sewa-media-scope="single"]{display:block}
.listeo-single-listing-content > .sewa-media-ph--hero[data-sewa-media-scope="single"] ~ .sewa-media-notice{display:flex}
}

/* Owner notices (only the owner / editors see them) */
.sewa-media-notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sewa-space-3);margin:0 0 var(--sewa-space-6);padding:var(--sewa-space-3) var(--sewa-space-4);border:1px solid var(--sewa-line);border-left:4px solid var(--sewa-accent);border-radius:var(--sewa-radius);background:var(--sewa-bg-soft);color:var(--sewa-text);font-size:var(--sewa-font-size-sm);line-height:1.45}
.sewa-media-notice--quality{border-left-color:var(--sewa-warn)}
.sewa-media-notice > i{flex:0 0 auto;font-size:18px;color:var(--sewa-accent)}
.sewa-media-notice--quality > i{color:var(--sewa-warn)}
.sewa-media-notice p{flex:1 1 200px;margin:0;font-weight:600;color:var(--sewa-navy)}
.sewa-media-notice-sub{display:block;margin-top:2px;font-weight:400;color:var(--sewa-muted)}
.sewa-media-notice-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--sewa-space-4);border-radius:var(--sewa-radius-pill);background:var(--sewa-accent);color:#fff;font-size:var(--sewa-font-size-sm);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
.sewa-media-notice-btn:hover,.sewa-media-notice-btn:focus-visible{background:var(--sewa-accent-dark);color:#fff;text-decoration:none}
@media (max-width:479px){.sewa-media-notice-btn{flex:1 1 100%}}

/* Hidden test marker printed inside card titles (see sewa_rent_media_card_marker) */
.sewa-media-ph-flag{display:none}

/* Listeo grid header: the empty gallery row keeps a 40px bottom padding on the titlebar; the band already carries its own margin */
.listeo-grid-gallery-title .sewa-media-ph--hero{margin-top:var(--sewa-space-2)}