/* ═══════════════════════════════════════════════════════════════
   AREA PAGES — V2 app-style layout (reference mockup)
   Top app bar, hero overlay + facts strip, colored stat icons,
   numbered price rows, center-pill bottom nav.
   Loads after area-mobile.css; mobile-scoped like v1.
   ═══════════════════════════════════════════════════════════════ */
.area-page{
  --am-green:#2E9E6B;
  --am-blue:#4A85C4;
  --am-purple:#8E6BC8;
  --am-appbar-h:60px;
}
.area-page .am-appbar{display:none}

@media (max-width:859.98px){

  /* ── app bar replaces the site header on mobile ── */
  .area-page .site-head{display:none}
  .area-page .am-appbar{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:80;
    min-height:var(--am-appbar-h);
    padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 8px;
    background:rgba(245,240,230,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  .area-page .am-back{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:14px;
    background:var(--brand-gold);color:#fff;
    box-shadow:0 4px 14px rgba(200,149,62,.35);
  }
  .area-page .am-back .am-ico{width:20px;height:20px}
  .area-page .am-appbar-title{
    flex:1;font-size:24px;font-weight:800;color:var(--brand-brown);
    margin:0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .area-page .am-appbar .am-share{
    position:static;width:44px;height:44px;border-radius:14px;
    background:var(--surface-w);border:1px solid var(--border-soft);
    color:var(--brand-brown);box-shadow:none;display:flex;
  }

  /* ── hero v2: overlay name + facts strip on the photo ── */
  .area-page .hero .area-photo{border-radius:22px;overflow:hidden}
  .area-page .hero .area-photo img{border-radius:22px;aspect-ratio:4/4.2;max-height:68vh}
  .area-page .hero .area-photo::after{
    border-radius:22px;
    background:linear-gradient(180deg,rgba(23,19,15,.45),rgba(23,19,15,.08) 40%,transparent 56%,rgba(23,19,15,.58) 86%);
  }
  .area-page .am-hero-loc{
    position:absolute;z-index:2;inset-block-start:14px;inset-inline-start:14px;
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(23,19,15,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    color:#fff;font-size:12.5px;font-weight:600;
    border-radius:999px;padding:7px 13px;
  }
  .area-page .am-hero-loc .am-ico{width:14px;height:14px}
  .area-page .am-hero-name{
    position:absolute;z-index:2;inset-inline:16px;inset-block-start:54px;
    color:#fff;font-size:30px;font-weight:800;line-height:1.3;
    text-shadow:0 2px 14px rgba(23,19,15,.5);text-align:start;margin:0;
  }
  .area-page .am-hero-strip{
    position:absolute;z-index:2;inset-inline:0;inset-block-end:0;
    display:flex;justify-content:space-around;gap:4px;
    background:linear-gradient(180deg,rgba(64,44,26,.55),rgba(42,26,18,.74));
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    padding:13px 8px;
  }
  .area-page .am-hero-strip .am-hs{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
    color:#fff;text-align:center;min-width:0;
  }
  .area-page .am-hero-strip .am-hs .am-ico{width:20px;height:20px;color:var(--brand-gold-light)}
  .area-page .am-hero-strip .am-hs b{font-size:12px;font-weight:700;line-height:1.35}
  /* the long SEO h1 stays for search engines & AT; the overlay name replaces it visually */
  .area-page.am-has-hero .hero h1{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;
  }
  .area-page.am-has-hero .hero .badge{margin-top:16px}
  .area-page.am-has-hero .am-chips{display:none} /* strip already carries the highlights */
  .area-page .am-share{inset-block-start:auto} /* figure share moved to the app bar */
  .area-page .hero .area-photo .am-share{display:none}

  /* intro becomes a white card like the mockup */
  .area-page .am-lead{
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:20px;box-shadow:0 4px 16px rgba(42,26,18,.05);
    padding:18px;margin-top:14px;
  }

  /* ── stat cards v2: colored circular icons, start-aligned ── */
  .area-page .card.stat{text-align:start;display:flex;align-items:center;gap:12px}
  .area-page .card.stat .am-si{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:999px;color:#fff;
  }
  .area-page .card.stat .am-si .am-ico{width:20px;height:20px}
  .area-page .am-si-gold{background:var(--brand-gold)}
  .area-page .am-si-green{background:var(--am-green)}
  .area-page .am-si-blue{background:var(--am-blue)}
  .area-page .am-si-purple{background:var(--am-purple)}
  .area-page .am-si-brown{background:var(--brand-brown-medium)}
  .area-page .card.stat .am-sbody{min-width:0;flex:1}
  .area-page .card.stat .v{font-size:21px}
  .area-page .card.stat .l{margin-top:3px;font-size:12px}

  /* ── section heading with a short gold underline ── */
  .area-page h2{position:relative;padding-bottom:10px}
  .area-page h2::after{
    content:"";position:absolute;inset-inline-start:0;inset-block-end:0;
    width:56px;height:3px;border-radius:99px;
    background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-light));
  }

  /* ── why-cards v2: colored icon circles, compact & centered ── */
  .area-page .grid.g3>.card{text-align:center;padding:16px 14px}
  .area-page .grid.g3>.card h3{flex-direction:column;gap:10px;font-size:14.5px;justify-content:center;align-items:center}
  .area-page .grid.g3>.card h3::before{display:none}
  .area-page .am-wi{
    display:flex;align-items:center;justify-content:center;margin-inline:auto;
    width:46px;height:46px;border-radius:999px;color:#fff;
  }
  .area-page .am-wi .am-ico{width:21px;height:21px}
  .area-page .grid.g3>.card p{
    font-size:13px !important;line-height:1.7;margin-top:6px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* ── price rows v2: numbered gold circles + delta pills ── */
  .area-page .tbl tbody{counter-reset:am-row}
  .area-page .tbl tr{position:relative;padding-inline-start:52px}
  .area-page .tbl tr::before{
    counter-increment:am-row;content:counter(am-row);
    position:absolute;inset-inline-start:14px;inset-block-start:50%;translate:0 -50%;
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:999px;
    background:var(--brand-gold);color:#fff;font-size:12.5px;font-weight:800;
    font-family:var(--font-data),monospace;
  }
  .area-page .tbl td.up{
    background:rgba(46,158,107,.12) !important;color:var(--am-green);
    border-radius:999px;padding:3px 10px;font-size:12px;
  }
  .area-page .tbl td.down{
    background:rgba(174,65,65,.12) !important;color:#ae4141;
    border-radius:999px;padding:3px 10px;font-size:12px;
  }

  /* ── bottom nav v2: center pill item + button support ── */
  .area-page .am-bottom-nav{align-items:stretch}
  .area-page .am-bottom-nav a,.area-page .am-bottom-nav button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:44px;color:var(--text-secondary);font-size:11px;font-weight:600;
    background:none;border:0;cursor:pointer;font-family:inherit;padding:0;
  }
  .area-page .am-bottom-nav button:focus-visible{outline:3px solid var(--brand-gold-light);outline-offset:-3px}
  .area-page .am-bottom-nav .am-center .am-ico{
    box-sizing:content-box;width:22px;height:22px;padding:11px;
    margin-top:-26px;border-radius:999px;
    background:var(--brand-gold);color:#fff;
    box-shadow:0 6px 18px rgba(200,149,62,.45),0 0 0 5px var(--brand-cream);
  }
  .area-page .am-bottom-nav .am-center span{color:var(--brand-gold);font-weight:700}

  /* the "more" sheet: the header nav re-anchored as a bottom sheet */
  .area-page .nav.is-open{
    position:fixed;inset-inline:12px;inset-block-start:auto;
    inset-block-end:calc(var(--am-bottomnav-h) + env(safe-area-inset-bottom,0px) + 12px);
    z-index:95;
  }
}