/* assets/css/home.css — Home (index.php), GUEST branch only.
   Source of truth: home-preview.html (Brutal Lite). Guests must sign up first —
   this is the landing page, not a dashboard. Signed-in users never see this
   (index.php sends them to inc/home.php's "My weekend" view instead).
   Loads together with lite.css + lite-discover.css ($head_extra in index.php). */

.hm{max-width:480px;margin:0 auto;}
.hm-body{background:var(--paper);}

/* ---------------------------------------------------------------- HERO --
   Full-bleed yellow band (the design's hero is edge-to-edge yellow behind
   the logo, photo cards, headline and CTAs), independent of .hm's centered
   480px column. */
.hm .hero{
  text-align:left;padding:20px 20px 28px;
  background:var(--yellow);
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  box-sizing:border-box;
}
.hm .hero-logo{width:36px;height:36px;display:block;}
/* v197: logo row now carries a "Sign in" pill on the right, so returning members
   never have to scroll past the sign-up buttons to find it. */
.hm .hero-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px;}
.hm .hero-signin{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
  font:700 13.5px/1 var(--font-ui);color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-pill,999px);
  text-decoration:none;}
/* reference (home-preview.html .photos/.p1/.p2/.p3): an absolutely-positioned, tilted
   overlap collage — not a plain flex row. Exact offsets/rotations/sizes copied from the
   reference's own <style> block. */
.hm .photos{position:relative;height:210px;margin-bottom:22px;}
.hm .photos img{position:absolute;width:104px;height:138px;object-fit:cover;border-radius:14px;border:var(--bd);box-shadow:none;background:var(--card-2);}
.hm .photos .p1{top:0;left:-6px;transform:rotate(-8deg);}
.hm .photos .p2{top:14px;right:-10px;left:auto;transform:rotate(7deg);}
.hm .photos .p3{top:50px;left:112px;width:92px;height:118px;transform:rotate(-3deg);z-index:2;}
/* v197: gentle staggered entrance — the photos drop/fade into place once on load.
   Off entirely under prefers-reduced-motion (see below). */
.hm .photos img{animation:hmPhotoIn .5s cubic-bezier(.2,.8,.3,1) both;}
.hm .photos .p1{animation-delay:.05s;}
.hm .photos .p2{animation-delay:.16s;}
.hm .photos .p3{animation-delay:.27s;}
@keyframes hmPhotoIn{from{opacity:0;transform:translateY(-14px) rotate(var(--rot,0deg));}to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));}}
.hm .photos .p1{--rot:-8deg;}
.hm .photos .p2{--rot:7deg;}
.hm .photos .p3{--rot:-3deg;}
@media (prefers-reduced-motion: reduce){
  .hm .photos img{animation:none;}
}
.hm .hero-title{font:800 34px/1.12 var(--font-display);letter-spacing:-.6px;color:var(--ink);margin:0 0 10px;}
.hm .hero-sub{font-size:15px;color:var(--ink-soft);font-weight:600;line-height:1.5;margin:0 0 22px;}
.hm .hero-btns{display:flex;flex-direction:column;gap:10px;}
.hm .hero .muted.small{text-align:center;}

/* --------------------------------------------------------- SECTIONS -- */
.hm .sec{margin-top:34px;padding:0 2px;}
.hm .sec-head{text-align:center;margin-bottom:18px;}
.hm .sec-head .sub{color:var(--muted);font-size:13.5px;margin-top:6px;}

/* How it works */
.hm .steps{display:flex;flex-direction:column;gap:16px;}
.hm .step{display:flex;align-items:flex-start;gap:14px;}
/* reference step-icon: calm --card-2 tile, ink icon, no border/shadow — these are plain
   steps, not a brand moment (the hero already spent this screen's one hard-shadow budget). */
.hm .step-icon{width:42px;height:42px;border-radius:12px;background:var(--card-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;position:relative;}
/* v197: small numbered badge so the three steps read as an ordered sequence */
.hm .step-num{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:var(--ink);color:#fff;font:800 10.5px/18px var(--font-ui);text-align:center;}
.hm .step-title{font:700 15px/1.3 var(--font-ui);}
.hm .step-desc{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4;}

/* ------------------------------------------------------------- POPULAR -- */
.hm .sec-head--left{text-align:left;}
.hm .sec--popular .sec-head{margin-bottom:14px;}
.hm .popular-rail{margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x proximity;scroll-padding-inline:16px;}
.hm .popular-card{flex:0 0 auto;width:132px;display:flex;flex-direction:column;gap:6px;text-decoration:none;
  color:var(--ink);scroll-snap-align:start;}
.hm .popular-card__media{position:relative;display:block;width:132px;height:132px;border-radius:var(--r-card,16px);
  overflow:hidden;border:1px solid var(--line);background:var(--card-2);}
.hm .popular-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.hm .popular-card__play{position:absolute;bottom:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;}
.hm .popular-card__title{font:700 13.5px/1.3 var(--font-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hm .popular-card__handle{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm .popular-card__handle > span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.hm .popular-card__handle img{width:18px;height:18px;flex:0 0 18px;border-radius:50%;object-fit:cover;}   /* v223: creator photo, like other cards */

/* ------------------------------------------------------------ FINAL CTA -- */
.hm .sec--cta{margin-top:30px;}
.hm .final-cta{text-align:center;padding:24px 18px;background:var(--card-2);border-radius:var(--r-card,16px);}
.hm .final-cta__t{font:800 18px/1.3 var(--font-display);margin:0 0 14px;}

/* Mini map */
.hm .map-frame{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);height:220px;}
.hm .map-frame svg{position:absolute;inset:0;width:100%;height:100%;}
.hm .map-pin{position:absolute;width:44px;height:44px;border-radius:12px;overflow:hidden;border:2.5px solid var(--ink);box-shadow:none;}
.hm .map-pin img{width:100%;height:100%;object-fit:cover;display:block;}
.hm .map-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);}

/* For creators / for business cards */
.hm .avatar-stack{display:flex;justify-content:center;margin-bottom:14px;}
.hm .avatar-stack img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:var(--card-2);margin-left:-12px;}
.hm .avatar-stack img:first-child{margin-left:0;}
.hm .feature-title{font:800 17px/1.25 var(--font-display);text-align:center;margin-bottom:8px;}
.hm .feature-desc{font-size:13.5px;color:var(--muted);text-align:center;margin:0 0 16px;line-height:1.45;}

/* Footer */
.hm .page-footer{margin-top:40px;padding:24px 4px 4px;text-align:center;border-top:1px solid var(--line);}
.hm .footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.hm .footer-links a{font:700 12.5px/1 var(--font-ui);color:var(--muted);text-decoration:none;}
.hm .footer-made{font-size:12px;color:var(--muted-2);}

/* ---------- v179: home page spacing ---------- */
/* sections below the hero: same 16px side margin as the hero (they were 2px — flush to the screen edge) */
.hm .sec{ margin-top:36px; padding:0 16px; }
.hm .sec-head{ margin-bottom:16px; }
.hm .sec-head .h2{ margin:4px 0 0; }
/* the map demo is a link (inline by default), so its 220px height was ignored, the box collapsed
   and the photo pins spilled over the creator card below */
.hm .map-frame{ display:block; height:220px; }
/* feature cards: real inner padding so the buttons don't touch the edges */
.hm .sec .card.pad{ padding:22px 18px 18px !important; border-radius:var(--r-card,18px); }
.hm .sec .card.pad .btn{ margin-top:4px; }
/* steps: icon + text with a little breathing room */
.hm .steps{ gap:18px; }
.hm .step-icon{ flex:0 0 auto; }
/* hero: the photo row reserved more height than the photos use (big empty gap under them) */
.hm .photos{ height:178px; margin-bottom:18px; }
/* footer: clear of the last card */
.hm .page-footer{ margin-top:36px; padding:22px 16px 28px; }

/* v184 — "Sign up to continue" note inside the yellow hero (guest sent from a members-only page) */
.hero-join{ display:flex; align-items:flex-start; gap:10px; margin:14px 0 18px; padding:11px 13px; background:#fff;
  border:var(--bd); border-radius:14px; text-align:left; }
.hero-join > i{ font-size:18px; margin-top:1px; color:var(--ink); }
.hero-join b{ display:block; font:800 14px/1.2 var(--font-ui); color:var(--ink); }
.hero-join span{ display:block; margin-top:3px; font-size:12.5px; line-height:1.35; color:var(--muted); }

/* ===========================================================================
   SIGNED-IN "My weekend" home (index.php's inc/home.php branch, .hp .pad).
   This dashboard was never rebuilt for Brutal Lite — it was still rendering
   on bare brutal.css (old dark-theme structural CSS): .mymapia-scoped pill
   section labels with a hard border, .mm-next/.mm-stamp/.row__addr all in
   var(--font-mono) uppercase, hard shadows on every card instead of just
   one signature element. Theme audit fix — scoped to .hp only so nothing
   else that still relies on brutal.css elsewhere is touched. Calm cards
   reuse the same 1px var(--line) border + no-shadow pattern as the rest of
   the lite system (brutal-lite.css's plain .card); the "Next up" card stays
   the one signature element (brand yellow strip + hard shadow), same rule as
   every other Brutal Lite screen. */
.hp{max-width:480px;margin:0 auto;}

/* page's own top bar (Brutal Lite pages don't get the shared <header class="nav">) */
.hp-top{display:flex;align-items:center;gap:6px;margin-bottom:16px;}
.hp-top__logo{flex:0 0 auto;display:flex;line-height:0;}
.hp-top__logo img{display:block;border-radius:8px;}
.hp-top__city{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--card-2);border:0;font:700 12.5px/1 var(--font-ui);color:var(--ink);text-decoration:none;white-space:nowrap;margin-left:8px;}
.hp-top__city i:first-child{font-size:13px;color:var(--muted);}
.hp-top__city i:last-child{font-size:11px;color:var(--muted);}
.hp-top__spacer{flex:1;}
.hp-top .icon-btn{width:40px;height:40px;background:none;color:var(--ink);font-size:18px;}
.hp-top .icon-btn:hover{background:var(--card-2);}
.hp-top__bell{position:relative;}
.hp-top__dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--pink);border:1.5px solid #fff;}

/* calm section label: plain uppercase muted text, no pill/box (matches
   lite-tools.css's body.lite .section-label used elsewhere in the app) */
.hp .section-label{display:flex;align-items:center;gap:6px;font:800 11px/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;
  background:none;border:0;box-shadow:none;padding:0;border-radius:0;}
.hp .section-label i{color:var(--muted);font-size:13px;}

/* creator stats banner */
.hp .hp-creator{display:flex;align-items:center;gap:12px;width:100%;background:#fff;
  border:1px solid var(--line);box-shadow:none;border-radius:var(--r-card);padding:14px;
  text-decoration:none;color:var(--ink);margin-bottom:18px;}
.hp .hp-creator__ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--card-2);
  border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;}
.hp .hp-creator__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.hp .hp-creator__t{font:700 13px/1.3 var(--font-ui);color:var(--muted);}
.hp .hp-creator__stats{font:700 13.5px/1.3 var(--font-ui);color:var(--ink);}
.hp .hp-creator__go{color:var(--muted-2);}

/* "Next up" — the one signature card on this screen: brand border + hard
   shadow, DM Sans everywhere instead of the old mono uppercase labels */
.hp .mm-next{display:grid;grid-template-columns:132px 1fr;background:#fff;border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden;}
.hp .mm-next__media{position:relative;min-height:150px;background:center/cover no-repeat;
  border-right:var(--bd);text-decoration:none;}
.hp .mm-next__label{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;
  font:800 10.5px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.04em;
  background:var(--yellow);border:0;border-radius:var(--r-pill);padding:4px 9px;color:var(--ink);}
.hp .mm-next__body{padding:12px 14px;display:flex;flex-direction:column;gap:5px;min-width:0;}
.hp .mm-next__when{font:800 11.5px/1 var(--font-ui);color:var(--pink);text-transform:uppercase;letter-spacing:.03em;}
.hp .mm-next__t{font:800 1.1rem/1.15 var(--font-display);color:var(--ink);text-decoration:none;}
.hp .mm-next__body .row__addr{margin-top:0;}
.hp .mm-next__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.hp .mm-stamp{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;align-items:center;
  min-width:52px;background:#fff;border:1.5px solid var(--ink);box-shadow:none;border-radius:10px;padding:5px 9px 6px;}
.hp .mm-stamp b{font:800 1.4rem/1 var(--font-display);color:var(--ink);}
.hp .mm-stamp small{font:700 .58rem/1 var(--font-ui);color:var(--muted);letter-spacing:.02em;}

/* "Saved but not visited" rows — calm list card, not a shadowed one */
.hp .mm-card{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:var(--r-card);
  padding:12px;margin-bottom:10px;}
.hp .mm-card__hd{display:flex;align-items:flex-start;gap:10px;}
.hp .mm-card__lk{display:flex;gap:12px;flex:1 1 auto;min-width:0;text-decoration:none;color:var(--ink);}
.hp .mm-thumb{width:52px;height:52px;border-radius:12px;flex:0 0 auto;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;}
.hp .mm-card__body{display:flex;flex-direction:column;min-width:0;flex:1;justify-content:center;}
.hp .mm-card__t{font:800 1rem/1.15 var(--font-display);color:var(--ink);}

/* empty states (no plan yet / nobody followed yet) */
.hp .empty.hp-empty{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:28px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:8px;}
.hp .mm-empty__ic{width:48px;height:48px;border-radius:14px;background:var(--card-2);color:var(--muted);
  border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;font-size:20px;}
.hp .empty.hp-empty b{font:700 14.5px/1.3 var(--font-ui);color:var(--ink);}
.hp .empty.hp-empty .muted{color:var(--muted);font-size:13px;}

/* addresses under creator/place names: plain UI font, not mono */
.hp .row__addr{font:600 12.5px/1.3 var(--font-ui);color:var(--muted);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.hp .row__addr i{color:var(--pink);margin-right:5px;}

/* v210 — tagline: "People helping people" notes, pinned-by card, Our promise box, footer promise */
.hm .hm-note{ display:flex; gap:12px; align-items:center; background:var(--ink); color:#fff; border-radius:14px; padding:13px 14px; margin-bottom:10px; }
.hm .hm-note > i{ font-size:22px; color:var(--yellow); flex:0 0 auto; }
.hm .hm-note b{ display:block; font:700 13.5px/1.25 var(--font-ui); }
.hm .hm-note span{ display:block; font-size:12px; opacity:.8; line-height:1.35; margin-top:2px; }
.hm .hm-pinnedby{ display:flex; align-items:center; gap:10px; margin-top:4px; color:var(--ink); text-decoration:none; }
.hm .hm-pinnedby img{ width:44px; height:44px; border-radius:12px; object-fit:cover; border:2px solid var(--ink); flex:0 0 auto; }
.hm .hm-pinnedby .t{ font:700 14px/1.2 var(--font-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm .hm-pinnedby .m{ font-size:12px; color:var(--muted); margin-top:2px; }
.hm .hm-pinnedby > div{ min-width:0; }
.hm .hm-promise__k{ display:block; margin-bottom:6px; }
.hm .hm-promise__t{ font-size:20px; margin-bottom:14px; }
.hm .hm-promise{ display:flex; flex-direction:column; gap:12px; }
.hm .hm-promise__row{ display:flex; gap:12px; align-items:flex-start; }
.hm .hm-promise__row > i{ font-size:20px; flex:0 0 auto; margin-top:1px; }
.hm .hm-promise__row b{ display:block; font:700 14.5px/1.25 var(--font-ui); color:var(--ink); }
.hm .hm-promise__row span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:2px; }
.hm .footer-promise{ text-align:center; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.45; margin:0 0 10px; }