/* VIETDESK VET blog — homepage-aligned visual system for /vet/blog. */
:root{
  --blog26-blue:#0868d7;
  --blog26-cyan:#0ca6ee;
  --blog26-deep:#0a3778;
  --blog26-deep-2:#082f68;
  --blog26-copy:#536b89;
  --blog26-copy-2:#6a7f99;
  --blog26-line:#d9e7f4;
  --blog26-soft:#f5faff;
  --blog26-soft-2:#edf7ff;
  --blog26-green:#18af70;
  --blog26-shadow:0 20px 55px rgba(26,87,157,.10);
  --blog26-ease:cubic-bezier(.2,.8,.2,1);
  --blog26-font:Inter,"Be Vietnam Pro","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

body.blog-public-page{
  background:#fff!important;
  color:var(--blog26-deep)!important;
  font-family:var(--blog26-font)!important;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.blog-shell,.blog-shell *{box-sizing:border-box}
.blog-shell{
  position:relative;
  overflow:hidden;
  color:var(--blog26-deep)!important;
  background:#fff!important;
  font-family:var(--blog26-font)!important;
}
.blog-wrap{width:min(1320px,calc(100% - 48px))!important;margin-inline:auto!important}

/* Hero follows the exact spatial rhythm of /vet/. */
.blog-hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  padding:42px 0 46px!important;
  background:linear-gradient(180deg,#f7fbff 0%,#fff 84%)!important;
}
.blog-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(rgba(73,139,210,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(73,139,210,.055) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 60%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 60%,transparent 100%);
  pointer-events:none;
}
.blog-hero::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:-180px -120px auto auto!important;
  width:760px!important;
  height:620px!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 45% 45%,rgba(105,211,255,.24),rgba(85,173,242,.10) 45%,transparent 72%)!important;
  filter:blur(8px)!important;
  pointer-events:none!important;
}
.hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
  gap:48px!important;
  align-items:center!important;
  min-height:500px;
}
.kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px;
  max-width:100%;
  padding:9px 13px!important;
  border:1px solid #cce3f7!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 8px 22px rgba(30,86,147,.06)!important;
  color:#0a5eb8!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  text-transform:uppercase;
}
.blog-title{
  margin:24px 0 20px!important;
  max-width:690px!important;
  color:#0a397c!important;
  font-size:clamp(46px,4.15vw,64px)!important;
  line-height:1.015!important;
  letter-spacing:-.052em!important;
  font-weight:950!important;
  text-wrap:balance;
}
.blog-subtitle{
  max-width:650px!important;
  margin:0!important;
  color:#526c8b!important;
  font-size:16px!important;
  line-height:1.72!important;
  font-weight:520!important;
}
.blog-product-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  color:#0868d7!important;
  font-size:13px;
  font-weight:850;
  text-decoration:none!important;
  transition:color .2s ease,transform .2s var(--blog26-ease);
}
.blog-product-link:hover{color:#0ca6ee!important;transform:translateX(2px)}
.searchbar{
  margin-top:25px!important;
  max-width:620px!important;
  height:52px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:0 16px!important;
  color:#7890aa!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid #cfe0ef!important;
  border-radius:12px!important;
  box-shadow:0 10px 26px rgba(31,85,145,.065)!important;
  transition:border-color .22s ease,box-shadow .22s var(--blog26-ease),transform .22s var(--blog26-ease);
}
.searchbar:focus-within{border-color:#8fc7ef!important;box-shadow:0 15px 34px rgba(8,104,215,.13)!important;transform:translateY(-1px)}
.searchbar span{color:#0878d8!important}
.searchbar input{color:#315675!important;font-family:inherit!important}
.searchbar input::placeholder{color:#8296ad!important}
.searchbar button{color:#154875!important;font-family:inherit!important}

.hero-art{position:relative!important;z-index:1!important;min-height:400px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.hero-art::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10% 8% 4%;
  border-radius:44%;
  background:rgba(91,187,255,.22);
  filter:blur(58px);
}
.hero-art img{
  width:min(100%,560px)!important;
  height:auto!important;
  border-radius:24px;
  filter:drop-shadow(0 30px 52px rgba(29,103,176,.16))!important;
  animation:blog26-float 6.5s ease-in-out infinite;
}

.category-row{
  border-top:1px solid #e1ebf5!important;
  margin-top:28px!important;
  padding-top:22px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
}
.cat-card{
  min-height:66px!important;
  height:auto!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid #dce8f4!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:13px 14px!important;
  box-shadow:0 12px 30px rgba(38,91,148,.055)!important;
  transition:transform .25s var(--blog26-ease),box-shadow .25s var(--blog26-ease),border-color .25s ease!important;
}
.cat-card:hover{transform:translateY(-4px);border-color:#bcd9f0!important;box-shadow:0 20px 42px rgba(35,96,161,.11)!important}
.cat-ico,.cat-card:nth-child(n) .cat-ico{
  width:34px!important;height:34px!important;border-radius:10px!important;
  display:grid!important;place-items:center!important;
  background:#eaf5ff!important;color:#0878d8!important;font-weight:950!important;
}
.cat-card:nth-child(3n) .cat-ico{background:#e8f8ff!important;color:#0b97d7!important}
.cat-card:nth-child(3n+2) .cat-ico{background:#eef5ff!important;color:#486fd8!important}
.cat-card strong{color:#173f67!important;font-size:12px!important;font-weight:850!important}
.cat-card small{color:#7a8fa7!important;font-weight:800!important}

/* Content sections use the same centered heading rhythm as the homepage. */
.blog-wrap>.section-title{
  justify-content:center!important;
  text-align:center!important;
  gap:9px!important;
  margin:72px 0 26px!important;
  color:#0a397c!important;
  font-size:clamp(25px,2.2vw,34px)!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
  font-weight:950!important;
}
.blog-wrap>.section-title::before{content:"✦"!important;color:#0a86e6!important;font-size:18px!important}
.content-grid{grid-template-columns:minmax(0,1fr) 320px!important;gap:20px!important;align-items:stretch!important}
.featured{
  height:420px!important;
  border:1px solid #d7e6f3!important;
  border-radius:20px!important;
  background:#082f68!important;
  box-shadow:0 18px 46px rgba(27,83,146,.11)!important;
  transition:transform .28s var(--blog26-ease),box-shadow .28s var(--blog26-ease),border-color .28s ease!important;
}
.featured:hover{transform:translateY(-5px);border-color:#b9d9ef!important;box-shadow:0 28px 58px rgba(26,87,157,.16)!important}
.featured::after{background:linear-gradient(90deg,rgba(5,40,88,.98) 0%,rgba(5,48,103,.88) 44%,rgba(5,60,122,.16) 72%,rgba(5,60,122,0) 100%)!important}
.featured img{transition:transform .55s var(--blog26-ease)!important}
.featured:hover img{transform:scale(1.025)}
.featured-body{width:56%!important;padding:42px 34px!important}
.tag{background:linear-gradient(135deg,#0871dc,#08a5ea)!important;color:#fff!important}
.featured .date{color:#c8d9eb!important}
.featured h2{font-size:clamp(24px,2vw,30px)!important;line-height:1.25!important;letter-spacing:-.035em!important;font-weight:900!important}
.featured p{color:#d7e7f5!important;font-size:14px!important;line-height:1.72!important}
.read{color:#fff!important;transition:transform .2s var(--blog26-ease),color .2s ease}
.read:hover{transform:translateX(3px)}
.sidebar{
  border:1px solid #dce8f4!important;
  border-radius:20px!important;
  padding:24px!important;
  box-shadow:0 14px 37px rgba(38,91,148,.07)!important;
  transition:transform .25s var(--blog26-ease),box-shadow .25s var(--blog26-ease),border-color .25s ease!important;
}
.sidebar:hover{transform:translateY(-4px);border-color:#bfdaf0!important;box-shadow:0 24px 48px rgba(35,96,161,.12)!important}
.sidebar h3{color:#0a397c!important;font-size:18px!important;font-weight:900!important}
.mini{border-color:#edf3f8!important}
.mini img{border-radius:10px!important;transition:transform .25s var(--blog26-ease)}
.mini:hover img{transform:scale(1.05)}
.mini a{color:#173f67!important;font-weight:850!important}
.mini a:hover{color:#0868d7!important}
.sidebar-link{color:#0868d7!important}

.topic-carousel{position:relative!important}
.topic-track{gap:18px!important;padding:4px 4px 22px!important}
.topic-arrow{border-color:#cfe0ef!important;color:#0878d8!important;box-shadow:0 12px 30px rgba(31,85,145,.12)!important;transition:transform .2s var(--blog26-ease),box-shadow .2s ease,background .2s ease!important}
.topic-arrow:hover{background:#f5faff!important;box-shadow:0 16px 34px rgba(31,85,145,.17)!important}
.topic-arrow.prev:hover{transform:translateY(-50%) translateX(-2px)}
.topic-arrow.next:hover{transform:translateY(-50%) translateX(2px)}
.post-card{
  border:1px solid #dce8f4!important;
  border-radius:20px!important;
  box-shadow:0 14px 37px rgba(38,91,148,.07)!important;
  transition:transform .25s var(--blog26-ease),box-shadow .25s var(--blog26-ease),border-color .25s ease!important;
}
.post-card:hover{transform:translateY(-5px);border-color:#bfdaf0!important;box-shadow:0 24px 48px rgba(35,96,161,.12)!important}
.post-card img{height:148px!important;transition:transform .5s var(--blog26-ease)!important}
.post-card:hover img{transform:scale(1.035)}
.post-card-body{padding:18px!important}
.card-chip,.post-card:nth-child(n) .card-chip{background:linear-gradient(135deg,#0871dc,#08a5ea)!important}
.meta{color:#607083!important}
.post-card h3{color:#173f67!important;font-size:16px!important;line-height:1.42!important;font-weight:900!important}
.post-card p{color:#607590!important;font-size:13px!important;line-height:1.68!important}
.post-card .read{color:#0868d7!important}

.cta-band{
  margin:54px 0 46px!important;
  grid-template-columns:280px 1fr 190px!important;
  gap:30px!important;
  border:1px solid #cfe4f6!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,#eef8ff 0%,#f8fcff 56%,#edf8ff 100%)!important;
  box-shadow:0 18px 48px rgba(26,87,157,.09)!important;
  padding:30px!important;
  transition:transform .28s var(--blog26-ease),box-shadow .28s var(--blog26-ease),border-color .28s ease!important;
}
.cta-band:hover{transform:translateY(-4px);border-color:#b9d9ef!important;box-shadow:0 26px 58px rgba(26,87,157,.13)!important}
.cta-band img{border-radius:18px!important;filter:drop-shadow(0 16px 24px rgba(29,103,176,.10))}
.cta-band h2{color:#0a397c!important;font-size:clamp(24px,2.2vw,32px)!important;line-height:1.15!important;letter-spacing:-.035em!important;font-weight:950!important}
.cta-band p{color:#607590!important;font-size:14px!important}
.benefits{color:#315675!important;gap:24px!important}
.benefits span::before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:50%;background:#18b675;color:#fff;font-size:9px;font-weight:950}
.cta-btn{
  height:48px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#0871dc,#08a5ea)!important;
  box-shadow:0 12px 28px rgba(6,119,214,.23)!important;
  transition:transform .22s var(--blog26-ease),box-shadow .22s var(--blog26-ease)!important;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(6,119,214,.29)!important}

/* Exact homepage reveal motion. */
/* Progressive enhancement: content is visible by default. Motion JS opts into the hidden pre-reveal state. */
.blog-shell [data-vet-reveal]{opacity:1;transform:none;transition:opacity .72s var(--blog26-ease),transform .72s var(--blog26-ease)}
.blog-shell.vet-motion-enabled [data-vet-reveal]{opacity:0;transform:translate3d(0,24px,0)}
.blog-shell.vet-motion-enabled [data-vet-reveal="left"]{transform:translate3d(-30px,0,0)}
.blog-shell.vet-motion-enabled [data-vet-reveal="right"]{transform:translate3d(30px,0,0)}
.blog-shell.vet-motion-enabled [data-vet-reveal="zoom"]{transform:scale(.97)}
.blog-shell.vet-motion-enabled [data-vet-reveal].is-visible{opacity:1;transform:none}
.blog-shell .featured[data-vet-reveal].is-visible:hover,.blog-shell .sidebar[data-vet-reveal].is-visible:hover,.blog-shell .post-card[data-vet-reveal].is-visible:hover,.blog-shell .cat-card[data-vet-reveal].is-visible:hover,.blog-shell .cta-band[data-vet-reveal].is-visible:hover{transform:translateY(-5px)}

@keyframes blog26-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr!important;min-height:0;gap:22px!important}
  .hero-art{min-height:310px!important}
  .category-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .content-grid{grid-template-columns:1fr!important}
  .featured-body{width:64%!important}
  .cta-band{grid-template-columns:220px 1fr!important}
  .cta-btn{grid-column:2;justify-self:start!important}
}
@media(max-width:768px){
  .blog-wrap{width:min(100% - 28px,1320px)!important;padding:0!important}
  .blog-hero{padding:34px 0 28px!important}
  .blog-title{font-size:clamp(36px,11vw,48px)!important;margin:18px 0 14px!important}
  .blog-subtitle{font-size:15px!important;line-height:1.68!important}
  .hero-art{display:flex!important;margin-top:8px!important;min-height:250px!important}
  .hero-art img{max-width:390px!important}
  .category-row{display:flex!important;overflow-x:auto!important;gap:10px!important;margin:20px -14px 0!important;padding:16px 14px 4px!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .category-row::-webkit-scrollbar{display:none}
  .cat-card{flex:0 0 176px!important;scroll-snap-align:start}
  .blog-wrap>.section-title{margin:48px 0 20px!important;font-size:28px!important}
  .featured{height:auto!important;min-height:0!important}
  .featured img{position:relative!important;height:210px!important}
  .featured::after{display:none!important}
  .featured-body{width:100%!important;height:auto!important;padding:22px!important;color:#0a3778!important;background:#fff!important}
  .featured .date{color:#5f7186!important;margin-top:14px!important}
  .featured h2{color:#0a397c!important;margin:12px 0 10px!important;font-size:23px!important}
  .featured p{color:#607590!important}
  .featured .read{color:#0868d7!important;margin-top:16px!important}
  .topic-carousel{margin:0 -14px!important}
  .topic-track{grid-auto-columns:84%!important;padding:4px 14px 20px!important}
  .topic-arrow{display:none!important}
  .post-card img{height:170px!important}
  .cta-band{display:block!important;margin:40px 0 34px!important;padding:22px!important}
  .cta-band img{width:100%!important;max-height:190px!important;object-fit:contain!important;margin-bottom:16px!important}
  .cta-band h2{font-size:24px!important}
  .benefits{flex-direction:column!important;gap:9px!important}
  .cta-btn{width:100%!important;margin-top:18px!important}
}
@media(max-width:430px){
  .blog-wrap{width:min(100% - 24px,1320px)!important}
  .hero-art{min-height:215px!important}
  .hero-art img{max-width:330px!important}
  .category-row{margin-left:-12px!important;margin-right:-12px!important;padding-left:12px!important;padding-right:12px!important}
  .cat-card{flex-basis:162px!important}
  .topic-carousel{margin-left:-12px!important;margin-right:-12px!important}
  .topic-track{grid-auto-columns:88%!important;padding-left:12px!important;padding-right:12px!important}
}
@media(prefers-reduced-motion:reduce){
  .blog-shell *,.blog-shell *::before,.blog-shell *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .blog-shell [data-vet-reveal]{opacity:1!important;transform:none!important}
}