/* ==========================================================================
   assets/css/page-business.css — Business page (place.php), guest-visible
   structure. References: lite5/business-preview.html, place-moments-preview.html,
   place-no-moments-preview.html (all three share the same shell; only the
   "Moments here" section differs between them — place-moments vs place-no-moments
   vs no place found at all here, since all 3 are driven by real data).
   Page-specific layout only — tokens/colours/radii/shadows come from
   brutal-lite.css (Appendix A). Owner: builder B1 (place.php + the PLACE
   parts of lite-place.css only — pin.php / pin parts belong to builder B3).
   ========================================================================== */

/* full-bleed cover page: no top/side page padding, like the reference's own
   .page{padding:0 0 120px;} override. */
.page.placepage{padding:0 0 120px;}

/* .cover-outer is the positioned box the cover-top icons and the overlapping
   logo-tile sit in — it must NOT clip (overflow:visible, the default), or the
   logo-tile's bottom (which deliberately sits below the photo, bottom:-26px,
   overlapping into the title block) gets its bottom edge cut flat. Only the
   PHOTO itself needs clipping to the 220px box, so that's its own inner .cover
   element instead of putting overflow:hidden on the shared outer box. */
.placepage .cover-outer{position:relative;width:100%;height:220px;}
.placepage .cover{position:absolute;inset:0;background:var(--ink);overflow:hidden;}
.placepage .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.placepage .cover-ph{position:absolute;inset:0;width:100%;height:100%;}
.placepage .cover-scrim{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32) 100%);}
.placepage .cover-top{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:16px;right:16px;display:flex;align-items:flex-start;justify-content:space-between;z-index:10;}
.placepage .cover-top .icon-btn{box-shadow:none;}
.placepage .logo-tile{position:absolute;left:16px;bottom:-26px;z-index:20;width:62px;height:62px;border-radius:16px;background:var(--yellow);
  border:var(--bd);box-shadow:none;display:flex;align-items:center;justify-content:center;color:var(--ink);font:800 20px/1 var(--font-display);overflow:hidden;}
.placepage .logo-tile img{width:100%;height:100%;object-fit:cover;}

.placepage .title-block{position:relative;background:var(--paper);padding:38px 16px 0;z-index:2;}
.placepage .biz-name{display:flex;align-items:center;gap:7px;margin:0 0 6px;flex-wrap:wrap;}
.placepage .biz-h1{font:800 22px/1.25 var(--font-display);color:var(--ink);margin:0;}
.placepage .biz-name i{color:var(--blue);font-size:16px;}
.placepage .biz-meta{font:700 12.5px/1.3 var(--font-ui);color:var(--muted);margin-bottom:8px;}
.placepage .open-line{display:flex;align-items:center;gap:6px;font:700 12.5px/1 var(--font-ui);margin-bottom:10px;flex-wrap:wrap;}
.placepage .open-line .gdot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:0 0 auto;}
.placepage .open-line .green{color:var(--teal);}
.placepage .open-line .grey{color:var(--muted);font-weight:600;}
.placepage .biz-proof{font:600 12.5px/1 var(--font-ui);color:var(--muted);margin-bottom:18px;}
.placepage .biz-proof b{color:var(--ink);font-weight:800;}

.placepage .body-pad{padding:0 16px;}

/* offer cards (reference: .offer-top/.offer-ico/.offer-title/.offer-fine — a
   calm yellow-soft card, NOT the site's old reveal/copy-code .coupon widget;
   "Get code" links out to the offer-code ticket screen someone else is
   building, per the owner). */
.placepage .offer-card{background:var(--yellow-soft);border:var(--bd);box-shadow:none;}
.placepage .offer-ico{width:34px;height:34px;border-radius:10px;background:var(--yellow);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:17px;flex:0 0 auto;}
.placepage .offer-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.placepage .offer-top:last-child{margin-bottom:0;}
.placepage .offer-title{font:800 13.5px/1.3 var(--font-display);color:var(--ink);}
.placepage .offer-fine{font:600 11px/1.2 var(--font-ui);color:var(--muted);margin-top:3px;}

.placepage .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;}
.placepage .grid2 .vcard{text-decoration:none;color:inherit;}
.placepage .grid2 .vcard__media{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--card-2);}
.placepage .grid2 .vcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.placepage .grid2 .vcard__media .scrim{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.65));}
.placepage .grid2 .vcard__media .tagline{position:absolute;left:8px;right:8px;bottom:8px;color:#fff;font:800 10px/1.25 var(--font-display);z-index:2;}
.placepage .grid2 .vcard__media .dur{position:absolute;top:7px;left:7px;}
.placepage .grid2 .vcard__creator{display:flex;align-items:center;gap:6px;margin-top:6px;}
.placepage .grid2 .vcard__creator img{width:18px;height:18px;border-radius:50%;object-fit:cover;}
.placepage .grid2 .vcard__creator span{font:700 11px/1 var(--font-ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* v224: same card spacing as profile / Explore / pin page (.vcard in lite.css + v154-ui.css):
   12px grid gap, 8px photo → creator, 13px tagline 10px in, 12px creator line */
.placepage .grid2{gap:12px !important;}
.placepage .grid2 .vcard{display:flex;flex-direction:column;gap:8px;min-width:0;}
.placepage .grid2 .vcard__media .scrim{height:55%;background:linear-gradient(transparent,rgba(0,0,0,.72));}
.placepage .grid2 .vcard__media .tagline{left:10px;right:10px;bottom:10px;font:800 13px/1.2 var(--font-display);}
.placepage .grid2 .vcard__creator{margin-top:0;min-width:0;}
.placepage .grid2 .vcard__creator span{font:500 12px/18px var(--font-ui);}

/* moments strip / empty state — scoped to this page so the sitewide shared
   versions (moment-add.php, my-moments.php, moments-all.php) are untouched. */
.placepage .moments-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:14px;}
.placepage .moments-strip::-webkit-scrollbar{display:none;}
.placepage .moment-card{flex:0 0 auto;width:140px;display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;}
.placepage .moment-card__media{position:relative;width:140px;height:140px;border-radius:16px;overflow:hidden;background:var(--card-2);}
.placepage .moment-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.placepage .moment-card__user{display:flex;align-items:center;gap:6px;padding:0 1px;}
.placepage .moment-card__user img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:var(--card-2);flex:0 0 auto;}
.placepage .moment-card__user span{font:700 11.5px/1 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.placepage .moment-card__user.anon span{color:var(--muted);}
.placepage .anon-avatar{width:18px;height:18px;border-radius:50%;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:10px;flex:0 0 auto;}
.placepage .moment-card__cap{font:600 11.5px/1.35 var(--font-ui);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.placepage .moment-card__date{font:700 10.5px/1 var(--font-ui);color:var(--muted-2);}
.placepage .add-moment-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1.5px dashed var(--line);
  border-radius:14px;background:var(--card-2);color:var(--ink);font:700 13px/1 var(--font-ui);padding:13px;min-height:44px;cursor:pointer;text-decoration:none;}
.placepage .add-moment-btn i{color:var(--blue);font-size:16px;}

/* empty-moment: reference's "no moments" / "no moments yet" brand-moment card
   (place-no-moments-preview.html — yellow-soft, ink border, no shadow). */
.placepage .empty-moment{background:var(--yellow-soft);border:var(--bd);box-shadow:none;border-radius:var(--r-card);padding:20px 16px;text-align:center;}
.placepage .empty-moment-ico{width:46px;height:46px;border-radius:12px;background:#fff;border:var(--bd);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:21px;}
.placepage .empty-moment-title{font:800 15px/1.3 var(--font-display);color:var(--ink);margin-bottom:4px;}
.placepage .empty-moment-sub{font:600 12.5px/1.4 var(--font-ui);color:var(--ink-soft);margin-bottom:14px;}

/* .map-wrap is also a generic class name in app.css/brutal.css/lite.css etc (other
   pages) — brutal.css's version adds an ink border + hard shadow this page doesn't
   want (the reference's mini-map is calm, no border/shadow), so both are reset
   explicitly here rather than relying on this rule's higher specificity alone
   (same-specificity properties this rule doesn't declare would otherwise survive). */
.placepage .map-wrap{position:relative;width:100%;height:160px;border-radius:16px;overflow:hidden;background:#f2f3f5;margin-top:16px;border:0;box-shadow:none;}
.placepage .map-wrap .map{width:100%;height:100%;}
.placepage .map-dir{position:absolute;bottom:10px;right:10px;z-index:5;}

.placepage .also-line{display:flex;align-items:center;gap:10px;}
.placepage .also-stack{display:flex;align-items:center;}
.placepage .also-stack img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-9px;}
.placepage .also-stack img:first-child{margin-left:0;}
.placepage .also-label{font:700 12.5px/1 var(--font-ui);color:var(--muted);}

.placepage .claim-card{display:flex;align-items:center;gap:12px;}
.placepage .claim-ico{width:36px;height:36px;border-radius:10px;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:17px;flex:0 0 auto;}
.placepage .claim-title{font:800 13px/1 var(--font-ui);color:var(--ink);}
.placepage .claim-sub{font:600 11.5px/1.3 var(--font-ui);color:var(--muted);margin-top:2px;}

/* ---- manager/owner-only panels (analytics, pin reorder, claim admin note) ----
   No reference exists for these (the 3 reference screens are all guest views);
   kept functional, restyled to plain Appendix A cards/lists per PAGE-BUILDER.md
   ("closest design style" + LEFT-OUT.md) rather than left in the old dark theme. */
.placepage .mgr-card{margin-bottom:16px;}
/* override brutal.css's old dark-theme ".section-label" (lime pill, mono font,
   uppercase) — this page's manager panels use a plain Appendix A label instead. */
.placepage .mgr-card .section-label{display:flex;align-items:center;gap:6px;font:800 13px/1 var(--font-ui);
  color:var(--ink);margin:0 0 12px;background:none;border:0;box-shadow:none;padding:0;border-radius:0;
  text-transform:none;letter-spacing:normal;}
.placepage .mgr-card .section-label i{color:var(--ink);}
.placepage .pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* override brutal.css's .pa-stat (ink border + hard shadow) — this page already has
   its ONE allowed hard shadow on the Plan button (rules §1.4), so these calm stat
   tiles use the plain --card-2 fill instead, no border/shadow of their own. */
.placepage .pa-stat{background:var(--card-2);border:0;box-shadow:none;border-radius:var(--r-ctl);padding:10px 12px;}
.placepage .pa-stat__n{display:block;font:800 18px/1 var(--font-display);color:var(--ink);}
.placepage .pa-stat__l{display:flex;align-items:center;gap:5px;margin-top:4px;font:600 11px/1 var(--font-ui);color:var(--muted);}
.placepage .pa-table-wrap{overflow-x:auto;margin-top:14px;}
.placepage .pa-table{width:100%;border-collapse:collapse;font:600 12px/1.3 var(--font-ui);}
.placepage .pa-table th{text-align:left;color:var(--muted);font-weight:700;padding:6px 8px;white-space:nowrap;}
.placepage .pa-table td{padding:6px 8px;border-top:1px solid var(--line);white-space:nowrap;}
.placepage .pa-pro{background:var(--yellow);border:1.5px solid var(--ink);border-radius:999px;font:800 9px/1 var(--font-ui);padding:2px 6px;margin-left:6px;}
.placepage .mgr-reorder-note{font:600 11.5px/1 var(--font-ui);color:var(--muted);}

/* v207: owner photo gallery (3-up grid + "+N" tile) and the "Photos by the business" caption. */
.placepage .photo-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.placepage .photo-grid3 a{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--card-2);}
.placepage .photo-grid3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.placepage .photo-grid3 .more-tile{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,21,24,.55);color:#fff;font:800 18px/1 var(--font-display);}
.placepage .photos-caption{margin-top:8px;font:600 11.5px/1 var(--font-ui);color:var(--muted);}

/* v207: WhatsApp button next to Directions/Call in the plan-bar. */
.placepage .plan-bar .icon-btn--wa{color:#25D366;}

/* v207: expandable per-day hours list under the "Hours" row. */
.placepage .hours-day-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font:600 13px/1 var(--font-ui);color:var(--muted);}
.placepage .hours-day-row.today{color:var(--ink);font-weight:800;}
.placepage .hours-day-row .hd-name{flex:0 0 auto;}