/* ==========================================================================
   Listing — Editorial template (2026-09)
   --------------------------------------------------------------------------
   Full rewrite, approved after 3 mockup rounds (listing-page-redesign-
   v3-full.html): white background, Fraunces + IBM Plex Sans, a deep-green
   accent. This REPLACES the retired "Industrial" reskin outright — every
   class below is new (cover-mosaic, section-nav, status-card, badge-ring,
   etc.); none of the old .lp-gallery-main / .lp-tabs / .lp-contact-card /
   .lp-status-card / .lp-badge-ring vocabulary exists anywhere in
   views/public/listing.php or its partials any more (see those files'
   own history — every occurrence was renamed, not just re-themed on top
   of). This file is the primary stylesheet for the new class names, not
   a color patch sitting on inherited layout.

   Scoped under .lp-editorial (the wrapper listing.php prints around its
   own output — see ListingController's $listingEditorialTheme flag and
   views/layout.php's conditional <link>) so it can never leak onto
   engine-single.php or profile.php. Engine's own editorial template
   (assets/css/engine-editorial.css) intentionally shares the SAME
   unprefixed class names for the handful of pieces both pages render
   identically (status-card, badges-row/badge-ring, side-card, hours-box,
   btn-*) — see status-mini-card.php / badge-ring-row.php's own docblocks
   for why those two components now emit plain, unprefixed classes.
   ========================================================================== */

.lp-editorial {
  --le-ink:      #1B1D18;
  --le-soft:     #5A594C;
  --le-mute:     #8D8879;
  --le-bg:       #FFFFFF;
  --le-surface:  #FFFFFF;
  --le-surface-2:#F7F7F5;
  --le-surface-3:#EFEEE9;
  --le-border:   #E6E4DC;
  --le-brand:      #1E4B3D;
  --le-brand-dark: #163A2F;
  --le-brand-tint: #E3F1E9;
  --le-brand-ink:  #1F7A4D;
  --le-signal:     #B5740E;
  --le-signal-tint:#FBF0DA;
  --le-verified:      #1568A8;
  --le-verified-tint: #E8F1FA;
  --le-danger:     #B3261E;
  --le-danger-tint:#FBECEB;
  --le-shadow: 0 1px 2px rgba(20,22,17,.04), 0 18px 40px -22px rgba(20,22,17,.22);
  --le-r-sm: 12px; --le-r-md: 16px; --le-r-lg: 20px;
  --le-font-h: 'Fraunces', Georgia, serif;
  --le-font-b: 'IBM Plex Sans', system-ui, sans-serif;

  background: var(--le-bg);
  color: var(--le-ink);
  font-family: var(--le-font-b);
  font-size: 15px;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-editorial {
    --le-ink:      #EDEDE6; --le-soft: #C2C0B2; --le-mute: #8F8C7C;
    --le-bg:       #14161A; --le-surface: #191C1F; --le-surface-2:#20242A; --le-surface-3:#262B31;
    --le-border:   #2C3138;
    --le-brand:      #4FAE83; --le-brand-dark: #6FC49B; --le-brand-tint: #163227; --le-brand-ink: #6FC49B;
    --le-signal:     #E0A548; --le-signal-tint:#332811;
    --le-verified:      #6BB4EA; --le-verified-tint: #17293A;
    --le-danger:     #E28880; --le-danger-tint:#33201E;
  }
}
:root[data-theme="dark"] .lp-editorial {
  --le-ink:      #EDEDE6; --le-soft: #C2C0B2; --le-mute: #8F8C7C;
  --le-bg:       #14161A; --le-surface: #191C1F; --le-surface-2:#20242A; --le-surface-3:#262B31;
  --le-border:   #2C3138;
  --le-brand:      #4FAE83; --le-brand-dark: #6FC49B; --le-brand-tint: #163227; --le-brand-ink: #6FC49B;
  --le-signal:     #E0A548; --le-signal-tint:#332811;
  --le-verified:      #6BB4EA; --le-verified-tint: #17293A;
  --le-danger:     #E28880; --le-danger-tint:#33201E;
}

.lp-editorial h1, .lp-editorial h2, .lp-editorial h3 { font-family: var(--le-font-h); color: var(--le-ink); letter-spacing: -.01em; }

/* ---- Cover (2026-09 — single hero photo, gallery moved to its own tab,
   see _listing-hero-gallery.php's docblock for why). Fixed aspect-ratio
   instead of a raw px height: scales cleanly at any width instead of
   cropping or letterboxing depending on the source photo's own
   proportions — the concrete fix for the "cover runs too tall" report. */
/* 2026-09 follow-up: bumped taller to match profile/engine/blog covers after
   direct feedback that 16/5 read as visibly shrunk — every editorial cover
   now shares 16/4.5 desktop, taller-than-16/9 on mobile, so Listing, Profile,
   Engine and Blog all read the same height relative to their own width. */
.lp-editorial .cover-hero{border-radius:var(--le-r-lg);overflow:hidden;position:relative;aspect-ratio:16/4.5}
@media(max-width:767px){.lp-editorial .cover-hero{aspect-ratio:4/3;border-radius:var(--le-r-md)}}
/* 2026-09 audit fix (v5.96) — cursor:pointer and .cover-gallery-count
   removed: the cover is no longer clickable (see
   _listing-hero-gallery.php's own docblock — the "N photos" pill + click-
   to-lightbox affordance made the cover read as a gallery widget instead
   of a clean featured photo; gallery access now lives only in the
   dedicated Gallery tab). The hover zoom stays — a plain "featured photo"
   affectation, not a gallery cue, and harmless on a static image. */
.lp-editorial .cover-main{overflow:hidden;position:relative;background:linear-gradient(135deg,var(--le-brand-tint),var(--le-surface-3));height:100%;width:100%}
.lp-editorial .cover-main img{width:100%;height:100%;object-fit:cover;transition:transform .3s;display:block}
.lp-editorial .cover-main:hover img{transform:scale(1.02)}
/* ---- No-cover fallback (2026-09 — was the icon-only noimg-card
   component; swapped for the same gradient+name treatment engine-single
   already used for job/event, so every engine shares one look when no
   cover photo was uploaded). Fills .cover-hero the same way .cover-main
   does — no separate .cover-placeholder wrapper needed any more. */
/* 2026-09 follow-up: top-left instead of bottom-left — see
   profile-editorial.css's .banner-noimg comment for the full reasoning
   (avoids colliding with .logo-overlap's negative-margin logo below). */
.lp-editorial .banner-noimg{width:100%;height:100%;position:relative;display:flex;align-items:flex-start;padding:22px}
.lp-editorial .banner-noimg::before{content:"";position:absolute;inset:0;background:var(--ni-grad)}
.lp-editorial .banner-noimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 60%)}
.lp-editorial .banner-noimg-inner{position:relative;z-index:2;color:#fff}
.lp-editorial .banner-noimg-inner h1{color:#fff;font-size:24px;font-weight:660;margin:0}

/* ---- Gallery tab grid (2026-09 — the photos that used to live in the
   cover mosaic/swipe strip now render here instead). */
.lp-editorial .gallery-tab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lp-editorial .gallery-tab-grid > div{aspect-ratio:1/1;border-radius:var(--le-r-sm);overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--le-brand-tint),var(--le-surface-3))}
.lp-editorial .gallery-tab-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.lp-editorial .gallery-tab-grid > div:hover img{transform:scale(1.04)}

/* ---- Logo overlap ------------------------------------------------------ */
.lp-editorial .logo-overlap{margin-top:-40px;margin-bottom:.75rem;position:relative;z-index:2}
.lp-editorial .logo-img{width:84px;height:84px;border-radius:var(--le-r-md);border:4px solid var(--le-surface);box-shadow:var(--le-shadow);object-fit:cover;display:block;background:var(--le-surface)}
.lp-editorial .logo-placeholder{display:flex;align-items:center;justify-content:center;background:var(--le-surface-2);color:var(--le-mute);font-size:26px}
@media(max-width:575px){.lp-editorial .logo-img,.lp-editorial .logo-placeholder{width:64px;height:64px;border-radius:14px}.lp-editorial .logo-overlap{margin-top:-28px}}

/* ---- Identity ---------------------------------------------------------- */
.lp-editorial .sector-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--le-brand-tint);color:var(--le-brand-ink);font-weight:600;font-size:12.3px;padding:.3rem .7rem;border-radius:999px;text-decoration:none;margin-bottom:.6rem}
.lp-editorial .hero-name{font-weight:660;font-size:28px;text-wrap:balance}
.lp-editorial .hero-handle{color:var(--le-mute);font-size:13px;margin-bottom:.5rem;font-family:'IBM Plex Mono',monospace}
.lp-editorial .stat-pill{background:var(--le-surface-2);border:1px solid var(--le-border);color:var(--le-soft);font-size:12.5px;font-weight:650;padding:.3rem .65rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem}
.lp-editorial .chip.chip--sm{background:var(--le-brand-tint);border:1px solid var(--le-brand-tint);color:var(--le-brand-ink);border-radius:999px;font-size:12.3px;font-weight:600}
.lp-editorial .meta-row{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin-top:.4rem;margin-bottom:1rem}
.lp-editorial .meta-row a,.lp-editorial .meta-row span{color:var(--le-soft);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.lp-editorial .meta-row a:hover{color:var(--le-brand-ink)}
.lp-editorial .stars{color:var(--le-signal)}
.lp-editorial .glance-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--le-border);border-radius:999px;padding:.4rem .85rem;font-size:12.5px;font-weight:650;color:var(--le-soft);text-decoration:none;background:var(--le-surface-2)}
.lp-editorial .glance-chip:hover{border-color:var(--le-brand-tint);color:var(--le-brand-ink);background:var(--le-brand-tint)}

/* ---- Section nav (active-only tabs) ------------------------------------
   2026-09 refinement: matches the approved mockup's own nav treatment
   exactly (listing-page-redesign-v3-full.html's .section-nav — a plain
   underline-tab strip, not a bordered pill container) instead of the
   boxed/padded look this shipped with initially. The one adaptation kept
   is the sticky top offset: the mockup was a standalone page with no site
   chrome, so its bar could sit at top:0; the real site has its own ~59px
   sticky header, so .nav-sticky pins just under that instead.
   2026-09 — reverted back to real click-to-switch: direct, repeated
   feedback ("tab per click kar ke specific section khule" — a tab click
   should open that specific section, not just scroll to it) asked for
   exactly the click-switch behavior the scroll-spy pass above had
   deliberately removed. Every panel still renders server-side (nothing
   below is conditionally built — see _listing-hero-tabs.php's script),
   so this is still SEO-safe; only which panel is visible changes now,
   driven by the .active class below instead of scroll position. */
.lp-editorial [data-nav-panel]{display:none}
.lp-editorial [data-nav-panel].active{display:block}
.lp-editorial .section-nav-wrap{border-bottom:1px solid var(--le-border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lp-editorial .section-nav-wrap::-webkit-scrollbar{display:none}
.lp-editorial .section-nav-wrap.nav-sticky{position:sticky;top:59px;z-index:900;background:var(--le-bg)}
.lp-editorial .section-nav-wrap.nav-sticky.nav-stuck{box-shadow:0 6px 16px rgba(20,22,17,.08)}
.lp-editorial .section-nav{display:flex;gap:0}
.lp-editorial .nav-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--le-font-b);font-weight:650;font-size:13.3px;color:var(--le-mute);padding:14px 4px;margin-right:26px;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap}
.lp-editorial .nav-link:hover{color:var(--le-ink)}
.lp-editorial .nav-link.active{color:var(--le-ink);border-bottom-color:var(--le-brand)}
.lp-editorial .cnt{background:var(--le-surface-2);color:var(--le-soft);border-radius:999px;font-size:11px;font-weight:700;padding:.05rem .5rem;font-family:'IBM Plex Mono',monospace}
.lp-editorial .nav-link.active .cnt{background:var(--le-brand-tint);color:var(--le-brand-ink)}

/* ---- Main content sections ---------------------------------------------- */
.lp-editorial .sec-card{background:var(--le-surface);border:1px solid var(--le-border);border-radius:var(--le-r-md);padding:1.4rem 1.5rem}
@media(max-width:768px){.lp-editorial .sec-card{padding:1.1rem;border-radius:var(--le-r-sm)}}
.lp-editorial .sec-title{font-weight:600;font-size:19px;margin-bottom:.9rem}
.lp-editorial .about-text{color:var(--le-soft);font-size:14.2px;line-height:1.78}

/* 2026-09 refinement: two-column full-width boxes (one per row on
   mobile — a 2x36-char box for "Wi-Fi" alongside seven more) traded
   mobile space for a grid structure the content never needed. Iconic
   pills instead: each amenity sizes to its own label and wraps with its
   neighbors, same recipe as .glance-chip above, so eight amenities read
   as one tidy wrapped row on any width instead of eight stacked bars. */
.lp-editorial .amenity-grid{display:flex;flex-wrap:wrap;gap:8px}
.lp-editorial .amenity{display:inline-flex;align-items:center;gap:7px;font-size:12.8px;font-weight:600;color:var(--le-soft);padding:.45rem .9rem;background:var(--le-surface-2);border-radius:999px;border:1px solid var(--le-border);white-space:nowrap}
.lp-editorial .amenity i{color:var(--le-brand-ink)}
.lp-editorial .amenity.amenity-missing{border-style:dashed;color:var(--le-mute);background:transparent}
.lp-editorial .amenity.amenity-missing i{color:var(--le-mute)}
.lp-editorial .owner-note{margin-top:.6rem;font-size:12px;color:var(--le-mute);background:var(--le-surface-2);border-radius:var(--le-r-sm);padding:.6rem .8rem}

.lp-editorial .kv-list{border-top:1px solid var(--le-border)}
.lp-editorial .kv-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--le-border);font-size:13.2px}
.lp-editorial .kv-k{color:var(--le-mute)}
.lp-editorial .kv-v{font-weight:650;text-align:right}
.lp-editorial .kv-row.kv-row-media{display:block}

.lp-editorial .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:575px){.lp-editorial .video-grid{grid-template-columns:1fr 1fr}}
.lp-editorial .video-thumb{position:relative;aspect-ratio:16/10;border-radius:var(--le-r-sm);overflow:hidden;background:linear-gradient(135deg,var(--le-brand-tint),var(--le-surface-3));display:flex;align-items:center;justify-content:center;text-decoration:none}
.lp-editorial .video-play{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--le-brand-ink);display:flex;align-items:center;justify-content:center;font-size:16px}
.lp-editorial .video-title{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(15,20,17,.6);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Reviews ------------------------------------------------------------ */
.lp-editorial .review-link-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--le-surface-2);border-radius:var(--le-r-sm);margin-bottom:18px;border:1px solid var(--le-border)}
.lp-editorial .review-link-ic{width:38px;height:38px;border-radius:10px;background:var(--le-surface);color:var(--le-brand-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--le-border)}
.lp-editorial .review-link-title{font-size:13px;font-weight:650}
.lp-editorial .review-link-desc{font-size:11.8px;color:var(--le-mute)}
.lp-editorial .rating-summary{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:18px 20px;background:var(--le-surface-2);border-radius:var(--le-r-sm);margin-bottom:18px;border:1px solid var(--le-border)}
@media(max-width:480px){.lp-editorial .rating-summary{grid-template-columns:1fr}}
.lp-editorial .rs-score-wrap{text-align:center}
.lp-editorial .rs-score{font-family:var(--le-font-h);font-size:38px;font-weight:600;line-height:1}
.lp-editorial .rs-bars{display:flex;flex-direction:column;gap:5px;justify-content:center}
.lp-editorial .rs-bar-row{display:grid;grid-template-columns:36px 1fr 26px;align-items:center;gap:8px;font-size:11px;color:var(--le-mute)}
.lp-editorial .rs-bar-track{height:6px;background:var(--le-surface-3);border-radius:20px;overflow:hidden}
.lp-editorial .rs-bar-fill{height:100%;background:var(--le-signal);border-radius:20px}
.lp-editorial .review-card{padding:17px 0;border-bottom:1px solid var(--le-border)}
.lp-editorial .review-card:last-child{border-bottom:none}
.lp-editorial .rev-avatar{width:34px;height:34px;border-radius:50%;background:var(--le-surface-2);border:1px solid var(--le-border);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--le-soft);overflow:hidden;flex-shrink:0}
/* 2026-09 — direct owner report: their own review showed initials instead
   of their real uploaded avatar. Same img-or-initials shape every other
   avatar-fallback.php call site already uses (blog author, profile,
   following-list) — this rule was missing the overflow:hidden + img sizing
   half of that pair, so even once core/Reviews.php started selecting the
   avatar, an <img> dropped in here would have overflowed the circle
   uncropped instead of being clipped to it. */
.lp-editorial .rev-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lp-editorial .owner-reply{margin-top:11px;padding:11px 13px;background:var(--le-surface-2);border-radius:10px;font-size:12.7px;color:var(--le-soft);border-left:2px solid var(--le-brand)}

/* ---- Related listings --------------------------------------------------- */
.lp-editorial .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.lp-editorial .related-grid{grid-template-columns:1fr 1fr}}

/* ---- Ad slots ------------------------------------------------------------ */
.lp-editorial .ad-slot{border:1px dashed var(--le-border);border-radius:var(--le-r-sm)}

/* ---- Deals / basket ------------------------------------------------------ */
.lp-editorial .deal-badge{background:var(--le-signal-tint);color:var(--le-signal);border-radius:999px;font-weight:700;font-size:11.5px;padding:2px 9px}
.lp-editorial .basket-float{background:var(--le-surface);border:1px solid var(--le-border);box-shadow:var(--le-shadow);border-radius:var(--le-r-md)}

/* ---- Sidebar ------------------------------------------------------------- */
.lp-editorial .side-card{background:var(--le-surface);border:1px solid var(--le-border);border-radius:var(--le-r-md);padding:20px 22px;position:sticky;top:76px}
@media(max-width:991px){.lp-editorial .side-card{position:static;padding:18px}}

.lp-editorial .status-card{border:none;background:var(--le-surface-2);border-radius:var(--le-r-sm);padding:.9rem 1rem}
.lp-editorial .status-card.is-open{background:var(--le-brand-tint)}
.lp-editorial .status-head{color:var(--le-mute);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.lp-editorial .status-card.is-open .status-msg strong{color:var(--le-brand-ink)}
.lp-editorial .status-closed-text{color:var(--le-mute)}

.lp-editorial .badges-card{border:none;padding:0}
.lp-editorial .badges-row{display:flex;gap:14px;flex-wrap:wrap}
.lp-editorial .badge-ring-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:60px;text-align:center}
.lp-editorial .badge-ring{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
.lp-editorial .badge-ring-item span:last-child{font-size:10px;font-weight:650;color:var(--le-soft);line-height:1.2}

.lp-editorial .profile-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:.75rem;border-bottom:1px solid var(--le-border)}

.lp-editorial .hours-box{background:var(--le-surface-2);border-radius:var(--le-r-sm);padding:14px 16px}
.lp-editorial .badge-open{background:var(--le-brand-tint);color:var(--le-brand-ink);border-radius:999px;font-weight:700}
.lp-editorial .badge-closed{background:var(--le-danger-tint);color:var(--le-danger);border-radius:999px;font-weight:700}
.lp-editorial .hours-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}
.lp-editorial .hours-row.today{background:var(--le-brand-tint);color:var(--le-brand-ink);font-weight:700;margin:0 -8px;padding:6px 8px;border-radius:8px}

.lp-editorial .contact-rows{display:flex;flex-direction:column;gap:8px}
.lp-editorial .contact-row{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;color:var(--le-soft)}
.lp-editorial .contact-row a{color:var(--le-soft);text-decoration:none}
.lp-editorial .contact-row a:hover{color:var(--le-brand-ink)}
.lp-editorial .contact-row i{color:var(--le-mute);margin-top:2px}

/* ---- Buttons -------------------------------------------------------------- */
.lp-editorial .btn-ink{background:var(--le-ink);border-color:var(--le-ink);color:var(--le-surface);font-family:var(--le-font-b);font-weight:650;border-radius:var(--le-r-sm)}
.lp-editorial .btn-ink:hover{background:var(--le-brand-dark);border-color:var(--le-brand-dark);color:#fff}
.lp-editorial .btn-accent{background:var(--le-brand);border-color:var(--le-brand);color:#fff;font-family:var(--le-font-b);font-weight:650;border-radius:var(--le-r-sm)}
.lp-editorial .btn-accent:hover{background:var(--le-brand-dark);border-color:var(--le-brand-dark)}
.lp-editorial .btn-quiet{background:var(--le-surface);border:1px solid var(--le-border);color:var(--le-ink);font-family:var(--le-font-b);font-weight:650;border-radius:var(--le-r-sm)}
.lp-editorial .btn-quiet:hover{border-color:var(--le-mute);background:var(--le-surface-2)}
.lp-editorial .panel{background:var(--le-surface);border:1px solid var(--le-border);border-radius:var(--le-r-md)}