/* single — single blog post template */

/* --- Main container ---
   The shell matches the site rail — 1300px with this exact padding clamp, same as
   .archive-main and the header — so the related grid lands on cards the same width
   as the ones on the archive the reader just came from. Anything wider (1440) would
   push content outside the 1300px header, leaving the cards misaligned with the
   logo and nav above them.

   Inside that rail the article is one flush column: breadcrumb, headline, hero and
   body text all share a single pair of edges. Staggering them by job (wide hero,
   mid headline, narrow text) reads as three competing alignments rather than one
   article, so the width is held on the <article> element and everything inherits it. */
.single-main{
  /* The article column. Paired with the 1.25rem body below this lands at roughly
     70 characters per line in Hebrew — the range where reading speed peaks — while
     being wide enough that the column still carries the page on a large screen.
     Changing this one value moves every band at once; keep the body font-size in
     step with it, since the measure is the product of the two. */
  --single-col:780px;

  /* 780 + 68 + 340 = 1188, which is this container's content box once the padding
     clamp is at its maximum — so at the full rail the two columns fill it exactly. */
  --single-aside:340px;
  --single-gap:68px;

  flex:1;
  max-width:1300px;
  margin:0 auto;
  width:100%;
  padding:clamp(8rem,15vh,10rem) clamp(1.25rem,5vw,3.5rem) clamp(4rem,8vh,6rem);
}

/* --- Article + rail ---
   One centred column by default. The rail only appears once the viewport can pay
   for it out of its own width rather than out of the article's: at 1200px the
   article still holds 680px, while at, say, 1024px it would be squeezed to ~514px
   — about 50 characters — and the empty side would have been traded for text that
   is genuinely harder to read. In RTL the second track lands on the left, so the
   article keeps the reading-start edge and the rail sits away from it. */
.single-layout{
  display:grid;
  grid-template-columns:minmax(0,var(--single-col));
  justify-content:center;
}

/* Breadcrumb styling is shared with every other view — see components.css. */

/* --- Post header --- */
.single-title{
  font-size:clamp(2rem,4.3vw,3.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 1rem;
}
.single-meta{
  color:#5A6273;
  font-size:.95rem;
  margin-bottom:2rem;
}

/* --- Featured media ---
   Sized by the column, not by the file. The 'large' thumbnail is 1024px wide and
   the srcset carries the 1200px original, so at this column the browser is always
   downsampling — the hero stays sharp on 1x and on retina. */
.single-media{
  border-radius:20px;
  overflow:hidden;
  margin-bottom:2.5rem;
  background:#0B0E13;
}
.single-media img{
  width:100%;
  height:auto;
  display:block;
}

/* --- Post body ---
   The column is set by <article>; the font-size is the other half of the measure.
   1.25rem against --single-col keeps lines near 70 characters, and the larger type
   is what lets the column be this wide without the text running long. */
.single-prose{
  color:#B8BECC;
  line-height:1.85;
  font-size:1.25rem;
}
/* Anchor targets have to clear the fixed header, or a jump from the contents
   parks the heading underneath it. 120px matches the offset faq.css already uses. */
.single-prose h2{
  scroll-margin-top:120px;
}

/* --- In-content CTA — injected at ~35% depth by inc/single-article.php ---
   Built to read as an aside inside the article rather than as a banner: banner
   blindness is a response to ad-shaped things, so the restrained version is the
   one that actually gets read. The accent edge carries the emphasis instead of a
   filled background. */
.single-inline-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem 1.5rem;
  margin:2.6rem 0;
  padding:1.4rem 1.6rem;
  border:1px solid rgba(255,255,255,.1);
  border-inline-start:3px solid var(--accent,#2FD4BE);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
/* Prefixed to clear .strix-prose p / .strix-prose a, which land at (0,1,1). */
.single-prose .single-inline-cta-text{
  flex:1 1 22ch;
  margin:0;
  color:#C3C9D4;
  font-size:1.05rem;
  line-height:1.6;
}
.single-prose .single-inline-cta-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1.4rem;
  border-radius:999px;
  background:var(--accent,#2FD4BE);
  color:#04140F;
  font-weight:700;
  font-size:.98rem;
  text-decoration:none;
  transition:transform .2s;
}
.single-prose .single-inline-cta-btn:hover{
  transform:translateY(-2px);
}

/* --- Components injected into the prose ---
   .strix-prose styles bare h2/h3/p/a at (0,1,1), which outranks the component
   classes at (0,1,0). Left alone, `.strix-prose a` repaints the whole service
   card in the accent colour and the card's heading and description pick up
   article paragraph spacing. Each rule below restores the components.css value
   at (0,2,0); keep them in step with .strix-related* over there. */
.single-prose .strix-related{
  margin:2.6rem 0;
}
.single-prose .strix-related-title{
  font-size:1.5rem;
  font-weight:700;
  color:#ECEFF4;
  margin:0 0 1.2rem;
}
.single-prose .strix-related-card{
  color:inherit;
}
.single-prose .strix-related-card-title,
.single-prose .strix-related-card-desc{
  margin:0;
}

/* --- Table of contents ---
   The rail's answer to an empty column: navigation the reader goes looking for,
   rather than a promotion parked where eyetracking says nobody looks. Two forms —
   the sticky rail below the breakpoints block, and a collapsed <details> for
   narrow screens where there is no second column to put it in. Only one of the
   two is ever displayed. */
.single-toc{
  display:none;
}
.single-toc-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* --- Mobile: collapsed contents button, sits between the hero and the body --- */
.single-toc-m{
  margin:0 0 2rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.single-toc-m-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.95rem 1.2rem;
  /* A 44px target: below that, taps start missing. */
  min-height:44px;
  font-size:1rem;
  font-weight:600;
  color:#ECEFF4;
  cursor:pointer;
  list-style:none;
}
/* Safari still paints its own triangle through the shadow DOM pseudo-element. */
.single-toc-m-summary::-webkit-details-marker{
  display:none;
}
.single-toc-m-summary::after{
  content:"";
  width:.55rem;
  height:.55rem;
  border-inline-end:2px solid #8A93A6;
  border-block-end:2px solid #8A93A6;
  transform:rotate(45deg) translateY(-25%);
  transition:transform .2s;
}
.single-toc-m[open] .single-toc-m-summary::after{
  transform:rotate(-135deg) translateY(-25%);
}
/* Once articleToc() owns the disclosure, [open] lingers for the whole collapse —
   it is only dropped when the transition ends. The arrow follows .is-open instead
   so it turns as the panel starts to close rather than .35s after it. */
.single-toc-m.js-anim:not(.is-open) .single-toc-m-summary::after{
  transform:rotate(45deg) translateY(-25%);
}
.single-toc-m-list{
  padding:0 1.2rem 1rem;
}
/* Same disclosure animation as the FAQ accordions (.faq-a): max-height driven
   against the measured scrollHeight. Only applied once JS is there to set the
   heights — without it <details> keeps its native instant toggle rather than a
   panel stuck at zero height. */
.single-toc-m.js-anim .single-toc-m-list{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.single-toc-m-list .single-toc-link{
  display:block;
  padding:.55rem 0;
  font-size:1rem;
  line-height:1.5;
  color:#B8BECC;
  text-decoration:none;
  border-block-start:1px solid rgba(255,255,255,.06);
}

/* ==========================================================================
   Onward navigation — the service behind the article + more reading.
   Card shell itself lives in components.css (.strix-related*), shared with the
   home, archive and landing views; only the section frame and the prominent
   service variant are view-specific.
   ========================================================================== */
.single-related{
  margin-block-start:clamp(3rem,6vh,4.5rem);
}
.single-related-title{
  font-size:1.5rem;
  font-weight:700;
  color:#ECEFF4;
  margin:0 0 1.2rem;
}

/* --- Prominent single card: the service this article is about --- */
.strix-related--service .strix-related-card{
  background:color-mix(in srgb, var(--la,#2FD4BE) 7%, #0E1116);
  border-color:color-mix(in srgb, var(--la,#2FD4BE) 30%, transparent);
  padding-block:clamp(1.5rem,4vw,2rem);
  padding-inline:clamp(1.4rem,4vw,1.9rem);
}
.strix-related--service .strix-related-card-title{
  font-size:1.35rem;
  color:var(--la,var(--accent,#2FD4BE));
}
.strix-related--service .strix-related-card-desc{
  font-size:1.05rem;
  color:#C3C9D4;
}

/* --- CTA / author box ---
   Left on the full rail so it lines up with the related grid directly above it.
   The page has two edges by design: the article column, then everything after it. */
.single-cta{
  margin-top:clamp(3rem,6vh,4.5rem);
  border:1px solid rgba(47,212,190,.25);
  border-radius:20px;
  background:rgba(47,212,190,.05);
  padding:clamp(1.8rem,4vw,2.6rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.single-cta-title{
  margin:0 0 .4rem;
  font-size:1.4rem;
  font-weight:700;
}
.single-cta-text{
  margin:0;
  color:#9BA3B4;
  font-size:1.05rem;
}
.single-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--accent);
  color:#04140F;
  font-weight:700;
  padding:.8rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
}

/* ==========================================================================
   Breakpoints — ascending, one block per width
   ========================================================================== */
@media (min-width: 48em) {
  /* Three across in one clean row — the block always holds exactly 3 posts,
     so a 2-up grid would leave an orphan. The service card stays full width. */
  .strix-related--posts .strix-related-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (min-width: 75em) {
  /* The rail opens here and not a pixel earlier — see the .single-layout note.
     :has() so that a post with too few headings to earn a contents list keeps a
     single centred column instead of sitting off-centre against an empty track.
     Where :has() is unsupported the rule drops out and every post gets that
     single-column layout, which is the safe way for this to fail.

     align-items:start is what makes the rail sticky: stretched to the full row
     height it would fill its own grid area and have nowhere to travel. */
  .single-layout:has(.single-toc){
    grid-template-columns:minmax(0,var(--single-col)) var(--single-aside);
    column-gap:var(--single-gap);
    align-items:start;
  }

  /* The collapsed version has a column to move into. */
  .single-toc-m{
    display:none;
  }

  .single-toc{
    display:block;
    position:sticky;
    /* Clears the fixed header plus air; the max-height keeps a long contents list
       scrolling inside itself rather than running off the bottom of the viewport. */
    top:7.5rem;
    max-height:calc(100vh - 10rem);
    overflow-y:auto;
    padding-inline-start:1.4rem;
  }

  /* --- Reading progress ---
     The hairline that used to be a border-inline-start is now the track, and the
     accent fill above it reports how far through the body the reader is. Same
     line, same place, doing a second job — which is why it costs no extra space
     and adds no new element to look at. Both are positioned against the padding
     box, so they land exactly where the border sat; inline-start is the right
     edge in RTL, the side facing the article.

     --single-progress is a 0–1 number set once per animation frame by
     articleToc() in strix-theme.js. Absent it, the fill is simply empty. */
  .single-toc::before,
  .single-toc::after{
    content:"";
    position:absolute;
    inset-inline-start:0;
    inset-block-start:0;
    width:2px;
    border-radius:2px;
  }
  .single-toc::before{
    inset-block-end:0;
    background:rgba(255,255,255,.09);
  }
  .single-toc::after{
    height:calc(var(--single-progress,0) * 100%);
    background:var(--accent,#2FD4BE);
    box-shadow:0 0 10px color-mix(in srgb, var(--accent,#2FD4BE) 45%, transparent);
  }

  .single-toc-title{
    margin:0 0 .9rem;
    font-size:.9rem;
    font-weight:600;
    color:#8A93A6;
  }
  .single-toc-link{
    display:block;
    padding:.42rem 0;
    font-size:.95rem;
    line-height:1.55;
    color:#8A93A6;
    text-decoration:none;
    transition:color .2s;
  }
  .single-toc-link:hover,
  .single-toc-link:focus-visible{
    color:#ECEFF4;
  }
  /* Set by articleToc() in strix-theme.js as the reader passes each section. */
  .single-toc-item.is-current .single-toc-link{
    color:var(--accent,#2FD4BE);
    font-weight:600;
  }
}