/* Keep the spacing around the price/meta row balanced with the card padding. */
.ad-summary-row {
    padding-bottom: 1rem;
}

/* Advertisement detail page photo grid.
   Keep every preview 4:3 while preserving the original for the lightbox. */
.ad-view-photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.ad-view-photo-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Keep layout stable on older engines that do not support aspect-ratio. */
@supports not (aspect-ratio: 4 / 3) {
    .ad-view-photo-thumb {
        position: relative;
        height: 0;
        padding-top: 75%;
    }
    .ad-view-photo-thumb img {
        position: absolute;
        inset: 0;
    }
}

/* Company details in the advertisement contacts card. */
.ad-contacts-card .card-body {
    padding: 1rem;
}

.ad-contact-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ad-contact-company-logo {
    width: 144px;
    max-width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.ad-contact-company-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ad-contact-row {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    line-height: 1.35;
}

.ad-contact-icon {
    flex: 0 0 1rem;
    width: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
    margin-top: .125rem;
}

.ad-contact-text {
    min-width: 0;
}

.ad-contact-label {
    font-weight: 600;
    margin-right: .25rem;
}

.ad-contact-profile-link {
    color: inherit;
    text-decoration: none;
}

.ad-contact-profile-link:hover,
.ad-contact-profile-link:focus-visible {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.ad-contact-website a {
    overflow-wrap: anywhere;
    font-weight: 500;
}

.ad-contact-phone-row {
    align-items: flex-start;
}

.ad-contact-phone-main {
    min-width: 0;
    flex: 1 1 auto;
}

.ad-contact-phone-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
}

.ad-contact-phone-value {
    font-size: 1rem;
    line-height: 1.25;
}

.ad-contact-help {
    margin-top: .25rem;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .ad-contact-company-logo {
        width: 128px;
        height: 56px;
    }

    .ad-contact-phone-actions {
        align-items: stretch;
    }

    .ad-contact-phone-actions .btn {
        width: 100%;
    }
}

/* Commercial transport: concise key specifications under the price/meta row. */
.ad-key-specs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: -.25rem 0 1rem;
}

.ad-key-spec {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .35rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #495057);
    font-size: .82rem;
    line-height: 1.25;
}

/* Full commercial-vehicle parameters are grouped semantically instead of being
   rendered as one long, arbitrary list. */
.ad-spec-group {
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
}

.ad-spec-group-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.25;
}

.ad-spec-group-title i {
    width: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

.ad-spec-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.ad-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    gap: .75rem;
    align-items: baseline;
    padding: .55rem .8rem;
    border-top: 1px solid rgba(0, 0, 0, .055);
}

.ad-spec-row:first-child {
    border-top: 0;
}

.ad-spec-label {
    min-width: 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .82rem;
}

.ad-spec-value {
    min-width: 0;
    color: var(--bs-body-color, #212529);
    font-size: .88rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .ad-key-spec {
        font-size: .78rem;
        padding: .3rem .5rem;
    }

    .ad-spec-row {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .ad-spec-value {
        text-align: left;
    }
}

/* The modal uses format-specific <source> elements; constrain the wrapper as
 * well as the image so portrait photos never stretch the lightbox. */
.ad-photo-modal-picture{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:75vh}
.ad-photo-modal-picture>img{object-fit:contain;max-width:100%;max-height:75vh}

/* Photos and videos share the ad detail thumbnail grid and modal. */
.ad-view-video-thumb{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;padding:0;cursor:pointer;color:#fff;background:linear-gradient(145deg,#27364a,#111827);border:1px solid #334155;text-align:center;}
.ad-view-video-thumb:hover,.ad-view-video-thumb:focus-visible{background:linear-gradient(145deg,#334b6e,#172136);border-color:#0d6efd;color:#fff;}
.ad-view-video-thumb:focus-visible{outline:3px solid #86b7fe;outline-offset:2px;}
.ad-video-play{width:3.2rem;height:3.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);font-size:1.2rem;}
.ad-video-play i{margin-left:.2rem;}
.ad-video-thumb-label{font-size:.85rem;font-weight:500;}
.ad-video-thumb-duration{position:absolute;bottom:.45rem;right:.55rem;background:rgba(0,0,0,.65);border-radius:.25rem;padding:.05rem .35rem;font-size:.75rem;font-variant-numeric:tabular-nums;}
.ad-photo-modal-video{width:100%;max-width:calc(100% - 5rem);max-height:75vh;height:auto;cursor:auto;touch-action:auto;background:#000;}
@media (max-width:575.98px){.ad-photo-modal-video{max-width:calc(100% - 2.5rem)}}