/* Created: 22:41 24-Aug-2026 */
/* Updated: 06:41 03-Sep-2026 — .post-prose wraps long runs (10px overflow at 390) */
/* Updated: 06:24 03-Sep-2026 — .post-layout spans the header island's width and the
   aside column stretches so its sticky inner has room to travel (EN + AR) */
/* Updated: 22:44 24-Aug-2026 — list markers restored (see note by .post-prose ul) */
/* Updated: 22:47 24-Aug-2026 — real cause found: base.css ul{list-style:none} reset */
/* Updated: 09:30 26-Aug-2026 — year filter deleted; card gains excerpt + Read article;
   3-across index grid; .post-pager for real /blogs/page/N/ pagination */
/* Updated: 09:18 26-Aug-2026 — .post-layout: the article gains its right column
   (sticky contents + contact card). Prose keeps its 680px measure. */
/* BAYTI — blog: the 131 post pages and the /blogs/ index. Loaded only by those pages.
   Reuses the service-page hero (.svc-hero) so a post and a service page read as one site;
   everything below is post-specific. The year filter and js/blog.js were removed on
   26-Aug at Sumit's request and replaced with real pagination. */

.post-hero .post-kicker{
  font-size:13px;line-height:20px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper-64);margin:0 0 var(--s-4)
}
.post-hero .post-kicker a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.post-hero .post-meta{color:var(--paper-64);margin-top:var(--s-4)}

/* ---- article -------------------------------------------------------------- */
.post-body{padding-block:var(--sec-m) var(--sec-s)}

/* ---- article layout ------------------------------------------------------- */
/* Sumit 26-Aug: "those are all left aligned... right side is completely empty, you need
   to fix that." Measured: .post-prose was 680px starting at left:32 inside a 1376px
   container - 728px of dead space, 53% of the width.

   The reading measure was never the fault; nothing else was in the row. So the prose
   KEEPS its 680px measure (17px/29px over ~75 characters is the right line length and
   widening it would make the article harder to read, not better) and the empty half
   becomes a real column: the article's own headings as a sticky contents list, plus the
   two contact channels already published at the foot of this same page. The pair is then
   centred, so the page reads as a spread rather than as text pushed against one edge. */
/* Sumit 03-Sep: "the width of the blog should match the width of the header island...
   or at least start the width of the blog content from the width of the blog heading",
   and "the left-hand sidebar should remain sticky, only the block should move".

   Both came from this one rule, measured at 1440:
     justify-content:center  centred the 680+320 pair inside the 1376 container, so the
                             article started at left:188 while the header island and the
                             post's own h1 both start at left:32.
     align-items:start       collapsed .post-aside to its content height, which left the
                             sticky inner nothing to travel inside — sticky was already
                             declared and simply had no room, so it read as not working.

   The prose keeps its reading measure through .post-prose's max-width; it is the COLUMN
   that now spans, not the line length. */
.post-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--s-10);align-items:stretch
}
/* A long unbreakable run in the client's copy pushed 10px past the viewport at 390 on
   /blog/speech-and-language-therapy-at-home-in-abu-dhabi/. No single word and no child
   element was too wide - measured both - so it is a run, not a token. This changes no
   text; it only lets the browser break a line that cannot otherwise fit. 10px -> 0. */
.post-prose{max-width:var(--measure-6);overflow-wrap:anywhere}

.post-aside{position:relative}
/* Sticky, so the contents list stays with the reader through a 2,769px article. The
   offset clears the fixed header. */
.post-aside-inner{position:sticky;top:112px;display:flex;flex-direction:column;gap:var(--s-6)}
.post-toc{
  border:1px solid var(--border-faint);border-radius:16px;padding:22px 20px;
  background:var(--paper-100)
}
.post-toc-h{color:var(--text-subtle);margin:0 0 14px}
.post-toc-list{list-style:none;margin:0;padding:0;counter-reset:toc}
.post-toc-list li{counter-increment:toc}
.post-toc-list li+li{margin-top:2px}
.post-toc-list a{
  display:flex;gap:10px;padding:7px 0;font-size:14.5px;line-height:21px;
  color:var(--text-medium);text-decoration:none;
  border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
  transition:color .2s,border-color .2s
}
.post-toc-list a::before{content:counter(toc) ".";color:var(--text-subtle);flex:0 0 auto}
.post-toc-list a:hover{color:var(--text-strong)}
.post-toc-list a.is-on{color:var(--text-strong);border-left-color:var(--accent);font-weight:600}
.post-toc-list a.is-on::before{color:var(--accent)}
.post-toc-list a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-32);border-radius:6px}

.post-cta{
  border:1px solid var(--border-faint);border-radius:16px;padding:24px 22px;
  background:var(--surface-card);display:flex;flex-direction:column;gap:10px
}
.post-cta-h{font-size:17px;line-height:25px;font-weight:600;color:var(--text-strong);margin:0}
.post-cta-p{color:var(--text-medium);margin:0}
.post-cta-btn{margin-top:8px;align-self:stretch;justify-content:center}
.post-cta-wa{
  font-size:13.5px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  align-self:flex-start
}
/* An anchor jump must not park the heading under the fixed header. */
.post-prose h2{scroll-margin-top:120px}
.post-prose>*+*{margin-top:var(--s-5)}
.post-prose h2{font-size:30px;line-height:38px;font-weight:600;margin-top:var(--s-10)}
.post-prose h3{font-size:22px;line-height:30px;font-weight:600;margin-top:var(--s-8)}
.post-prose h2:first-child,.post-prose h3:first-child{margin-top:0}
.post-prose p{font-size:17px;line-height:29px;color:var(--text-medium)}
.post-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-prose strong{color:var(--text-strong);font-weight:600}
/* MEASURED cause of the missing bullets: base.css:64 has a site-wide `ul{list-style:none}`
   reset (right for nav/card lists, wrong for article prose). The markers have to be put
   back explicitly here. My first guess -- that display:grid suppressed them -- was wrong;
   the grid was innocent. Kept as block + margin anyway, which is simpler. */
.post-prose ul,.post-prose ol{padding-left:24px;margin-left:0}
.post-prose ul{list-style:disc}
.post-prose ol{list-style:decimal}
.post-prose li{display:list-item}
.post-prose li+li{margin-top:var(--s-3)}
.post-prose li{font-size:17px;line-height:27px;color:var(--text-medium)}
.post-prose li::marker{color:var(--accent)}
.post-subhead{font-weight:600;color:var(--text-strong);font-size:18px;line-height:26px}

/* Restored Divi pricing table — see _build/render_blog.py::_pricing_pair. */
.post-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.post-table{border-collapse:collapse;width:100%;min-width:420px;font-size:16px;line-height:24px}
.post-table th,.post-table td{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-subtle)
}
.post-table th{font-weight:600;color:var(--text-strong);background:var(--surface-card);
  border-bottom-color:var(--border-medium)}
.post-table td{color:var(--text-medium)}
.post-table tr:last-child td{border-bottom:0}

/* ---- card grid (related + index) ------------------------------------------ */
.post-more{padding-block:var(--sec-s)}
.post-index{padding-block:var(--sec-s) var(--sec-m)}
.post-grid{
  list-style:none;margin:var(--s-8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8) var(--s-6)
}
.post-grid--index{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}
/* The card, redesigned 26-Aug. Sumit: "the cards look very congested altogether... maybe
   put the first 50 or 100 characters off inside the blog at the bottom".

   Measured before: four across at 326px, of which 205px (63%) was image and 50px was a
   3-line clamped title with nothing between it and the next card. The congestion was
   density, not decoration - so the grid drops to THREE across, the card becomes a real
   surface with its own padding, and the client's own meta description gives the text
   block something to be. Excerpt is CLAMPED, never truncated in the markup. */
.post-card{
  border:1px solid var(--border-faint);border-radius:16px;overflow:hidden;
  background:var(--paper-100);
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ),
             border-color .35s var(--ease-circ)
}
.post-card:hover{transform:translateY(-3px);border-color:var(--border-subtle);
  box-shadow:0 14px 34px -22px rgba(9,30,38,.45)}
.post-card>a{display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit;
  height:100%}
.post-card-media{
  display:block;overflow:hidden;background:var(--surface-card)
}
.post-card-media img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .5s var(--ease-circ)
}
.post-card>a:hover .post-card-media img{transform:scale(1.04)}
/* The body is a column so "Read article" is pinned to the bottom edge whatever the
   title wraps to - otherwise a 2-line and a 3-line title give two different cards. */
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;flex:1}
.post-card-meta{
  font-size:12px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-subtle)
}
.post-card-title{
  font-size:18px;line-height:26px;font-weight:600;color:var(--text-strong);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.post-card>a:hover .post-card-title{color:var(--accent)}
/* THREE lines, not two. Measured at 437px: a 2-line clamp cut all 12 descriptions on
   page 1 mid-sentence; 3 lines fits every one of them whole. The client's summaries run
   106-166 chars, so this shows the complete sentence rather than a hard stop - and the
   clamp is still there as the guard for anything longer. */
.post-card-excerpt{
  font-size:14.5px;line-height:23px;color:var(--text-medium);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.post-card-more{
  margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px
}
.post-card-more::after{content:"\2192";transition:transform .3s var(--ease-circ)}
.post-card>a:hover .post-card-more::after{transform:translateX(4px)}

/* ---- pagination ----------------------------------------------------------- */
/* Sumit: "you have not introduced pagination in the blog. Why? One page should have
   maximum of 12 blogs." REAL pages at /blogs/page/N/, so these are links, not a widget:
   every page is crawlable and the whole thing works with JS off. */
.post-pager{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--border-faint)
}
.pg-nums{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg-n,.pg-step{
  font-size:14.5px;line-height:22px;text-decoration:none;color:var(--text-medium);
  border:1px solid transparent;border-radius:10px;transition:background .2s,color .2s,
  border-color .2s
}
.pg-n{min-width:38px;padding:8px 6px;text-align:center}
.pg-step{padding:8px 16px;border-color:var(--border-subtle)}
.pg-n:hover,.pg-step:hover{color:var(--text-strong);border-color:var(--border-medium);
  background:var(--paper-100)}
.pg-n.is-on{background:var(--accent);border-color:var(--accent);color:#062b2b;
  font-weight:600}
.pg-step.is-off{opacity:.38;border-color:var(--border-faint)}
.pg-gap{color:var(--text-subtle);padding:0 2px}
.pg-n:focus-visible,.pg-step:focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-32)}
.post-hero-stat{margin-top:20px;color:var(--paper-64)}

@media (max-width:1100px){
  .post-grid--index{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1099px){
  /* Below this the two columns cannot both hold their measure, so the aside moves under
     the article and stops being sticky - a sticky block in a single column would pin
     itself over the text it is meant to index. */
  .post-layout{grid-template-columns:minmax(0,1fr);gap:var(--s-8);justify-content:stretch}
  .post-aside-inner{position:static}
  .post-aside{max-width:var(--measure-6)}
}
@media (max-width:860px){
  .post-grid,.post-grid--index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-prose h2{font-size:25px;line-height:33px}
}
@media (max-width:560px){
  .post-grid,.post-grid--index{grid-template-columns:1fr}
}