/* =====================================================================
   Small additions that make the supplied designs work with dynamic data
   (empty states, image tags instead of CSS backgrounds, listing pages).
   None of these change the supplied layouts.
   ===================================================================== */
/* home: <img> versions of former background-image elements */
.fresh-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fresh-content h3.fresh-name { font-size:3.2rem; font-weight:900; text-transform:uppercase; line-height:1; margin-bottom:20px; }
.fresh-content .fresh-price { margin-bottom:22px; opacity:.95; }
.fresh-content .fresh-price strong { color:#bda588; font-size:1.3rem; }
.fresh-actions { display:flex; flex-wrap:wrap; gap:14px; }
.btn-fresh { cursor:pointer; text-decoration:none; display:inline-block; background:transparent; }
.btn-fresh-solid { background:#bda588; color:#000 !important; }
.fresh-content .btn-fresh:hover { color:#fff; }
/* blog/news cards: a 16:9 frame (the shape of almost every article image), so pictures keep their proportions */
.blog-img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.blog-content h3 { font-weight:700; margin-bottom:8px; font-size:1.2rem; }
.icon-item .icon-label { font-size:13px; font-weight:600; letter-spacing:1px; margin:0; line-height:1.4; min-height:38px; }
.icon-item img { width:55px; height:55px; object-fit:contain; }
@media(max-width:576px){ .icon-item .icon-label { font-size:12px; } }
.card-visual { min-height:260px; }
@media (max-width:576px){ .card-visual { aspect-ratio: 450 / 350; min-height:0; } }
/* project cards (home, category listings, All Projects): consistent 900x500 desktop / 450x350 mobile image size */
.landscape-card[hidden] { display:none !important; }
.landscape-card h3 a { color:inherit; text-decoration:none; }
.view-more-btn { font-family:inherit; }
.cta-banner h2 { font-size:2.4rem; font-weight:800; text-transform:uppercase; }
@media(max-width:576px){ .cta-banner h2 { font-size:1.7rem; } }
/* .fresh-content h3.fresh-name mobile size is now handled by the single ≤900px rule in home.css (keeps the Fresh Launch card compact and consistent across all mobile widths) */
.hero-video { background:#0b0f13; }
.hero-title { margin:0; }
.accordion-luxury .accordion-header { margin:0; font-size:inherit; }
.luxury-faq-alt { background:#fff; padding:5rem 1rem; }
.luxury-faq-alt .accordion-luxury .accordion-item { background:#f7f5f2; }
.luxury-faq-alt .accordion-luxury .accordion-button, .luxury-faq-alt .accordion-luxury .accordion-body { background:#f7f5f2; }

/* empty states */
.empty-note { text-align:center; color:#8b8b8b; font-size:.95rem; padding:1.2rem 1rem 2rem; margin:0; }

/* homepage category sections (Latest Launch / Ongoing / Completed) */
.cat-section { padding:3rem 5% 2.5rem; background:#fff; }
.cat-section:nth-of-type(even) { background:#fafafa; }
.cat-inner { max-width:1300px; margin:0 auto; }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.mini-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06); display:flex; flex-direction:column; transition:.2s; border:1px solid #f0f0f0; }
.mini-card:hover { box-shadow:0 16px 32px rgba(0,0,0,.12); }
.mini-img { position:relative; display:block; aspect-ratio: 900 / 500; background:#1a1a1a; }
@media (max-width:576px){ .mini-img { aspect-ratio: 450 / 350; } }
.mini-img img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-img .card-location { position:absolute; top:14px; left:0; background:#0a0a0a; color:#fff; padding:3.5px 8px; font-size:.45rem; letter-spacing:1px; border-radius:4px; border:2px solid rgba(255,255,255,.85); font-weight:600; max-width:calc(100% - 14px); box-sizing:border-box; }
.mini-img .card-offer { position:absolute; top:38px; left:0; background:#e31b23; color:#fff; padding:3.5px 8px; font-size:.45rem; letter-spacing:1px; border-radius:4px; border:2px solid rgba(255,255,255,.85); font-weight:700; max-width:calc(100% - 14px); box-sizing:border-box; line-height:1.35; }
.mini-body { padding:20px 22px 20px; display:flex; flex-direction:column; flex:1; }
.mini-body h3 { font-size:1.3rem; font-weight:800; margin:0 0 8px; }
.mini-body h3 a { color:#1e1e2a; text-decoration:none; }
.mini-body p { color:#4a4a5a; font-size:.92rem; line-height:1.5; margin-bottom:16px; flex:1; }
.mini-foot { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(189,165,136,.3); padding-top:12px; }
.mini-foot .card-price { font-size:1.1rem; font-weight:800; }
@media(max-width:991px){ .mini-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .mini-grid { grid-template-columns:1fr; } .cat-section { padding:2.5rem 5% 2rem; } }

/* generic inner pages (listings, blog, contact, legal, media) */
.page-hero { background:#0b0f13; color:#fff; padding:4.5rem 5% 3.5rem; text-align:center; }
.page-hero .section-tag { color:#bda588; margin-bottom:.6rem; }
.page-hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:900; text-transform:uppercase; line-height:1.05; margin:0 0 1rem; }
.page-hero p { max-width:720px; margin:0 auto; opacity:.85; }
.page-hero .dn-breadcrumb { color:#aaa; text-align:left; max-width:1300px; margin:0 auto 1.5rem; }
.page-hero .dn-breadcrumb a { color:#bda588; } .page-hero .dn-breadcrumb li + li::before { color:#666; }
.page-body { max-width:1300px; margin:0 auto; padding:3rem 20px 4rem; }
.page-body .landscape-grid { gap:40px; }
.chip-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:2rem; }
.chip { border:1px solid #bda588; color:#8a6d45; padding:8px 20px; border-radius:40px; text-decoration:none; font-weight:600; font-size:.85rem; }
.chip.active, .chip:hover { background:#bda588; color:#fff; }
.article { max-width:820px; margin:0 auto; padding:3rem 20px 4rem; line-height:1.85; color:#333; }
.article h2 { font-size:1.6rem; font-weight:700; margin:2rem 0 .8rem; } .article h3 { font-size:1.25rem; font-weight:700; margin:1.6rem 0 .6rem; }
.article img { max-width:100%; height:auto; border-radius:10px; }
.article-meta { color:#bda588; letter-spacing:1px; font-size:.85rem; margin-bottom:1rem; }
.pager { display:flex; gap:8px; justify-content:center; margin-top:2.5rem; flex-wrap:wrap; }
.pager a, .pager span { padding:8px 14px; border:1px solid #bda588; border-radius:8px; color:#8a6d45; text-decoration:none; font-weight:600; }
.pager .cur { background:#bda588; color:#fff; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
@media(max-width:800px){ .contact-grid { grid-template-columns:1fr; } }
.contact-card { background:#fff; border-radius:16px; padding:2rem; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; }
.video-card video { width:100%; border-radius:12px; background:#000; display:block; }
.video-card h2 { font-size:1.15rem; font-weight:700; margin:.8rem 0 .2rem; }

/* homepage hero: project name on top, "by Danube" below (reduced size vs old single-line brand) */
.hero-title--project { display:flex; flex-direction:column; gap:6px; line-height:1.05; }
.hero-project-name { font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:800; text-transform:uppercase; letter-spacing:1px; }
.hero-title--project .hero-project-name, .hero-title--project .hero-by-danube { color:#fff; }
.hero-by-danube { font-size:clamp(1.1rem, 2.2vw, 1.6rem); font-weight:800; text-transform:uppercase; letter-spacing:4px; }

/* ---------- blog detail: featured-article layout ---------- */
.blog-hero { background:#0b0f13; padding:2rem 5% 0; }
.blog-hero-inner { max-width:1300px; margin:0 auto; }
.blog-hero-inner .dn-breadcrumb { color:#aaa; }
.blog-hero-inner .dn-breadcrumb a { color:#bda588; }
/* article image shown whole (never cropped), centred, at a size that suits the 600–1900px source images */
.blog-hero-img { width:100%; max-width:960px; height:auto; object-fit:contain; border-radius:14px; display:block; margin:1rem auto 0; }
.blog-feature { max-width:1300px; margin:0 auto; padding:2.5rem 20px 3rem; }
.blog-feature-grid { display:grid; grid-template-columns:2fr 1fr; gap:44px; align-items:start; }
.blog-feature-main .article-body { line-height:1.85; color:#333; }
.blog-feature-main .article-body h2 { font-size:1.5rem; font-weight:700; margin:1.8rem 0 .7rem; }
.blog-feature-main .article-body h3 { font-size:1.2rem; font-weight:700; margin:1.4rem 0 .5rem; }
.blog-feature-main .article-body img { max-width:100%; height:auto; border-radius:10px; }
.blog-feature-main .article-body ul, .blog-feature-main .article-body ol { padding-left:1.4rem; margin:0 0 1rem; }
.blog-feature-main .article-body li { margin-bottom:.35rem; }
.blog-feature-main .article-body p { margin-bottom:1rem; }
.blog-feature-main .article-body .table-wrap, .blog-feature-main .article-body table { display:block; overflow-x:auto; }
.blog-feature-main .article-body table { border-collapse:collapse; width:100%; margin:1rem 0 1.4rem; font-size:.95rem; }
.blog-feature-main .article-body th, .blog-feature-main .article-body td { border:1px solid #e5e5e5; padding:.55rem .75rem; text-align:left; vertical-align:top; }
.blog-feature-main .article-body th { background:#f7f4ef; font-weight:700; }
.blog-feature-main .article-body a { color:#9a7b52; text-decoration:underline; }
.blog-feature-main .article-body h4 { font-size:1.05rem; font-weight:700; margin:1.2rem 0 .4rem; }
.blog-feature-main .article-body blockquote { margin:1.4rem 0; padding:.9rem 1.2rem; border-left:3px solid #9a7b52; background:#f7f4ef; border-radius:0 8px 8px 0; font-style:italic; color:#444; }
.blog-feature-main .article-body blockquote p { margin:0; }
.blog-feature-form .lc-card { background:#fff; border:1px solid #eee; box-shadow:0 8px 24px rgba(0,0,0,.06); color:#1e1e2a; padding:24px; border-radius:14px; }
@media(max-width:900px){ .blog-feature-grid { grid-template-columns:1fr; } .blog-feature-form .lc-card { position:static !important; } }
.blog-listing { display:flex; flex-direction:column; gap:18px; max-width:1300px; margin:0 auto; }
.blog-list-row { display:grid; grid-template-columns:220px 1fr; gap:22px; background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.blog-list-img { width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; display:block; align-self:center; }
.blog-list-body { padding:16px 18px 16px 0; }
.blog-list-body h3 { font-size:1.15rem; font-weight:700; margin:.3rem 0 .5rem; color:#1e1e2a; }
.blog-list-body p { color:#555; font-size:.9rem; margin-bottom:.6rem; }
@media(max-width:640px){ .blog-list-row { grid-template-columns:1fr; } .blog-list-body { padding:0 16px 16px; } }

/* Full AED price + USD/INR approximate equivalents (smaller, lighter, secondary line) */
.price-block { display:flex; flex-direction:column; gap:2px; }
.card-footer .card-price, .mini-foot .card-price { line-height:1.2; }
.price-fx { font-size:.72rem; font-weight:400; color:#8a8a95; letter-spacing:.2px; }
.fresh-content .fresh-price { margin-bottom:18px; }
.fresh-fx { display:block; font-size:.78rem; opacity:.7; margin-top:2px; }
/* Media → Projects Video: every preview uses the same 627x532 frame (uploaded Display picture + centred play button) */
.video-grid { grid-template-columns:repeat(2, minmax(0, 627px)); justify-content:center; }
@media (max-width:767px) { .video-grid { grid-template-columns:minmax(0, 627px); } }
.video-card { width:100%; max-width:627px; }
.vg-frame { position:relative; display:block; width:100%; aspect-ratio:627 / 532; border-radius:12px; overflow:hidden; background:#0b0f13; cursor:pointer; }
.vg-frame img, .vg-frame .vg-first-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.vg-frame:hover img { transform:scale(1.02); }
.vg-frame:focus-visible { outline:3px solid #bda588; outline-offset:3px; }
.vg-play { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:#fff; color:#8a8a8a;
  display:grid; place-items:center; box-shadow:0 0 0 5px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.35); transition:transform .25s ease, color .25s ease; z-index:2; }
.vg-play svg { margin-left:3px; }
.vg-frame:hover .vg-play { transform:scale(1.08); color:#bda588; }
.vg-frame.is-playing { cursor:default; }
.vg-frame .vg-player, .vg-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; object-fit:contain; }
@media (max-width:640px) { .vg-play { width:46px; height:46px; margin:-23px 0 0 -23px; } }

/* ---- SEO hub pages: Danube Properties developer guide + off-plan buyer's guide ---- */
.hub-stats { list-style:none; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:0; margin:0 0 2.5rem; }
.hub-stats li { min-width:130px; border:1px solid #e6dccd; border-radius:14px; text-align:center; background:#fff; }
.hub-stats strong, .hub-stats span, .hub-stats a { display:block; }
.hub-stats li > strong, .hub-stats a { padding:14px 18px 0; }
.hub-stats li > span { padding:0 18px 14px; }
.hub-stats a { text-decoration:none; color:inherit; padding-bottom:14px; }
.hub-stats strong { font-size:1.8rem; font-weight:800; color:#0b0f13; line-height:1.1; }
.hub-stats span { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#8a6d45; }
.hub-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; align-items:start; }
.hub-toc { position:sticky; top:calc(var(--header-h) + 20px); border-left:2px solid #bda588; padding:4px 0 4px 16px; font-size:.9rem; }
.hub-toc__title { font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:#8a6d45; margin:0 0 .6rem; }
.hub-toc ol { list-style:none; margin:0; padding:0; }
.hub-toc li { margin:0 0 .5rem; line-height:1.35; }
.hub-toc a { color:#333; text-decoration:none; } .hub-toc a:hover { color:#8a6d45; }
.hub-article { max-width:none; padding:0; }
.hub-article p { margin:0 0 1rem; }
.hub-article h2 { scroll-margin-top:calc(var(--header-h) + 20px); }
.hub-article ul, .hub-article ol { padding-left:1.4rem; margin:0 0 1rem; } .hub-article li { margin-bottom:.4rem; }
.hub-article table, .hub-table { width:100%; border-collapse:collapse; font-size:.92rem; line-height:1.5; }
.hub-article th, .hub-article td, .hub-table th, .hub-table td { border-bottom:1px solid #eee3d3; padding:10px 12px; text-align:left; vertical-align:top; }
.hub-article thead th, .hub-table thead th { background:#f7f2ea; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#6b5434; }
.hub-table tbody th { font-weight:600; } .hub-table tbody th a { color:#0b0f13; }
.hub-table-wrap { overflow-x:auto; border:1px solid #eee3d3; border-radius:12px; }
.hub-h2 { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; margin:3rem 0 .6rem; scroll-margin-top:calc(var(--header-h) + 20px); }
.hub-note { color:#666; font-size:.9rem; margin:.4rem 0 1.2rem; }
@media (max-width: 900px) {
  .hub-layout { grid-template-columns:1fr; gap:24px; }
  .hub-toc { position:static; }
}

/* "Projects in this article" box under blog / news posts (internal links to the project pages mentioned) */
.post-projects { margin-top:2.5rem; border:1px solid #e6dccd; border-radius:14px; padding:20px 22px; background:#fbf8f3; }
.post-projects h2 { font-size:1.15rem; font-weight:800; margin:0 0 .9rem; }
.post-projects ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.post-projects a { display:flex; gap:14px; align-items:center; text-decoration:none; color:#1e1e2a; }
.post-projects img { width:96px; height:72px; object-fit:cover; border-radius:8px; flex:none; }
.post-projects strong { display:block; font-size:1rem; } .post-projects small { color:#6b5434; font-size:.85rem; }
.post-projects a:hover strong { color:#8a6d45; }