/* /blog and /blog/:slug. Loaded after the other layer files.
   Page title: the shared Gallery title treatment in polish.css and type.css applies. */

/* ---------- /blog: title ---------- */
#root .bl-hero { padding: 0 !important; overflow: visible !important; }
#root .bl-hero-inner { display: block !important; padding-top: clamp(32px, 4vw, 56px) !important; padding-bottom: clamp(16px, 2vw, 24px) !important; }
#root .bl-hero-gallery { display: none !important; }
#root .bl-hero-rule { display: none !important; }
#root .bl-hero-sub { max-width: 620px; font-family: var(--c-sans) !important; font-size: 17px !important; font-style: normal !important; line-height: 1.6 !important; }

/* ---------- /blog: language tabs and search ---------- */
#root .bl-filters-wrap { background: #fff !important; }
#root .bl-filters { align-items: center !important; justify-content: space-between !important; row-gap: 12px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
/* The live build stacks the filters in a column on mid widths, where a 300px flex basis became a 300px tall box.
   One row at every width, and the box takes the height of its field. */
#root .bl-filters { flex-direction: row !important; }
#root .bl-filters > .bl-search-box { flex: 0 1 300px !important; width: 300px; height: auto !important; max-height: none; align-self: center !important; }
#root .bl-search-input { width: 100% !important; font-size: 16px !important; }
@media (max-width: 639px) {
  #root .bl-filters > .bl-search-box { flex: 1 1 100% !important; width: 100%; }
}

/* ---------- /blog: content ---------- */
#root .bl-content-wrap { padding-top: clamp(20px, 3vw, 32px) !important; padding-bottom: var(--c-section) !important; }
#root .bl-content-wrap .bl-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(32px, 3.5vw, 44px) clamp(20px, 2.4vw, 32px) !important;
}
@media (max-width: 1023px) {
  #root .bl-content-wrap .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 639px) {
  #root .bl-content-wrap .bl-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Cards: no box. The title link covers the whole card */
#root .bl-card { position: relative; background: none !important; overflow: visible !important; min-width: 0; }
#root .bl-grid .bl-card-img-wrap { display: block; aspect-ratio: 16 / 10 !important; border: 0 !important; border-radius: var(--c-radius) !important; overflow: hidden !important; isolation: isolate; background: var(--c-soft) !important; }
#root .bl-card-img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
#root .bl-card-img-overlay { display: none !important; }
#root .bl-card-lang { display: none !important; }
#root .bl-card-body { display: flex !important; flex-direction: column !important; flex: 1; padding: 14px 0 0 !important; background: none !important; }
#root .bl-card-title { order: 1; margin: 0 0 8px !important; font-size: clamp(18px, 1.5vw, 20px) !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: .08em; }
#root .bl-card-title a { color: var(--c-ink) !important; }
#root .bl-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
#root .bl-card-title a:focus-visible { outline: none; }
#root .bl-card-title a:focus-visible::after { outline: 2px solid var(--c-brand); outline-offset: 4px; border-radius: var(--c-radius); }
#root .bl-card:hover .bl-card-title a { color: var(--c-brand-dark) !important; }
#root .bl-card-excerpt { order: 2; flex: none !important; margin: 0 0 10px !important; font-family: var(--c-sans) !important; font-size: 15.5px !important; line-height: 1.65 !important; color: var(--c-text) !important; -webkit-line-clamp: 2 !important; }
#root .bl-card-meta { order: 3; margin: auto 0 0 !important; padding: 0 !important; gap: 8px !important; border: 0 !important; font-family: var(--c-sans) !important; font-size: 13.5px !important; letter-spacing: 0 !important; color: var(--c-mute) !important; }
#root .bl-card-meta-item { font-size: inherit !important; color: inherit !important; }
#root .bl-card-meta-item svg { display: none !important; }
#root .bl-card-meta-item:nth-child(2) { display: none !important; }
#root .bl-card-footer { display: none !important; }

/* Featured article: bundle's own on All Languages, the first card on a language tab */
#root .bl-featured {
  position: relative;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  margin: 0 0 clamp(32px, 4vw, 48px) !important;
  background: none !important;
  overflow: visible !important;
}
#root .bl-featured-media { min-height: 0 !important; aspect-ratio: 16 / 10; border: 0 !important; overflow: hidden !important; isolation: isolate; background: var(--c-soft) !important; }
#root .bl-featured-media::after { display: none !important; }
#root .bl-featured-img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
#root .bl-featured-body { padding: 0 !important; background: none !important; }
#root .bl-featured-title { margin: 0 0 12px !important; font-size: clamp(24px, 2.6vw, 34px) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
#root .bl-featured-title a { color: var(--c-ink) !important; }
#root .bl-featured-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
#root .bl-featured:hover .bl-featured-title a { color: var(--c-brand-dark) !important; }
#root .bl-featured-excerpt { margin: 0 0 14px !important; font-family: var(--c-sans) !important; font-size: 17px !important; line-height: 1.7 !important; color: var(--c-text) !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
#root .bl-featured-row { margin: 0 !important; font-family: var(--c-sans) !important; font-size: 13.5px !important; letter-spacing: 0 !important; color: var(--c-mute) !important; flex-wrap: wrap; }
#root .bl-featured-link { display: none !important; }

@media (min-width: 1024px) {
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child { grid-column: 1 / -1; flex-direction: row !important; align-items: center; gap: clamp(24px, 3vw, 44px); }
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-img-wrap { flex: 0 0 60%; }
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-body { padding: 0 !important; }
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-title { font-size: clamp(24px, 2.6vw, 34px) !important; line-height: 1.35 !important; -webkit-line-clamp: 3; margin-bottom: 12px !important; }
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-excerpt { font-size: 17px !important; line-height: 1.7 !important; -webkit-line-clamp: 4 !important; margin-bottom: 14px !important; }
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-meta { margin-top: 0 !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child { grid-column: 1 / -1; }
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-title { font-size: 24px !important; }
}
@media (max-width: 1023px) {
  #root .bl-featured { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
}

#root .bl-pagination { margin-top: clamp(32px, 4vw, 48px) !important; flex-wrap: wrap; gap: 12px !important; }
#root .bl-page-btn { min-height: 44px; line-height: 1.5 !important; }

/* ---------- /blog/:slug: one reading column ---------- */
#root .bp-root { --bp-col: 720px; }
#root .bp-topbar, #root .bp-page { box-sizing: border-box; width: 100%; max-width: calc(var(--bp-col) + 2 * var(--c-side)) !important; margin: 0 auto !important; padding-left: var(--c-side) !important; padding-right: var(--c-side) !important; }
#root .bp-topbar { padding-top: 20px !important; padding-bottom: 0 !important; }
#root .bp-page { padding-top: 16px; padding-bottom: var(--c-section) !important; overflow-wrap: anywhere; }
#root .bp-back-btn { min-height: 44px; padding: 0 !important; border: 0 !important; background: none !important; font-family: var(--c-sans) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.5 !important; text-transform: none !important; color: var(--c-brand-dark) !important; }
#root .bp-back-btn:hover { text-decoration: underline; text-underline-offset: 3px; transform: none !important; }

/* Reading order: title, author and date, cover, text, share, related */
#root .bp-article { min-width: 0; }
#root .bp-headline { order: 2; margin: 0 0 16px !important; font-size: clamp(28px, 4vw, 42px) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-wrap: balance; }
/* The author row itself is styled in blog-author.css. Only its place in the order is set here. */
#root .bp-byline { order: 3; }
#root .bp-cover-wrap, #root .bp-cover-placeholder { order: 5; }
#root .bp-cover-wrap { display: block !important; max-height: none !important; margin: 0 0 10px !important; border: 0 !important; border-radius: var(--c-radius) !important; overflow: hidden !important; background: none !important; }
#root .bp-cover-img { display: block; width: 100% !important; height: auto !important; transform: none !important; }
#root .bp-cover-fade { display: none !important; }
/* The excerpts repeat the opening lines of the text, so they stay on the list page only */
#root .bp-standfirst { display: none !important; }
#root .bp-rule { display: none !important; }

#root .bp-body { order: 6; min-width: 0; font-family: var(--c-sans) !important; font-size: 18px !important; line-height: 1.75 !important; color: #3d3024 !important; }
#root .bp-body :is(:lang(ne), :lang(hi)) { font-size: 19px; line-height: 1.85; }
html body #root .bp-root .bp-body p { margin: 0 0 1.25em !important; font-size: 18px !important; line-height: 1.75 !important; }
html body #root .bp-root .bp-body :is([lang="ne"], [lang="hi"]) > p:not([class]) { font-size: 19px !important; line-height: 1.85 !important; }
#root .bp-body :is(h1, h2, h3, h4) { margin: 1.9em 0 .6em !important; line-height: 1.35 !important; letter-spacing: 0 !important; border: 0 !important; padding: 0 !important; color: var(--c-ink) !important; }
#root .bp-body h2 { font-size: 26px !important; }
#root .bp-body h3 { font-size: 22px !important; }
#root .bp-body :is(img, video, iframe, table) { max-width: 100% !important; height: auto !important; }
#root .bp-body img { margin: 1.8em auto !important; border: 0 !important; border-radius: var(--c-radius) !important; }
#root .bp-body blockquote { margin: 1.6em 0 !important; padding: 0 0 0 20px !important; border-left: 3px solid var(--c-line) !important; background: none !important; font-style: normal !important; font-size: 1em !important; color: var(--c-ink) !important; }
#root .bp-body pre { overflow-x: auto; max-width: 100%; }
/* Sanskrit verses and their citations */
#root .bp-body p[style*="text-align:center"] { margin: 1.5em 0 1.75em !important; font-family: 'Noto Serif Devanagari', var(--c-sans) !important; color: var(--c-brand-dark) !important; overflow-wrap: break-word; }
html body #root .bp-root .bp-body .sy-credit { margin: 2.5em 0 0 !important; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 15px !important; line-height: 1.7 !important; color: var(--c-mute) !important; }
#root .bp-body .sy-credit a { color: var(--c-brand-dark) !important; font-size: inherit !important; }

/* blog-features.js adds its own share row */
#root .bp-share { display: none !important; }

/* Related articles */
#root .bp-more { order: 8; margin-top: clamp(40px, 5vw, 56px) !important; padding-top: 28px !important; border-top: 1px solid var(--c-line) !important; min-width: 0; }
#root .bp-more-title { margin: 0 0 18px !important; font-family: var(--c-serif) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.45 !important; color: var(--c-ink) !important; }
#root .bp-more-grid { gap: 28px 20px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#root .bp-more-card, #root .bp-more-card:hover { border: 0 !important; background: none !important; transform: none !important; min-width: 0; }
#root .bp-more-card > div:first-child { overflow: hidden; border-radius: var(--c-radius); }
#root .bp-more-card > div:first-child > span { display: none !important; }
#root .bp-more-img { transition: transform .35s ease; }
@media (hover: hover) {
  #root .bp-more-card:hover .bp-more-img { transform: scale(1.04); }
}
#root .bp-more-body { padding: 10px 0 0 !important; }
#root .bp-more-card-title { font-family: var(--c-serif) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: var(--c-ink) !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: .08em; white-space: normal !important; }
#root .bp-more-card-sub { display: none !important; }
#root .bp-more-cta-row { margin-top: 24px !important; }
@media (max-width: 639px) {
  #root .bp-more-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- /blog: the site language switch chooses the language, so no tabs ---------- */
#root .bl-lang-tabs { display: none !important; }
#root .bl-filters { justify-content: flex-start !important; }

/* ---------- /blog/:slug: language of this article ---------- */
#root .sy-art-lang { order: 1; display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 4px 18px; margin: 0 0 6px; }
#root .sy-art-lang[hidden] { display: none; }
#root .sy-art-lang button { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: var(--c-sans); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--c-text); }
#root .sy-art-lang button:hover { color: var(--c-brand-dark); }
#root .sy-art-lang button.is-on { border-bottom-color: var(--c-brand); color: var(--c-brand-dark); font-weight: 600; }

/* ---------- /blog/:slug: reading time and narration player ---------- */
#root .sy-tools { order: 4; display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; font-family: var(--c-sans); font-size: 14px; line-height: 1.5; color: var(--c-mute); }
#root .sy-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
#root .sy-player[hidden] { display: none; }
#root .sy-listen {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #3a2408;
  background: linear-gradient(145deg, #fbe7a5 0%, #e7bd55 42%, #c18f26 74%, #eccf7d 100%);
  box-shadow: 0 2px 8px rgba(143, 100, 16, .38), inset 0 1px 1px rgba(255, 255, 255, .75);
  transition: filter .2s ease, box-shadow .2s ease;
}
#root .sy-listen svg { width: 24px; height: 24px; }
@media (hover: hover) {
  #root .sy-listen:hover { filter: brightness(1.06); box-shadow: 0 3px 12px rgba(143, 100, 16, .5), inset 0 1px 1px rgba(255, 255, 255, .85); }
}
#root .sy-listen:focus-visible, #root .sy-player-side button:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
#root .sy-player-main { flex: 1 1 200px; min-width: 0; }
#root .sy-player-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 7px; }
#root .sy-player-label { font-size: 15px; font-weight: 600; color: var(--c-ink); }
#root .sy-part { font-size: 13px; color: var(--c-mute); }
#root .sy-time { margin-left: auto; font-size: 13px; color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
#root .sy-bar { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--c-line); }
#root .sy-bar-fill { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c18f26, #e7bd55); }
#root .sy-player-side { display: flex; align-items: center; gap: 2px; margin-left: auto; }
#root .sy-player-side button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--c-sans); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--c-brand-dark); font-variant-numeric: tabular-nums; }
#root .sy-player-side button:hover { color: var(--c-ink); }
#root .sy-player-side button[hidden] { display: none; }
#root .sy-audio { display: none; }
#root .sy-audio-error { margin: 0; font-size: 14px; color: #8a2d1a; }
#root .sy-audio-error[hidden] { display: none; }
#root .sy-read-time { font-size: 14px; color: var(--c-mute); }
#root .sy-tts-current { background: var(--c-soft); box-shadow: 0 0 0 8px var(--c-soft); border-radius: 2px; }
#root .bp-body.sy-can-seek > div > p:not([class]) { cursor: pointer; }
@media (max-width: 480px) {
  #root .sy-player-side { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------- /blog/:slug: name of the photo, and credits at the very end ---------- */
html body #root .bp-root .bp-body .sy-img-title { margin: 0 0 24px !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--c-mute) !important; }
html body #root .bp-root .bp-body .sy-img-credits { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-mute); }
#root .bp-body .sy-img-credits summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--c-mute); }
html body #root .bp-root .bp-body .sy-img-credits p { margin: 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--c-mute) !important; }
#root .bp-body .sy-img-credits a { color: inherit !important; text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- /blog: name of the photo on cards ---------- */
#root .sy-photo-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 8, 0, .62), rgba(15, 8, 0, 0));
  font-family: var(--c-sans); font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#root .bl-card-img-wrap, #root .bl-featured-media { position: relative !important; }

/* ---------- /blog/:slug: share ---------- */
#root .sy-share { order: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 24px 0 0; font-family: var(--c-sans); }
#root .sy-share-label { margin-right: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--c-ink); }
#root .sy-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; font-family: var(--c-sans); font-size: 14px; line-height: 1.5; color: var(--c-brand-dark); text-decoration: none; }
#root .sy-share-btn:hover { color: var(--c-ink); }
#root .sy-copy { border-radius: 8px; padding: 0 6px; }
#root .sy-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#root .sy-copy.is-done span { position: static; width: auto; height: auto; clip-path: none; font-weight: 600; }

/* ---------- Card photo frames: one shape per card type, sized to the photos ----------
   Blog photos are mostly 3:2 landscapes (1.42 to 1.78). A 3:2 frame shows them nearly whole,
   and when a wider photo is trimmed it loses the sides, not the peak or temple top. */
#root .bl-grid .bl-card-img-wrap, #root .bl-featured-media { aspect-ratio: 3 / 2 !important; height: auto !important; }
#root .bl-card-img, #root .bl-featured-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 40% !important; }
@media (min-width: 1024px) {
  /* The wide first card keeps its photo beside the text, at the same 3:2 shape */
  #root .bl-content-wrap:not(:has(.bl-featured)) .bl-grid > .bl-card:first-child .bl-card-img-wrap { align-self: center; }
}
/* Related articles at the end of a post: same 3:2 frame */
#root .bp-more-card > div:first-child { aspect-ratio: 3 / 2; }
#root .bp-more-img, #root .bp-more-fallback { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 40% !important; }
/* Cover photo: shown whole. A tall cover is limited to the screen height instead of running on. */
#root .bp-cover-img { max-height: min(80vh, 760px) !important; object-fit: contain !important; }