/* ==========================================================================
   Single project page (/dubai-projects/{slug}) - dashboard layout (card #2555).
   Loaded after dubai-projects.css by dubai_projects/show.blade.php; everything is under .dp-detail.
   Remove the <link> in show.blade.php to go back to the old single-column look.
   ========================================================================== */
.dp-page.dp-detail { background: #F6F3EC; counter-reset: dpn; }
/* the theme sets overflow-x:hidden on body, which turns it into the scroller and kills position:sticky (tab bar, side panel); clip does not */
body:has(.dp-detail) { overflow-x: clip; overflow-y: visible; }
.dp-detail .dp-wrap { padding-top: 18px; }

/* ---- buttons ---- */
.dp-detail .dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; font-size: 15.5px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: filter .15s, background .15s; }
.dp-detail .dp-btn i { font-size: 17px; }
.dp-detail .dp-btn--gold { background: linear-gradient(180deg, #E4BE62, #D4A843); border-color: #C39A33; color: #142D54; }
.dp-detail .dp-btn--gold:hover { filter: brightness(1.05); color: #142D54; }
.dp-detail .dp-btn--navy { background: #142D54; border-color: #142D54; color: #fff; }
.dp-detail .dp-btn--line { background: #fff; border-color: #D8D2C4; color: #142D54; }
.dp-detail .dp-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.dp-detail .dp-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.dp-detail .dp-btn.is-saved i { color: #D4A843; }

/* ---- breadcrumb ---- */
.dp-crumbs { background: #fff; border-bottom: 1px solid #E9E4DA; }
.dp-crumbs__in { box-sizing: content-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: var(--max, 1350px); margin: 0 auto; padding: 13px var(--hm-gutter, 56px); color: #5A6B86; font-size: 14.5px; }
.dp-crumbs__in a { color: #5A6B86; text-decoration: none; }
.dp-crumbs__in a:hover { color: #142D54; text-decoration: underline; }
.dp-crumbs__in i { font-size: 11px; opacity: .6; }
.dp-crumbs__in b { color: #142D54; font-weight: 700; }
@media (max-width: 991px) { .dp-crumbs__in { padding-inline: 16px; padding-block: 10px; font-size: 13.5px; } }

/* ---- hero: photo with the title on it ---- */
.dp-detail .dp-mosaic-wrap { margin-bottom: 14px; }
.dp-detail .dp-mosaic-stage { position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--sh); }
.dp-detail .dp-mosaic { height: min(42vw, 400px); border-radius: 0; }
.dp-hero__title { position: absolute; inset-block-end: 0; inset-inline-start: 0; box-sizing: border-box; width: 52%; padding: 90px 30px 28px; background: linear-gradient(0deg, rgba(8, 20, 42, .88) 8%, rgba(8, 20, 42, 0)); color: #fff; pointer-events: none; }
.dp-hero__title h1 { margin: 0 0 6px; color: #fff; font-size: 40px; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.dp-hero__title p { margin: 0; color: rgba(255, 255, 255, .92); font-size: 18px; line-height: 1.5; }
.dp-hero__title .dp-hero__loc { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 15.5px; }
.dp-hero__title .dp-hero__loc i { color: #E4BE62; }
.dp-detail .dp-mosaic-none { min-height: 300px; display: flex; }
.dp-detail .dp-mosaic-none .dp-noimg { flex: 1; }
.dp-hero__acts { display: none; }
.dp-detail .dp-mosaic-foot { margin-top: 6px; }
@media (max-width: 767px) {
  .dp-detail .dp-mosaic-stage { border-radius: 14px; }
  .dp-detail .dp-shot, .dp-detail .dp-shot.is-extra { aspect-ratio: 4 / 3; border-radius: 0; }
  .dp-hero__title { width: 100%; padding: 60px 18px 16px; }
  .dp-hero__title h1 { font-size: 27px; }
  .dp-hero__title p { font-size: 15.5px; }
  .dp-hero__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .dp-hero__acts .dp-btn { padding: 11px 10px; }
}

/* ---- the six headline figures ---- */
.dp-detail .dp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; overflow: visible; border: 0; border-radius: 0; background: none; }
.dp-detail .dp-kpi { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 2px; align-content: start; padding: 14px; border: 1px solid #E9E4DA; border-radius: 14px; background: #fff; box-shadow: var(--sh); }
.dp-detail .dp-kpi__ic { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #FBF3DC; color: #8A6A16; font-size: 19px; }
.dp-detail .dp-kpi dt { align-self: end; font-size: 13.5px; }
.dp-detail .dp-kpi dd { align-self: start; gap: 5px; }
.dp-detail .dp-kpi b { font-size: 19px; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .dp-detail .dp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .dp-detail .dp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dp-detail .dp-kpi { grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; padding: 11px; }
  .dp-detail .dp-kpi__ic { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
  .dp-detail .dp-kpi b { font-size: 16.5px; }
}

/* ---- two columns: sections + sticky side panel ---- */
.dp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.dp-main { min-width: 0; }
.dp-aside { position: sticky; top: 86px; display: grid; gap: 16px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1100px) {
  .dp-layout { grid-template-columns: minmax(0, 1fr); }
  .dp-aside { position: static; max-height: none; overflow: visible; margin-top: 16px; }
  .dp-aside .dp-side--toc, .dp-aside .dp-side--glance, .dp-aside .dp-side--links { display: none; }
}

/* the tab bar */
.dp-detail .dp-sections { top: 70px; display: flex; gap: 4px; margin: 0 0 4px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .97); box-shadow: var(--sh); }
.dp-detail .dp-sections a { flex: 1 1 auto; padding: 11px 14px; border-radius: 10px; font-size: 15px; text-align: center; white-space: nowrap; }
.dp-detail .dp-sections a.is-on { background: #142D54; color: #fff; }
@media (max-width: 767px) { .dp-detail .dp-sections { top: 60px; } .dp-detail .dp-sections a { flex: none; } }

/* sections become numbered cards */
.dp-detail .dp-section { margin: 14px 0 0; padding: 24px 26px 18px; border: 1px solid #E9E4DA; border-radius: 18px; background: #fff; box-shadow: var(--sh); scroll-margin-top: 130px; }
.dp-detail .dp-section + .dp-section { margin-top: 14px; border-top: 1px solid #E9E4DA; }
.dp-detail .dp-section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #EFEAE0; font-size: 24px; }
.dp-detail .dp-section.dp-num h2::before { content: counter(dpn, decimal-leading-zero); counter-increment: dpn; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding-inline: 6px; box-sizing: border-box; border: 1px solid #D4A843; border-radius: 10px; background: #FBF3DC; color: #8A6A16; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
[dir="rtl"] .dp-detail .dp-section.dp-num h2::before { content: counter(dpn, persian); }
@media (max-width: 767px) {
  .dp-detail .dp-section { padding: 18px 16px 12px; border-radius: 16px; scroll-margin-top: 110px; }
  .dp-detail .dp-section h2 { font-size: 21px; gap: 10px; }
}

/* ---- side panel ---- */
.dp-side { padding: 20px; border: 1px solid #E9E4DA; border-radius: 16px; background: #fff; box-shadow: var(--sh); }
.dp-side h2, .dp-side h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #142D54; }
.dp-side--cta { border-color: #142D54; background: linear-gradient(160deg, #142D54, #1d3d70); color: #fff; }
.dp-side--cta h2 { margin-bottom: 8px; color: #fff; font-size: 21px; }
.dp-side--cta p { margin: 0 0 14px; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.7; }
.dp-side--cta .dp-btn + .dp-btn { margin-top: 10px; }
.dp-side--toc ol { margin: 0; padding: 0; list-style: none; }
.dp-side--toc a { display: block; padding: 9px 12px; border-inline-start: 3px solid transparent; border-radius: 8px; color: #44556F; font-size: 15px; font-weight: 600; text-decoration: none; }
.dp-side--toc a:hover { background: #F8F6F1; color: #142D54; }
.dp-side--toc a.is-on { border-inline-start-color: #D4A843; background: #FBF3DC; color: #142D54; }
.dp-side--glance dl { margin: 0; }
.dp-side--glance dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #F0ECE3; font-size: 15px; }
.dp-side--glance dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dp-side--glance dt { color: #5A6B86; }
.dp-side--glance dd { margin: 0; font-weight: 700; text-align: end; }
.dp-side--links ul { margin: 0; padding: 0; list-style: none; }
.dp-side--links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F0ECE3; color: #142D54; font-size: 15px; font-weight: 600; text-decoration: none; }
.dp-side--links li:last-child a { border-bottom: 0; }
.dp-side--links a:hover span { text-decoration: underline; }
.dp-side--links i { flex: none; color: #8A6A16; font-size: 14px; }

/* ---- phone: contact bar stuck to the bottom ---- */
.dp-mobilebar { display: none; }
@media (max-width: 991px) {
  .dp-mobilebar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #142D54; box-shadow: 0 -6px 20px rgba(8, 20, 42, .25); }
  .dp-mobilebar .dp-btn { padding: 12px 8px; }
  .dp-mobilebar .dp-btn--navy { border-color: rgba(255, 255, 255, .4); }
  body:has(.dp-mobilebar) { padding-bottom: 68px; }
}