/* ==========================================================================
   Pharmazon — Health & Medication Guides · a reference hub
   Search everything, browse by condition, an A to Z of medicines, and how
   our pharmacists check every guide.
   ========================================================================== */

/* ======================================================================
   HERO
   ====================================================================== */
.hg-hero{position:relative;z-index:30;display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:clamp(30px,5vw,96px);padding:clamp(140px,18vh,180px) var(--sv-e) clamp(50px,6vw,80px)}
.hg-hero::before{content:"";position:absolute;right:-12vw;top:4vh;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle,rgba(195,222,154,.42),rgba(225,241,236,0) 60%);z-index:-1}
.hg-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)}
.hg-kicker::before{content:"";width:26px;height:12px;border-radius:99px;background:linear-gradient(90deg,#D7ECE4 50%,var(--pb-petrol) 50%)}
.hg-h1{font-family:var(--pz-ui);font-weight:500;font-size:clamp(50px,6.4vw,112px);line-height:.96;letter-spacing:-.058em;color:var(--pb-text);margin-bottom:clamp(22px,3vh,30px)}
.hg-h1 .ln{display:block;overflow:hidden;padding:0 .12em .26em 0;margin-bottom:-.26em}
.hg-h1 .ln > span{display:block}
.hg-h1 em{font-family:var(--pz-body);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--pb-teal)}
.hg-lede{font-family:var(--pz-body);font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:var(--pb-soft);max-width:48ch;margin-bottom:clamp(24px,3vh,34px)}
.hg-find{position:relative;max-width:640px;z-index:5}
.bl-search{position:relative;display:flex;align-items:center;height:64px;padding:0 22px 0 56px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(2,61,84,.12),0 24px 50px -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 24px 50px -30px rgba(2,61,84,.5)}
.bl-search svg{position:absolute;left:21px;width:21px;height:21px;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 17px/1 var(--pz-ui);color:var(--pb-text)}
.bl-search input::placeholder{color:var(--pb-soft);font-weight:400}
.hg-results{position:absolute;left:0;right:0;top:calc(100% + 10px);max-height:360px;overflow:auto;padding:8px;border-radius:24px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 40px 80px -40px rgba(2,61,84,.6),inset 0 0 0 1px rgba(2,61,84,.08)}
.hg-results a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;font:500 15.5px/1.3 var(--pz-ui);color:var(--pb-text)}
.hg-results a small{font-size:12.5px;color:var(--pb-soft);white-space:nowrap}
.hg-results a:hover,.hg-results a.is-on{background:#E1F1EC}
.hg-results p{padding:14px;font:italic 400 16px/1.4 var(--pz-body);color:var(--pb-soft)}
.hg-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px;font:500 14px/1 var(--pz-ui);color:var(--pb-soft)}
.hg-pop a{color:var(--pb-text);padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .3s}
.hg-pop a:hover{color:var(--pb-teal)}
.hg-trust{padding:clamp(24px,2.4vw,32px);border-radius:30px;background:#fff;box-shadow:inset 0 0 0 1px rgba(2,61,84,.08),0 40px 80px -50px rgba(2,61,84,.45)}
.hg-trust img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%;margin-bottom:16px;box-shadow:0 0 0 5px #E1F1EC}
.hg-trust__k{font:600 12px/1 var(--pz-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--pb-teal);margin-bottom:10px}
.hg-trust__t{font:500 18px/1.4 var(--pz-ui);color:var(--pb-text);margin-bottom:14px}
.hg-trust__n{font:400 13.5px/1.4 var(--pz-ui);color:var(--pb-soft)}
.hg-trust__n b{display:block;font-weight:600;color:var(--pb-text)}

/* ======================================================================
   TOPIC INDEX (sticks under the header)
   ====================================================================== */
.hg-index{position:sticky;top:84px;z-index:20;padding:12px var(--sv-e);background:rgba(246,244,239,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--pb-line);border-bottom:1px solid var(--pb-line)}
.hg-index ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.hg-index ul::-webkit-scrollbar{display:none}
.hg-index a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font:500 14.5px/1 var(--pz-ui);color:var(--pb-soft);white-space:nowrap;transition:background .4s, color .4s}
.hg-index a:hover{color:var(--pb-text)}
.hg-index a.is-on{background:linear-gradient(90deg,#0A5470,var(--pb-petrol));color:#F2EFE6}

/* ======================================================================
   CHAPTERS
   ====================================================================== */
.hg-ch{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(36px,6vw,120px);padding:clamp(80px,8vw,130px) var(--sv-e);scroll-margin-top:140px}
.hg-ch:nth-child(even){background:#fff}
.hg-ch--flip .hg-ch__img{order:2}
.hg-ch__img{position:relative;margin:0;overflow:hidden;border-radius:999px 999px 30px 30px;aspect-ratio:4/5;max-height:72vh}
.hg-ch__img img{width:100%;height:100%;object-fit:cover}
.hg-ch__img figcaption{position:absolute;left:18px;bottom:18px;padding:9px 14px;border-radius:99px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 12.5px/1 var(--pz-ui);color:var(--pb-petrol)}
.hg-ch .sv-h2{max-width:14ch;margin-bottom:16px}
.hg-ch .sv-lede{margin-bottom:clamp(24px,3vw,36px)}
.hg-list{border-top:1.5px solid var(--pb-text)}
.hg-g{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--pb-line);color:var(--pb-text);transition:padding .6s var(--pz-expo)}
.hg-g::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--pb-teal);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--pz-expo)}
.hg-g b{display:block;font:500 clamp(19px,1.6vw,23px)/1.25 var(--pz-ui);letter-spacing:-.025em;transition:color .4s}
.hg-g small{display:block;margin-top:4px;font-family:var(--pz-body);font-size:15.5px;line-height:1.45;color:var(--pb-soft)}
.hg-g > svg{width:20px;height:20px;transition:transform .6s var(--pz-expo)}
.hg-g:hover{padding-left:10px}
.hg-g:hover::after{transform:scaleX(1)}
.hg-g:hover b{color:var(--pb-teal)}
.hg-g:hover > svg{transform:translateX(6px)}

/* ======================================================================
   MEDICINES A-Z
   ====================================================================== */
.hg-az{padding:clamp(90px,9vw,150px) var(--sv-e);scroll-margin-top:140px}
.hg-az__letters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,3.4vw,50px)}
.hg-az__letters a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:italic 400 20px/1 var(--pz-body);color:var(--pb-text);box-shadow:inset 0 0 0 1.5px rgba(2,61,84,.14);transition:background .4s, color .4s, transform .5s var(--pz-expo)}
.hg-az__letters a:hover{background:var(--pb-petrol);color:#C3DE9A;transform:translateY(-3px)}
.hg-az__body{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.hg-az__g{display:grid;grid-template-columns:52px 1fr;gap:10px;padding-top:18px;border-top:1px solid var(--pb-line);scroll-margin-top:150px}
.hg-az__g.is-flash .hg-az__L{background:#C3DE9A}
.hg-az__L{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E1F1EC;font:italic 400 22px/1 var(--pz-body);color:var(--pb-petrol);transition:background-color .6s}
.hg-az__g ul{display:grid;gap:6px}
.hg-med{display:block;padding:8px 12px;border-radius:16px;color:var(--pb-text);transition:background-color .4s}
.hg-med b{display:block;font:500 16px/1.3 var(--pz-ui)}
.hg-med small{display:block;font:400 13px/1.3 var(--pz-ui);color:var(--pb-soft)}
.hg-med:hover{background:#E1F1EC}
.hg-med:hover b{color:var(--pb-teal)}

/* ======================================================================
   HOW WE WRITE
   ====================================================================== */
.hg-how{padding:clamp(90px,9vw,150px) var(--sv-e);background:var(--pb-petrol);color:#EAF1EE;position:relative;overflow:hidden;isolation:isolate}
.hg-how::before{content:"";position:absolute;right:-18vw;top:-30vw;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(1,150,138,.42),rgba(2,61,84,0) 60%);z-index:-1}
.hg-how .sv-tag{color:#C3DE9A}
.hg-how__t{font-family:var(--pz-ui);font-weight:500;font-size:clamp(36px,4.2vw,68px);line-height:1.03;letter-spacing:-.05em;color:#F2EFE6;max-width:15ch;margin-bottom:clamp(40px,5vw,64px)}
.hg-how__t em{font-family:var(--pz-body);font-style:italic;font-weight:400;letter-spacing:-.025em;color:#C3DE9A;margin-left:.12em}
.hg-how__t .wd{color:inherit}
.hg-how__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.hg-how__list li{padding-top:24px;border-top:1px solid rgba(234,241,238,.22)}
.hg-how__list span{font:italic 400 20px/1 var(--pz-body);color:#C3DE9A}
.hg-how__list b{display:block;margin:12px 0 8px;font:500 clamp(22px,2vw,30px)/1.15 var(--pz-ui);letter-spacing:-.035em;color:#F2EFE6}
.hg-how__list p{font-family:var(--pz-body);font-size:16.5px;line-height:1.5;color:rgba(234,241,238,.75)}
.hg-note{margin-top:clamp(40px,4vw,60px);max-width:70ch;font:400 14px/1.6 var(--pz-ui);color:rgba(234,241,238,.6)}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1100px){
  .hg-hero{grid-template-columns:1fr}
  .hg-trust{max-width:520px}
  .hg-ch{grid-template-columns:1fr}
  .hg-ch--flip .hg-ch__img{order:0}
  .hg-ch__img{aspect-ratio:16/11;max-height:none;border-radius:240px 240px 28px 28px}
  .hg-az__body{grid-template-columns:1fr 1fr}
  .hg-how__list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hg-h1{font-size:clamp(44px,12.4vw,60px)}
  .hg-index{top:72px}
  .hg-az__body{grid-template-columns:1fr}
  .hg-az__letters a{width:42px;height:42px;font-size:18px}
}