/* =====================================================================
   Story Card — Figma "Story Card" component set (node 6:327)
   Sizes (modifier classes):
     --default      340w · 16:9 image, tags, title, byline + read time
     --small        280w · 16:9 image, 178px content, byline + date
     --mini         horizontal · 16:9 image left, content right
     --main         720w hero · image fades into a tint, floating panel
     --main-mobile  365w · main on the mobile type scale
   States: default / hover / pressed (real :hover/:active, or .is-hover/.is-pressed
   for the components page).
     hover   drop shadow, white content, Save + Share buttons appear on the image
     pressed gold 1px border + 3.3px gold ring, Save + Share stay visible
   Partnership: optional logo on the image (Top for main, Bottom for the rest).
   Overflow: first tag + "+N"; hover lists the other tags.
   ===================================================================== */
.story-card{
  position:relative;display:flex;flex-direction:column;gap:0;
  width:100%;min-width:0;box-sizing:border-box;overflow:hidden;
  background:var(--card-bg-default);border:1px solid var(--card-border-default);border-radius:var(--radius-md);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.03));
  transition:filter .25s var(--ease-out,ease),box-shadow .25s,border-color .25s;
}
.story-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--text-placeholder);flex:none}
.story-card__media img.story-card__img,.story-card__media>img:not(.partner-logo__img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-card__content{
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);flex:1;
  background:var(--card-bg-default);box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:background-color .25s;
}
.story-card__title{font:var(--text-headline-card);color:var(--text-primary);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story-card__link{color:inherit;text-decoration:none}
.story-card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}  /* whole card is one click target */
.story-card__link:focus-visible{outline:none}
.story-card:has(.story-card__link:focus-visible){box-shadow:var(--shadow-focus-ring)}
.story-card .badge-row,.story-card__byline a{position:relative;z-index:2}  /* badges stay independently clickable */
.story-card__desc{font:var(--text-body-description);color:var(--text-secondary);margin:0}
.story-card__preview{font:var(--text-body-description);color:var(--text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* byline: avatar + name · read time · date */
.story-card__byline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-12)}
.story-card__author{display:inline-flex;align-items:center;gap:var(--space-8);font:var(--text-body-ui);color:var(--text-primary)}
.story-card__avatar{width:28px;height:28px;border-radius:var(--radius-full);border:1px solid var(--border-default);object-fit:cover;object-position:top;background:var(--neutral-100);flex:none}
.story-card__meta{display:inline-flex;align-items:center;gap:var(--space-8);font:var(--text-body-ui);color:var(--card-text-secondary);white-space:nowrap}
.story-card__dot{color:var(--text-muted)}


/* Save + Share (shown on hover / pressed, top-right of the image) */
.story-card__actions{position:absolute;top:10px;right:10px;z-index:3;display:none;flex-direction:column;gap:3px;padding:3px;
  background:var(--card-bg-default);border-radius:3px;filter:drop-shadow(0 .8px 1.6px rgba(0,0,0,.03))}
.story-card__act{display:flex;align-items:center;justify-content:center;width:40px;height:36px;padding:0;border:0;border-radius:var(--radius-md);background:none;color:var(--text-primary);cursor:pointer}
.story-card__act svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story-card__act:hover{background:var(--button-ghost-bg-hover)}
.story-card__act[aria-pressed="true"] svg path:first-child{fill:currentColor}
.story-card:is(:hover,.is-hover,:active,.is-pressed,:focus-within) .story-card__actions{display:flex}

/* ---- hover: shadow + white content (no border, nothing moves) ---- */
.story-card:is(:hover,.is-hover){filter:drop-shadow(0 8px 10px rgba(0,0,0,.08));border-color:transparent}
.story-card:is(:hover,.is-hover) .story-card__content{background:var(--card-bg-hover)}
/* ---- pressed: gold 1px border + soft gold ring ---- */
.story-card:is(:active,.is-pressed){filter:none;transition-duration:.08s;
  border-color:var(--card-border-pressed);
  box-shadow:0 0 var(--elevation-card-pressed-ring-blur,3.3px) 1px var(--card-ring-pressed),0 1px 4px rgba(0,0,0,.04)}
.story-card:is(:active,.is-pressed) .story-card__content{background:var(--card-bg-pressed)}

/* ---- small ---- */
.story-card--small{min-height:340px}
.story-card--small .story-card__content,.story-card--foley .story-card__content{flex:1;min-height:178px;box-sizing:border-box}

/* ---- mini (horizontal) ---- */
.story-card--mini .story-card__actions{display:flex}   /* Figma Mini · Default shows Save + Share */
.story-card--mini{flex-direction:row;align-items:stretch}
.story-card--mini .story-card__media{width:262px;aspect-ratio:auto;height:147px;align-self:center}
.story-card--mini .story-card__content{flex:1;min-width:0;padding:var(--space-12);height:147px;box-sizing:border-box}
.story-card--mini .story-card__title{-webkit-line-clamp:2;min-height:56px}
.story-card--mini .story-card__byline{flex-wrap:nowrap}

/* ---- main + main-mobile: image fades into a tint, floating white panel ---- */
.story-card--main,.story-card--main-mobile{
  --tint:var(--icon-secondary);
  display:block;overflow:hidden;aspect-ratio:720/657;border-radius:var(--radius-md-lg);background:var(--tint);border:1px solid transparent;filter:none;box-shadow:none;
  transition:box-shadow .35s var(--ease-out,ease),border-color .25s;
}
.story-card--main-mobile{aspect-ratio:365/562}
.story-card--main .story-card__media,.story-card--main-mobile .story-card__media{position:absolute;inset:-1px -1px auto -1px;border-radius:0;width:auto;background:var(--tint)}
.story-card--main .story-card__media::after,.story-card--main-mobile .story-card__media::after{   /* fade the photo into the tint */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--tint) 0%,transparent) 83%,var(--tint) 97%);
}
.story-card--main .story-card__content,.story-card--main-mobile .story-card__content{
  position:absolute;left:13px;right:13px;bottom:15px;gap:var(--space-8);padding:var(--space-24);flex:none;
  background:var(--card-bg-default);border-radius:var(--radius-md);box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.story-card--main-mobile .story-card__content{gap:var(--space-12);box-shadow:0 -2px 16px rgba(0,0,0,.07)}
.story-card--main .story-card__title{font:var(--text-headline-large);font-size:var(--fs-3xl);line-height:var(--lh-3xl);-webkit-line-clamp:unset;display:block;overflow:visible}
.story-card--main-mobile .story-card__title{font:600 var(--fs-2xl)/var(--lh-2xl) var(--font-display);display:block;overflow:visible}
.story-card--main-mobile .story-card__byline{gap:var(--space-8);width:100%}
.story-card--main .story-card__actions,.story-card--main-mobile .story-card__actions{top:14px;right:14px}
.story-card--main:is(:hover,.is-hover),.story-card--main-mobile:is(:hover,.is-hover){filter:none;box-shadow:0 12px 24px rgba(0,0,0,.12)}
.story-card--main:is(:active,.is-pressed),.story-card--main-mobile:is(:active,.is-pressed){box-shadow:0 0 var(--elevation-card-pressed-ring-blur,3.3px) 1px var(--card-ring-pressed),0 1px 4px rgba(0,0,0,.06)}
/* inside a layout that sets the height (hero), drop the fixed ratio */
.story-card--fill{aspect-ratio:auto;height:100%}

/* ---- Partner logo (own component, Figma 706:15417): sits on the image, Top or Bottom ---- */
.partner-logo{position:absolute;left:0;right:0;z-index:2;display:flex;padding:8px;box-sizing:border-box;pointer-events:none;
  --logo-h:36px;--logo-zone:58px}
.partner-logo--bottom{bottom:0;align-items:flex-end;height:var(--logo-zone);
  background:radial-gradient(130% 100% at 0 100%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.28) 45%,transparent 75%)}
.partner-logo--top{top:0;align-items:flex-start;height:var(--logo-zone);
  background:radial-gradient(130% 100% at 0 0,rgba(0,0,0,.6) 0%,rgba(0,0,0,.28) 45%,transparent 75%)}
.partner-logo__img{display:block;height:var(--logo-h);width:auto;border-radius:3px;background:var(--card-bg-hover)}
.story-card--default .partner-logo{--logo-zone:118px}
.story-card--main .partner-logo{--logo-h:54px;--logo-zone:178px;padding:10px}
.story-card--main-mobile .partner-logo{--logo-h:45px;--logo-zone:148px}
.story-card--mini .partner-logo{--logo-zone:57px}

/* ---- Partnership and Logos · Large: "PRESENTED BY" + logo, no background ---- */
.partner-large{display:inline-flex;align-items:center;gap:var(--space-8)}
.partner-large__label{font:var(--text-lg);color:var(--text-secondary);text-transform:uppercase;white-space:nowrap}
.partner-large__logo{display:block;height:61px;width:auto}
@media (max-width:768px){.partner-large__logo{height:44px}}

/* ---- Overflow badge "+N": hover or focus lists the other tags ---- */
.badge-more{position:relative;display:inline-flex}
.badge-more__btn{cursor:default;font-family:inherit}
.badge-more:is(:hover,:focus-within,.is-open) .badge-more__btn{--badge-border:var(--border-strong)}
.badge-more__pop{position:absolute;left:0;bottom:calc(100% + 4px);z-index:6;display:flex;gap:5px;
  opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .18s,transform .18s var(--ease-out,ease),visibility .18s;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.08)) drop-shadow(0 2px 1px rgba(0,0,0,.06))}
.badge-more__pop::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}   /* hover bridge */
.badge-more:is(:hover,:focus-within,.is-open) .badge-more__pop{opacity:1;visibility:visible;transform:none}
.story-card--mini .badge-more__pop{bottom:auto;top:calc(100% + 4px)}
.story-card--mini .badge-more__pop::after{top:auto;bottom:100%}
@media (max-width:768px){
  .story-card--mini{flex-direction:column}
  .story-card--mini .story-card__media{width:100%;height:auto;aspect-ratio:16/9}
  .story-card--mini .story-card__content{height:auto}
}

/* Mini: let the +N list escape the card, keep rounded image/content corners */
.story-card--mini{overflow:visible}
.story-card--mini .story-card__media{border-radius:var(--radius-md) 0 0 var(--radius-md)}
.story-card--mini .story-card__content{border-radius:0 var(--radius-md) var(--radius-md) 0}
.docs__row + .docs__row{margin-top:var(--space-24)}