/* PeaMio Rentals — shared stylesheet. Mobile-first, system fonts, no JS.
   v3 redesign: magazine layout (GOOD hero + Editors' Choice on the hub,
   MyPage listings feed + sidebar on city pages, minimalist white blog on guides).
   v5 beautification (mobile): the phone layout is a magazine/app feed —
   soft page background with white cards, deeper shadows, taller imagery,
   bigger prices, solid-green claim buttons, pill nav, green section rules.
   Desktop rules in the min-width:640px / min-width:960px blocks are
   UNCHANGED; every mobile-only base change is restored for desktop in the
   "Desktop restores (v5)" block after them. */
:root{
  --ink:#1f2937; --muted:#5b6470; --line:#dfe5e9; --bg:#ffffff;
  --accent:#146c43; --accent-soft:#e8f5ee; --accent-ink:#0d4d2f;
  --warn-bg:#fff7e6; --warn-line:#e8b93e;
  --landlord-bg:#eef4ff; --landlord-line:#7aa5e8; --code-bg:#f4f6f8;
  --card-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --page-bg:#f2f4f3;
  --shadow-lg:0 10px 28px rgba(16,24,40,.12),0 3px 10px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page-bg);color:var(--ink);overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65}
main{max-width:1120px;margin:0 auto;padding:0 16px 48px}
a{color:var(--accent);text-decoration:underline}
a:hover{text-decoration:none}
h1{font-size:1.65rem;line-height:1.25;margin:.6em 0 .4em}
h2{font-size:1.35rem;line-height:1.3;margin:2.2em 0 .7em;border-top:0;padding-top:0}
h2:first-of-type{border-top:0}
main>h2::after,.feed-main>h2::after{content:"";display:block;width:46px;height:3px;
  background:var(--accent);border-radius:2px;margin-top:10px}
h3{font-size:1.08rem;margin:1.2em 0 .35em}
p{margin:.55em 0}
ul,ol{margin:.5em 0;padding-left:1.3em}
li{margin:.3em 0}
small,.fine{color:var(--muted);font-size:.85rem}
img{max-width:100%}
header.site{border-bottom:3px solid var(--accent);background:#fff;box-shadow:0 1px 8px rgba(16,24,40,.08)}
header.site .wrap{max-width:1120px;margin:0 auto;padding:12px 16px}
header.site a.brand{color:var(--ink);font-weight:700;font-size:1.28rem;text-decoration:none}
header.site a.brand span{color:var(--accent)}
nav.crumbs{font-size:.85rem;color:var(--muted);margin:14px 0 0}
nav.crumbs a{color:var(--muted)}
nav.main{max-width:1120px;margin:0 auto;padding:12px 16px 16px;font-size:.92rem}
nav.main a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:7px 13px;margin:0 6px 8px 0;white-space:nowrap;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.9rem}
nav.main a.lang{float:none;margin-right:0}
footer.site{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;background:#fff}
footer.site .wrap{max-width:1120px;margin:0 auto;padding:20px 16px 32px}
.answer{background:var(--accent-soft);border:1px solid #bcdcc8;border-left:4px solid var(--accent);
  border-radius:14px;padding:16px 18px;margin:16px 0;box-shadow:var(--shadow-lg)}
.answer p{margin:.35em 0}
.answer strong{font-size:1.02rem}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid var(--warn-line);
  border-radius:14px;padding:16px 18px;margin:16px 0;box-shadow:var(--shadow-lg)}
.landlord{background:linear-gradient(135deg,#eef4ff 0%,#e8f5ee 100%);border:1px solid var(--landlord-line);
  border-radius:16px;padding:24px 20px;margin:32px 0;box-shadow:var(--shadow-lg)}
.landlord h2{border:0;padding:0;margin:0 0 .4em;font-size:1.2rem}
.landlord p{margin:.4em 0}
.btn{display:block;background:var(--accent);color:#fff;text-decoration:none;text-align:center;
  padding:13px 20px;border-radius:10px;font-weight:600;margin-top:8px}
.btn:hover{opacity:.9}
.table-wrap{overflow-x:visible;margin:12px 0;border:0;border-radius:0;box-shadow:none}
table{display:block;width:100%;font-size:1rem;min-width:0;border-collapse:separate}
table tr:first-child{display:none}
table tbody{display:block}
table tbody tr:nth-child(even){background:#fff}
table tr{display:block;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;padding:14px 16px;margin:0 0 12px;background:#fff;box-shadow:var(--shadow-lg)}
table td{display:block;border:0;padding:2px 0}
table td:first-child{font-weight:700;font-size:1.12rem}
table td.price{display:inline-block;margin-right:12px;font-size:1.2rem}
table td:last-child{color:var(--muted);font-size:.92rem}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr:nth-child(even){background:#f8fafb}
tr:last-child td{border-bottom:0}
td.price{white-space:nowrap;font-weight:700;color:var(--accent-ink)}
.claim{font-size:.82rem;white-space:nowrap}
.phrase{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;margin:8px 0;background:#fff;box-shadow:var(--card-shadow)}
.phrase .en{flex:1;font-size:1.05rem;font-weight:600}
.phrase .vi{flex:1;color:#374151;border-top:1px dashed #eef1f3;padding-top:9px}
.phrase b{display:block;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
details{border:1px solid var(--line);border-radius:14px;margin:8px 0;padding:14px 18px;background:#fff;box-shadow:var(--card-shadow)}
details[open]{background:#fbfdfc;border-color:#bcdcc8}
summary{font-weight:600;cursor:pointer}
summary:hover{color:var(--accent)}
details p{margin:.5em 0 0}
.disclaimer{background:var(--code-bg);border-radius:14px;padding:12px 14px;font-size:.85rem;color:var(--muted);margin:24px 0}
.citygrid{display:grid;gap:14px;margin:16px 0}
.citygrid a{display:block;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);overflow:hidden;background:#fff;box-shadow:var(--card-shadow)}
.citygrid a:hover{border-color:var(--accent)}
.citygrid a img{display:block;width:100%;height:150px;object-fit:cover}
.citygrid b{display:block;font-size:1.05rem;padding:12px 14px 2px}
.citygrid span{display:block;color:var(--muted);font-size:.9rem;padding:0 14px 14px}

/* ---- Hero ---- */
.hero{margin:0 calc(50% - 50vw) 8px;width:100vw;position:relative}
.hero-img{position:relative}
.hero-img img{display:block;width:100%;height:340px;object-fit:cover}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:84px 0 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.hero-text .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.hero-text h1{color:#fff;margin:0 0 .3em;font-size:1.9rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-sub{margin:0;color:#e8f5ee;font-size:1.05rem;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hero figcaption{font-size:.8rem;color:var(--muted);padding:6px 16px 0;max-width:1120px;margin:0 auto}

/* ---- Generic figure (e.g. keys on the how-to page) ---- */
.figure{margin:20px 0}
.figure img{display:block;width:100%;height:260px;object-fit:cover;border-radius:16px}
.figure figcaption{font-size:.8rem;color:var(--muted);padding-top:6px}

/* ---- Listing cards ---- */
.cards{display:grid;gap:16px;margin:16px 0}
.lcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.lcard-img{position:relative}
.lcard-img img{display:block;width:100%;height:210px;object-fit:cover}
.imgtag{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.62);color:#fff;
  font-size:.72rem;padding:3px 8px;border-radius:20px;letter-spacing:.02em}
.lcard-body{padding:16px 18px 18px}
.lcard-body h3{margin:0 0 .2em;font-size:1.05rem;line-height:1.35}
.lcard-price{font-size:1.4rem;font-weight:700;color:var(--accent-ink);margin:.15em 0 .5em}
.lcard-price span{font-size:.85rem;font-weight:400;color:var(--muted)}
.lcard-meta{list-style:none;margin:0 0 .6em;padding:0;font-size:.92rem}
.lcard-meta li{display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed #eef1f3}
.lcard-meta li:last-child{border-bottom:0}
.lcard-meta li span{flex:0 0 92px;color:var(--muted);font-size:.85rem}
.lcard-claim{margin:.6em 0 0}
/* Claim links are a solid green full-width button on a phone (base rule,
   so WeasyPrint can verify it — a max-width media query is not applied by
   WeasyPrint in this setup). Restored to a plain text link on desktop. */
.lcard-claim a,.lrow-claim a{display:block;min-height:48px;line-height:48px;padding:0 18px;background:var(--accent);color:#fff;font-weight:700;font-size:1rem;border-radius:10px;text-decoration:none;text-align:center;border:0}
.lcard-claim a:active,.lrow-claim a:active{opacity:.85}

/* ---- Best-area cards ---- */
.areas{display:grid;gap:20px;margin:16px 0}
.acard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.acard img{display:block;width:100%;height:190px;object-fit:cover}
.acard-body{padding:16px 18px 18px}
.acard-body h3{margin:0 0 .15em;font-size:1.1rem}
.acard-tag{margin:0 0 .4em;font-size:.92rem;font-weight:600;color:var(--accent)}
.acard-body p:last-child{margin-bottom:0}

/* ---- Numbered steps ---- */
ol.steps{list-style:none;counter-reset:step;margin:16px 0;padding:0}
ol.steps>li{counter-increment:step;position:relative;padding:2px 0 16px 58px;margin:0}
ol.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center}
ol.steps>li:not(:last-child)::after{content:"";position:absolute;left:19px;top:44px;bottom:2px;width:2px;background:#cfe6d8}

/* ---- GOOD magazine hero (hub): 3 large images, title overlaid ---- */
.mag-hero{display:grid;gap:16px;margin:20px 0}
.mag-hero-item{position:relative;display:block;border-radius:14px;overflow:hidden;
  text-decoration:none;box-shadow:var(--shadow-lg)}
.mag-hero-item img{display:block;width:100%;height:250px;object-fit:cover}
.mag-hero-chip{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;
  font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.02em}
.mag-hero-cap{position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff}
.mag-hero-cap b{display:block;font-size:1.5rem;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mag-hero-cap i{display:block;font-style:normal;font-size:.92rem;color:#d8f3e3;margin-top:2px;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
.mag-hero-item:hover .mag-hero-cap b{text-decoration:underline}

/* ---- Editors' Choice row (hub): 4 small cards ---- */
.editors{display:grid;gap:18px;margin:16px 0}
.editors a{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--ink);background:#fff;box-shadow:var(--shadow-lg)}
.editors a:hover{border-color:var(--accent)}
.editors a img{display:block;width:100%;height:140px;object-fit:cover}
.editors b{display:block;font-size:1.05rem;padding:12px 14px 2px;line-height:1.35}
.editors span{display:block;color:var(--muted);font-size:.88rem;padding:0 14px 14px;line-height:1.5}

/* ---- Listings feed + sidebar (city pages, MyPage style) ---- */
.feed-layout{display:grid;gap:32px;margin:16px 0}
.feed-main{min-width:0}
.feed-featured{display:grid;gap:20px;margin:16px 0}
.feed-featured .lcard-img img{height:240px}
.feed-list{display:grid;gap:20px;margin:16px 0}
.lrow{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow-lg);scroll-margin-top:12px}
.lrow-img{flex:none;width:100%;height:200px;min-height:0;position:relative}
.lrow-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lrow-img .imgtag{left:8px;bottom:8px;font-size:.68rem}
.lrow-body{padding:16px 18px 18px;min-width:0;flex:1}
.lrow-body h3{margin:0 0 .15em;font-size:1.02rem;line-height:1.35}
.lrow-price{font-size:1.35rem;font-weight:700;color:var(--accent-ink);margin:.1em 0 .35em}
.lrow-price span{font-size:.85rem;font-weight:400;color:var(--muted)}
.lrow-meta{margin:.1em 0 .35em;font-size:.95rem;color:#374151}
.lrow-src{margin:.1em 0 .4em;font-size:.85rem;color:var(--muted)}
.lrow-claim{margin:.4em 0 0;font-size:.92rem}
.sidebar{min-width:0}
.sidebox{border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 16px;
  background:#fff;box-shadow:var(--shadow-lg)}
.sidebox h3{margin:0 0 .5em;font-size:1.05rem;color:var(--accent-ink)}
.sidebox ul{list-style:none;margin:0;padding:0}
.sidebox li{padding:8px 0;border-bottom:1px dashed #eef1f3;font-size:.93rem}
.sidebox li:last-child{border-bottom:0}
.sidebox li a{text-decoration:none}
.sidebox li a:hover{text-decoration:underline}
.sidebox .count{float:right;color:var(--accent-ink);font-size:.85rem;font-weight:600;background:var(--accent-soft);border-radius:12px;padding:2px 9px}
.sidebox p{font-size:.92rem}
.side-mini{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed #eef1f3;
  text-decoration:none;color:var(--ink)}
.side-mini:last-child{border-bottom:0}
.side-mini img{flex:0 0 72px;width:72px;height:72px;object-fit:cover;border-radius:10px}
.side-mini b{display:block;font-size:.95rem;line-height:1.3;font-weight:600}
.side-mini .side-price{color:var(--accent-ink);font-weight:700;font-size:.9rem}

/* ---- Minimalist white blog (guide pages) ---- */
main.guide{max-width:760px}
main.guide h2{margin-top:2.6em}
main.guide p{line-height:1.8}
main.guide li{margin:.45em 0}
main.guide .figure img{height:300px}
main.guide .phrase{padding:16px 18px;margin:12px 0}
main.guide details{padding:16px 18px;margin:12px 0}
main.guide .answer,main.guide .warn{padding:18px 20px;margin:24px 0}

@media (min-width:640px){
  h1{font-size:2rem}
  .hero-img img{height:400px}
  .hero-text h1{font-size:2.3rem}
  .hero-sub{font-size:1.1rem}
  .citygrid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .areas{grid-template-columns:1fr 1fr}
  .phrase{font-size:1rem;flex-direction:row;gap:12px;align-items:baseline}
  .figure img{height:340px}
  .mag-hero{grid-template-columns:repeat(3,1fr)}
  .mag-hero-item img{height:260px}
  .editors{grid-template-columns:1fr 1fr}
  .feed-featured{grid-template-columns:1fr 1fr}
  .lrow{flex-direction:row}
  .lrow-img{flex:0 0 200px;width:auto;height:auto;min-height:160px}
  .lrow-body{padding:12px 14px 14px}
  .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-shadow)}
  table{display:table;border-collapse:collapse;font-size:.9rem;min-width:560px}
  table tr:first-child{display:table-row}
  table tbody{display:table-row-group}
  table tbody tr:nth-child(even){background:#f8fafb}
  table tr{display:table-row;border:0;border-radius:0;padding:0;margin:0;background:transparent;box-shadow:none}
  table td{display:table-cell;border-bottom:1px solid var(--line);padding:10px 12px}
  table td:first-child{font-weight:400;font-size:.9rem}
  table td.price{display:table-cell;margin-right:0}
  table td:last-child{color:inherit;font-size:.9rem}
  main.guide .figure img{height:380px}
}
@media (min-width:960px){
  .citygrid{grid-template-columns:repeat(3,1fr)}
  .citygrid a img{height:160px}
  .editors{grid-template-columns:repeat(4,1fr)}
  .feed-layout{grid-template-columns:minmax(0,1fr) 300px}
}

/* ---- Desktop restores for the mobile beautification (v5) ----
   Every base (mobile-first) value changed above is restored here to its
   exact pre-v5 desktop value, so the desktop layout is byte-identical in
   appearance. This block is a NEW @media block; the two blocks above are
   untouched. Properties already restored by those two blocks (e.g.
   .lrow-img height:auto, .lrow-body padding, table tr, .hero-img 400px,
   .hero-text h1 2.3rem, .hero-sub 1.1rem, .mag-hero-item img 260px,
   .phrase row layout) are NOT repeated here. */
@media (min-width:640px){
  body{background:var(--bg)}
  h2{font-size:1.3rem;margin:1.9em 0 .6em;border-top:2px solid var(--line);padding-top:.9em}
  main>h2::after,.feed-main>h2::after{display:none}
  header.site{box-shadow:none}
  header.site a.brand{font-size:1.15rem}
  nav.main{padding:8px 16px 12px}
  nav.main a{display:inline;background:transparent;border:0;border-radius:0;padding:0;margin:0 14px 0 0;text-decoration:underline;color:var(--accent);font-weight:400;font-size:.92rem}
  nav.main a.lang{float:right}
  .answer{padding:14px 16px;border-radius:10px;box-shadow:none}
  .warn{padding:14px 16px;border-radius:10px;box-shadow:none}
  .landlord{padding:20px;border-radius:12px;box-shadow:var(--card-shadow)}
  .btn{display:inline-block;padding:11px 20px;border-radius:8px;text-align:left}
  .disclaimer{border-radius:10px}
  details{border-radius:10px;padding:12px 16px;box-shadow:none}
  table td.price{font-size:.9rem}
  .phrase{border-radius:10px;padding:12px 14px;border-left:1px solid var(--line);box-shadow:none}
  .phrase .en{font-size:1rem;font-weight:400}
  .phrase .vi{border-top:0;padding-top:0}
  .figure img{border-radius:12px}
  .hero-text{padding:64px 0 18px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
  .lcard{border-radius:12px;box-shadow:var(--card-shadow)}
  .lcard-img img{height:190px}
  .lcard-body{padding:14px 16px 16px}
  .lcard-price{font-size:1.25rem}
  .lcard-meta li{padding:3px 0}
  .feed-featured .lcard-img img{height:220px}
  .feed-featured{gap:16px}
  .feed-list{gap:12px}
  .feed-layout{gap:24px}
  .lrow{border-radius:12px;box-shadow:var(--card-shadow)}
  .lrow-price{font-size:1.2rem}
  .lrow-meta{font-size:.9rem}
  .lcard-claim a,.lrow-claim a{display:inline;min-height:0;line-height:inherit;padding:0;background:transparent;color:var(--accent);font-weight:600;font-size:inherit;border-radius:0;text-decoration:underline;text-align:left;border:0}
  .acard{border-radius:12px;box-shadow:var(--card-shadow)}
  .acard img{height:170px}
  .acard-body{padding:14px 16px 16px}
  .acard-tag{font-size:.88rem}
  .areas{gap:16px}
  .mag-hero{gap:10px}
  .mag-hero-cap{padding:56px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.82))}
  .mag-hero-cap b{font-size:1.3rem}
  .editors{gap:14px}
  .editors a{border-radius:12px;box-shadow:var(--card-shadow)}
  .editors a img{height:120px}
  .editors b{font-size:1rem}
  .sidebox{border-radius:12px;padding:16px 18px;box-shadow:var(--card-shadow)}
  .sidebox h3{font-size:1rem;color:var(--ink)}
  .sidebox li{padding:6px 0}
  .sidebox .count{background:transparent;color:var(--muted);border-radius:0;padding:0;font-weight:400}
  .side-mini img{flex:0 0 64px;width:64px;height:64px;border-radius:8px}
  .side-mini b{font-size:.92rem}
  ol.steps>li{padding:2px 0 14px 52px}
  ol.steps>li::before{width:36px;height:36px;font-size:1rem}
  ol.steps>li:not(:last-child)::after{left:17px;top:40px}
}

/* ---- Phone-only rules ----
   There is no @media (max-width:639px) block any more: WeasyPrint does not
   apply max-width media queries in this setup (verified with a minimal test
   page), so every phone-only rule lives in the base (mobile-first) CSS
   above — the solid-green claim button and the wrapping nav pills — with
   its desktop appearance restored in the min-width:640px block. On a real
   browser the result is identical to a max-width block. */

/* ---- v7 Booking-style additions (rentals-v3) ----
   Mobile-first: base rules are the phone layout; desktop restores live in
   the @media (min-width:640px) / (min-width:960px) blocks at the end of
   this section, following the existing v5 pattern. All v6 classes are
   untouched above, so .lcard/.lrow, claim buttons, price tables, .phrase,
   FAQ <details>, .sidebar/.sidebox, .landlord, .hero, .steps etc. work
   exactly as before. New classes:
   .site-header/.site-nav  consistent header (brand + Home/Cities/Types/Guides)
   .hero-search/.search-bar/.search-field/.search-btn  hero + search form
   .city-grid/.city-card/.city-card-cap  large city image cards (6 cities)
   .type-grid/.type-card  small image cards (5 property types)
   .need-grid/.need-card  small cards (4 needs; img optional)
   .featured-grid  featured listings, reuses .lcard
   .dir-footer/.dir-cols/.dir-col  directory footer (link columns, no images)
   .site-footer  outer footer wrapper
   .landlord-block  same gradient block as .landlord (either class works)
   .guide-grid/.guide-card/.guide-card-body/.guide-more  guides index cards
   .section-intro  muted intro paragraph under a section heading */

/* ---- Consistent site header ---- */
.site-header{background:#fff;border-bottom:3px solid var(--accent);box-shadow:0 1px 8px rgba(16,24,40,.08)}
.site-header .wrap{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.site-header a.brand{color:var(--ink);font-weight:700;font-size:1.28rem;text-decoration:none;white-space:nowrap}
.site-header a.brand span{color:var(--accent)}
.site-nav{display:flex;flex-wrap:wrap;gap:2px 4px;margin-left:auto}
.site-nav a{display:inline-block;padding:8px 12px;border-radius:20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.site-nav a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.site-nav a.lang{color:var(--accent)}

/* ---- Hero search (main page) ---- */
.hero-search{margin:0 calc(50% - 50vw) 24px;width:100vw;color:#fff;padding:36px 0 32px;
  background:linear-gradient(135deg,#0d4d2f 0%,#146c43 70%,#1a7a4c 100%)}
.hero-search .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.hero-search h1{color:#fff;margin:0 0 .3em;font-size:1.9rem;line-height:1.2}
.hero-search p.lead{margin:0 0 20px;color:#d8f3e3;font-size:1.05rem;line-height:1.5}
.search-bar{display:grid;gap:10px;background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow-lg)}
.search-field{min-width:0}
.search-bar label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.search-bar select,.search-bar input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:1rem;color:var(--ink);background:#fff}
.search-bar select:focus,.search-bar input:focus{outline:2px solid var(--accent);outline-offset:1px}
.search-btn{display:block;width:100%;padding:13px 20px;background:var(--accent);color:#fff;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;text-align:center;text-decoration:none}
.search-btn:hover{opacity:.92}

/* ---- City cards (large image cards) ---- */
.city-grid{display:grid;gap:16px;margin:16px 0}
.city-card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:var(--shadow-lg)}
.city-card img{display:block;width:100%;height:220px;object-fit:cover}
.city-card-cap{position:absolute;left:0;right:0;bottom:0;padding:56px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.city-card-cap b{display:block;font-size:1.25rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.city-card-cap span{display:block;font-size:.92rem;color:#d8f3e3}
.city-card:hover .city-card-cap b{text-decoration:underline}

/* ---- Type / need cards (small cards) ---- */
.type-grid,.need-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.type-card,.need-card{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;box-shadow:var(--card-shadow)}
.type-card:hover,.need-card:hover{border-color:var(--accent)}
.type-card img,.need-card img{display:block;width:100%;height:110px;object-fit:cover}
.type-card b,.need-card b{display:block;font-size:1rem;padding:10px 12px 2px;line-height:1.35}
.type-card span,.need-card span{display:block;color:var(--muted);font-size:.85rem;padding:0 12px 12px;line-height:1.5}
/* Need cards may have no photo: the coloured band below replaces the image. */
.need-icon{display:flex;align-items:center;justify-content:center;height:110px;background:var(--accent-soft);color:var(--accent-ink);font-size:1.05rem;font-weight:700}

/* ---- Featured listings (reuses .lcard) ---- */
.featured-grid{display:grid;gap:16px;margin:16px 0}
.featured-grid .lcard-img img{height:210px}

/* ---- Directory footer (link columns, no images) ---- */
.site-footer{background:#fff;color:var(--muted);font-size:.85rem}
.dir-footer{background:#fff;border-top:1px solid var(--line);margin-top:32px}
.dir-footer .wrap{max-width:1120px;margin:0 auto;padding:28px 16px 32px}
.dir-cols{display:grid;gap:24px}
.dir-col h3{margin:0 0 .6em;font-size:1rem;color:var(--ink)}
.dir-col ul{list-style:none;margin:0;padding:0}
.dir-col li{margin:0;padding:5px 0;font-size:.93rem}
.dir-col a{text-decoration:none}
.dir-col a:hover{text-decoration:underline}
.dir-col .count{color:var(--muted);font-size:.85rem}
.dir-footer .fine{margin-top:24px}

/* ---- Landlord block (alias of .landlord; either class works) ---- */
.landlord-block{background:linear-gradient(135deg,#eef4ff 0%,#e8f5ee 100%);border:1px solid var(--landlord-line);
  border-radius:16px;padding:24px 20px;margin:32px 0;box-shadow:var(--shadow-lg)}
.landlord-block h2{border:0;padding:0;margin:0 0 .4em;font-size:1.2rem}
.landlord-block p{margin:.4em 0}

/* ---- Guides index cards ---- */
.guide-grid{display:grid;gap:16px;margin:16px 0}
.guide-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;box-shadow:var(--shadow-lg)}
.guide-card:hover{border-color:var(--accent)}
.guide-card img{display:block;width:100%;height:180px;object-fit:cover}
.guide-card-body{padding:16px 18px 18px}
.guide-card-body h3{margin:0 0 .3em;font-size:1.15rem;line-height:1.35}
.guide-card-body p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.guide-card-body .guide-more{display:block;margin-top:10px;font-weight:700;color:var(--accent)}

/* ---- Section intro ---- */
.section-intro{color:var(--muted);font-size:1.05rem;max-width:760px;line-height:1.6}

@media (min-width:640px){
  .site-header .wrap{flex-wrap:nowrap}
  .hero-search h1{font-size:2.3rem}
  .hero-search p.lead{font-size:1.1rem}
  .search-bar{grid-template-columns:1.4fr 1fr 1fr .8fr auto;align-items:end}
  .search-btn{width:auto;min-width:140px}
  .city-grid{grid-template-columns:1fr 1fr}
  .city-card img{height:240px}
  .type-grid,.need-grid{grid-template-columns:repeat(3,1fr)}
  .featured-grid{grid-template-columns:1fr 1fr}
  .dir-cols{grid-template-columns:1fr 1fr}
  .guide-grid{grid-template-columns:1fr 1fr}
  .landlord-block{padding:20px;border-radius:12px;box-shadow:var(--card-shadow)}
}
@media (min-width:960px){
  .city-grid{grid-template-columns:repeat(3,1fr)}
  .type-grid{grid-template-columns:repeat(5,1fr)}
  .need-grid{grid-template-columns:repeat(4,1fr)}
  .featured-grid{grid-template-columns:repeat(3,1fr)}
  .dir-cols{grid-template-columns:repeat(4,1fr)}
  .guide-grid{grid-template-columns:repeat(3,1fr)}
}

/* Claim badge (v1, 2026-11-11) — rendered by /rentals/claim-badge.js when a
   listing has an approved owner. Append this block to rentals-v3/style.css
   (the update_claim_links.py script does it automatically).
   The chat link (<a class="claimed-chat">) is styled by the existing
   .lcard-claim a / .lrow-claim a rules (green button on desktop, inline link
   on mobile), so it needs no rule of its own. */
.claimed-badge{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:.85rem;border-radius:20px;padding:4px 12px;margin:0 0 6px}
.claimed-owner{display:block;font-size:.92rem;color:var(--muted);margin:0 0 8px}
.claimed-rented{display:block;font-weight:700;color:var(--accent-ink);margin:0 0 4px}