/* ══════════════════════════════════════════════════════════
   HNS PROJECT LISTINGS — Horizontal Card Style
   Namespace: hl-*
   ══════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.hl-section {
  padding: clamp(40px, 6vw, 5px) clamp(16px, 3vw, 40px);
  background: #f7f3ec;
  font-family: 'Didact Gothic', sans-serif;
}

/* The parent Newspaper theme's own boxed-row wrapper (.td-container/
   .tdc-row/.tdc-row-composer, defined in the PARENT theme — not this
   child theme, so don't edit it there or a theme update will wipe it)
   pins 20px of left/right padding at its own ≤767px breakpoint, also via
   !important. Scoped here (via :has(), not a global override) so it only
   tightens the gutter on rows that actually contain this section — every
   other boxed row on the site keeps the theme's normal 20px mobile
   padding. The "body" prefix is NOT scoping (body is always the ancestor)
   — it's a specificity bump: confirmed via live testing that a plain
   :has() selector at the same 0,2,0 specificity as the theme's own
   !important rule was losing the tie by source order (theme's own rule
   loads later); "body" adds a type selector so ours reliably outranks it
   regardless of load order. */
@media (max-width: 767px) {
  body .td-container:has(.hl-section),
  body .tdc-row:has(.hl-section),
  body .tdc-row-composer:has(.hl-section) {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* ── Optional header ── */
.hl-header {
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(36, 26, 18, 0.12);
}
.hl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8702a;
  margin-bottom: 14px;
}
.hl-eyebrow::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #c8702a;
  flex-shrink: 0;
}
.hl-title {
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.05;
  color: #241a12;
  letter-spacing: -0.015em;
}
.hl-title em {
  font-style: italic;
  font-weight: 300;
  color: #c8702a;
}

/* ── Grid — stacked horizontal cards ── */
.hl-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hl-cols-2 .hl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════
   CARD — horizontal (image left, content right)
   Note: .hl-card / .hl-card-media are THIS layout's own outer shell
   (featured's equivalent is .hf-card / .hf-card-media, deliberately
   separate). Everything inside the card body/footer/flyout is shared
   with [hns_featured_projects] via hns_shared_card_flyout_css() below —
   see that function's doc comment for why.
   ══════════════════════════════════════════════════════════ */
.hl-card {
  position: relative;
  display: flex;
  flex-direction: row;
  background: #fffdfa;
  border: 1px solid rgba(36, 26, 18, 0.09);
  border-radius: 16px;
  overflow: hidden;
  /* Layered soft shadow — see the matching .hf-card comment in
     featured-projects-shortcode.php; kept identical here so both card
     types read as the same system (DESIGN.md "Shared CSS sync"). */
  box-shadow:
    0 1px 3px rgba(36, 26, 18, 0.06),
    0 8px 24px rgba(36, 26, 18, 0.07);
  opacity: 0;
  transform: translateY(10px);
  /* Sped up from 0.6s/0.6s (felt sluggish scrolling through a long list) —
     0.32s is enough to still read as a deliberate reveal, not a snap. */
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease, border-color 0.3s ease;
}
.hl-card.is-visible { opacity: 1; transform: translateY(0); }
.hl-card.is-visible:hover {
  box-shadow:
    0 4px 10px rgba(36, 26, 18, 0.10),
    0 20px 48px rgba(36, 26, 18, 0.14);
  border-color: rgba(200, 112, 42, 0.38);
  transform: translateY(-3px);
  /* faster transition for hover */
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ── Image (left) ── */
.hl-card-media {
  position: relative;
  flex: 0 0 clamp(190px, 27%, 290px);
  align-self: stretch;
  min-height: 200px;
  overflow: hidden;
  background: #17110a;
  display: block;
  text-decoration: none;
}
.hl-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card:hover .hl-card-img { transform: scale(1.05); }
.hl-card-img--fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #1f160c 0%, #2d1e0e 100%);
}

/* Old divider from a superseded layout — not used here. */
.hl-card-divider { display: none; }

/* Mobile-only duplicate of the price, rendered after the excerpt — see the
   ≤760px media query below, which shows this and hides the head's copy. */
.hl-card-price-mobile { display: none; }

/* Excerpt — short descriptive line, listings cards only (not the hero/
   featured cards, which stay terse). Sits after the facts row, before the
   footer actions. */
.hl-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #6f6152;
  max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════
   FLYOUT — dark luxury panel
   ══════════════════════════════════════════════════════════ */

/* Dark overlay */
.hl-overlay {
  position: fixed;
  inset: 0;
  /* Above the floating "Group Buy" fab (.hns-gbp-fab, z-index:99998,
     fixed to <body> in the deal-widget) so the flyout never renders
     underneath it. */
  z-index: 100000;
  background: rgba(10, 8, 6, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.hl-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Flyout panel */
.hl-flyout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  width: min(460px, 100vw);
  background: #0c0a08;
  border-left: 0.5px solid rgba(240, 232, 216, 0.12);
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.65);
  /* translateX(100%) only shifts by the box's own width — the box-shadow's
     48px blur radius (+ -8px offset) still bled ~56px into the visible
     page as a persistent dark blurred strip along the whole right edge,
     even fully "closed". The extra +80px clears that with margin. */
  transform: translateX(calc(100% + 80px));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hl-flyout.is-open {
  transform: translateX(0);
}

.hl-flyout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid rgba(240, 232, 216, 0.1);
  flex-shrink: 0;
}
.hl-flyout-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #ff8d4f;
  margin-bottom: 3px;
}
.hl-flyout-project {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  color: #f0e8d8;
  letter-spacing: -0.01em;
}

.hl-flyout-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(240, 232, 216, 0.04);
  border: 0.5px solid rgba(240, 232, 216, 0.12);
  border-radius: 0;
  color: rgba(240, 232, 216, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
.hl-flyout-close:hover {
  background: rgba(240, 232, 216, 0.1);
  color: #f0e8d8;
}

.hl-flyout-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 112, 42, 0.3) transparent;
  /* A name/phone/email form is short — without this the panel opened into
     a mostly-empty dark void below it. Centering (plus the summary strip
     above) makes the panel read as a considered, single composition
     instead of content anchored to the top of a too-tall container.
     Degrades safely: if content ever exceeds the available height, flex
     centering still allows normal overflow-y scrolling. */
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.hl-flyout-body::-webkit-scrollbar { width: 3px; }
.hl-flyout-body::-webkit-scrollbar-thumb {
  background: rgba(200, 112, 42, 0.35);
}

/* ── Body scroll lock ── */
body.hl-noscroll { overflow: hidden !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE (listings-only — shared card/flyout responsive rules
   live in hns_shared_card_flyout_css() below)
   ══════════════════════════════════════════════════════════ */

/* Stack image on top on narrow viewports */
@media (max-width: 760px) {
  .hl-card { flex-direction: column; }
  .hl-card-media { flex: 0 0 auto; width: 100%; height: 200px; min-height: 0; }
  /* Price moves from the head down to below the excerpt on mobile — the
     head-hiding/mobile-copy-showing rules for .hl-card-price(-mobile) are
     in the shared responsive block; this is just the mobile-copy's own
     spacing, which only this file's markup renders. */
  .hl-card-price-mobile {
    display: block;
    margin-top: 14px;
    margin-bottom: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(36, 26, 18, 0.08);
  }
  .hl-flyout { width: 100vw; border-left: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hl-card,
  .hl-flyout,
  .hl-overlay { transition: none !important; }
  .hl-card { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   TWO-COLUMN WRAPPER — listings + sticky sidebar
   ══════════════════════════════════════════════════════════ */

.hl-wrapper {
  display: grid;
  /* Capped rather than a raw 2fr/1fr ratio — a straight 2:1 split rendered
     the sidebar ~435px wide at 1440px viewports, which read as too wide.
     minmax(300px, 360px) keeps it a fixed, predictable width band —
     modestly wider than the original fixed 300px (so it still reads as
     more prominent) without ballooning on wide screens. */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* ── "Sticky" sidebar ──
   True CSS position:sticky doesn't work here — the theme's global
   .td-theme-wrap ancestor has overflow:hidden (for unrelated full-bleed-row
   clipping reasons), which breaks sticky's containing-block calculation for
   every descendant on the site, not just this one. Can't safely patch that
   shared wrapper, so this is JS-driven: .is-fixed/.is-pinned-bottom are
   toggled by the script at the bottom of this template based on scroll
   position (classic 3-state "fake sticky": static → fixed while traveling →
   absolute-pinned once the bottom of the two-column area is reached). */
.hl-wrapper { position: relative; }

.hl-sidebar {
  position: static;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 112, 42, 0.25) transparent;
}
.hl-sidebar::-webkit-scrollbar { width: 3px; }
.hl-sidebar::-webkit-scrollbar-thumb { background: rgba(200, 112, 42, 0.3); }

/* width is set inline by the script (matches the sidebar's own natural
   1fr-of-3 grid-column width — no longer a fixed 300px since the sidebar
   is now a proportional 1/3 column, not a fixed-width one). */
.hl-sidebar.is-fixed {
  position: fixed;
  top: var(--hl-pin-top, 24px);
  max-height: var(--hl-pin-max, calc(100vh - 48px));
}
.hl-sidebar.is-pinned-bottom {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  max-height: none;
}

/* Wraps the theme's own "Scrolling Main Form" widget area (dynamic_sidebar
   'td-scrolling-main-form'). Given a full 1/3 column now, it's built to read
   as the section's second focal point, not an afterthought box: a warm
   top-to-bottom gradient (subtler than the flat listing-card surface), a
   rest-state shadow at the same weight the listing cards only reach on
   hover, and a slim orange accent bar across the top (never a side border —
   that reads as a lazy callout affordance in this system). */
.hl-sidebar-panel {
  position: relative;
  background: #f7f3ec;
  border: 1px solid rgba(36, 26, 18, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(36, 26, 18, 0.12);
  padding: 0rem 1rem 0rem 1rem;
  margin-top: 3rem;
}

/* ══════════════════════════════════════════════════════════
   INLINE BREAK FORM — full-width band after 8 projects
   ══════════════════════════════════════════════════════════ */

.hl-break-form {
  background: #f7f3ec;
  border: 0.5px solid rgba(240, 232, 216, 0.1);
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 32px);
  margin: 14px 0;
  position: relative;
  overflow: hidden;
}
.hl-break-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(200, 112, 42, 0.07) 0%, transparent 62%);
  pointer-events: none;
}
.hl-break-inner { position: relative; }
.hl-break-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c8702a;
  margin-bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hl-break-eyebrow::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #0f0d0b;
  flex-shrink: 0;
}
.hl-break-title {
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.08;
  color: #f0e8d8;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.hl-break-title em {
  font-style: italic;
  font-weight: 300;
  color: #d4885a;
}
.hl-break-sub {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(240, 232, 216, 0.4);
  max-width: 500px;
  margin-bottom: 16px;
}
/* Fallback CTA shown in the break-form when no requirements_form_id is set —
   a proper labeled button, not the icon-only .hl-btn-wa used on cards. */
.hl-break-wa {
  width: auto;
  height: auto;
  border-radius: 100px;
  padding: 13px 26px;
  gap: 10px;
  background: #4a9d6a;
  border-color: transparent;
}
.hl-break-wa svg { color: #fffdfa; }
.hl-break-wa span {
  display: inline-block;
  color: #fffdfa;
  font-size: 13px;
  font-weight: 600;
}

/* ── "ad" break type — full-width clickable banner image ── */
.hl-break-ad {
  display: block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  /* Reserves space at the placeholder's own ratio before the image loads —
     without this the break-form's height jumps once the image arrives
     (a real layout shift on a slow connection, not just a paint delay). */
  aspect-ratio: 1200 / 260;
  background: rgba(255, 255, 255, 0.04);
}
.hl-break-ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hl-break-ad:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Load More — reveals cards past `initial` in $hl_step batches. All
   cards are server-rendered (SEO/crawlers see everything); this just
   toggles the `hidden` attribute client-side, same technique as
   [hns_featured_projects]'s grid Load More. ── */
.hl-card[hidden],
.hl-break-form[hidden] { display: none; }
.hl-loadmore-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 4px;
}
.hl-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #190800b8;
  border: 1.5px solid rgba(200, 112, 42, 0.5);
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.hl-loadmore-btn:hover {
  background: rgba(200, 112, 42, 0.08);
  border-color: #c8702a;
}
.hl-loadmore-btn:active { transform: scale(0.97); }
.hl-loadmore-btn svg { color: #c8702a; transition: transform 0.25s ease; }
.hl-loadmore-btn[data-exhausted] svg { transform: rotate(180deg); }
.hl-loadmore-btn:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
}
.hl-loadmore-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.hl-loadmore-btn:disabled:hover {
  background: #190800b8;
  border-color: rgba(200, 112, 42, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .hl-loadmore-btn { transition: none; }
  .hl-loadmore-btn svg { transition: none; }
}
.hl-break-wa:hover { background: #3f8a5a; }
.hl-break-wa:hover svg { transform: none; }

/* ── Responsive collapse ── */
@media (max-width: 960px) {
  .hl-wrapper { grid-template-columns: 1fr; }
  .hl-sidebar { position: static; max-height: none; order: -1; }
}
@media (max-width: 680px) {
  /* Sidebar hidden on small mobile — inline break form covers lead capture */
  .hl-sidebar { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SHARED CARD + FLYOUT-CONTENT COMPONENTS
   See hns_shared_card_flyout_css() doc comment above.
   ══════════════════════════════════════════════════════════ */

/* ── Card image / status ── */
.hl-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card-status {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fffdfa;
  background: #c8702a;
  padding: 5px 13px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ── Card body / head / title ── */
.hl-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  background: #fffdfa;
}
.hl-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.hl-card-title {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.25;
  color: #241a12;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.hl-card-title-link:hover { color: #c8702a; }
.hl-card-title-link:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Price ── */
/* Pill treatment (2026-08-16), matching the featured cards' brand-orange
   price pill — a deliberate override of this file's earlier "no pill/badge
   treatment" rule, chosen for visual consistency between the two sections
   over keeping listings-only plain text. Flat fill, no gradient/glow —
   toned down from an earlier gradient+shadow version that read as too
   loud/slop-like. */
.hl-card-price {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
  background: #c8702a;
  padding: 6px 13px;
  border-radius: 100px;
}
/* Desktop head price only (2026-08-16): a corner ribbon flush against the
   card's own top-right edge, not a floating pill — reads calmer and more
   "attached" to the card than a pill with margin around it. Negative
   margins cancel .hl-card-body's own padding (18px 22px) to bleed the box
   out to the card's real edge; .hl-card's overflow:hidden + border-radius
   then clips it to the card's own corner automatically. Only the desktop
   .hl-card-head instance gets this — the mobile duplicate in
   .hl-card-price-mobile keeps the normal free-floating pill shape, since
   it doesn't sit against any card edge. */
.hl-card-head .hl-card-price {
  margin: -18px -22px 0 0;
  padding: 10px 20px 10px 16px;
  border-radius: 0 0 0 14px;
}
.hl-price-value {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700;
  color: #fff8f0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hl-price-suffix {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 248, 240, 0.85);
}
.hl-price-label { display: none; }

/* ── Location ── */
.hl-card-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a3d30;
  margin-bottom: 20px;
}
.hl-card-location svg { flex-shrink: 0; color: #c8702a; }
.hl-card-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Facts row: bold warm-ink values + brand-orange icons, middot rhythm
   between items — real hierarchy and color without pill/badge treatment ── */
.hl-card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
}
.hl-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #241a12;
  font-weight: 600;
}
.hl-fact svg { flex-shrink: 0; width: 16px; height: 16px; color: #c8702a; }
.hl-fact:not(:last-child)::after {
  content: "·";
  margin: 0 14px;
  color: #c2a98a;
  font-weight: 400;
}

/* ── Footer / buttons ── */
.hl-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* !important throughout: this button also carries Fluent Forms' own
   .ff_modal_btn/.plain_btn classes (needed for the WhatsApp modal trigger —
   see the markup), and that plugin's CSS resets border/display/padding on
   its own buttons. Without !important here those resets win by load order
   and strip the circular look (no border, icon off-center). */
.hl-btn-wa {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(36, 26, 18, 0.14) !important;
  background: transparent !important;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.15s ease;
}
.hl-btn-wa span { display: none !important; } /* icon-only */
.hl-btn-wa svg {
  color: #4a9d6a; /* muted, desaturated green — recognizable, not garish */
  transition: transform 0.25s;
}
.hl-btn-wa:hover {
  background: rgba(74, 157, 106, 0.1) !important;
  border-color: rgba(74, 157, 106, 0.4) !important;
}
.hl-btn-wa:hover svg { transform: scale(1.1); }
.hl-btn-wa:active { transform: scale(0.94); }
.hl-btn-wa:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
}
/* "Find Offers" / "Book Now" — dark, the visually dominant action (opens
   the lead-capture flyout). */
.hl-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 100px;
  background: #241a12;
  border: 1px solid #241a12;
  color: #fffdfa;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.25s, border-color 0.25s, transform 0.15s ease;
}
.hl-btn-cta:hover { background: #17110a; border-color: #17110a; }
.hl-btn-cta:active { transform: scale(0.96); }
.hl-btn-cta:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
}
/* "Get Details" — filled #f35e0a, distinct from both "Find Offers" (dark)
   and the brand orange (#c8702a) used elsewhere, so the two card CTAs read
   as two different actions. Only used by [hns_listings]'s cards today, but
   lives here with the rest of the button system rather than as a one-off. */
.hl-btn-cta.hl-btn-cta-secondary {
  background: #f35e0a;
  border-color: #f35e0a;
  color: #fffdfa;
}
.hl-btn-cta.hl-btn-cta-secondary:hover {
  background: #d94f04;
  border-color: #d94f04;
}
.hl-btn-cta svg { flex-shrink: 0; }

/* ── Flyout: summary strip, savings badge, lead form ── */
.hl-flyout-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px;
  background: rgba(240, 232, 216, 0.045);
  border: 1px solid rgba(240, 232, 216, 0.1);
  border-radius: 14px;
}
.hl-flyout-summary:empty,
.hl-flyout-summary.is-empty { display: none; }
.hl-flyout-summary-img {
  flex-shrink: 0;
  width: 6rem;
  height: 60px;
  border-radius: 10px;
  background-color: #17110a;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.hl-flyout-summary-info { min-width: 0; }
.hl-flyout-summary-price {
  font-size: 17px;
  font-weight: 700;
  color: #f0e8d8;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.hl-flyout-summary-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(240, 232, 216, 0.55);
  max-width: 100%;
}
.hl-flyout-summary-location svg { flex-shrink: 0; color: #c8702a; }
.hl-flyout-summary-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Random "Save up to ₹X Lakhs" badge — same copy pool as the floating deal
   widget (HNS_DEAL_SAVINGS_POOL in functions.php), one line picked per
   shortcode render so it isn't identical across cards/visits. */
.hl-flyout-savings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 13px;
  background: rgba(62, 209, 34, 0.8);
  border: 1px solid rgba(200, 112, 42, 0.3);
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hl-flyout-savings svg { flex-shrink: 0; color: #ffffff; }
.hl-flyout-savings:empty { display: none; }

/* Lead form status message (below the submit button) — sits inside the
   light .hl-flyout-form-wrap panel, so these need to read on white, not
   the flyout's dark background. */
.hl-lead-form-msg {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 1em;
  color: #6f6152;
}
.hl-lead-form-msg.is-error { color: #c0392b; }
.hl-lead-form-msg.is-success { color: #3d8b5a; }

/* ── Lead form — a light card sitting on the flyout's dark background.
   Top accent bar reuses the exact device from .hl-sidebar-panel (3px warm-
   orange gradient across the top, never a side border) so this reads as
   the same system, not a one-off form dropped into the panel. ── */
.hl-flyout-form-wrap {
  position: relative;
  background: #fffdfa;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.hl-lead-form-intro {
  font-size: 12.5px;
  line-height: 1.5;
  color: #7a6a58;
  margin-bottom: 10px;
}
.hl-flyout-form-wrap .ff-el-group,
.hl-flyout-form-wrap .ff_input_group {
  margin-bottom: 8px !important;
}
.hl-flyout-form-wrap label,
.hl-flyout-form-wrap .ff-el-form-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #7a4100 !important;
  margin-bottom: 4px !important;
}
.hl-flyout-form-wrap .ff-el-form-control,
.hl-flyout-form-wrap input[type="text"],
.hl-flyout-form-wrap input[type="email"],
.hl-flyout-form-wrap input[type="tel"],
.hl-flyout-form-wrap input[type="number"],
.hl-flyout-form-wrap textarea,
.hl-flyout-form-wrap select {
  background: #fffdfa !important;
  border: 1.5px solid rgba(36, 26, 18, 0.2) !important;
  border-radius: 8px !important;
  color: #241a12 !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.hl-flyout-form-wrap input::placeholder,
.hl-flyout-form-wrap textarea::placeholder {
  color: rgba(36, 26, 18, 0.32) !important;
}
.hl-flyout-form-wrap input:focus,
.hl-flyout-form-wrap textarea:focus,
.hl-flyout-form-wrap select:focus {
  border-color: #c8702a !important;
  background: rgba(200, 112, 42, 0.035) !important;
}
.hl-flyout-form-wrap textarea {
  min-height: 80px !important;
  resize: vertical !important;
}
.hl-flyout-form-wrap input[readonly],
.hl-flyout-form-wrap input[readonly]:focus {
  opacity: 0.65 !important;
  cursor: default !important;
  border-color: rgba(36, 26, 18, 0.12) !important;
  background: rgba(36, 26, 18, 0.03) !important;
}
.hl-flyout-form-wrap .ff_submit_btn_container,
.hl-flyout-form-wrap button[type="submit"],
.hl-flyout-form-wrap input[type="submit"],
.hl-flyout-form-wrap .ff-btn-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #f35e0a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: inherit !important;
  transition: background 0.2s, transform 0.15s ease !important;
  margin-top: 4px !important;
}
.hl-flyout-form-wrap button[type="submit"]:hover,
.hl-flyout-form-wrap .ff-btn-submit:hover {
  background: #b5611f !important;
}
.hl-flyout-form-wrap button[type="submit"]:active,
.hl-flyout-form-wrap .ff-btn-submit:active {
  transform: scale(0.98);
}
.hl-flyout-form-wrap .ff-btn-submit svg { flex-shrink: 0; }
.hl-flyout-form-wrap .error {
  color: #c0392b !important;
  font-size: 11px !important;
}

/* ── "requirements" break — fully custom form, own markup/classes only
   (hl-lf-*), no dependency on FluentForm's own generated markup/classes —
   that dependency was the entire source of the earlier CSS-override
   fighting. A real FluentForm still exists per-instance (`.hl-lf-real`,
   visually hidden) purely as the submission engine: this form's JS syncs
   values into it by field `name` and clicks its real submit button, same
   technique already proven by the site's #hns-leadgen widget
   (hns_leadgen_output() in the child theme's functions.php). Colors
   lifted 1:1 from that widget's --hns-* custom properties. ── */
.hl-break-leadform {
  position: relative;
  background: #110903;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
/* Same technique as hns_leadgen_output()'s CSS-hide of the real form —
   NOT display:none, so FluentForm's own init JS (which can depend on the
   element having real layout) never has a reason to behave differently
   than a normally-embedded form. */
.hl-lf-real {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
/* Row 1: location + budget pill cards, side by side.
   Row 2: name/phone/email, side by side in a single line of 3. */
.hl-lf-row {
  display: grid;
  gap: 12px;
}
.hl-lf-row + .hl-lf-row { margin-top: 12px; }
.hl-lf-row-2col { grid-template-columns: 1fr 1fr; }
.hl-lf-row-3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
  .hl-lf-row-2col,
  .hl-lf-row-3col { grid-template-columns: 1fr; }
}
.hl-lf-row > * { min-width: 0; }
.hl-lf-card {
  background: #040201;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px 14px;
}
.hl-lf-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #f6f2fb;
  margin-bottom: 7px;
}
.hl-lf-label small { color: #9d92b6; font-weight: 600; }
.hl-lf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-lf-pill {
  background: #120e19;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  color: #f6f2fb;
  padding: 7px 12px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease-out, background 0.18s ease-out, transform 0.12s ease-out;
}
.hl-lf-pill:hover { border-color: rgba(255, 132, 56, 0.55); }
.hl-lf-pill:active { transform: scale(0.97); }
.hl-lf-pill[aria-pressed="true"] {
  background: rgba(255, 132, 56, 0.16);
  border-color: #ff8438;
  color: #ffd9bd;
}
/* Fields sit side by side in .hl-lf-row-3col (grid handles the gap) — the
   stacked margin only applies when the row collapses to 1 column ≤700px. */
@media (max-width: 700px) {
  .hl-lf-field + .hl-lf-field { margin-top: 10px; }
}
.hl-lf-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #f6f2fb;
  margin-bottom: 5px;
}
.hl-lf-field label small { color: #9d92b6; font-weight: 600; }
.hl-lf-req { color: #ff8438; }
.hl-lf-input {
  width: 100%;
  background: #120e19;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: #f6f2fb;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 12px;
  min-height: 40px;
  outline: none;
  transition: border-color 0.18s ease-out;
}
.hl-lf-input::placeholder { color: #9d92b6; font-weight: 500; }
.hl-lf-input:focus { border-color: #ff8438; }
.hl-lf-input[aria-invalid="true"] { border-color: #ff7b66; }
.hl-lf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(100deg, #ff933c, #ff9a3c);
  color: #2b1105;
  border: none;
  border-radius: 11px;
  min-height: 44px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 132, 56, 0.18), 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease-out, filter 0.15s ease-out;
  margin-top: 12px;
}
.hl-lf-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hl-lf-submit:active { transform: scale(0.98); }
.hl-lf-submit[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.hl-lf-pill:focus-visible,
.hl-lf-submit:focus-visible {
  outline: 2px solid #ff8438;
  outline-offset: 2px;
}
.hl-lf-input:focus-visible { outline: none; } /* border-color focus state above already carries this */
.hl-lf-msg {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 1em;
  color: #c1b7d4;
  text-align: center;
}
.hl-lf-msg.is-error { color: #ffb3a6; }
.hl-lf-msg.is-success { color: #8dffc2; }
@media (prefers-reduced-motion: reduce) {
  .hl-lf-pill, .hl-lf-submit { transition: none; }
}

/* ── Shared responsive overrides ── */
@media (max-width: 760px) {
  /* Title never actually wrapped next to the price on a row (measured
     112px of 257px available even with flex:1/min-width:0), so both card
     types stack title above price on mobile instead. */
  .hl-card-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 2px; }
  .hl-card-title { -webkit-line-clamp: 2; }
  /* [hns_listings] shows a second price copy below the excerpt on mobile
     (.hl-card-price-mobile, listings-only markup) and hides this one;
     [hns_featured_projects] has no mobile-price markup so this simply
     hides the head price there with nothing to replace it — harmless,
     .hf-card-price's own footer-row price still shows normally. */
  .hl-card-head .hl-card-price { display: none; }
}
@media (max-width: 440px) {
  .hl-card-body { padding: 16px 16px 18px; }
  .hl-card-footer { flex-wrap: wrap; }
  .hl-btn-cta { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-card-img,
  .hl-btn-cta,
  .hl-btn-wa,
  .hl-btn-wa svg,
  .hl-card-title-link { transition: none !important; }
}