/* Home blog block in the minimal house style of Dental Units and Sterilization: white, hairlines, small grey labels,
   no cards, no shadows. The section keeps the old carousel's footprint: the heading and the panels share the
   space the old heading and carousel used (539px inside the section from 768px, 499px below; the section has a 1px top border). */
.rtg-hb,.rtg-hb__head{--hb-ink:#1d1d1f;--hb-muted:#6e6e73;--hb-line:#d9e6e9;--hb-accent:#1693a5;--hb-accent-text:#0f7684;--hb-head:42px;--hb-head-gap:40px;--hb-space:539px;--hb-bar:20px;--hb-bar-gap:14px}
.rtg-hb{--hb-height:calc(var(--hb-space) - var(--hb-head) - var(--hb-head-gap))}
.rtg-hb a{color:inherit;text-decoration:none}

/* Band: a very light teal (the header's nav tint) sets the blog apart from the white Sterilization block above
   and the grey reviews below. It bleeds to the edges without widening the page (shadow + clip, no overflow). */
.rtg-blog:has(> .rtg-hb){--hb-band:#f1f7f8;background:var(--hb-band);box-shadow:0 0 0 100vmax var(--hb-band);clip-path:inset(0 -100vmax);border-top-color:transparent}

/* Heading: just "Blog" in bold */
.rtg-hb__head{display:flex;align-items:center;justify-content:center;height:var(--hb-head);margin:0 0 var(--hb-head-gap);color:var(--hb-ink);font-size:30px;font-weight:700;line-height:1;letter-spacing:-.01em}

/* Three columns that start on one line: each opens with a label bar of the same height */
.rtg-hb__tabs{display:none}
.rtg-hb__track{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,8fr) minmax(0,7fr);gap:0 40px;height:var(--hb-height)}
.rtg-hb__panel{display:flex;flex-direction:column;min-width:0;height:100%}
.rtg-hb__bar{position:relative;display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;height:var(--hb-bar);margin-bottom:var(--hb-bar-gap)}
.rtg-hb__label{display:block;margin:0;color:var(--hb-muted);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.1em;text-transform:uppercase}
.rtg-hb__cat{display:block;overflow:hidden;color:var(--hb-accent-text);font-size:10.5px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
.rtg-hb__all{display:inline-flex;flex:none;align-items:center;gap:6px;min-height:40px;margin:-10px 0;color:var(--hb-ink)!important;font-size:12.5px;font-weight:600}
.rtg-hb__all:hover{color:var(--hb-accent)!important}
.rtg-hb a:focus-visible{outline:2px solid var(--hb-accent);outline-offset:3px}

/* Lead article: the photo is never covered; text sits below it */
.rtg-hb-lead__link{display:flex;flex:1;flex-direction:column;min-height:0}
.rtg-hb-lead__image{flex:1 1 0;min-height:0;overflow:hidden;background:#f2f3f5} /* fills its column, so the three columns end together */
.rtg-hb-lead__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.rtg-hb-lead__link:hover .rtg-hb-lead__image img{transform:scale(1.02)}
.rtg-hb-lead__body{display:flex;flex:none;flex-direction:column;padding-top:14px}
.rtg-hb-lead__body .rtg-hb__cat{margin-bottom:4px}
.rtg-hb-lead h3{display:-webkit-box;margin:0 0 6px;overflow:hidden;color:var(--hb-ink);font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.28;letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.rtg-hb-lead__link:hover h3{color:var(--hb-accent)}
.rtg-hb-lead time{color:var(--hb-muted);font-size:12px}

/* The two lists: five photo rows each, sharing the column height, so their rows line up across the block */
.rtg-hb-list + .rtg-hb-list{margin-left:-20px;padding-left:20px;border-left:1px solid var(--hb-line)}
.rtg-hb-rows{display:grid;flex:1;grid-template-rows:repeat(5,minmax(0,1fr));min-height:0;margin:0;padding:0;list-style:none}
.rtg-hb-rows li{min-height:0;border-top:1px solid var(--hb-line)}
.rtg-hb-rows li:last-child{border-bottom:1px solid var(--hb-line)}
.rtg-hb-rows a{display:grid;align-items:center;gap:16px;height:100%}
.rtg-hb-rows img{display:block;width:100%;height:auto;aspect-ratio:370/227;object-fit:cover;background:#f2f3f5}
.rtg-hb-row__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rtg-hb-rows strong{display:-webkit-box;overflow:hidden;color:var(--hb-ink);font-size:14px;font-weight:500;line-height:1.32;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.rtg-hb-rows a:hover strong{color:var(--hb-accent)}
.rtg-hb-rows time,.rtg-hb-rows small{display:block;color:var(--hb-muted);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}

/* Latest: the larger photo, read by category and date */
.rtg-hb-latest a{grid-template-columns:104px minmax(0,1fr)}
/* Most read: read by rank, a smaller photo and the reads */
.rtg-hb-read a{grid-template-columns:20px 88px minmax(0,1fr);gap:12px}
.rtg-hb-read__rank{color:var(--hb-accent);font-size:20px;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums}

@media(max-width:1199px){.rtg-hb-read a{grid-template-columns:20px 72px minmax(0,1fr)}}

/* Tablet and phone: segmented control (as in the units showcase) and panels that swipe inside the same height */
@media(max-width:999px){
  .rtg-hb,.rtg-hb__head{--hb-head:36px;--hb-head-gap:32px}
  .rtg-hb__head{font-size:26px}
  .rtg-hb__tabs{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:2px;max-width:420px;height:38px;margin:0 auto 12px;padding:4px;border-radius:999px;background:#fff}
  .rtg-hb__tabs a{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:999px;color:var(--hb-muted);font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;transition:background-color .25s ease,color .25s ease}
  .rtg-hb__tabs a[aria-current]{background:var(--hb-ink);color:#fff}
  .rtg-hb__track{display:flex;gap:28px;height:calc(var(--hb-height) - 50px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .rtg-hb__track::-webkit-scrollbar{display:none}
  .rtg-hb__panel{flex:0 0 calc(50% - 14px);scroll-snap-align:start}
  .rtg-hb-list + .rtg-hb-list{margin-left:0;padding-left:0;border-left:0}
  /* The tabs already name each panel: labels stay for screen readers only (clipped inside their bar, so they never
     escape the swiping track and widen the page), and the lead drops its bar */
  .rtg-hb__bar .rtg-hb__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rtg-hb-lead .rtg-hb__bar{display:none}
  .rtg-hb__all{margin-left:auto}
  .rtg-hb-lead h3{font-size:18px}
  .rtg-hb-rows strong{font-size:13.5px}
  .rtg-hb-latest a{grid-template-columns:92px minmax(0,1fr);gap:14px}
}
/* Phones follow the theme's 767px breakpoint, where the old carousel section was 616px tall */
@media(max-width:767px){
  .rtg-hb,.rtg-hb__head{--hb-head:30px;--hb-head-gap:24px;--hb-space:499px}
  .rtg-hb__head{font-size:24px}
  .rtg-hb__panel{flex-basis:100%}
  .rtg-hb-latest .rtg-hb__cat{display:none}
}
@media(max-width:599px){
  .rtg-hb__track{gap:18px}
  .rtg-hb-rows strong{font-size:13px}
  .rtg-hb-rows time,.rtg-hb-rows small{font-size:11.5px}
  .rtg-hb-latest a{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .rtg-hb-read a{grid-template-columns:16px 72px minmax(0,1fr);gap:10px}
  .rtg-hb-read__rank{font-size:17px}
  .rtg-hb-lead h3{-webkit-line-clamp:3}
}
@media(prefers-reduced-motion:reduce){.rtg-hb-lead__image img,.rtg-hb__tabs a{transition:none}.rtg-hb-lead__link:hover .rtg-hb-lead__image img{transform:none}}