/* =============================================================================
   MEDYRA Blog — /blog/ hub and root-level articles (/<slug>/).

   Loaded only by the generated blog pages (tools/build-blog.py), after
   site.css and concierge.css, and built entirely from site.css tokens: the
   same navy / ivory / gold, Fraunces for display and IBM Plex Sans for text.
   Everything is namespaced .bl-*, so nothing here can reach another page.
   Mobile first; the article gains a table-of-contents column at 1024px.
   ============================================================================= */

/* ---------------------------------------------------------------- headers */
.bl-hub-head, .bl-head { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3.25rem, 2.5rem + 4vw, 6rem); }
.bl-hub-head::after, .bl-head::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.55) 30%, rgba(212,175,55,.55) 70%, transparent);
}
.bl-eyebrow { color: #E2C173; }
.bl-eyebrow::before { background: #E2C173; }
.bl-hub-title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; margin-block: var(--sp-3) var(--sp-5); color: #fff; }
.bl-title { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.015em; max-width: 22ch; margin-block: var(--sp-3) var(--sp-5); color: #fff; }
.bl-dek { max-width: 60ch; }
.bl-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-block-start: var(--sp-5); font-size: var(--fs-sm); color: var(--on-dark-mute); }

/* search (hub) */
.bl-search {
  position: relative; display: flex; align-items: center; max-width: 34rem; margin-block-start: var(--sp-6);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill); background: rgba(255,255,255,.06);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.bl-search:focus-within { border-color: #E2C173; background: rgba(255,255,255,.1); }
.bl-search svg { position: absolute; inset-inline-start: 1.1rem; color: var(--on-dark-mute); pointer-events: none; }
.bl-search input {
  width: 100%; min-height: 54px; padding: 0 1.25rem 0 3.1rem; border: 0; background: transparent; color: #fff;
  font: inherit; font-size: var(--fs-body); border-radius: var(--r-pill);
}
[dir="rtl"] .bl-search input { padding: 0 3.1rem 0 1.25rem; }
.bl-search input::placeholder { color: var(--on-dark-mute); opacity: 1; }
.bl-search input:focus { outline: none; }
.bl-search input::-webkit-search-cancel-button { filter: invert(1); }

/* ---------------------------------------------------------------- shared */
.bl-section-title { font-size: var(--fs-h3); line-height: 1.15; margin: 0; }
.bl-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.bl-kicker span[aria-hidden] { color: var(--ink-3); }
.bl-badge { display: inline-block; padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--navy-800); color: #F3E6C4; letter-spacing: .1em; }

/* ---------------------------------------------------------------- featured (hub) */
.bl-feature-wrap { position: relative; margin-block-start: calc(-1 * clamp(1.75rem, 1rem + 2.5vw, 3rem)); }
.bl-feature {
  display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--r-xl);
  background: var(--white); box-shadow: var(--e-4); border: 1px solid var(--line-2);
}
.bl-feature-media { display: block; background: var(--navy-900); }
.bl-feature-media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; transition: transform var(--dur-4) var(--ease-soft); }
.bl-feature-body { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-self: center; }
.bl-feature-title { font-size: var(--fs-h2); line-height: 1.1; margin: 0 0 var(--sp-4); }
.bl-feature-title a, .bl-card-title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--gold-lite), var(--gold-lite)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-3) var(--ease-out); }
.bl-feature-title a:hover, .bl-feature-title a:focus-visible, .bl-card-title a:hover, .bl-card-title a:focus-visible { background-size: 100% 1px; }
.bl-feature-dek { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; margin: 0 0 var(--sp-5); max-width: 52ch; }
.bl-more { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; color: var(--navy-700); text-decoration: none; }
.bl-more svg { transition: transform var(--dur-2) var(--ease-out); }
.bl-more:hover svg, .bl-more:focus-visible svg { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .bl-feature:hover .bl-feature-media img { transform: scale(1.025); } }
/* side by side the media column is taller than the cover's 1200x630: fill it, keeping the cover's
   left side (wordmark, label) in view */
@media (min-width: 900px) { .bl-feature { grid-template-columns: 1.15fr 1fr; } .bl-feature-media img { height: 100%; object-position: left center; } }

/* ---------------------------------------------------------------- latest + cards */
.bl-latest { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.bl-latest-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-6); }
.bl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bl-chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.bl-chip span { font-size: var(--fs-xs); color: var(--ink-3); }
.bl-chip:hover { border-color: var(--navy-200); }
.bl-chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.bl-chip[aria-pressed="true"] span { color: #E2C173; }
.bl-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
@media (min-width: 700px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line-2); box-shadow: var(--e-1); transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.bl-card[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .bl-card:hover { box-shadow: var(--e-3); transform: translateY(-3px); } }
.bl-card-media { display: block; background: var(--navy-900); }
.bl-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.bl-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.bl-card-title { font-size: var(--fs-h4); line-height: 1.25; margin: 0 0 var(--sp-3); }
.bl-card-dek { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 var(--sp-4); }
.bl-card-date { margin: auto 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.bl-empty { margin-block-start: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-md); background: var(--white); border: 1px dashed var(--line); color: var(--ink-2); }
.bl-pager ol { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-7) 0 0; }
.bl-pager a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); background: var(--white); }
.bl-pager a[aria-current] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* ---------------------------------------------------------------- link lists */
.bl-continue { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); background: var(--ivory-2); border-block-start: 1px solid var(--line-2); }
.bl-specialities { background: var(--white); }
.bl-links { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
@media (min-width: 700px) { .bl-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-links a {
  display: flex; flex-direction: column; gap: .3rem; height: 100%; min-height: 44px; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line-2); text-decoration: none; color: var(--ink);
  border-inline-start: 3px solid var(--gold-lite); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.bl-specialities .bl-links a { background: var(--ivory); }
.bl-links a:hover, .bl-links a:focus-visible { box-shadow: var(--e-2); border-color: var(--navy-200); border-inline-start-color: var(--gold); }
.bl-links b { font-weight: 600; }
.bl-links span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; }

/* ---------------------------------------------------------------- article */
.bl-article-wrap { padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem); }
.bl-cover { margin-block: calc(-1 * clamp(1.75rem, 1rem + 2.5vw, 3rem)) 0; position: relative; }
.bl-cover img { display: block; width: 100%; max-width: 64rem; height: auto; aspect-ratio: 1200 / 630; border-radius: var(--r-xl); box-shadow: var(--e-4); background: var(--navy-900); }
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 1024px) {
  .bl-layout.has-toc { grid-template-columns: 15.5rem minmax(0, 46rem); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }
  .bl-toc { position: sticky; top: calc(var(--nav-h-scrolled) + var(--sp-5)); align-self: start; }
}

/* table of contents */
.bl-toc details { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white); }
.bl-toc summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--sp-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); cursor: pointer; }
.bl-toc ol { list-style: none; margin: 0; padding: 0 var(--sp-2) var(--sp-3); counter-reset: toc; }
.bl-toc li a { display: flex; gap: .6rem; padding: .55rem var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); text-decoration: none; counter-increment: toc; }
.bl-toc li a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: var(--fs-xs); padding-top: .12rem; }
.bl-toc li a:hover { background: var(--ivory-2); color: var(--ink); }
.bl-toc li a.is-current { background: var(--navy-50); color: var(--navy-700); font-weight: 600; }
.bl-toc li a.is-current::before { color: var(--gold); }

/* prose */
.bl-prose { font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); max-width: 46rem; }
.bl-prose > * + * { margin-block-start: 1.15em; }
.bl-prose p, .bl-prose li { text-wrap: pretty; }
.bl-prose h2 { font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); margin-block: 2.2em .6em; scroll-margin-top: calc(var(--nav-h-scrolled) + var(--sp-5)); }
.bl-prose h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin-block: 1.8em .4em; scroll-margin-top: calc(var(--nav-h-scrolled) + var(--sp-5)); }
.bl-prose h2 + *, .bl-prose h3 + * { margin-block-start: 0; }
.bl-prose > p:first-child { font-size: var(--fs-lead); color: var(--ink); }
.bl-prose ul, .bl-prose ol { padding-inline-start: 1.35em; }
.bl-prose li + li { margin-block-start: .5em; }
.bl-prose ul li::marker { color: var(--gold-lite); }
.bl-prose ol li::marker { color: var(--gold); font-weight: 600; }
.bl-prose a { color: var(--navy-700); text-decoration: underline; text-decoration-color: var(--gold-lite); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-prose a:hover { text-decoration-thickness: 2px; color: var(--navy-800); }
.bl-prose strong { color: var(--ink); font-weight: 600; }
.bl-note { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line-2); border-inline-start: 3px solid var(--gold-lite); font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); }
.bl-prose h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin-block: 1.6em .35em; }
.bl-prose h4 + * { margin-block-start: 0; }

/* media blocks (CMS): image with alignment and size, video embed */
.bl-figure { margin-inline: 0; }
.bl-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ivory-2); }
.bl-figure figcaption, .bl-video figcaption { margin-block-start: var(--sp-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
.bl-figure.bl-size-medium { max-width: 75%; margin-inline: auto; }
.bl-figure.bl-size-small { max-width: 50%; margin-inline: auto; }
.bl-figure.bl-align-left, .bl-figure.bl-align-right { max-width: 50%; margin-block: .35em 1em; }
.bl-figure.bl-align-left { float: left; margin-inline: 0 var(--sp-5); }
.bl-figure.bl-align-right { float: right; margin-inline: var(--sp-5) 0; }
.bl-figure.bl-align-left.bl-size-small, .bl-figure.bl-align-right.bl-size-small { max-width: 35%; }
.bl-figure.bl-align-full img { border-radius: var(--r-lg); }
.bl-prose h2, .bl-prose h3, .bl-prose h4, .bl-video, .bl-table, .bl-cta, .bl-faq { clear: both; }
.bl-video { margin-inline: 0; }
.bl-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--navy-950); border: 1px solid var(--line); }
.bl-video-frame iframe, .bl-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) {
  .bl-figure.bl-align-left, .bl-figure.bl-align-right, .bl-figure.bl-size-medium, .bl-figure.bl-size-small { float: none; max-width: 100%; margin-inline: 0; }
}

/* other CMS blocks: quote, table, FAQ, call to action, inline related list */
.bl-quote { margin-inline: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-inline-start: 3px solid var(--gold); font-family: var(--font-display, inherit); font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.bl-quote p { margin: 0; }
.bl-quote cite { display: block; margin-block-start: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-sm); font-style: normal; color: var(--ink-3); }
.bl-table { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white); }
.bl-table:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bl-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.bl-table caption { caption-side: top; text-align: left; padding: var(--sp-3) var(--sp-4) 0; font-weight: 600; color: var(--ink); }
.bl-table th, .bl-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-block-end: 1px solid var(--line); }
.bl-table th { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--ivory-2); }
.bl-table tr:last-child td { border-block-end: 0; }
.bl-faq { display: grid; gap: var(--sp-2); }
.bl-faq details { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white); }
.bl-faq summary { min-height: 48px; display: flex; align-items: center; padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--ink); cursor: pointer; }
.bl-faq details p { margin: 0; padding: 0 var(--sp-4) var(--sp-4); }
.bl-cta { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--navy-900); color: var(--ivory); }
.bl-cta p { margin: 0; color: inherit; }
.bl-cta .bl-cta-title { font-family: var(--font-display, inherit); font-size: 1.35rem; line-height: 1.3; color: var(--white); margin-block-end: var(--sp-2); }
.bl-cta .bl-cta-actions { margin-block-start: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.bl-prose .bl-cta a.bl-more { color: var(--gold-lite); }
.bl-inline-related { padding-inline-start: 1.35em; }

.bl-about { margin-block-start: 3em !important; padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-3); }
.bl-about strong { color: var(--ink-2); }

/* related */
.bl-related { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.bl-related .bl-grid { margin-block-start: var(--sp-6); }

/* ---------------------------------------------------------------- RTL + motion */
/* The chrome follows the chosen language; the articles are English and stay left-to-right. */
[dir="rtl"] .bl-prose { text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-feature-media img, .bl-more svg, .bl-feature-title a, .bl-card-title a { transition: none !important; }
  .bl-card:hover { transform: none; }
}
@media print {
  .bl-toc, .bl-continue, .bl-related, .cta-band, .bl-search { display: none !important; }
}