/*! AUTHOR PAGE (Figma author-page-min-1024 5812:50775, plus min-768 — copied verbatim from the demo's app.css lines 2409–2548 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

/* the hero band: a full-bleed surface other pages will reuse for other
   content. It carries NO background of its own — all three fills on the
   Figma instances are switched off, so the band shows the page's paper and
   the author block sits directly on it. The machinery for the other uses is
   already stacked on the master and currently invisible: an image, a 35%
   mask over it (`bg/alpha/mask-35`) and a picker colour under both. When one
   of those is switched on, it is a fill on THIS element — not a different
   component — which is why the surface exists as its own block at all. */
.hero-bg{padding-block:var(--sp-x-loose);}
@container page (min-width:1024px){
  .hero-bg{padding-block:var(--sp-x-spacious) var(--sp-x-loose);}
}
/* the block inside the band follows the page container exactly, so the hero
   lines up with the list below it at every width without a second ruleset */

/* --- the author block ---
   ≥768 the portrait and the data sit side by side, one third / two thirds.
   Below that the portrait moves ABOVE the data, takes half the width and
   stays at the reading start — it is NOT centred (Figma, all three narrow
   frames). At ≥1024 the pair is pushed to the reading start and the empty
   third beside it is deliberate: the hero is not centred either. */
/* "one third / two thirds" is grid spans, not a ratio of the free space:
   span-3 beside span-6 with one gutter between them. That reproduces the
   drawn widths EXACTLY at both wide steps — 290/620 at 1280 and 286/594 at
   960 — where a plain 1fr 2fr misses each by more than ten pixels, because
   span-6 is two spans PLUS the gutter they would have had between them. */
.author-hero{display:block;}
/* the element is a host, not a box: `.author-hero__row` has to BE the grid item of
   `.author-hero`, or the span lands on the custom element wrapping it and the
   row collapses to three columns instead of nine */
ip-author-hero{display:contents;}
.author-hero__row{display:grid;grid-template-columns:100%;row-gap:var(--sp-normal);}
.author-hero__image{width:50%;}
.author-hero__data{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);min-width:0;}/* the NAME steps down with the page — title/lg 64 from 1024, title/md 52 at
   768, title/sm 44 below. The bio and the follow line do not move: they are
   body/lg at every width. */


.author-hero__name{margin:0;color:var(--content-byline);font:var(--ts-title-sm);letter-spacing:var(--ts-title-sm-ls);}
.author-hero__bio{margin:0;color:var(--content-primary);font:var(--ts-body-lg);}/* the opening sentence is the only bold run — Figma sets it as a segment of
   the same paragraph, not as a separate line */


.author-hero__bio b{font:var(--ts-body-lg-bold);}
.author-hero__follow{margin:0;color:var(--content-primary);font:var(--ts-body-lg-bold);}/* the portrait is a CIRCLE with a three-part gradient ring (border/gradient
   1-2-3, 4px, inside). A conic gradient reproduces the segments; the inner
   disc is masked back out so the ring reads as a stroke, not a fill. */


.author-hero__portrait{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;}
.author-hero__portrait img{display:block;width:100%;height:100%;object-fit:cover;}/* the ring is drawn ON TOP of the photo, not around it: Figma's stroke is
   INSIDE, so it overlaps the image edge instead of shrinking the circle.
   Padding would have taken 8px out of the portrait. The mask keeps only the
   band between the two circles, which is what makes this a stroke and not a
   filled disc. The three colours are transparent in some brands — that is
   the token's value, not a missing ring. */


.author-hero__portrait::after{content:"";position:absolute;inset:0;border-radius:50%;padding:var(--bw-thick);background:conic-gradient(from 180deg, var(--border-gradient-1) 0turn 0.33turn, var(--border-gradient-2) 0.33turn 0.68turn, var(--border-gradient-3) 0.68turn 1turn);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude;}
@container page (min-width:768px){
  .author-hero__row{grid-template-columns:repeat(9, 1fr);column-gap:var(--grid-column-gap-normal);align-items:start;}
  .author-hero__image{width:auto;grid-column:span 3;}
  .author-hero__data{grid-column:span 6;}
  .author-hero__name{font:var(--ts-title-md);letter-spacing:var(--ts-title-md-ls);}
}
/* from 1024 the pair is span-9 of the page's twelve, and it sits at the
   reading start — the empty span-3 at the far end is deliberate */
@container page (min-width:1024px){
  .author-hero{display:grid;grid-template-columns:repeat(12, 1fr);column-gap:var(--grid-column-gap-x-loose);}
  .author-hero__row{grid-column:span 9;column-gap:var(--grid-column-gap-x-loose);}
  .author-hero__name{font:var(--ts-title-lg);letter-spacing:var(--ts-title-lg-ls);}
}

/* --- the ordering block ---
   Chronological by default. A filter or another order may be added later,
   which is why the control's room is the block's own padding-block-start
   rather than a margin on the list. */
.ordering{padding-block:0;}
/* the opening divider is a MEMBER of the list, not a rule above it: in Figma
   it is the first child of topic-rows and takes the same gap every row takes.
   Left outside, it had a plain block container around it and no gap at all —
   the line sat welded to the first row of cards. */
.ordering-list{display:flex;flex-direction:column;gap:var(--grid-row-gap-normal);}
.ordering-divider{border:0;border-top:var(--bw-thin) solid var(--border-normal);margin:0;}
@container page (min-width:1024px){
  .ordering-list{gap:var(--grid-row-gap-x-loose);}
}
/* the list itself: its own ladder, owned here, sharing nothing with the
   Salamandra presets. One card per row under 480, two to 768, four above. */
.topic-rows{display:grid;grid-template-columns:100%;row-gap:var(--grid-row-gap-normal);column-gap:var(--grid-column-gap-normal);}
@container page (min-width:480px){
  .topic-rows{grid-template-columns:repeat(2, 1fr);}
}
@container page (min-width:768px){
  .topic-rows{grid-template-columns:repeat(4, 1fr);}
}
@container page (min-width:1024px){
  .topic-rows{row-gap:var(--grid-row-gap-x-loose);column-gap:var(--grid-column-gap-x-loose);}
}
/* ---- the list layout (Figma topic-page-list-min-480 6355:26469 and
   topic-page-list-under-480 6357:27292) ----------------------------------
   One centred column of rows instead of a grid of cells. Nothing about the
   card changes: the cell becomes 620 wide and the card's own container ladder
   gives it the row form — text beside a 16:9 picture — the same way a narrow
   column gives it the stacked one. Under 480 the row takes the width it is
   given and the picture squares off, which that ladder already does. */
.ordering[data-layout="list"] .topic-rows{display:flex;flex-direction:column;align-items:center;row-gap:var(--grid-row-gap-x-loose);}
.ordering[data-layout="list"] .topic-rows > *{width:min(620px, 100%);}
/* Figma seats the picture at 180 in the 620 row, not at the third the ladder's
   own 1:2 split would give it */
@container card (min-width:480px){
  .ordering[data-layout="list"] .card-news--small .card-news__media{flex:0 0 180px;}
}

/* every cell is a card container in its own right, exactly as a grid column
   is — that is what lets card/news-small pick its own form per cell width */
.topic-rows > *{min-width:0;container-type:inline-size;container-name:card;}
.ordering-more{display:flex;justify-content:center;}
/* the filter row's other home. Centred exactly as in the hero, so moving it
   isolates the POSITION and nothing else — which is the whole point of
   being able to see both. An empty slot takes no space and no gap. */
.ordering-filter{display:flex;justify-content:center;}
.ordering-filter:empty{display:none;}

/* --- button/outline (Figma button-outline) ---
   A pill with no fill and a 1px brand stroke. Height and side padding are
   fixed; the width follows the label. */
.button-outline{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-x-tight);height:36px;padding-inline:var(--sp-snug);border:var(--bw-thin) solid var(--border-brand);border-radius:9999px;background:none;color:var(--content-primary);font:var(--ts-label-button-primary-sm);cursor:pointer;}
.button-outline:hover{border-color:var(--content-primary);}
.button-outline[hidden]{display:none;}

/*! the port's own two declarations, and the reason for both: the demo draws the "ראו עוד" control as a
    <button> and the writer's follow row as static glyphs, while the theme has a real destination for
    each — the next page of the archive, which works before the script runs and for every crawler, and
    the writer's own page on each network (build-contract C5). The anchor sits ON the element the demo
    styles, so the only thing it brings that the demo does not draw is the UA underline. */
.ordering-more .button-outline{text-decoration:none;}
.author-hero__data .follow-row .ic{text-decoration:none;}