/* ==========================================================
   Home Care Lifestyle blog (list, category, details)
   Sirf logo ke colors. Saari classes "hcb-" se shuru hoti hain.
   ========================================================== */
.hcb, .hcb-progress {
    --hcb-orange: #F79433; --hcb-red: #E8707A; --hcb-blue: #2E8FB5; --hcb-yellow: #E3C81E; --hcb-green: #C4D850;
    --hcb-ink: #363434; --hcb-muted: #5c5a5a; --hcb-line: #e4e2e1; --hcb-tint: #f7f6f6;
    --hcb-ease: cubic-bezier(.2, .7, .2, 1);
}
.hcb { --c: var(--hcb-orange); position: relative; overflow-x: clip; padding: 56px 0; color: var(--hcb-ink); font-size: 16px; line-height: 1.7; }
.hcb *, .hcb *::before, .hcb *::after { box-sizing: border-box; }
.hcb a { color: var(--hcb-ink); text-decoration: none; }
.hcb a:hover, .hcb a:focus { text-decoration: none; }
.hcb a:focus-visible, .hcb button:focus-visible { outline: 2px solid var(--hcb-orange); outline-offset: 3px; }
.hcb p { margin: 0 0 14px; color: var(--hcb-muted); }
.hcb img { max-width: 100%; }
.hcb-c-orange { --c: var(--hcb-orange); } .hcb-c-red { --c: var(--hcb-red); } .hcb-c-blue { --c: var(--hcb-blue); }
.hcb-c-yellow { --c: var(--hcb-yellow); } .hcb-c-green { --c: var(--hcb-green); } .hcb-c-ink { --c: var(--hcb-ink); }

/* Image box: image na ho ya load na ho tab logo ke rangon ke gole dikhte hain */
.hcb-media { position: relative; display: block; overflow: hidden; background-color: var(--hcb-tint); background-image: radial-gradient(circle at 22% 30%, var(--hcb-red) 0 9%, transparent 9.5%), radial-gradient(circle at 70% 24%, var(--hcb-yellow) 0 6%, transparent 6.5%), radial-gradient(circle at 78% 72%, var(--hcb-blue) 0 12%, transparent 12.5%), radial-gradient(circle at 34% 78%, var(--hcb-orange) 0 7%, transparent 7.5%); }
.hcb-media img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hcb-ease); }

.hcb-pill { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--hcb-orange); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; }
.hcb a.hcb-pill { color: #fff; transition: background .3s; }
.hcb a.hcb-pill:hover { background: var(--hcb-ink); }
.hcb-text { display: block; color: var(--hcb-muted); font-size: 16.5px; line-height: 1.7; }
.hcb-read { font-size: 14.5px; font-weight: 600; color: var(--hcb-orange); }
.hcb-read i, .hcb-more i { display: inline-block; font-style: normal; transition: transform .4s var(--hcb-ease); }

.hcb .hcb-btn { position: relative; display: inline-block; padding: 12px 28px; border-radius: 999px; border: 1px solid var(--hcb-orange); background: transparent; color: var(--hcb-orange); font-size: 14.5px; font-weight: 500; line-height: 1.4; text-transform: uppercase; overflow: hidden; z-index: 0; transition: color .35s, border-color .35s; }
.hcb .hcb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hcb-orange); transform: translateY(101%); transition: transform .4s var(--hcb-ease); }
.hcb .hcb-btn:hover, .hcb .hcb-btn:focus { color: #fff; }
.hcb .hcb-btn:hover::before, .hcb .hcb-btn:focus::before { transform: none; }
.hcb .hcb-btn-fill { background: var(--hcb-orange); color: #fff; }
.hcb .hcb-btn-fill::before { background: #fff; }
.hcb .hcb-btn-fill:hover, .hcb .hcb-btn-fill:focus { color: var(--hcb-orange); border-color: #fff; }

/* ---------- Banner ---------- */
.hcb-banner { padding: 78px 0 84px; overflow: hidden; background: linear-gradient(100deg, #fff 0%, var(--hcb-tint) 46%, #ecebea 100%); }
.hcb-banner.has-image { background: linear-gradient(162deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 16%) 34%, rgb(255 255 255 / 0%) 68%, rgb(255 255 255 / 35%) 100%), var(--hcb-banner) center / cover no-repeat; }
.hcb-banner .container { position: relative; z-index: 1; }
.hcb-banner-title { margin: 0 0 18px; font-size: 54px; line-height: 1.1; font-weight: 700; letter-spacing: -.015em; color: var(--hcb-ink); animation: hcb-rise .9s var(--hcb-ease) .05s both; }
.hcb-crumb { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; font-weight: 600;font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: #f79433; animation: hcb-rise .9s var(--hcb-ease) .18s both; }
.hcb-crumb li { display: flex; align-items: center; }
.hcb-crumb li + li::before { content: "-"; margin: 0 14px; color: var(--hcb-muted); }
.hcb-crumb-home { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 14px; border-radius: 50%; background: var(--hcb-orange); color: #fff; font-size: 19px; }
.hcb .hcb-crumb a { color:  var(--hcb-orange); transition: color .3s; }
.hcb .hcb-crumb a:hover { color: var(--hcb-orange); }
.hcb .hcb-banner-lead { max-width: 560px; margin: 20px 0 0; font-size: 18px; color: var(--hcb-ink); animation: hcb-rise .9s var(--hcb-ease) .3s both; }
.hcb-banner-orb { position: absolute; border-radius: 50%; background: var(--c); animation: hcb-float 8s ease-in-out infinite; }
.hcb-banner-orb:nth-child(1) { right: 6%; top: -70px; width: 300px; height: 300px; opacity: .9; }
.hcb-banner-orb:nth-child(2) { right: 26%; bottom: -60px; width: 170px; height: 170px; animation-delay: -2s; }
.hcb-banner-orb:nth-child(3) { right: -50px; bottom: -40px; width: 210px; height: 210px; animation-delay: -4s; }
.hcb-banner-orb:nth-child(4) { right: 31%; top: 44px; width: 64px; height: 64px; animation-delay: -1s; }
.hcb-banner-orb:nth-child(5) { right: 20%; top: 46%; width: 34px; height: 34px; animation-delay: -3s; }
.hcb-banner.has-image .hcb-banner-orb { display: none; }
@keyframes hcb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes hcb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Category chips ---------- */
.hcb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.hcb .hcb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--hcb-line); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 500; transition: color .35s, border-color .35s, transform .35s var(--hcb-ease); }
.hcb-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.hcb-chip small { font-size: 12px; color: var(--hcb-muted); }
.hcb .hcb-chip:hover { border-color: var(--c); transform: translateY(-3px); }
.hcb .hcb-chip.is-active { background: var(--hcb-ink); border-color: var(--hcb-ink); color: #fff; }
.hcb-chip.is-active small { color: #d9d6d5; }

/* ---------- Top: slider + 3 chhote cards ---------- */
.hcb-top { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 30px; margin-bottom: 64px; }
.hcb-slider { position: relative; padding-bottom: 34px; }
.hcb-slides { position: relative; height: 100%; min-height: 520px; border-radius: 30px; overflow: hidden; box-shadow: 0 40px 70px -46px rgba(54, 52, 52, .85); }
.hcb .hcb-slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .9s var(--hcb-ease), visibility 0s .9s; }
.hcb .hcb-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--hcb-ease), visibility 0s; }
.hcb-slide-media { position: absolute; inset: 0; }
.hcb-slide-media img { transform: scale(1.08); transition: transform 6s linear; }
.hcb-slide.is-active .hcb-slide-media img { transform: none; }
.hcb-slide-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 90px 44px 36px; background: linear-gradient(180deg, rgba(54, 52, 52, 0) 0%, rgba(43, 41, 41, .82) 46%, rgba(43, 41, 41, .96) 100%); }
.hcb-slide-title { max-width: 900px; font-size: 40px; line-height: 1.14; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.hcb-slide-meta { font-size: 17px; color: #f1efee; }
.hcb-slide.is-active .hcb-pill { animation: hcb-rise .8s var(--hcb-ease) .15s both; }
.hcb-slide.is-active .hcb-slide-title { animation: hcb-rise .8s var(--hcb-ease) .28s both; }
.hcb-slide.is-active .hcb-slide-meta { animation: hcb-rise .8s var(--hcb-ease) .4s both; }
.hcb-slider-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 14px; }
.hcb-slider-dots button { width: 38px; height: 5px; padding: 0; border: 0; border-radius: 5px; background: #cfcccb; cursor: pointer; transition: background .35s, width .45s var(--hcb-ease); }
.hcb-slider-dots button.is-active { width: 58px; background: var(--hcb-orange); }

.hcb-top-side { display: flex; flex-direction: column; gap: 26px; }
.hcb-top-side > div { flex: 1; display: flex; }
.hcb .hcb-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; width: 100%; padding: 22px; background: #fff; border: 1px solid transparent; border-radius: 26px; box-shadow: 0 24px 50px -30px rgba(54, 52, 52, .45), 0 0 0 1px var(--hcb-line); transition: transform .5s var(--hcb-ease), box-shadow .5s var(--hcb-ease), border-color .35s; }
.hcb .hcb-mini:hover { transform: translateY(-6px); border-color: var(--hcb-orange); box-shadow: 0 36px 60px -32px rgba(54, 52, 52, .6); }
.hcb-mini-media { width: 96px; height: 96px; border-radius: 14px; }
.hcb-mini-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcb-mini-title { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--hcb-ink); transition: color .3s; }
.hcb-mini-meta { font-size: 15px; color: var(--hcb-muted); transition: color .3s; }
.hcb-mini .hcb-read { margin-top: 8px; }
.hcb .hcb-mini:hover .hcb-mini-meta { color: var(--hcb-orange); }
.hcb .hcb-mini:hover .hcb-mini-media img { transform: scale(1.1); }
.hcb .hcb-mini:hover .hcb-read i { transform: translateX(6px); }

/* ---------- Cards ---------- */
.hcb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.hcb .hcb-card { display: flex; flex-direction: column; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(54, 52, 52, .45), 0 0 0 1px var(--hcb-line); transition: transform .5s var(--hcb-ease), box-shadow .5s var(--hcb-ease); }
.hcb .hcb-card:hover { transform: translateY(-10px); box-shadow: 0 46px 70px -34px rgba(54, 52, 52, .65), 0 0 0 1px var(--hcb-line); }
.hcb-card-media { aspect-ratio: 2 / 1; }
.hcb-card-media .hcb-pill { position: absolute; left: 18px; top: 18px; z-index: 1; }
.hcb .hcb-card:hover .hcb-card-media img { transform: scale(1.07); }
.hcb-card-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 30px 32px 28px; }
.hcb-card-title { font-size: 25px; line-height: 1.3; font-weight: 700; color: var(--hcb-ink); }
.hcb-card .hcb-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcb-card-meta { font-size: 14px; color: var(--hcb-muted); }
.hcb-more { align-self: flex-start; margin: auto 0 0 -18px; padding: 9px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--hcb-orange); transition: background .4s var(--hcb-ease), color .4s, margin .4s var(--hcb-ease), padding .4s var(--hcb-ease), box-shadow .4s; }
.hcb .hcb-card:hover .hcb-more { margin-left: 0; padding: 11px 26px; background: var(--hcb-orange); color: #fff; box-shadow: 0 14px 24px -12px var(--hcb-orange); }
.hcb .hcb-card:hover .hcb-more i { transform: translateX(5px); }

.hcb-empty { padding: 56px 20px; border: 1px dashed var(--hcb-line); border-radius: 26px; text-align: center; }
.hcb-empty p { font-size: 18px; }

/* ---------- Pagination ---------- */
.hcb-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 52px; }
.hcb .hcb-pages a, .hcb-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 16px; border: 1px solid var(--hcb-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; transition: border-color .3s, color .3s, transform .35s var(--hcb-ease); }
.hcb .hcb-pages a:hover { border-color: var(--hcb-orange); color: var(--hcb-orange); transform: translateY(-3px); }
.hcb-pages .is-current { background: var(--hcb-orange); border-color: var(--hcb-orange); color: #fff; }
.hcb-pages .hcb-gap { border: 0; background: none; min-width: 0; padding: 0 4px; }

/* ---------- Details page ---------- */
.hcb-progress { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 4px; pointer-events: none; }
.hcb-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--hcb-blue), var(--hcb-red), var(--hcb-orange), var(--hcb-yellow), var(--hcb-green)); }

.hcb.hcb-sharebar { position: fixed; left: 0; top: 50%; z-index: 90; display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: visible; transform: translateY(-50%); }
.hcb.hcb-sharebar a { display: flex; align-items: center; justify-content: flex-end; width: 60px; height: 58px; padding-right: 20px; border-radius: 0 999px 999px 0; background: var(--c); color: #fff; font-size: 22px; transform: translateX(-8px); transition: transform .4s var(--hcb-ease), width .4s var(--hcb-ease); }
.hcb.hcb-sharebar a.hcb-c-yellow, .hcb.hcb-sharebar a.hcb-c-green { color: var(--hcb-ink); }
.hcb.hcb-sharebar a:hover, .hcb.hcb-sharebar a:focus { transform: none; width: 72px; }

.hcb-post { padding-top: 56px; }
.hcb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 30px; align-items: start; }
.hcb-article { min-width: 0; }
.hcb-post-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; font-size: 15px; color: var(--hcb-muted); }
.hcb-post-top .hcb-pill { text-transform: uppercase; letter-spacing: .03em; }
.hcb-article > h1 { margin: 0 0 24px; font-size: 50px; line-height: 1.12; font-weight: 700; letter-spacing: -.015em; color: var(--hcb-ink); animation: hcb-rise .9s var(--hcb-ease) .1s both; }
.hcb-post-box { border: 1px solid var(--hcb-line); border-radius: 30px; overflow: hidden; background: #fff; }
.hcb-post-media { aspect-ratio: 2 / 1; }
.hcb-post-inner { padding: 34px 36px 36px; }
.hcb .hcb-lead-text { margin: 0 0 28px; padding-left: 20px; border-left: 4px solid var(--hcb-orange); font-size: 20px; line-height: 1.6; color: var(--hcb-ink); }
.hcb-prose { font-size: 18.5px; line-height: 1.8; color: #3f3d3d; }
.hcb .hcb-prose p { margin: 0 0 20px; color: inherit; }
.hcb-prose h2 { margin: 40px 0 16px; padding-top: 30px; border-top: 1px solid var(--hcb-line); font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--hcb-ink); }
.hcb-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hcb-prose h3 { margin: 32px 0 12px; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--hcb-ink); }
.hcb-prose h4 { margin: 26px 0 10px; font-size: 20px; font-weight: 700; color: var(--hcb-ink); }
.hcb .hcb-prose a { color: var(--hcb-ink); text-decoration: underline; text-decoration-color: var(--hcb-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hcb .hcb-prose a:hover { color: var(--hcb-orange); }
.hcb-prose ul, .hcb-prose ol { margin: 0 0 22px; padding-left: 26px; }
.hcb-prose li { margin-bottom: 8px; }
.hcb-prose li::marker { color: var(--hcb-orange); font-weight: 700; }
.hcb-prose img { display: block; height: auto; margin: 28px 0; border-radius: 20px; }
.hcb-prose blockquote { margin: 30px 0; padding: 24px 28px; border: 0; border-left: 5px solid var(--hcb-orange); border-radius: 0 20px 20px 0; background: var(--hcb-tint); font-size: 20px; line-height: 1.5; color: var(--hcb-ink); }
.hcb-prose blockquote p:last-child { margin-bottom: 0; }
.hcb-table { margin: 0 0 28px; overflow-x: auto; border: 1px solid var(--hcb-line); border-radius: 18px; }
.hcb-prose table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.hcb-prose th { padding: 13px 16px; background: var(--hcb-ink); color: #fff; font-weight: 600; text-align: left; }
.hcb-prose td { padding: 13px 16px; border-top: 1px solid var(--hcb-line); }
.hcb-prose tbody tr:nth-child(even) td { background: var(--hcb-tint); }
.hcb-prose iframe, .hcb-prose video { max-width: 100%; border-radius: 20px; }

.hcb-share { display: none; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--hcb-line); }
.hcb-share > span { margin-right: 6px; font-weight: 600; }
.hcb .hcb-share a, .hcb-share button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--hcb-line); border-radius: 999px; background: #fff; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--hcb-ink); cursor: pointer; transition: border-color .3s, transform .35s var(--hcb-ease); }
.hcb-share a::before, .hcb-share button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.hcb .hcb-share a:hover, .hcb-share button:hover { border-color: var(--c); transform: translateY(-3px); }

.hcb-nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.hcb .hcb-nextprev a { display: block; padding: 20px 24px; border: 1px solid var(--hcb-line); border-radius: 22px; background: #fff; transition: border-color .3s, transform .4s var(--hcb-ease), box-shadow .4s var(--hcb-ease); }
.hcb .hcb-nextprev a:hover { border-color: var(--hcb-orange); transform: translateY(-5px); box-shadow: 0 26px 44px -32px rgba(54, 52, 52, .6); }
.hcb .hcb-nextprev a.hcb-next { grid-column: 2; text-align: right; }
.hcb-nextprev small { display: block; margin-bottom: 4px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--hcb-orange); }
.hcb-nextprev strong { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--hcb-ink); }

/* Sidebar */
.hcb-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 26px; }
.hcb-side .hcb-mini { grid-template-columns: 110px minmax(0, 1fr); padding: 18px; }
.hcb-side .hcb-mini-media { width: 110px; height: 100px; }
.hcb-side .hcb-mini-title { font-size: 18.5px; }
.hcb-side .hcb-mini-meta { color: var(--hcb-orange); font-size: 14px; }
.hcb-side-box { padding: 24px; background: #fff; border-radius: 26px; box-shadow: 0 24px 50px -30px rgba(54, 52, 52, .45), 0 0 0 1px var(--hcb-line); }
.hcb-side h2 { position: relative; margin: 0 0 16px; padding-bottom: 12px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--hcb-ink); }
.hcb-side h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--hcb-orange); }
.hcb-side-cats { list-style: none; margin: 0; padding: 0; }
.hcb .hcb-side-cats a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hcb-line); font-size: 15.5px; font-weight: 500; transition: padding-left .35s var(--hcb-ease), color .3s; }
.hcb-side-cats li:last-child a { border-bottom: 0; }
.hcb-side-cats a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); transition: transform .35s var(--hcb-ease); }
.hcb-side-cats a span { flex: 1; }
.hcb-side-cats a small { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--hcb-tint); font-size: 12px; text-align: center; color: var(--hcb-muted); }
.hcb .hcb-side-cats a:hover, .hcb .hcb-side-cats a.is-active { padding-left: 6px; color: var(--hcb-orange); }
.hcb-side-cats a:hover::before { transform: scale(1.6); }
.hcb-help { padding: 26px; border-radius: 26px; background: var(--hcb-ink); }
.hcb .hcb-help h2 { color: #fff; margin-bottom: 10px; }
.hcb .hcb-help p { color: #d9d6d5; font-size: 15px; margin-bottom: 18px; }

/* ---------- Scroll reveal (sirf JS chalne par) ---------- */
.hcb-js .hcb-rv { opacity: 0; transform: translateY(34px); }
.hcb-js .hcb-rv.is-in { opacity: 1; transform: none; transition: opacity .8s var(--hcb-ease), transform .8s var(--hcb-ease), box-shadow .5s var(--hcb-ease); transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s; }
.hcb-js .hcb-rv.is-in:hover { transition-delay: 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .hcb-layout { grid-template-columns: minmax(0, 1fr) 330px; }
    .hcb-article > h1 { font-size: 40px; }
    .hcb-slide-title { font-size: 32px; }
    .hcb-card-body { padding: 24px 24px 22px; }
    .hcb-card-title { font-size: 21px; }
}
@media (max-width: 991px) {
    .hcb-top { grid-template-columns: minmax(0, 1fr); }
    .hcb-slides { min-height: 420px; }
    .hcb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .hcb-layout { grid-template-columns: minmax(0, 1fr); }
    .hcb-side { position: static; }
    .hcb.hcb-sharebar { display: none; }
    .hcb-share { display: flex; }
}
@media (max-width: 767px) {
    .hcb { padding: 40px 0; }
    .hcb-banner { padding: 44px 0 48px; }
    .hcb-banner-title { font-size: 36px; }
    .hcb-crumb { font-size: 13.5px; }
    .hcb-crumb-home { width: 34px; height: 34px; font-size: 16px; margin-right: 10px; }
    .hcb-crumb li + li::before { margin: 0 9px; }
    .hcb-banner-orb:nth-child(1) { width: 150px; height: 150px; top: -50px; right: -30px; }
    .hcb-banner-orb:nth-child(2), .hcb-banner-orb:nth-child(3) { display: none; }
    .hcb-banner.has-image { background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .8)), var(--hcb-banner) center / cover no-repeat; }
    .hcb-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -15px 24px; padding: 4px 15px 8px; scrollbar-width: none; }
    .hcb-chips::-webkit-scrollbar { display: none; }
    .hcb-chip { flex: none; }
    .hcb-top { margin-bottom: 40px; gap: 22px; }
    .hcb-slides { min-height: 340px; border-radius: 22px; }
    .hcb-slide-body { padding: 70px 20px 22px; gap: 8px; }
    .hcb-slide-title { font-size: 23px; }
    .hcb-slide-meta { font-size: 14px; }
    .hcb-top-side { gap: 16px; }
    .hcb .hcb-mini, .hcb-side .hcb-mini { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 20px; }
    .hcb-mini-media, .hcb-side .hcb-mini-media { width: 84px; height: 84px; }
    .hcb-mini-title, .hcb-side .hcb-mini-title { font-size: 16.5px; }
    .hcb-mini-meta { font-size: 13.5px; }
    .hcb-grid { grid-template-columns: minmax(0, 1fr); }
    .hcb .hcb-card { border-radius: 22px; }
    .hcb-more { margin-left: 0; padding: 10px 22px; background: var(--hcb-orange); color: #fff; }
    .hcb-post { padding-top: 32px; }
    .hcb-article > h1 { font-size: 29px; }
    .hcb-post-box { border-radius: 22px; }
    .hcb-post-media { aspect-ratio: 16 / 10; }
    .hcb-post-inner { padding: 22px 18px 24px; }
    .hcb .hcb-lead-text { font-size: 17.5px; }
    .hcb-prose { font-size: 16.5px; }
    .hcb-prose h2 { font-size: 24px; }
    .hcb-prose h3 { font-size: 20px; }
    .hcb-nextprev { grid-template-columns: 1fr; }
    .hcb .hcb-nextprev a.hcb-next { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .hcb *, .hcb *::before, .hcb *::after { animation: none !important; transition: none !important; }
    .hcb-js .hcb-rv { opacity: 1; transform: none; }
}