/* Blog stylesheet — used ONLY by blog-index.php + blog-post.php; one-place-per-component rule applies */

/* Width: reuse the site .container; this only adds the blog grid + padding */
.blog-wrap {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 34px;
      /* start: dono column apni-apni lambai ke — warna sidebar khinch kar lekh */
      align-items: start;
      padding-top: 10px;
      padding-bottom: 72px
}

/* Sidebar saath chalta hai — lamba lekh padhte waqt "Latest Posts" upar chhoot */
.blog-side {
      position: sticky;
      top: 86px
}

@media (max-width: 900px) {
      .blog-side { position: static; top: auto }
}

/* ---- Blog header nav (Home + top categories) replacing the action icons ---- */
.site-header__nav {
      display: flex;
      gap: 12px 22px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end
}

.site-header__nav a {
      color: var(--blue-color);
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      padding: 5px 2px;
      border-bottom: 1px solid transparent;
      transition: .15s;
      white-space: nowrap
}

.site-header__nav a:hover {
      color: var(--main-color);
      border-bottom-color: var(--main-color)
}

/* Mobile hamburger — opens the site's existing slide-in sidebar (#skSidebar) */
.site-header__burger {
      display: none;
      background: none;
      border: 0;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      color: var(--blue-color);
      padding: 6px 8px;
      align-items: center
}

.site-header__burger:hover {
      color: var(--main-color)
}

/* In-header search bar (pill-shaped, sits in nav row between links and hamburger) */
.site-header__blog-search {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--c-surface-light);
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 4px 4px 4px 14px;
      flex: 0 1 280px;
      min-width: 200px;
      transition: border-color .15s, background .15s
}

.site-header__blog-search:focus-within {
      border-color: var(--main-color);
      background: var(--c-surface)
}

.site-header__blog-search i {
      color: var(--c-muted);
      font-size: 13px;
      flex: 0 0 auto
}

.site-header__blog-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      /* main.css har input[type=search] par andar ki parchhai (--elev-in) deta hai — yahan khaana */
      box-shadow: none;
      font-size: 13.5px;
      padding: 6px 4px;
      color: var(--c-text)
}

.site-header__blog-search input::placeholder {
      color: var(--c-muted)
}

.site-header__blog-search button {
      flex: 0 0 auto;
      border: 0;
      background: linear-gradient(135deg, var(--main-color), var(--c-accent));
      color: var(--c-on-accent);
      font-weight: var(--btn-fw);
      font-size: 12px;
      letter-spacing: .3px;
      padding: 7px 16px;
      border-radius: 7px;
      cursor: pointer;
      transition: filter .15s, transform .15s
}

.site-header__blog-search button:hover {
      filter: brightness(1.08);
      transform: translateY(-1px)
}

/* Mobile: hide the inline nav links + search, show the hamburger → site sidebar */

/* ---- Mobile toolbar: search + breadcrumb shown ONLY on mobile (≤860px), like the website city-page pattern ---- */
.blog-mobile-toolbar {
      display: none
}

/* MASTHEAD — banner ab khaali photo nahi, blog ka mukhda hai */

/* Saya: neeche gehra, upar bilkul saaf — tasveer chhupti nahi, bas likha hua uthta hai. */

/* MUDI HUI KAAGAZ WALI PARCHHAI — assets/images/icons-group/shadows/shadow-2.png */
.bp-rel::after {
      content: "";
      position: absolute;
      /* Dabbe se thoda BAHAR tak — asli parchhai kinare par rukti nahi, phailti hai. */
      left: -1.5%;
      right: -1.5%;
      /* bottom = -height : parchhai ka SIRA theek dabbe ke neeche wale kinare par */
      bottom: calc(-1 * var(--curl-h));
      height: var(--curl-h);
      background: url("/assets/images/icons-group/shadows/shadow-2.png") center top / 100% 100% no-repeat;
      opacity: var(--curl-o);
      pointer-events: none;
      /* Naap aur gehrai EK jagah se — bada dabba, badi parchhai. Neeche har */
      --curl-h: 46px;
      --curl-o: 1
}

/* Related cards are small: the same shadow-2 curl, only shorter (owner, 18 Oct 2026) */
.bp-rel::after {
      background-image: url("/assets/images/icons-group/shadows/shadow-2.png");
      --curl-h: 30px
}

/* Parchhai dabbe ke BAHAR baithti hai, isliye in dabbon se `overflow: hidden` */
.blog-side__box { position: relative }

/* Phone par 1400/520 ka anupaat sirf ~145px oonchi patti banata hai — usme naam aur */

/* ---- Page heading section — visible H1 + subtitle ---- */
.blog-page-head {
      margin: 0 0 30px;
      padding: 0
}

.blog-page-head__kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--main-color);
      margin: 0 0 10px
}

.blog-page-head__kicker::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--main-color);
      border-radius: 2px
}

.blog-page-head h1 {
      margin: 0 0 8px;
      font-size: clamp(28px, 4.4vw, 40px);
      font-weight: 700;
      letter-spacing: -.6px;
      line-height: 1.1;
      color: var(--c-text)
}

.blog-page-head p {
      margin: 0;
      font-size: 16px;
      line-height: 1.55;
      color: var(--c-muted);
      max-width: 620px
}

/* ---- Index: shreni ki patti (category pills) ---- */
.blog-catnav {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 0 0 22px
}

/* Ginti — pill ke andar halka sa gol dabba */

/* ---- Index: post cards ---- */

/* CHAMAK — hover par card ke upar se guzarne wali roshni ki patti */

/* Hover par tasveer halke se paas aati hai — card zinda lagta hai. */

/* Desktop body order: meta → title → excerpt → more */

/* 🔴 Ungli ke liye 44px — asli phone-jaisi touch me pakda (390px, 24 Sep). */

/* 🔴 block, inline NAHI — asli browser me pakda gaya (1024, 24 Sep). */

/* Mobile body order: title → meta → excerpt → more */

.blog-empty {
      background: var(--c-surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 48px 20px;
      text-align: center;
      color: var(--c-muted)
}

/* ---- Landscape cards (3rd post onward): image left, content right ---- */

/* ---- Index: pagination ---- */
.blog-pag {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-top: 28px;
      flex-wrap: wrap
}

.blog-pag a,
.blog-pag span {
      min-width: 40px;
      text-align: center;
      padding: 9px 13px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--c-surface);
      color: var(--c-muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 700
}

.blog-pag .is-on {
      background: var(--main-color);
      color: var(--c-on-accent);
      border-color: var(--main-color)
}

/* ---- Single post ---- */
.bp-crumb {
      font-size: 14px;
      color: var(--c-muted);
      margin: 0 0 14px
}

.bp-crumb a {
      color: var(--main-color);
      text-decoration: none
}

.bp-cat {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      color: var(--c-on-accent);
      background: var(--main-color);
      padding: 7px 16px;
      border-radius: 7px;
      text-decoration: none;
      letter-spacing: .2px;
      line-height: 1;
      box-shadow: 0 2px 8px rgba(var(--c-dark-rgb), 0.35);
      transition: background .15s
}

.bp-cat:hover {
      background: var(--c-hover);
      color: var(--c-on-accent)
}

.bp-title {
      /* Bada parda hone par sheershak bhi bada — 34px fixed 1920 par chhota lagta tha. */
      font-size: clamp(30px, 3.2vw, 46px);
      font-weight: 700;
      color: var(--c-text);
      line-height: 1.16;
      margin: 0 0 14px;
      letter-spacing: -.6px;
      /* Owner 18 Sep: `balance` do barabar line banata tha — pehli line "Adult" par ruk jaati, daayen */
      text-wrap: pretty
}

.bp-meta {
      font-size: 14.5px;
      color: var(--c-muted);
      margin: 0 0 20px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center
}

.bp-meta__author {
      display: inline-flex;
      align-items: center;
      gap: 7px
}

.bp-author-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 auto;
      background: var(--c-surface-light);
      border: 1px solid var(--line)
}

.bp-author {
      color: inherit;
      text-decoration: none;
      font-weight: 600
}

.bp-author:hover {
      color: var(--main-color);
      text-decoration: underline
}

.bp-hero {
      position: relative;
      /* overflow wapas: parchhai ab yahan nahi hai (owner: sirf post/related card). */
      overflow: hidden;
      width: 100%;
      border-radius: 14px;
      margin: 0 0 34px;
      background: var(--c-dark)
}

.bp-hero img {
      width: 100%;
      display: block;
      object-fit: cover;
      max-height: 460px;
      border-radius: inherit
}

/* LEKH KA SHAREER — padhne ke liye bana, chaudai bharne ke liye nahi */
.bp-body {
      font-size: 17.5px;
      line-height: 1.85;
      color: var(--c-text);
      /* Owner 18 Sep ("ye jagah khaali hai, content ki width dekho"): 68ch ki seema hatayi — lekh */
      max-width: none
}

/* Pehla paragraph = lekh ka mukh. Thoda bada aur halka — aankh ko pata chalta */
.bp-body > p:first-of-type {
      font-size: 19.5px;
      line-height: 1.7;
      color: var(--c-text)
}

/* Hisse ka sir: upar ek chhoti sunehri lakeer. Bina iske sab heading ek jaisi */
.bp-body h2 {
      font-size: 27px;
      font-weight: 700;
      color: var(--c-text);
      margin: 46px 0 14px;
      padding-top: 18px;
      line-height: 1.25;
      letter-spacing: -.3px;
      clear: both;
      border-top: 1px solid rgba(var(--c-accent-rgb), 0.22)
}

.bp-body h2:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: 0
}

.bp-body h3 {
      font-size: 20px;
      font-weight: 700;
      color: var(--c-text);
      margin: 30px 0 9px;
      line-height: 1.3;
      clear: both
}

/* Phone par column sach me chhota hota hai (366px), isliye yahan heading chhoti. */
@media (max-width: 700px) {
      .bp-body h2 { font-size: 22px; margin-top: 34px; padding-top: 14px }
      .bp-body h3 { font-size: 18.5px; margin-top: 24px }
      .bp-body > p:first-of-type { font-size: 17.5px }
}

.bp-body p {
      margin: 0 0 20px
}

.bp-body ul,
.bp-body ol {
      margin: 0 0 18px 22px
}

.bp-body li {
      margin: 0 0 8px
}

.bp-body img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      margin: 14px 0
}

.bp-body img[style*="float:left"],
.bp-body img[style*="float: left"] {
      margin: 4px 18px 10px 0
}

.bp-body img[style*="float:right"],
.bp-body img[style*="float: right"] {
      margin: 4px 0 10px 18px
}

.bp-body figure {
      margin: 18px 0;
      display: table;
      max-width: 100%
}

.bp-body figure[style*="float:left"],
.bp-body figure[style*="float: left"] {
      margin: 4px 18px 10px 0
}

.bp-body figure[style*="float:right"],
.bp-body figure[style*="float: right"] {
      margin: 4px 0 10px 18px
}

.bp-body figure img {
      margin: 0;
      border-radius: 10px 10px 0 0
}

.bp-body hr {
      border: 0;
      border-top: 1px solid var(--c-border);
      margin: 28px 0
}

.bp-body .ql-align-center {
      text-align: center
}

.bp-body .ql-align-right {
      text-align: right
}

.bp-body .ql-align-justify {
      text-align: justify
}

.bp-body .ql-indent-1 {
      padding-left: 3em
}

.bp-body .ql-indent-2 {
      padding-left: 6em
}

.bp-body .ql-indent-3 {
      padding-left: 9em
}

.bp-body .ql-indent-4 {
      padding-left: 12em
}

.bp-body .ql-indent-5 {
      padding-left: 15em
}

.bp-body .ql-indent-6 {
      padding-left: 18em
}

.bp-body .ql-indent-7 {
      padding-left: 21em
}

.bp-body .ql-indent-8 {
      padding-left: 24em
}

.bp-body figcaption {
      font-size: 14px;
      line-height: 1.5;
      color: var(--c-muted);
      padding: 8px 10px 10px;
      font-style: italic;
      text-align: center;
      background: var(--c-surface-light);
      border-radius: 0 0 10px 10px;
      border: 1px solid var(--c-border);
      border-top: 0
}

.bp-body a {
      color: var(--main-color);
      text-decoration: underline
}

.bp-body::after {
      content: "";
      display: block;
      clear: both
}

.bp-tags {
      margin: 26px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
}

.bp-tags a {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--blue-color);
      background: var(--c-surface-light);
      border: 1px solid var(--line);
      padding: 6px 14px;
      border-radius: 7px;
      text-decoration: none
}

.bp-tags a:hover {
      border-color: var(--main-color);
      color: var(--main-color)
}

.bp-share {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 26px 0 0;
      padding: 18px 0;
      border-top: 1px solid var(--c-border);
      border-bottom: 1px solid var(--c-border)
}

.bp-share span {
      font-weight: 700;
      color: var(--c-muted);
      font-size: 15px
}

.bp-share a {
      width: 38px;
      min-width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--c-surface);
      color: var(--text-color);
      text-decoration: none;
      font-size: 15px;
      line-height: 1;
      transition: .18s ease
}

.bp-share a:hover {
      border-color: var(--main-color);
      color: var(--main-color);
      background: rgba(var(--c-accent-rgb), 0.12);
      transform: translateY(-2px)
}

.bp-related {
      margin: 42px 0 0
}

.bp-related h3 {
      font-size: 24px;
      font-weight: 700;
      color: var(--c-text);
      margin: 0 0 22px;
      letter-spacing: -.3px
}

/* 🔴 auto-fit, repeat(2,1fr) nahi. */
.bp-rel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: 24px
}

.bp-rel-grid > .bp-rel:only-child {
      max-width: 460px
}

.bp-rel {
      position: relative;
      background: var(--c-surface-light)   /* farsh se HALKA — dekho curl-shadow ka comment */;
      border: 1px solid var(--c-border);
      border-radius: 14px;
      /* overflow: hidden hataya — neeche wali parchhai ke liye. Dekho .bcard. */
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(var(--c-dark-rgb), 0.04);
      transition: transform .25s, box-shadow .25s, border-color .25s
}

.bp-rel:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 26px rgba(var(--c-dark-rgb), 0.08);
      border-color: var(--line)
}

.bp-rel__img {
      position: relative;
      display: block;
      aspect-ratio: 16/9;
      border-radius: 13px 13px 0 0;   /* card se overflow hataya, gol kinare ab yahan se */
      overflow: hidden;
      background: var(--c-dark)
}

.bp-rel__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease
}

.bp-rel:hover .bp-rel__img img {
      transform: scale(1.05)
}

.bp-rel__cat {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--main-color);
      color: var(--c-on-accent);
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 7px;
      letter-spacing: .2px;
      line-height: 1;
      z-index: 2;
      box-shadow: 0 2px 6px rgba(var(--c-dark-rgb), 0.3)
}

.bp-rel__body {
      padding: 20px 22px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1
}

.bp-rel__title {
      display: block;
      font-size: 20px;
      font-weight: 700;
      color: var(--c-text);
      line-height: 1.3;
      text-decoration: none;
      letter-spacing: -.2px
}

.bp-rel__title:hover {
      color: var(--main-color)
}

.bp-rel__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 13.5px;
      color: var(--c-muted)
}

.bp-rel__avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 30px;
      background: var(--c-surface-light);
      border: 1px solid var(--line)
}

.bp-rel__author {
      font-weight: 500;
      color: var(--c-muted)
}

.bp-rel__date {
      margin-left: auto;
      color: var(--c-muted);
      font-size: 13px
}

.bp-rel__excerpt {
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--c-muted);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden
}

.bp-rel__more {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text);
      text-decoration: none;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-top: auto;
      padding-top: 4px
}

.bp-rel__arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--main-color);
      color: var(--c-on-accent);
      font-size: 13px;
      transition: transform .2s, background .2s
}

.bp-rel__more:hover {
      color: var(--main-color)
}

.bp-rel__more:hover .bp-rel__arrow {
      transform: translateX(4px);
      background: var(--c-hover)
}

/* ---- Sidebar (Latest Posts + Categories) ---- */
.blog-side__box {
      background: var(--c-surface-light);   /* farsh se HALKA — dekho curl-shadow ka comment */
      border: 1px solid var(--c-accent-light);
      border-radius: 12px;
      box-shadow: var(--shadow-3d);
      padding: 18px 18px 8px;
      margin-bottom: 20px
}

.blog-side__box h3 {
      margin: 0 0 14px;
      font-size: 22px;
      font-weight: 700;
      color: var(--c-text);
      border-bottom: 1px solid var(--main-color);
      padding-bottom: 8px;
      display: inline-block
}

.blog-side__latest a {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid rgba(var(--c-border-rgb), 0.282);
      text-decoration: none
}

.blog-side__latest a:last-child {
      border-bottom: 0
}

.blog-side__latest img {
      width: 76px;
      height: 56px;
      border-radius: 8px;
      object-fit: cover;
      flex: 0 0 56px
}

.blog-side__latest span {
      font-size: 16.5px;
      font-weight: 700;
      color: var(--c-muted);
      line-height: 1.4
}

.blog-side__latest a:hover span {
      color: var(--main-color)
}

.blog-side__cats {
      list-style: none;
      margin: 0;
      padding: 0
}

.blog-side__cats li {
      border-bottom: 1px solid rgba(var(--c-border-rgb), 0.282)
}

.blog-side__cats li:last-child {
      border-bottom: 0
}

.blog-side__cats a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 2px;
      text-decoration: none;
      color: var(--blue-color);
      font-size: 20px;
      font-weight: 700
}

.blog-side__cats a:hover {
      color: var(--main-color)
}

.blog-side__cats .cnt {
      background: var(--c-dark);
      color: var(--c-text);
      font-size: 12px;
      font-weight: 700;
      min-width: 28px;
      text-align: center;
      padding: 3px 8px;
      border-radius: 7px
}

/* ---- Blog mobile sidebar (reuses .site-sidebar* from main.css) ---- */
#skBlogSidebar .blog-sb-meta {
      grid-row: 2;
      grid-column: 2;
      align-self: start;
      display: flex;
      align-items: center;
      gap: 8px
}

#skBlogSidebar .blog-sb-meta .site-sidebar__country {
      display: inline
}

#skBlogSidebar .blog-sb-tag {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--main-color)
}

#skBlogSidebar .blog-sb-tag::before {
      content: "•";
      margin-right: 8px;
      color: var(--c-muted);
      font-weight: 700
}

/* Desktop header brand: show "Blog" next to "India" (blog pages only) */
.site-header__blogtag {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--blue-color)
}

.site-header__blogtag::before {
      content: "•";
      margin-right: 8px;
      color: var(--c-muted);
      font-weight: 700
}

/* Count pill */
#skBlogSidebar .blog-sb-cnt {
      background: var(--c-dark);
      color: var(--c-text);
      font-size: 11px;
      font-weight: 700;
      min-width: 24px;
      text-align: center;
      padding: 2px 7px;
      border-radius: 7px
}

/* Category accordion */
#skBlogSidebar .blog-cat {
      border-bottom: 1px solid var(--c-border)
}

#skBlogSidebar .blog-cat__head {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: var(--btn-py) 4px;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: var(--btn-fw);
      color: var(--c-text);
      text-align: left
}

#skBlogSidebar .blog-cat__head>i.fa-regular {
      color: var(--c-muted);
      font-size: 15px
}

#skBlogSidebar .blog-cat__name {
      flex: 1;
      min-width: 0
}

#skBlogSidebar .blog-cat__chev {
      font-size: 11px;
      color: var(--c-muted);
      transition: transform .2s
}

#skBlogSidebar .blog-cat.is-open>.blog-cat__head {
      color: var(--main-color)
}

#skBlogSidebar .blog-cat.is-open>.blog-cat__head .blog-cat__chev {
      transform: rotate(180deg);
      color: var(--main-color)
}

#skBlogSidebar .blog-cat__panel {
      display: none;
      padding: 2px 0 12px 32px
}

#skBlogSidebar .blog-cat.is-open>.blog-cat__panel {
      display: block;
      animation: bcatIn .18s ease
}

@keyframes bcatIn {
      from {
            opacity: 0;
            transform: translateY(-4px)
      }

      to {
            opacity: 1;
            transform: none
      }
}

#skBlogSidebar .blog-cat__post {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      padding: 7px 0;
      font-size: 13px;
      color: var(--c-muted);
      text-decoration: none;
      line-height: 1.4
}

#skBlogSidebar .blog-cat__post i {
      color: var(--c-muted);
      font-size: 12px;
      flex: 0 0 auto;
      margin-top: 3px
}

#skBlogSidebar .blog-cat__post:hover {
      color: var(--main-color)
}

#skBlogSidebar .blog-cat__post:hover i {
      color: var(--main-color)
}

#skBlogSidebar .blog-cat__all {
      display: inline-block;
      margin: 8px 0 2px;
      font-size: 12px;
      font-weight: 700;
      color: var(--main-color);
      text-decoration: none;
      letter-spacing: .2px
}

/* AGLA / PICHLA — article ke ant me do raaste */
.bp-updown {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 34px 0 0
}

.bp-updown__a {
      display: block;
      padding: 15px 17px;
      border: 1px solid var(--c-border);
      border-radius: 12px;
      background: var(--c-surface);
      text-decoration: none;
      transition: border-color var(--t-fast), background var(--t-fast)
}

.bp-updown__a:hover { border-color: var(--c-accent); background: var(--c-tint) }

/* Newer wala DAAYEN kinare se padha jaata hai — dono ka teer apni disha me. */
.bp-updown__a--next { text-align: right }

.bp-updown__k {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--c-accent);
      margin-bottom: 6px
}

.bp-updown__t {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: var(--c-text);
      line-height: 1.35
}

/* Ek hi taraf ka link ho to wo poori chaudai le — aadha khaali khaana nahi. */
.bp-updown__a:only-child { grid-column: 1 / -1 }

@media (max-width: 700px) {
      .bp-updown { grid-template-columns: 1fr }
      .bp-updown__a--next { text-align: left }
}

/* COMMENTS */
.bp-cmt {
      margin: 40px 0 0;
      padding: 26px 0 0;
      border-top: 1px solid var(--c-border);
      scroll-margin-top: 90px          /* #comments par aane par heading header ke neeche na chhupe */
}

.bp-cmt__h {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      font-size: 20px;
      font-weight: 700;
      color: var(--c-text)
}

.bp-cmt__h i { color: var(--c-accent); font-size: 18px }

/* Jawab ki patti — sandesh ka rang hi uska matlab hai, isliye tone-token se. */
.bp-cmt__msg {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0 0 18px;
      padding: 12px 15px;
      border-radius: 10px;
      font-size: 14.5px;
      line-height: 1.5
}

.bp-cmt__msg--ok {
      background: rgba(var(--c-success-rgb), 0.12);
      border: 1px solid rgba(var(--c-success-rgb), 0.4);
      color: var(--c-text)
}

.bp-cmt__msg--ok i { color: var(--c-success) }

.bp-cmt__msg--err {
      background: rgba(var(--c-danger-rgb), 0.12);
      border: 1px solid rgba(var(--c-danger-rgb), 0.4);
      color: var(--c-text)
}

.bp-cmt__msg--err i { color: var(--c-danger) }

.bp-cmt__none {
      margin: 0 0 20px;
      color: var(--c-muted);
      font-size: 15px
}

.bp-cmt__list {
      list-style: none;
      margin: 0 0 26px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 2px
}

.bp-cmt__item {
      display: flex;
      gap: 13px;
      padding: 15px 0;
      border-bottom: 1px solid var(--c-border)
}

.bp-cmt__item:last-child { border-bottom: 0 }

/* Naam ka pehla akshar. Tasveer nahi — comment karne wale ki koi photo hai hi nahi, */
.bp-cmt__ava {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--c-tint);
      border: 1px solid var(--c-border);
      color: var(--c-accent);
      font-size: 15px;
      font-weight: 700;
      line-height: 1
}

.bp-cmt__b { min-width: 0; flex: 1 }

.bp-cmt__meta {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 0 0 5px;
      font-size: 13.5px;
      color: var(--c-muted)
}

.bp-cmt__meta b { color: var(--c-text); font-size: 14.5px; font-weight: 600 }

.bp-cmt__t {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
      color: var(--c-text-muted);
      overflow-wrap: anywhere      /* bina space wala lamba shabd kataar todta tha */
}

/* ── Form ── */
.bp-cmt__form { display: flex; flex-direction: column; align-items: flex-start }

.bp-cmt__lab {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--c-text);
      margin: 0 0 7px
}

.bp-cmt__in,
.bp-cmt__ta {
      width: 100%;
      padding: 11px 13px;
      margin: 0 0 15px;
      border: 1px solid var(--c-border);
      border-radius: 10px;
      background: var(--c-surface);
      color: var(--c-text);
      font-family: inherit;
      font-size: 15px;
      line-height: 1.55;
      transition: border-color var(--t-fast)
}

.bp-cmt__ta { resize: vertical; min-height: 110px }

/* Focus = EK 1px lakeer ka rang badalna. Koi halo nahi — do lakeerein dhundhla dikhati hain. */
.bp-cmt__in:focus,
.bp-cmt__ta:focus { outline: 0; border-color: var(--c-accent) }

.bp-cmt__in::placeholder,
.bp-cmt__ta::placeholder { color: var(--c-muted) }

/* Honeypot — aankh se poori tarah bahar, par browser ke liye ek asli khaana. */
.bp-cmt__hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
}

.bp-cmt__go { align-self: flex-start }

.bp-cmt__note {
      margin-top: 10px;
      font-size: 13.5px;
      color: var(--c-muted)
}

/* Sign-in wali patti */
.bp-cmt__gate {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 0;
      padding: 16px 18px;
      border: 1px solid var(--c-border);
      border-radius: 12px;
      background: var(--c-surface)
}

.bp-cmt__gate span { font-size: 14.5px; color: var(--c-muted) }

@media (max-width: 560px) {
      .bp-cmt__gate { flex-direction: column; align-items: flex-start; gap: 10px }
      .bp-cmt__go { width: 100% }
}

/* PADHNE KI PATTI — upar ek patli lakeer, kitna lekh padh liya */
.bp-prog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      z-index: 2000;
      background: var(--c-accent);
      transform: scaleX(0);
      transform-origin: left;
      pointer-events: none;
      /* Har frame par JS naya scaleX deta hai — is par transition lagana galat hoga: */
      will-change: transform
}

/* Card par comment ki ginti */

/* Owner 13 Oct: body copy is justified everywhere; headings, buttons, menus and cards stay as they are */
.site-long-content__body p,.site-long-content__body li,.home-long p,.search-widget_post .lab-content .lab-desc,.search-widget_post .lab-content .lab-desc p,.about-page__intro p,.about-page__trust p,.about-feature p,.about-page__custom p,.hc-a p,.hc-a li,.dp-sec__b p,.dp-sec__b li,.dp-hero__intro,.pp-step p,.site-profile .info-card-content p,.site-footer__desc p,.faq-a,.profile-faq__item p,.bp-body p,.bp-body li,.faq-side__excerpt,.site-official-channels li{text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none}

/* Crisp blog type (owner 15 Oct 2026): lighter weights, one body size, quiet borders, shorter inline photos */
.site-header__nav a { font-weight: 500 }
.bp-title { font-weight: 600; font-size: clamp(28px, 2.7vw, 40px); letter-spacing: -.4px; line-height: 1.22; text-transform: none }
.blog-page-head h1 { font-weight: 600 }
.bp-body p, .bp-body li { font-size: 17px; line-height: 1.8 }
.bp-body > p:first-of-type { font-size: 18.5px; line-height: 1.75 }
.bp-body strong { font-weight: 600 }
.bp-body h2 { font-size: 25px; font-weight: 600; letter-spacing: -.2px }
.bp-body h3 { font-size: 19px; font-weight: 600 }
.bp-body figure { display: block; width: 100% }
.bp-body figure img { width: 100%; max-height: 500px; object-fit: cover }
.bp-rel__title { font-size: 18.5px; font-weight: 600 }
.bp-rel__more { font-weight: 600 }
.blog-side__box { border-color: var(--c-border) }
.blog-side__box h3 { font-size: 19px; font-weight: 600 }
.blog-side__latest span { font-size: 15px; font-weight: 500 }
.blog-side__cats a { font-size: 16px; font-weight: 500; padding: 13px 2px }
.bp-updown__t { font-weight: 500 }
@media (max-width: 700px) {
      .bp-body h2 { font-size: 21px }
      .bp-body h3 { font-size: 17.5px }
      .bp-body p, .bp-body li { font-size: 16.5px }
      .bp-body > p:first-of-type { font-size: 17px }
      .bp-body figure img { max-height: 340px }
}
/* Blog card polish (owner 15 Oct 2026): one hairline border + palette elevation on every card, lift on hover */
.bp-rel, .blog-side__box, .bp-updown__a { border: 1px solid rgba(var(--c-text-rgb), .08); box-shadow: var(--elev-1); border-radius: 14px }
.bp-rel:hover { border-color: rgba(var(--c-accent-rgb), .45); box-shadow: var(--elev-2); transform: translateY(-3px) }
.bp-updown__a { background: var(--c-surface-light); transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease }
.bp-updown__a:hover { border-color: rgba(var(--c-accent-rgb), .45); box-shadow: var(--elev-2); background: var(--c-surface-light); transform: translateY(-2px) }
.bp-hero { border: 1px solid rgba(var(--c-text-rgb), .06); box-shadow: var(--elev-2); border-radius: 16px }
.bp-body figure { border: 1px solid rgba(var(--c-text-rgb), .08); border-radius: 14px; overflow: hidden; box-shadow: var(--elev-1); margin: 26px 0 }
.bp-body figure img { border-radius: 0; margin: 0; display: block }
.bp-body figcaption { border: 0; border-top: 1px solid rgba(var(--c-text-rgb), .06); border-radius: 0; padding: 10px 14px 12px }
.blog-side__latest a { border-radius: 10px; padding: 9px 8px; margin: 0 -8px; transition: background .15s ease }
.blog-side__latest a:hover { background: rgba(var(--c-text-rgb), .04) }
.blog-side__latest img { border: 1px solid rgba(var(--c-text-rgb), .08) }
.bp-tags a { border-color: rgba(var(--c-text-rgb), .10) }
/* Blog FAQ = the site FAQ accordion (owner 15 Oct 2026), fitted to the article column */
.bp-faq { margin: 40px 0 8px }
.bp-faq .faq-block { padding: 0 }
.bp-faq .faq-block::before { display: none }
.bp-faq .faq-block > .container { padding: 0; max-width: none; width: auto }
.bp-faq .faq-block__heading { margin-bottom: 26px }
.bp-faq .faq-item__a { text-align: justify; -webkit-hyphens: none; hyphens: none }
/* Blog category switch (owner 15 Oct 2026): the dashboard's sliding pill switch as one row that slides sideways */
.blog-catnav--sw { display: block; margin: 0 0 26px }
.ui-sw.blog-catsw { --uisw-cols: max-content; --uisw-mcols: max-content; --uisw-track-bd-w: 1px; --uisw-track-bd-c: rgba(var(--c-text-rgb), .08); width: 0; min-width: 100%; max-width: 100%; display: grid; grid-auto-flow: column; justify-content: start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
.ui-sw.blog-catsw::-webkit-scrollbar { display: none }
.ui-sw.blog-catsw[data-odd] .ui-sw__opt:last-child { grid-column: auto }
/* Blog feed soft switch (owner 15 Oct 2026): the list fades out and back in when a category is picked */
.blog-feed { transition: opacity .23s ease, transform .23s ease }
.blog-feed.is-leaving { opacity: 0; transform: translateY(6px) }
.blog-feed.is-entering { opacity: 0; transform: translateY(10px); transition: none }
@media (prefers-reduced-motion: reduce) { .blog-feed, .blog-feed.is-leaving { transition: none; transform: none } }
/* Blog editorial layout (owner 15 Oct 2026): masthead, featured story, bento tiles, numbered list, topic tiles, no sidebar */
.blog-wrap.blog-wrap--edit { grid-template-columns: minmax(0, 1fr) }
.bx-mast { position: relative; display: flex; align-items: flex-end; min-height: 240px; margin: 0 0 22px; border-radius: 20px; overflow: hidden; background: var(--c-surface-light); border: 1px solid rgba(var(--c-text-rgb), .08); box-shadow: var(--elev-1); isolation: isolate }
.bx-mast::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg, rgba(var(--c-dark-rgb), .95) 0%, rgba(var(--c-dark-rgb), .80) 42%, rgba(var(--c-dark-rgb), .30) 100%), var(--bx-mast-img, none); background-size: cover; background-position: center 30% }
.bx-mast .blog-page-head { margin: 0; padding: 36px 42px; width: 100%; text-align: left }
.bx-mast .blog-page-head__kicker { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--c-accent) }
.bx-mast .blog-page-head h1 { text-transform: none; margin: 10px 0 8px; font-size: clamp(32px, 3.6vw, 54px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--c-text) }
.bx-mast .blog-page-head p { margin: 0; max-width: 560px; font-size: 16.5px; color: rgba(var(--c-text-rgb), .78) }
.bx-mast__stat { display: inline-block; margin-top: 18px; padding: 6px 13px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text); border: 1px solid rgba(var(--c-text-rgb), .18); border-radius: 999px; background: rgba(var(--c-dark-rgb), .35) }
.bx-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--c-accent) }
.bx-kicker--link { text-decoration: none }
.bx-kicker--link:hover { color: var(--c-text) }
.bx-chip { display: inline-block; padding: 4px 11px; font-size: 12px; font-weight: 500; color: var(--c-text); text-decoration: none; border: 1px solid rgba(var(--c-text-rgb), .16); border-radius: 999px; background: rgba(var(--c-dark-rgb), .35); transition: border-color .2s ease, color .2s ease }
.bx-chip:hover { border-color: rgba(var(--c-accent-rgb), .6); color: var(--c-accent) }
.bx-meta { font-size: 13.5px; color: var(--c-muted) }
.bx-feat__img img, .bx-tile__img img, .bx-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
.bx-feat:hover .bx-feat__img img, .bx-tile:hover .bx-tile__img img, .bx-row:hover .bx-row__img img { transform: scale(1.04) }
.bx-feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; margin: 28px 0 40px }
.bx-feat__img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 1px solid rgba(var(--c-text-rgb), .08); box-shadow: var(--elev-2) }
.bx-feat__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px }
.bx-feat__title { margin: 0 0 14px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; line-height: 1.18; letter-spacing: -.015em }
.bx-feat__title a, .bx-tile__title a, .bx-row__title a { color: var(--c-text); text-decoration: none; transition: color .2s ease }
.bx-feat__title a:hover, .bx-row__title a:hover, .bx-tile:not(.bx-tile--big) .bx-tile__title a:hover { color: var(--c-accent) }
.bx-feat__ex { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: rgba(var(--c-text-rgb), .78) }
.bx-read { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--c-accent); text-decoration: none; border-bottom: 1px solid rgba(var(--c-accent-rgb), .45); transition: gap .2s ease }
.bx-read:hover { gap: 15px; color: var(--c-accent) }
.bx-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin: 0 0 44px }
.bx-tile { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: var(--c-surface-light); border: 1px solid rgba(var(--c-text-rgb), .08); box-shadow: var(--elev-1); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease }
.bx-tile:hover { transform: translateY(-3px); box-shadow: var(--elev-2); border-color: rgba(var(--c-accent-rgb), .45) }
.bx-tile__img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden }
.bx-tile__title { margin: 9px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3 }
.bx-tile--big { grid-row: span 2; display: block; min-height: 440px; padding: 0; overflow: hidden }
.bx-tile--big .bx-tile__img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 }
.bx-tile--big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--c-dark-rgb), 0) 30%, rgba(var(--c-dark-rgb), .94) 100%); pointer-events: none }
.bx-tile--big .bx-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 26px }
.bx-tile--big .bx-tile__title { margin: 12px 0 10px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.22 }
.bx-tile--big .bx-meta { color: rgba(var(--c-text-rgb), .75) }
.bx-bento--1, .bx-bento--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.bx-bento--1 .bx-tile--big, .bx-bento--2 .bx-tile--big { grid-row: auto; min-height: 340px }
.bx-sec { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--c-text) }
.bx-sec::after { content: ""; flex: 1; height: 1px; background: rgba(var(--c-text-rgb), .10) }
.bx-more { margin: 0 0 44px }
.bx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin: 0; padding: 0; list-style: none }
.bx-row { display: grid; grid-template-columns: 54px 132px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 8px; border-bottom: 1px solid rgba(var(--c-text-rgb), .08); border-radius: 10px; transition: background .2s ease }
.bx-row:hover { background: rgba(var(--c-text-rgb), .03) }
.bx-row__n { font-size: 36px; font-weight: 300; line-height: 1; color: rgba(var(--c-accent-rgb), .85); font-variant-numeric: tabular-nums }
@supports (-webkit-text-stroke: 1px) { .bx-row__n { color: transparent; -webkit-text-stroke: 1px rgba(var(--c-accent-rgb), .85) } }
.bx-row__img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--c-text-rgb), .08) }
.bx-row__title { margin: 6px 0; font-size: 17.5px; font-weight: 600; line-height: 1.32 }
.bx-row__ex { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: rgba(var(--c-text-rgb), .7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.bx-topics { margin: 6px 0 10px }
.bx-topics__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px }
.bx-topic { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 18px; border-radius: 16px; overflow: hidden; text-decoration: none; background: var(--c-surface-light); border: 1px solid rgba(var(--c-text-rgb), .08); box-shadow: var(--elev-1); isolation: isolate; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease }
.bx-topic::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, rgba(var(--c-dark-rgb), .2), rgba(var(--c-dark-rgb), .92)), var(--bx-topic-img, none); background-size: cover; background-position: center; transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
.bx-topic:hover { transform: translateY(-3px); box-shadow: var(--elev-2); border-color: rgba(var(--c-accent-rgb), .45) }
.bx-topic:hover::before { transform: scale(1.05) }
.bx-topic__name { font-size: 18px; font-weight: 600; color: var(--c-text) }
.bx-topic__n { margin-top: 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent) }
@media (max-width: 991px) {
      .bx-feat { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 22px 0 32px }
      .bx-bento, .bx-bento--1, .bx-bento--2 { grid-template-columns: minmax(0, 1fr) }
      .bx-tile--big { grid-row: auto; min-height: 360px }
      .bx-list { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 600px) {
      .bx-mast { min-height: 200px; border-radius: 16px }
      .bx-mast .blog-page-head { padding: 24px 20px }
      .bx-tile { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px }
      .bx-tile__title { font-size: 16px }
      .bx-tile--big { min-height: 320px }
      .bx-row { grid-template-columns: 34px 92px minmax(0, 1fr); gap: 12px; padding: 14px 4px }
      .bx-row__n { font-size: 24px }
      .bx-row__ex { display: none }
      .bx-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
      .bx-topic { min-height: 120px; padding: 14px }
      .bx-topic__name { font-size: 15.5px }
}
@media (prefers-reduced-motion: reduce) { .bx-feat__img img, .bx-tile__img img, .bx-row__img img, .bx-topic::before, .bx-tile, .bx-topic { transition: none } }
/* Blog paper-curl shadows (owner 15 Oct 2026): the homepage's shadow-1, shadow-2 and shadow-7, sitting just under each box */
.bx-mast, .bx-feat__media, .bx-tile, .bx-topic, .bx-row__img { position: relative }
.bx-mast::after, .bx-feat__media::after, .bx-tile::after, .bx-topic::after, .bx-row__img::after { content: ""; position: absolute; left: -1.5%; right: -1.5%; bottom: calc(-1 * var(--curl-h)); height: var(--curl-h); background: var(--curl-img) center top / 100% 100% no-repeat; pointer-events: none; --curl-h: 40px; --curl-img: url("/assets/images/icons-group/shadows/shadow-1.png") }
.bx-mast { overflow: visible }
.bx-mast::before { border-radius: inherit }
.bx-mast::after { --curl-h: 46px }
.bx-feat__media::after { --curl-h: 46px }
.bx-tile--big { overflow: visible }
.bx-tile--big .bx-tile__img { border-radius: 16px; overflow: hidden }
.bx-tile--big::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--c-dark-rgb), 0) 30%, rgba(var(--c-dark-rgb), .94) 100%); pointer-events: none }
.bx-tile--big .bx-tile__body { z-index: 2 }
.bx-tile--big::after { inset: auto -1.5% calc(-1 * var(--curl-h)); background: var(--curl-img) center top / 100% 100% no-repeat; --curl-h: 46px; --curl-img: url("/assets/images/icons-group/shadows/shadow-2.png") }
.bx-tile:not(.bx-tile--big)::after { --curl-h: 30px; --curl-img: url("/assets/images/icons-group/shadows/shadow-7.png") }
.bx-row__img { overflow: visible }
.bx-row__img img { border-radius: 10px }
.bx-row__img::after { --curl-h: 16px; --curl-img: url("/assets/images/icons-group/shadows/shadow-7.png") }
.bx-topic { overflow: visible }
.bx-topic::before { border-radius: inherit }
.bx-topic:hover::before { transform: none }
.bx-topic::after { --curl-h: 28px }
.bx-topic:nth-child(3n+2)::after { --curl-img: url("/assets/images/icons-group/shadows/shadow-2.png") }
.bx-topic:nth-child(3n)::after { --curl-img: url("/assets/images/icons-group/shadows/shadow-7.png") }
.bx-feat, .bx-bento, .bx-more, .bx-topics__grid { row-gap: 30px }
.bx-list { row-gap: 6px }
@media (max-width: 600px) {
      .bx-mast::after, .bx-feat__media::after, .bx-tile--big::after { --curl-h: 30px }
      .bx-tile:not(.bx-tile--big)::after, .bx-topic::after { --curl-h: 20px }
      .bx-row__img::after { --curl-h: 12px }
}
.bx-row:hover .bx-row__img img { transform: none }

/* ── Owner 23 Oct 2026 ("mobile me ... responsive nahi hai") ─────────────────────────────────────────────────────────────
   1) Between phone and wide desktop the header could not hold Home + 6 categories + the search on one line and broke into two:
      there the category links go into the menu (☰), the search stays.
   2) A designed cover (16:9, the logo and the title written on it) is shown whole — never cropped — and the big tile puts its
      title under it instead of over it; one post alone in the row takes the full width, photo beside the text.
   3) A topic without a photo gets a plain tile with a soft gold glow instead of a cover whose text runs into the name. */
@media (min-width: 768px) and (max-width: 1180px) {
      .site-header__nav a { display: none }
      .site-header__burger { display: inline-flex }
      .site-header__nav { flex-wrap: nowrap; gap: 10px }
}
.bx-feat--graphic .bx-feat__img img, .bx-row--graphic .bx-row__img img, .bx-tile--graphic:not(.bx-tile--big) .bx-tile__img img { object-fit: contain; background: #0e1526 }
.bx-tile--big.bx-tile--graphic { display: flex; flex-direction: column; min-height: 0 }
.bx-tile--big.bx-tile--graphic::before { display: none }
.bx-tile--big.bx-tile--graphic .bx-tile__img { position: relative; inset: auto; aspect-ratio: 16 / 9; flex: none; border-radius: 16px 16px 0 0 }
.bx-tile--big.bx-tile--graphic .bx-tile__body { position: relative; padding: 18px 22px 22px }
.bx-tile--big.bx-tile--graphic .bx-tile__title { font-size: clamp(20px, 1.7vw, 26px) }
.bx-bento--1 { grid-template-columns: minmax(0, 1fr) }
@media (min-width: 701px) {
      .bx-bento--1 .bx-tile--big.bx-tile--graphic { flex-direction: row; align-items: center }
      .bx-bento--1 .bx-tile--big.bx-tile--graphic .bx-tile__img { flex: 0 0 54%; border-radius: 16px 0 0 16px }
      .bx-bento--1 .bx-tile--big.bx-tile--graphic .bx-tile__body { padding: 24px 30px }
}
.bx-topic--plain::before { background-image: radial-gradient(circle at 88% 12%, rgba(var(--c-accent-rgb), .22), transparent 58%), linear-gradient(180deg, rgba(var(--c-dark-rgb), .1), rgba(var(--c-dark-rgb), .6)) }
/* 23 Oct 2026: the covers are 16:9 pictures with the logo at the right — every box that shows one whole is 16:9 too, so no bars and no cut */
.bx-feat--graphic .bx-feat__img { aspect-ratio: 16 / 9 }
.bx-tile--graphic:not(.bx-tile--big) .bx-tile__img { aspect-ratio: 16 / 9 }
.bx-row--graphic .bx-row__img { aspect-ratio: 16 / 9 }
.bp-hero--cover img { max-height: none; aspect-ratio: 16 / 9 }   /* a 16:9 cover (logo in its corner) is never cropped on the post page */