/* ============================================================
   NAMO BUILDERS — extras
   tokens / layout / home / page.css are the Next.js stylesheets,
   unchanged. This file only covers pieces those never styled
   (venture cards, plot tables, project specs, thank-you page…)
   and WordPress output (editor content, admin bar), using the
   same tokens so it reads as one system.
   ============================================================ */

[hidden] { display: none !important; }

/* ---- WordPress admin bar shouldn't hide the sticky nav ---- */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* ---- Editor content inside .prose ---- */
.prose .alignleft { float: left; margin: 0 var(--s6) var(--s4) 0; }
.prose .alignright { float: right; margin: 0 0 var(--s4) var(--s6); }
.prose .aligncenter { margin-inline: auto; }
.prose .wp-block-image figcaption,
.prose .wp-caption-text { font-family: var(--data); font-size: var(--t-data); color: var(--navy); opacity: .7; margin-top: var(--s2); }
.prose iframe { max-width: 100%; }
.prose code { font-family: var(--data); font-size: .9em; background: var(--slab); padding: 1px 5px; }

/* ---- Video grid (the old markup used bootstrap .row/.col) ---- */
.video-grid-section .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
@media (max-width: 991px) { .video-grid-section .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .video-grid-section .row { grid-template-columns: 1fr; } }
.video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ---- Project spec sheet ---- */
.project-specs, .project-highlights, .project-map, .service-includes { margin-top: var(--s12); }
.project-specs h3, .project-highlights h3, .project-map h3, .service-includes h3 { font-size: var(--t-h3); margin-bottom: var(--s5); }
.project-specs .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (max-width: 700px) { .project-specs .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-item { padding: var(--s4) var(--s5); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); height: 100%; }
.spec-label { display: block; font-family: var(--data); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); opacity: .6; margin-bottom: var(--s1); }
.spec-value { font-family: var(--display); font-size: 1.0625rem; color: var(--ink); text-transform: capitalize; }

.project-highlights ul, .includes-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.project-highlights li, .includes-list li { padding: var(--s3) 0 var(--s3) var(--s6); border-bottom: 1px solid var(--rule); position: relative; }
.project-highlights li::before, .includes-list li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 10px; height: 2px; background: var(--saffron); }
.project-map iframe { display: block; border: 1px solid var(--rule) !important; }

.service-price { margin-top: var(--s8); display: inline-flex; align-items: baseline; gap: var(--s3); border: 1px solid var(--rule); padding: var(--s4) var(--s6); }
.service-price span { font-family: var(--data); font-size: var(--t-data); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); opacity: .7; }
.service-price b { font-family: var(--display); font-size: var(--t-h3); color: var(--saffron); }

/* ---- Real-estate hub: ventures + plot inventory ---- */
.ventures-section { margin-top: var(--s16); }
.ventures-head { margin-bottom: var(--s8); }
.ventures-head h2 { font-size: var(--t-h2); margin-bottom: var(--s3); }
.ventures-head b { color: var(--saffron); }
.ventures-grid { display: grid; gap: var(--s8); }
.venture-card { border: 1px solid var(--rule); background: var(--white); }
.venture-cover { position: relative; }
.venture-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.venture-badge { position: absolute; left: var(--s4); top: var(--s4); font-family: var(--data); font-size: var(--t-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 6px 10px; background: var(--white); }
.venture-badge.on { color: var(--white); background: var(--saffron); }
.venture-badge.off { color: var(--stop); }
.venture-body { padding: var(--s6) var(--s8) var(--s8); }
@media (max-width: 600px) { .venture-body { padding: var(--s5); } }
.venture-body > h3 { font-size: var(--t-h3); margin-bottom: var(--s3); }
.venture-body > p { margin-top: var(--s4); max-width: 68ch; }
.venture-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-family: var(--data); font-size: var(--t-data); color: var(--navy); }
.venture-meta .approval { color: var(--ok); font-weight: 700; }
.venture-meta .rera { opacity: .7; }
.venture-stats { display: flex; flex-wrap: wrap; margin-top: var(--s6); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.venture-stats > div { flex: 1 1 140px; padding: var(--s4) var(--s4) var(--s4) 0; }
.venture-stats > div + div { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.venture-stats b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--ink); }
.venture-stats > div:first-child b { color: var(--saffron); }
.venture-stats span { font-family: var(--data); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); opacity: .6; }
.venture-amenities { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); padding: 0; }
.venture-amenities li { font-family: var(--data); font-size: var(--t-data); border: 1px solid var(--rule); padding: 4px 10px; background: var(--slab); }

.default-btn {
  margin-top: var(--s6);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  padding: var(--s3) var(--s6);
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .2s, color .2s;
}
.default-btn:hover, .default-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

.plot-table-wrap { margin-top: var(--s6); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plot-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 720px; }
.plot-table th { text-align: left; font-family: var(--data); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); padding: var(--s3); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.plot-table td { padding: var(--s3); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.plot-table tr.plot-sold td, .plot-table tr.plot-booked td { color: #8a90a8; }
.plot-status { font-family: var(--data); font-size: var(--t-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border: 1px solid currentColor; }
.plot-status.available { color: var(--ok); }
.plot-status.booked, .plot-status.hold { color: var(--warn); }
.plot-status.sold { color: var(--stop); }
.btn-enquire { font-family: var(--display); font-weight: 700; font-size: var(--t-data); color: var(--white); background: var(--saffron); border: 0; padding: 6px 12px; cursor: pointer; }
.btn-enquire:hover { background: #B8115C; }
.venture-layout { margin-top: var(--s8); }
.venture-layout h4 { font-size: 1rem; margin-bottom: var(--s3); }
.venture-layout img { border: 1px solid var(--rule); }
.plot-table-wrap iframe { display: block; margin-top: var(--s6); border: 1px solid var(--rule) !important; }

.plot-enquiry-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(20, 19, 63, .72); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.plot-enquiry-inner { position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; }
.plot-enquiry-inner .callback-box { margin: 0; }
.modal-close { position: absolute; top: 8px; right: 10px; z-index: 2; width: 36px; height: 36px; border: 0; background: transparent; color: var(--paper); font-size: 28px; line-height: 1; cursor: pointer; }

/* ---- Thank-you page ---- */
.ty { max-width: 46rem; padding-block: var(--s16) var(--s24); }
.ty__mark { width: 56px; height: 56px; display: grid; place-items: center; background: var(--ok); color: var(--white); font-size: 28px; font-weight: 700; margin-bottom: var(--s8); }
.ty__title { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.03em; }
.ty__deck { margin-top: var(--s5); font-size: 1.125rem; max-width: 52ch; }
.ty__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.ty__next { margin-top: var(--s16); }
.ty__next ul { list-style: none; padding: 0; margin-top: var(--s4); border-top: 1px solid var(--rule); }
.ty__next li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.ty__next a { font-family: var(--display); font-weight: 700; color: var(--ink); }
.ty__next a:hover { color: var(--saffron); }
.ty__next .data { color: var(--navy); opacity: .6; }
@media (max-width: 640px) { .ty__actions .btn { width: 100%; justify-content: center; } }

/* ---- Homepage custom HTML block ---- */
.home-custom { position: relative; z-index: 1; }