/*! PACKAGE (Figma card/related 5211:15353, rules sheet package-rules — copied verbatim from the demo's app.css lines 2342–2408 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

.package{display:flex;flex-direction:column;gap:var(--grid-row-gap-normal);min-width:0;}
/* --- the strip reads the COLUMN it landed in ---
   the bottom padding belongs to the strip: it separates the package from
   whatever follows it in the column, in both directions */
.package-related{display:flex;flex-direction:column;gap:var(--grid-row-gap-normal);min-width:0;padding-block-end:var(--sp-normal);}
@container card (min-width:480px){
  .package-related{flex-direction:row;gap:var(--grid-column-gap-x-loose);align-items:stretch;}
  .package-related > *{flex:1 1 0;min-width:0;}
}
/* below 280 the column is a text rail — the related stories step aside and
   only the main story remains */
@container card (max-width:279.98px){
  .package-related{display:none;}
}
/* --- a package in grid F ---
   The main story is the whole screen; the related row is not. It behaves the
   way it does under every other template, so it is held to the page: content
   capped at --maxw-salamandra with the page's own side margins around it.

   It is held by PADDING, not by max-width and auto margins the way
   .grid-container does it. The strip is a flex item of .package, and an auto
   margin on the cross axis cancels the stretch that gives a flex item its
   width — sharing the container's rule collapsed the strip to its content,
   80px wide at every page size. Padding needs no stretch to be cancelled:
   each side is the page margin, or half of whatever the page runs past 1280,
   whichever is larger. Reproduces .grid-container exactly — verified against
   a real grid at 768 / 1024 / 1280 / 1440 / 1800. */
.column-f .package-related{box-sizing:border-box;padding-inline:max(var(--grid-margin-mobile), calc((100% - var(--maxw-salamandra)) / 2));}
@container page (min-width:768px){
  .column-f .package-related{padding-inline:max(var(--grid-margin-tablet), calc((100% - var(--maxw-salamandra)) / 2));}
}
@container page (min-width:1024px){
  .column-f .package-related{padding-inline:max(var(--grid-margin-desktop), calc((100% - var(--maxw-salamandra)) / 2));}
}

/* --- the related card reads ITSELF ---
   no divider of its own: the strip's gap is what separates these cards, so
   the card is nothing but its lockup (line removed by Ronen 2026-08-03) */
ip-card-related{display:block;container-type:inline-size;container-name:related;}
.card-related__link{display:flex;flex-direction:column;gap:var(--sp-tight);text-decoration:none;}
.card-related__link .card-related__media{display:block;flex:none;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card-media);}
.card-related__link .card-related__media img{display:block;width:100%;height:100%;object-fit:cover;}/* the meta lockup HUGS and sits at the reading start, so the column keeps its
   children at flex-start and the headline block stretches back to full width */


.card-related__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-x-tight);flex:1;min-width:0;}
.card-related__top{display:flex;flex-direction:column;align-self:stretch;align-items:flex-start;gap:var(--sp-tight);}
.card-related__link .card-related__headline{display:block;margin:0;font:var(--ts-headline-xs);color:var(--content-primary);}
.card-related__link .card-lockup{justify-content:flex-start;gap:var(--sp-x-tight);}/* opinion brings the author's face with it — 24, not the 40 the big cards use */


.card-related__link .card-avatar img{width:24px;height:24px;}
/* over 290 the photo moves beside the text at a fixed 150x85. The photo is
   FIRST in the DOM, so it lands at the reading start — right in Hebrew, which
   is where the Figma master measures it */
@container related (min-width:290.02px){
  .card-related__link{flex-direction:row;align-items:flex-start;}
  .card-related__link .card-related__media{width:150px;}
}