/* =====================================================================
   ZOON — dedicated redesign for the blog INDEX page (blog.html) only.
   Loaded instead of content.css's dark .content-hero pattern: this page
   uses a light/mint editorial look per approved reference design.
   Scoped under .bp-page so nothing here touches nav/footer or any other
   content page. Reuses style-v2.css tokens (--font, .container, .btn-*).
   ===================================================================== */

.bp-page{
  --bp-green:#17D964;
  --bp-green-dark:#063F2D;
  --bp-mint:#E9F9F0;
  --bp-bg:#F8FAF9;
  --bp-text:#10251D;
  --bp-text-soft:#6B7772;
}
.bp-page .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- HERO ---------- */
.bp-hero{background:linear-gradient(160deg,#EAF7F4 0%, var(--bp-mint) 60%, var(--bp-mint) 100%); padding:142px 0 0; position:relative; overflow:hidden;}
.bp-hero-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:36px; position:relative; z-index:2;}
.bp-hero-copy{flex:1; max-width:560px; padding:34px 0 54px;}
.bp-pill{display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--bp-green-dark); font-size:.78rem; font-weight:800; padding:7px 15px; border-radius:99px; margin-bottom:18px; box-shadow:0 4px 14px rgba(6,63,45,0.1);}
.bp-hero-copy h1{font-size:clamp(1.65rem,3.4vw,2.5rem); font-weight:900; color:var(--bp-green-dark); line-height:1.3; margin-bottom:16px; text-wrap:balance;}
.bp-hero-copy p{font-size:1.02rem; color:var(--bp-text-soft); line-height:1.8; max-width:440px;}
.bp-hero-visual{position:relative; flex-shrink:0; width:300px; align-self:flex-end;}
.bp-hero-visual img{width:100%; height:auto; display:block; filter:drop-shadow(0 22px 26px rgba(6,63,45,0.2));}
.bp-hero-bubble{position:absolute; top:2%; inset-inline-end:-56px; background:#fff; border-radius:18px; padding:12px 16px; font-size:.8rem; font-weight:800; color:var(--bp-text); box-shadow:0 16px 32px -12px rgba(6,63,45,0.28); line-height:1.55; display:flex; align-items:flex-start; gap:8px; max-width:172px;}
.bp-hero-bubble .bp-bulb{font-size:1.1rem; flex-shrink:0; line-height:1;}
.bp-skyline{position:absolute; inset-inline-start:0; bottom:0; width:100%; height:auto; opacity:.55; pointer-events:none; z-index:1; color:var(--bp-green-dark);}

@media (max-width:860px){
  .bp-hero{padding-top:120px;}
  .bp-hero-inner{flex-direction:column; align-items:center; text-align:center; gap:8px;}
  .bp-hero-copy{padding:0 0 8px; max-width:100%;}
  .bp-hero-copy p{margin-inline:auto;}
  .bp-hero-visual{width:220px; order:-1; display:flex; flex-direction:column; align-items:center; gap:12px;}
  .bp-hero-bubble{position:static; inset-inline-end:auto; top:auto; max-width:200px; font-size:.78rem; padding:10px 14px; align-self:center;}
}

/* ---------- SEARCH + FILTERS ---------- */
.bp-toolbar{background:var(--bp-bg); padding:26px 0;}
.bp-toolbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.bp-search{position:relative; flex:1; min-width:220px; max-width:380px;}
.bp-search svg{position:absolute; top:50%; inset-inline-end:17px; transform:translateY(-50%); color:var(--bp-text-soft); pointer-events:none;}
.bp-search input{width:100%; padding:13px 46px 13px 20px; padding-inline-end:46px; padding-inline-start:20px; border-radius:99px; border:1px solid rgba(6,63,45,0.12); background:#fff; font-family:var(--font); font-size:.9rem; color:var(--bp-text);}
.bp-search input::placeholder{color:var(--bp-text-soft);}
.bp-search input:focus{outline:2px solid var(--bp-green); outline-offset:1px; border-color:transparent;}
.bp-filters{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
.bp-filters::-webkit-scrollbar{display:none;}
.bp-filter{flex-shrink:0; padding:10px 18px; border-radius:99px; border:1px solid rgba(6,63,45,0.12); background:#fff; color:var(--bp-text); font-family:var(--font); font-size:.83rem; font-weight:700; cursor:pointer; transition:.25s;}
.bp-filter:hover{border-color:var(--bp-green);}
.bp-filter.active{background:var(--bp-green); border-color:var(--bp-green); color:#052213;}
.bp-filter:focus-visible{outline:2px solid var(--bp-green-dark); outline-offset:2px;}

/* ---------- GRID ---------- */
.bp-grid-section{background:var(--bp-bg); padding:6px 0 76px;}
.bp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px;}
@media (max-width:980px){.bp-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.bp-grid{grid-template-columns:1fr; gap:16px;}}

.bp-card{background:#fff; border:1px solid rgba(6,63,45,0.08); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; transition:transform .32s ease, box-shadow .32s ease;}
.bp-card:hover{transform:translateY(-5px); box-shadow:0 26px 48px -26px rgba(6,63,45,0.24);}
.bp-card-media{position:relative; aspect-ratio:4/3; overflow:hidden; display:block;}
.bp-card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom;}
.bp-badge{position:absolute; top:14px; inset-inline-start:14px; background:#fff; color:var(--bp-text); font-size:.72rem; font-weight:800; padding:6px 13px; border-radius:99px; box-shadow:0 6px 16px rgba(6,63,45,0.14); z-index:2;}
.bp-media-merchant{background:linear-gradient(160deg,#EFFBF3,#D9F3E3);}
.bp-media-driver{background:linear-gradient(160deg,#EAF6FB,#D8EEF7);}
.bp-media-tips{background:linear-gradient(160deg,#FBF8EC,#F3EBCF);}
.bp-media-commission{background:linear-gradient(160deg,#EFFBF3,#D3F0DE);}
.bp-media-driverguide{background:linear-gradient(160deg,#EAF6FB,#D6ECF6);}
.bp-commission-badge{position:absolute; bottom:10%; inset-inline-start:8%; font-size:2.6rem; font-weight:900; color:rgba(6,63,45,0.16); z-index:0; line-height:1;}
.bp-tips-chart{position:absolute; top:16%; inset-inline-end:10%; z-index:0; color:rgba(6,63,45,0.22);}

.bp-card-body{padding:19px 21px 21px; display:flex; flex-direction:column; gap:9px; flex:1;}
.bp-card-body h3{font-size:1.03rem; font-weight:900; color:var(--bp-text); line-height:1.45;}
.bp-card-body h3 a{color:inherit;}
.bp-card-body h3 a:hover{color:var(--bp-green-dark);}
.bp-card-body p{font-size:.87rem; color:var(--bp-text-soft); line-height:1.7; flex:1;}
.bp-card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:13px; border-top:1px solid rgba(6,63,45,0.08); gap:10px;}
.bp-read{display:inline-flex; align-items:center; gap:6px; font-size:.83rem; font-weight:800; color:var(--bp-green-dark);}
.bp-read svg{transition:transform .25s;}
.bp-card:hover .bp-read svg{transform:translateX(-3px);}
.bp-date{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--bp-text-soft); white-space:nowrap;}

.bp-empty{text-align:center; padding:64px 20px; color:var(--bp-text-soft); font-size:.95rem;}

/* ---------- NEWSLETTER CARD (sits inside the grid) ---------- */
.bp-newsletter{background:var(--bp-mint); border-radius:22px; padding:28px 24px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:4px;}
.bp-newsletter:before, .bp-newsletter:after{content:''; position:absolute; border-radius:50%; background:rgba(23,217,100,0.16); pointer-events:none;}
.bp-newsletter:before{width:130px; height:130px; top:-46px; inset-inline-end:-40px;}
.bp-newsletter:after{width:90px; height:90px; bottom:-34px; inset-inline-start:-28px;}
.bp-newsletter > *{position:relative; z-index:1;}
.bp-newsletter-icon{width:50px; height:50px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--bp-green-dark); margin-bottom:12px;}
.bp-newsletter h3{font-size:1.1rem; font-weight:900; color:var(--bp-green-dark); margin-bottom:6px;}
.bp-newsletter p{font-size:.86rem; color:var(--bp-text-soft); line-height:1.7; margin-bottom:14px;}
.bp-newsletter form{display:flex; flex-direction:column; gap:9px;}
.bp-newsletter input{width:100%; padding:12px 16px; border-radius:12px; border:1px solid rgba(6,63,45,0.16); font-family:var(--font); font-size:.87rem; background:#fff; color:var(--bp-text);}
.bp-newsletter input:focus{outline:2px solid var(--bp-green); outline-offset:1px;}
.bp-newsletter button{padding:12px; border-radius:12px; border:none; background:var(--bp-green-dark); color:#fff; font-family:var(--font); font-weight:800; font-size:.88rem; cursor:pointer; transition:background .25s;}
.bp-newsletter button:hover{background:#052f22;}
.bp-newsletter-msg{font-size:.78rem; font-weight:700; color:var(--bp-green-dark); margin-top:2px;}

/* ---------- SUGGEST / CONTACT ---------- */
.bp-suggest{background:var(--bp-bg); padding:0 0 80px;}
.bp-suggest-card{background:#fff; border:1px solid rgba(6,63,45,0.08); border-radius:22px; padding:26px 30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between;}
.bp-suggest-left{display:flex; align-items:center; gap:16px;}
.bp-suggest-icon{width:48px; height:48px; border-radius:14px; background:var(--bp-mint); color:var(--bp-green-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.bp-suggest-icon-wa{background:#25D366; color:#fff; border-radius:50%;}
.bp-suggest-card .btn{display:inline-flex; align-items:center; gap:7px;}
.bp-suggest h3{font-size:1.02rem; font-weight:900; color:var(--bp-text); margin-bottom:3px;}
.bp-suggest p{font-size:.85rem; color:var(--bp-text-soft);}

@media (max-width:640px){
  .bp-suggest-card{padding:22px;}
}