/* Letalife — ad detail page styles (.detail-v2).
   Also loads listing.css for the shared .ll-breadcrumb (detail pages show a
   breadcrumb above the card). */

/* ===================== DIRECTION A — AD DETAIL (LETAL-39) =====================
   Richer detail page: media hero (photo gallery or keyed gradient placeholder),
   key-fact pills, feature chips, panelled sidebar. Scoped under .detail-v2. */
.detail-v2 .detail-card {
   background: var(--ll-surface);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   box-shadow: var(--ll-shadow-sm);
   overflow: hidden
}

/* media — no-photo placeholder, keyed to ad type. Uses the same token-based
   gradients as the listing card placeholders (consistent across both views). */
.detail-v2 .media {
   position: relative;
   height: 300px;
   background: linear-gradient(135deg, var(--ll-blue-100), var(--ll-blue-50))
}

.detail-v2 .media.pv-wanted {
   background: linear-gradient(135deg, var(--ll-violet-100), var(--ll-violet-50))
}

.detail-v2 .media.pv-exch {
   background: linear-gradient(135deg, var(--ll-green-100), var(--ll-green-50))
}

.detail-v2 .media .glyph {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   opacity: .4;
   color: var(--ll-blue-500)
}

.detail-v2 .media.pv-wanted .glyph {
   color: var(--ll-violet-800)
}

.detail-v2 .media.pv-exch .glyph {
   color: var(--ll-green-700)
}

.detail-v2 .media-badge {
   position: absolute;
   top: 1rem;
   left: 1rem
}

.detail-v2 .media-price {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 2.4rem 1.25rem .9rem;
   background: linear-gradient(to top, rgba(15, 23, 42, .6), transparent);
   color: var(--ll-white);
   font-size: 1.65rem;
   font-weight: 800;
   letter-spacing: -.01em
}

.detail-v2 .media-price small {
   font-size: .85rem;
   font-weight: 600;
   opacity: .85
}

.detail-v2 .media-price .tag {
   font-size: .64rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .05em;
   background: rgba(255, 255, 255, .25);
   border-radius: var(--ll-r-pill);
   padding: .12rem .5rem;
   vertical-align: middle;
   margin-left: .4rem
}

/* photo gallery (first image large, rest in a strip) */
.detail-v2 .ad-photo-gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: .5rem;
   margin: 0;
   padding: .5rem
}

.detail-v2 .ad-photo-gallery .ad-photo-thumb {
   height: 84px;
   border-radius: .5rem;
   overflow: hidden;
   display: block;
   cursor: pointer
}

.detail-v2 .ad-photo-gallery .ad-photo-thumb:first-child {
   grid-column: 1 / -1;
   height: 300px
}

.detail-v2 .ad-photo-gallery .ad-photo-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

/* body */
.detail-v2 .detail-body {
   padding: 1.4rem 1.6rem 1.7rem
}

.detail-v2 .badges {
   display: flex;
   gap: .5rem;
   flex-wrap: wrap;
   margin-bottom: .7rem
}

.detail-v2 .detail-title {
   font-size: 1.6rem;
   font-weight: 900;
   letter-spacing: -.025em;
   color: var(--ll-slate-900);
   line-height: 1.2;
   margin: 0 0 .8rem
}

.detail-v2 .keyfacts {
   display: flex;
   gap: .5rem;
   flex-wrap: wrap;
   margin-bottom: .4rem
}

.detail-v2 .keyfact {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   font-size: .82rem;
   font-weight: 600;
   color: var(--ll-slate-700);
   background: var(--ll-slate-100);
   border-radius: var(--ll-r-pill);
   padding: .3rem .8rem
}

.detail-v2 .sec-label {
   font-size: .74rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--ll-rose-600);
   margin: 1.5rem 0 .6rem
}

.detail-v2 .desc {
   white-space: pre-line;
   color: var(--ll-slate-700);
   line-height: 1.75;
   font-size: .95rem
}

.detail-v2 .feature-chips {
   display: flex;
   flex-wrap: wrap;
   gap: .45rem
}

.detail-v2 .feature-chip {
   font-size: .8rem;
   font-weight: 600;
   color: var(--ll-blue-900);
   background: var(--ll-blue-50);
   border: 1px solid var(--ll-blue-100);
   border-radius: var(--ll-r-pill);
   padding: .3rem .85rem
}

.detail-v2 .report-link {
   font-size: .82rem;
   margin-top: .6rem
}

.detail-v2 .report-link a {
   color: var(--ll-muted)
}

/* Share buttons: sit at the bottom-right of the description card. Round icon
   buttons match the .ll-lb-nav lightbox pattern (circle, shadow, lift on hover).
   Each platform's own brand colour is the one deliberate exception to the site
   palette below — the colour is part of how the logo is recognised. */
.detail-v2 .share-buttons {
   display: flex;
   justify-content: flex-end;
   gap: .55rem;
   margin-top: 1.2rem
}

.detail-v2 .share-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: var(--ll-shadow-sm);
   transition: transform .15s, box-shadow .15s;
   position: relative
}

.detail-v2 .share-btn svg {
   width: 18px;
   height: 18px
}

.detail-v2 .share-btn:hover {
   transform: translateY(-2px);
   box-shadow: var(--ll-shadow-md)
}

.detail-v2 .share-btn--facebook { background: #1877F2 }
.detail-v2 .share-btn--whatsapp { background: #25D366 }
.detail-v2 .share-btn--bluesky  { background: #1185FE }
.detail-v2 .share-btn--email    { background: var(--ll-slate-700) }
.detail-v2 .share-btn--copy     { background: var(--ll-slate-700) }

/* Copy-link feedback: small "Copied!" bubble above the button, shown via class
   toggle rather than replacing the icon (there's no text slot to swap). */
.detail-v2 .share-btn--copy::after {
   content: "Copied!";
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%) translateY(4px);
   background: var(--ll-slate-900);
   color: var(--ll-white);
   font-size: .72rem;
   font-weight: 600;
   padding: .25rem .55rem;
   border-radius: var(--ll-r-sm);
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity .15s, transform .15s
}

.detail-v2 .share-btn--copy.is-copied::after {
   opacity: 1;
   transform: translateX(-50%) translateY(0)
}

/* sidebar panels */
.detail-v2 .side-panel {
   background: var(--ll-surface);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   box-shadow: var(--ll-shadow-sm);
   overflow: hidden;
   margin-bottom: 1.2rem
}

.detail-v2 .side-head {
   font-size: .74rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--ll-rose-600);
   padding: .85rem 1.15rem;
   border-bottom: 1px solid var(--ll-slate-100)
}

.detail-v2 .side-body {
   padding: .3rem 1.15rem
}

.detail-v2 .meta-row {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   padding: .6rem 0;
   border-bottom: 1px solid var(--ll-slate-100);
   font-size: .875rem
}

.detail-v2 .meta-row:last-child {
   border-bottom: none
}

.detail-v2 .meta-row .k {
   color: var(--ll-muted)
}

.detail-v2 .meta-row .v {
   color: var(--ll-slate-800);
   font-weight: 600;
   text-align: right
}

.detail-v2 .contact-body {
   padding: 1.15rem
}

@media(max-width:991px) {

   .detail-v2 .media,
   .detail-v2 .ad-photo-gallery .ad-photo-thumb:first-child {
      height: 240px
   }
}