/* Public home and sale presentation only; no admin or rental selectors. */

/* Sale posters: show the complete composition rather than cutting a 4:3 crop. */
.sale-listing-card{border:1px solid #e8ebef;box-shadow:0 8px 28px #1b24300a;border-radius:20px}
.sale-listing-card .vehicle-img{height:auto!important;aspect-ratio:16/9;background:#f5f6f8}
.sale-listing-card .sale-card-photo{height:100%;background:#f5f6f8}
.sale-listing-card .sale-card-photo img{width:100%;height:100%;object-fit:contain!important;object-position:center;transform:none!important}
.sale-listing-card .vehicle-body{padding:20px;gap:0}
.sale-listing-card .sale-card-heading{align-items:center;gap:12px;margin-bottom:10px}
.sale-listing-card .sale-card-heading h3{font-size:clamp(20px,1.8vw,26px);line-height:1.18}
.sale-listing-card .sale-card-mileage{padding:7px 9px;border-radius:8px;font-size:11px}
.sale-listing-card .sale-card-seller{margin-bottom:14px;font-size:12px}
.sale-listing-card .sale-card-specs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:16px}
.sale-listing-card .sale-card-specs li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 4px;min-height:49px;font-size:11px;text-align:center}
.sale-listing-card .sale-card-price{font-size:clamp(25px,2.2vw,30px);line-height:1.12}
.sale-listing-card .sale-card-pricing{gap:5px;margin-bottom:17px}
.sale-listing-card .vehicle-img .status-badge{top:12px;left:12px;padding:8px 11px;font-size:10px;line-height:1.3;gap:6px}
.sale-listing-card .vehicle-img .status-badge .ui-icon{width:14px;height:14px}
.sale-gallery .sales-gallery-stage{aspect-ratio:16/9;background:#f4f5f7;border-radius:20px}
.sale-gallery .sales-gallery-open>img{object-fit:contain!important;object-position:center;transform:none!important}

/* Desktop: more image height and restrained typography, without blur/bands. */
.hero .hero-shell{height:clamp(430px,45vw,720px)!important}
.hero .hero-slide .hero-media{object-fit:cover!important;object-position:center center!important;filter:none!important;transform:none!important}
.hero .hero-slide .hero-backdrop{display:none!important}
.hero .hero-slide{visibility:hidden}
.hero .hero-slide.active{visibility:visible}
.hero .hero-slide .hero-content{
    left:0!important;right:auto!important;bottom:0!important;transform:none!important;
    width:min(710px,calc(100% - 150px))!important;max-width:710px!important;
    padding:0 0 74px clamp(66px,6vw,112px)!important;
}
.hero .hero-slide .hero-content h1,.hero .hero-slide .hero-content h2{
    max-width:630px!important;font-size:clamp(34px,3.5vw,50px)!important;
    line-height:1.08!important;letter-spacing:-.035em!important;margin:0 0 16px!important;
    overflow-wrap:anywhere;
}
.hero .hero-slide .hero-content p{font-size:15px!important;line-height:1.65!important;max-width:570px!important;margin:0 0 22px!important}
.hero .hero-content .btn{min-height:46px;padding:13px 20px;font-size:14px!important;border-radius:12px}
.hero .hero-arrow{width:44px!important;height:44px!important;font-size:25px;transition:background .2s}
.hero .hero-arrow.prev{left:16px!important}.hero .hero-arrow.next{right:16px!important}
.hero .hero-dots{bottom:22px;gap:8px}
.hero .hero-dots button{width:9px;height:9px}
.hero .hero-scroll{right:20px!important;bottom:18px!important}

@media(min-width:721px) and (max-width:980px){
    .hero .hero-slide .hero-content{width:min(650px,calc(100% - 90px))!important;padding-left:66px!important;padding-bottom:62px!important}
    .hero .hero-slide .hero-content h1,.hero .hero-slide .hero-content h2{font-size:34px!important}
    .hero .hero-slide .hero-content p{font-size:14px!important}
}

/* Mobile: intact image above a readable white copy panel, no overlaid title.
   Inactive slides share a grid cell, reserving the tallest copy's space so
   autoplay never moves the content beneath the slider. No new JS required. */
@media(max-width:720px){
    .hero .hero-shell{height:auto!important;overflow:hidden;background:#fff}
    .hero .hero-slider{height:auto;display:grid;background:#fff}
    .hero .hero-slide{position:relative!important;inset:auto;grid-area:1/1;display:grid;grid-template-rows:auto 1fr;min-width:0;background:#fff}
    .hero .hero-slide .hero-media{position:relative!important;inset:auto;width:100%;height:auto!important;aspect-ratio:auto;object-fit:contain!important;background:#fff}
    .hero .hero-slide .hero-overlay{display:none!important}
    .hero .hero-slide .hero-content{
        position:relative!important;inset:auto!important;align-self:stretch!important;
        width:100%!important;max-width:none!important;padding:23px 22px 65px!important;
        background:#fff;color:#15181e;text-align:left!important;
    }
    .hero .hero-slide .hero-content h1,.hero .hero-slide .hero-content h2{font-size:clamp(25px,6.5vw,33px)!important;line-height:1.12!important;color:#15181e!important;max-width:none!important;margin:0 0 12px!important}
    .hero .hero-slide .hero-content p{font-size:13px!important;line-height:1.6!important;max-width:none!important;color:#69707b!important;margin:0 0 18px!important}
    .hero .hero-slide .hero-content .btn{font-size:13px!important;min-height:44px;padding:12px 18px;border-radius:11px}
    .hero .hero-arrow{top:calc(100vw * .24);width:36px!important;height:36px!important;background:#161b25a8;border-color:#ffffff80;font-size:23px}
    .hero .hero-arrow.prev{left:10px!important}.hero .hero-arrow.next{right:10px!important}
    .hero .hero-dots{bottom:24px}
    .hero .hero-dots button{background:#d9dde3}
    .hero .hero-dots button.active{background:#ff6800}
    .hero .hero-scroll{color:#555f6f!important;background:#f5f6f8;border:1px solid #e7eaf0;right:15px!important;bottom:10px!important}
}
@media(max-width:600px){
    .sale-listing-card .vehicle-body{padding:16px}
    .sale-listing-card .sale-card-heading{flex-wrap:wrap;gap:8px}
    .sale-listing-card .sale-card-heading h3{font-size:22px;flex:1 1 160px}
    .sale-listing-card .sale-card-mileage{font-size:10px;padding:6px 8px}
    .sale-listing-card .sale-card-seller{font-size:12px;margin-bottom:13px}
    .sale-listing-card .sale-card-specs{gap:5px}
    .sale-listing-card .sale-card-specs li{font-size:clamp(10px,2.6vw,11px);padding:8px 3px}
    .sale-listing-card .sale-card-specs .ui-icon{width:15px;height:15px}
    .sale-listing-card .card-actions .btn{font-size:12px;min-height:44px;padding:10px 7px}
    .sale-gallery .sales-gallery-stage{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){.hero .hero-slide,.hero .hero-arrow{transition:none!important}}