/* ==========================================================================
   Pharmazon — Blog · "Notes from our pharmacists"
   A featured story, live search, topic filters, and designed covers in
   each topic's colour, with a capsule motif instead of stock imagery.
   ========================================================================== */

/* ======================================================================
   HERO
   ====================================================================== */
.bl-hero{padding:clamp(140px,18vh,180px) var(--sv-e) clamp(30px,4vw,50px)}
.bl-kicker{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--pz-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--pb-teal);margin-bottom:clamp(22px,3vh,32px)}
.bl-kicker::before{content:"";width:26px;height:12px;border-radius:99px;background:linear-gradient(90deg,#D7ECE4 50%,var(--pb-petrol) 50%)}
.bl-h1{font-family:var(--pz-ui);font-weight:500;font-size:clamp(52px,7vw,124px);line-height:.96;letter-spacing:-.058em;color:var(--pb-text);margin-bottom:clamp(30px,4vh,48px)}
.bl-h1 .ln{display:block;overflow:hidden;padding:0 .12em .26em 0;margin-bottom:-.26em}
.bl-h1 .ln > span{display:block}
.bl-h1 em{font-family:var(--pz-body);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--pb-teal)}
.bl-tools{display:grid;gap:18px}
.bl-search{position:relative;display:flex;align-items:center;max-width:620px;height:60px;padding:0 22px 0 54px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(2,61,84,.12),0 20px 40px -30px rgba(2,61,84,.5);transition:box-shadow .4s}
.bl-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--pb-teal),0 20px 40px -30px rgba(2,61,84,.5)}
.bl-search svg{position:absolute;left:20px;width:20px;height:20px;fill:none;stroke:var(--pb-teal);stroke-width:1.9;stroke-linecap:round}
.bl-search input{width:100%;border:0;outline:0;background:transparent;font:500 16.5px/1 var(--pz-ui);color:var(--pb-text)}
.bl-search input::placeholder{color:var(--pb-soft);font-weight:400}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px}
.bl-chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;font:500 14.5px/1 var(--pz-ui);color:var(--pb-text);box-shadow:inset 0 0 0 1.5px rgba(2,61,84,.14);cursor:pointer;transition:background .4s, color .4s, box-shadow .4s}
.bl-chip i{font-style:normal;font-size:12px;padding:3px 7px;border-radius:99px;background:rgba(2,61,84,.07);color:var(--pb-soft);transition:background-color .4s, color .4s}
.bl-chip:hover{box-shadow:inset 0 0 0 1.5px var(--pb-teal)}
.bl-chip.is-on{background:linear-gradient(90deg,#0A5470,var(--pb-petrol));color:#F2EFE6;box-shadow:0 12px 24px -14px rgba(2,61,84,.6)}
.bl-chip.is-on i{background:rgba(195,222,154,.25);color:#C3DE9A}

/* ======================================================================
   FEATURED
   ====================================================================== */
.bl-feat{padding:clamp(20px,3vw,40px) var(--sv-e) clamp(80px,8vw,130px)}
.bl-feat__a{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(30px,5vw,90px);color:var(--pb-text)}
.bl-feat__img{position:relative;margin:0;overflow:hidden;border-radius:999px 999px 32px 32px;aspect-ratio:5/4}
.bl-feat__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--pz-expo)}
.bl-feat__a:hover .bl-feat__img img{transform:scale(1.04)}
.bl-feat__k{display:flex;align-items:center;gap:12px;font:500 14px/1 var(--pz-ui);color:var(--pb-soft);margin-bottom:18px}
.bl-feat__k span{padding:7px 12px;border-radius:99px;background:#C3DE9A;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pb-petrol)}
.bl-feat__t{font-family:var(--pz-ui);font-weight:500;font-size:clamp(34px,3.8vw,60px);line-height:1.03;letter-spacing:-.05em;margin-bottom:18px;transition:color .4s}
.bl-feat__a:hover .bl-feat__t{color:var(--pb-teal)}
.bl-feat__p{font-family:var(--pz-body);font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--pb-soft);max-width:42ch;margin-bottom:22px}
.bl-rev{display:flex;align-items:center;gap:12px;font:500 13.5px/1.4 var(--pz-ui);color:var(--pb-soft);margin-bottom:26px}
.bl-rev img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 3px #fff}

/* ======================================================================
   ALL ARTICLES
   ====================================================================== */
.bl-all{padding:clamp(90px,9vw,150px) var(--sv-e)}
.bl-all__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,3.4vw,50px)}
.bl-count{font:500 14px/1 var(--pz-ui);color:var(--pb-soft)}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3vw,50px) clamp(20px,2.4vw,36px)}
.bl-card[hidden]{display:none}
.bl-card a{display:block;color:var(--pb-text)}
.bl-card.is-new{animation:bl-in .8s var(--pz-expo) both;animation-delay:calc(var(--i) * 50ms)}
@keyframes bl-in{from{opacity:0;transform:translateY(20px)}}
/* designed covers: the topic's colour and a tilted capsule */
.bl-cover{position:relative;display:block;aspect-ratio:16/11;margin-bottom:18px;border-radius:26px;background:var(--bg);overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(2,61,84,.06)}
.bl-cover::before{content:"";position:absolute;right:-20%;bottom:-40%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 62%);z-index:-1}
.bl-cover small{position:absolute;left:20px;top:20px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.75);font:600 11.5px/1 var(--pz-ui);letter-spacing:.06em;color:var(--pb-petrol)}
.bl-cover b{position:absolute;left:20px;bottom:18px;font:italic 400 15px/1 var(--pz-body);color:var(--pb-soft)}
.bl-cap{position:absolute;right:var(--x,16%);top:50%;width:46%;height:22%;border-radius:999px;background:linear-gradient(90deg,var(--c1,#fff) 50%,var(--c2,var(--pb-petrol)) 50%);box-shadow:0 18px 30px -16px rgba(2,61,84,.5),inset 0 2px 0 rgba(255,255,255,.6);transform:translateY(-50%) rotate(var(--rot,-24deg));transition:transform 1s var(--pz-expo)}
.bl-cap::after{content:"";position:absolute;left:8%;right:8%;top:14%;height:22%;border-radius:99px;background:rgba(255,255,255,.55)}
.bl-card a:hover .bl-cap{transform:translateY(-50%) rotate(calc(var(--rot,-24deg) + 36deg)) scale(1.06)}
.bl-cover--dark small{background:rgba(195,222,154,.18);color:#C3DE9A}
.bl-cover--dark b{color:rgba(234,241,238,.7)}
.bl-meta{display:block;font:500 13.5px/1 var(--pz-ui);color:var(--pb-soft);margin-bottom:10px}
.bl-card h3{font:500 clamp(21px,1.7vw,25px)/1.2 var(--pz-ui);letter-spacing:-.03em;margin-bottom:10px;transition:color .4s}
.bl-card p{font-family:var(--pz-body);font-size:16px;line-height:1.5;color:var(--pb-soft);margin-bottom:14px}
.bl-go{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--pz-ui);color:var(--pb-text)}
.bl-go svg{width:14px;height:14px;transition:transform .6s var(--pz-expo)}
.bl-card a:hover h3{color:var(--pb-teal)}
.bl-card a:hover .bl-go svg{transform:translateX(5px)}
.bl-empty{padding:40px 0;font:italic 400 20px/1.4 var(--pz-body);color:var(--pb-soft)}
.bl-empty a{color:var(--pb-teal);text-decoration:underline;text-underline-offset:3px}
.bl-more{display:flex;justify-content:center;margin-top:clamp(40px,4vw,64px)}
.bl-more[hidden]{display:none}
.ct-go{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 28px;border:0;border-radius:999px;background:linear-gradient(180deg,#0A5470,var(--pb-petrol));color:#F2EFE6;font:500 16px/1 var(--pz-ui);cursor:pointer;overflow:hidden;isolation:isolate;filter:drop-shadow(0 10px 16px rgba(2,61,84,.22));transition:color .5s var(--pz-expo)}
.ct-go i{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--pb-petrol)}
.ct-go i::before{content:"";position:absolute;inset:0;border-radius:50%;background:#C3DE9A;z-index:-1;transition:transform .7s var(--pz-expo)}
.ct-go svg{width:16px;height:16px;transition:transform .6s var(--pz-expo)}
.ct-go:hover{color:var(--pb-petrol)}
.ct-go:hover i::before{transform:scale(9)}
.ct-go:hover svg{transform:rotate(-45deg)}
.ct-go--lime{background:linear-gradient(180deg,#0A5470,var(--pb-petrol))}

/* ======================================================================
   GUIDES PROMPT
   ====================================================================== */
.bl-guides{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;padding:clamp(70px,7vw,110px) var(--sv-e);background:var(--pb-petrol);color:#EAF1EE}
.bl-guides .sv-tag{color:#C3DE9A}
.bl-guides__t{font-family:var(--pz-ui);font-weight:500;font-size:clamp(32px,3.4vw,54px);line-height:1.05;letter-spacing:-.05em;color:#F2EFE6;max-width:16ch}
.bl-guides__t em{font-family:var(--pz-body);font-style:italic;font-weight:400;color:#C3DE9A}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1100px){
  .bl-feat__a{grid-template-columns:1fr}
  .bl-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bl-h1{font-size:clamp(46px,13vw,64px)}
  .bl-search{height:54px}
  .bl-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--sv-e) * -1);padding:0 var(--sv-e) 6px;scrollbar-width:none}
  .bl-chips::-webkit-scrollbar{display:none}
  .bl-chip{flex:none}
  .bl-grid{grid-template-columns:1fr}
}