:root{
  --content-card-radius:12px;
  --content-card-inner-radius:8px;
  --content-card-padding:8px;
  --content-card-padding-lg:16px;
  --content-card-body-padding:12px 6px 4px;
  --content-card-body-padding-compact:8px 4px 2px;
  --content-card-featured-gap:20px;
  --content-card-border:var(--line, #e5ebf1);
  --content-card-bg:#fff;
  --content-card-shadow:var(--shadow, 0 14px 36px rgba(17, 41, 71, .08));
  --content-card-hover-border:#d4e0ea;
  --content-card-hover-shadow:0 12px 28px rgba(17, 41, 71, .08);
  --content-card-hover-y:-1px;
  --content-card-title-size:15px;
  --content-card-title-line:1.3;
  --content-card-title-weight:600;
  --content-card-title-color:var(--text-strong, #09111b);
  --content-card-title-featured-size:17px;
  --content-card-title-featured-line:1.24;
  --content-card-title-compact-size:13px;
  --content-card-title-compact-line:1.28;
  --content-card-summary-size:14px;
  --content-card-summary-line:1.5;
  --content-card-summary-color:rgba(13, 22, 33, .78);
  --content-card-meta-size:12px;
  --content-card-meta-color:var(--text-soft, #566476);
  --content-card-chip-gap:6px;
  --content-card-media-ratio:16 / 9;
  --content-card-media-radius:8px;
  --content-card-media-bg:#dce6f1;
  --event-date-bg:#f4f7fa;
  --event-date-border:#ffffff;
  --event-date-radius:8px;
  --event-date-padding:10px;
  --event-date-width:92px;
  --event-date-range-width:112px;
  --event-date-feature-width:112px;
  --event-date-feature-range-width:132px;
  --event-card-padding:var(--content-card-padding);
  --event-card-gap:16px;
  --event-card-title-feature-size:clamp(20px, 1.8vw, 24px);
}

.content-card{
  position:relative;
  border:1px solid var(--content-card-border);
  border-radius:var(--content-card-radius);
  background:var(--content-card-bg);
  box-shadow:var(--content-card-shadow);
}

.content-card:hover{
  border-color:var(--content-card-hover-border);
  transform:translateY(var(--content-card-hover-y));
  box-shadow:var(--content-card-hover-shadow);
}

.content-card__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:var(--content-card-radius);
}

.content-card__media{
  position:relative;
  border-radius:var(--content-card-media-radius);
  aspect-ratio:var(--content-card-media-ratio);
  overflow:hidden;
}

.content-card__media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}

.content-card__title{
  margin:0;
  font-size:var(--content-card-title-size);
  line-height:var(--content-card-title-line);
  font-weight:var(--content-card-title-weight);
  color:var(--content-card-title-color);
}

.content-card__summary{
  margin:0;
  font-size:var(--content-card-summary-size);
  line-height:var(--content-card-summary-line);
  color:var(--content-card-summary-color);
}

.content-card__meta{
  font-size:var(--content-card-meta-size);
  color:var(--content-card-meta-color);
}

.event-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--event-card-gap);
  align-items:start;
  padding:var(--event-card-padding);
  border:1px solid var(--content-card-border);
  border-radius:var(--content-card-radius);
  background:var(--content-card-bg);
  box-shadow:var(--content-card-shadow);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.event-card:hover{
  border-color:var(--content-card-hover-border);
  box-shadow:var(--content-card-hover-shadow);
  transform:translateY(var(--content-card-hover-y));
}

.event-card__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}

.event-card__date,
.event-card__media,
.event-card__body,
.event-card__side{
  position:relative;
  z-index:2;
}

.event-card__date,
.event-card__media,
.event-card__body,
.event-card__side,
.event-card__chips,
.event-card__meta{
  pointer-events:none;
}

.event-card__topics,
.event-card__topics *{
  position:relative;
  z-index:3;
  pointer-events:auto;
}

.event-date-badge{
  display:flex;
  width:var(--event-date-width);
  min-height:92px;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--event-date-padding);
  border:1px solid var(--event-date-border);
  border-radius:var(--event-date-radius);
  background:var(--event-date-bg);
  color:inherit;
  text-align:center;
}

.event-date-badge--range{
  width:var(--event-date-range-width);
}

.event-date-badge__day{
  display:block;
  font-size:30px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.06em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--text-strong, #09111b);
}

.event-date-badge__month{
  display:block;
  margin-top:6px;
  font-size:var(--content-card-meta-size);
  line-height:1;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted, #8ea0b2);
}

.event-card__body{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:8px;
}

.event-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--content-card-chip-gap);
}

.event-card__title{
  margin:0;
  font-size:var(--content-card-title-size);
  line-height:var(--content-card-title-line);
  font-weight:var(--content-card-title-weight);
  color:var(--content-card-title-color);
  text-wrap:balance;
}

.event-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:var(--content-card-meta-size);
  line-height:1.5;
  color:var(--content-card-meta-color);
}

.event-card__meta-item{
  display:inline-flex;
  /* center: SVGs have no inherent text baseline — center aligns icon
     correctly with the adjacent text without floating the icon above it */
  align-items:center;
  gap:4px;
}

.event-card__meta-item svg{
  flex:0 0 auto;
  /* no translateY needed when align-items:center is used */
}

.event-card__summary{
  margin:0;
  max-width:720px;
  font-size:var(--content-card-summary-size);
  line-height:var(--content-card-summary-line);
  color:var(--content-card-summary-color);
}

.event-card__topics{
  display:flex;
  flex-wrap:wrap;
  gap:var(--content-card-chip-gap);
  margin-top:4px;
}

.event-card__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:var(--content-card-media-ratio);
  align-self:stretch;
  overflow:hidden;
  border-radius:var(--content-card-media-radius);
  background:var(--content-card-media-bg);
}

.event-card__media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}

.event-card__side{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  min-width:max-content;
}

.event-card--feature{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--content-card-featured-gap);
}

.event-card--feature .event-date-badge{
  width:var(--event-date-feature-width);
  min-height:112px;
}

.event-card--feature .event-date-badge--range{
  width:var(--event-date-feature-range-width);
}

.event-card--feature .event-date-badge__day{
  font-size:36px;
}

.event-card--feature .event-card__title{
  font-size:var(--event-card-title-feature-size);
  line-height:var(--content-card-title-featured-line);
}

.event-card--feature.event-card--with-media{
  grid-template-columns:minmax(220px, 32%) minmax(0,1fr) auto;
}

.event-card--feature.event-card--with-media .event-card__media{
  min-height:140px;
  aspect-ratio:unset; /* align-self:stretch determines height; ratio would fight the stretch */
}

.event-card--compact{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:stretch;
}

.event-card--compact .event-card__date{
  display:flex;
  align-self:stretch;
}

.event-card--compact .event-date-badge{
  width:var(--event-date-width);
  height:100%;
  min-height:100%;
}

.event-card--compact .event-date-badge--range{
  width:var(--event-date-width);
}

.event-card--compact .event-date-badge--range .event-date-badge__day{
  font-size:26px;
  letter-spacing:-.07em;
}

@media (max-width:720px){
  .event-card,
  .event-card--feature,
  .event-card--feature.event-card--with-media,
  .event-card--compact{
    grid-template-columns:1fr;
  }

  .event-card__side{
    justify-content:flex-start;
  }

  .event-date-badge,
  .event-card--feature .event-date-badge{
    width:var(--event-date-width);
    min-height:92px;
  }

  .event-date-badge--range,
  .event-card--feature .event-date-badge--range{
    width:var(--event-date-range-width);
  }
}

/* ── event-card-mini: inline list row (admin pickers, sidebar lists) ─────── */
.event-card-mini{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--text,#0d1621);
  transition:background .12s;
}
.event-card-mini:hover{
  background:var(--admin-bg,#f4f7fb);
  text-decoration:none;
}
.event-card-mini__date{
  flex-shrink:0;
  font-size:12px;
  font-weight:600;
  color:var(--text-soft,#566476);
  white-space:nowrap;
}
.event-card-mini__city{
  flex-shrink:0;
  font-size:12px;
  color:var(--text-soft,#566476);
  white-space:nowrap;
}
.event-card-mini__city::before{
  content:'·';
  margin-right:8px;
  opacity:.5;
}
.event-card-mini__title{
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  color:var(--text,#0d1621);
}
.event-card-mini[data-event-past] .event-card-mini__title{
  color:var(--text-soft,#566476);
}

/* ── chip-row: universal chip spacing wrapper ────────────────────────────── */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--chip-gap,8px);
  align-items:center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANONICAL META-ROW / ICON SYSTEM — source of truth for all cards
   ─────────────────────────────────────────────────────────────────────────
   Contract:
     • Container  → align-items:center (baseline is NOT used for icon rows)
     • Item       → inline-flex + align-items:center + gap
     • Icon       → flex:0 0 auto, explicit width/height, NO translateY
     • Text       → inline, inherits font/color from container

   Rule: never use transform:translateY on meta icons.
         align-items:center is the only accepted centering mechanism.
         Icons with different optical weights get their own named class
         (.meta-icon--calendar, .meta-icon--geo) but NO transform hacks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────────────────── */
.entity-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  align-items:center;
  font-size:var(--content-card-meta-size);
  line-height:1.5;
  color:var(--content-card-meta-color);
}

/* ── Item (icon + text pair) ─────────────────────────────────────────────── */
.entity-meta-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

/* ── Icon — canonical contract, no transform hacks ──────────────────────── */
.entity-meta-item svg,
.meta-icon{
  flex:0 0 auto;
  /* Size is set per icon context via width/height attributes on the SVG.
     DO NOT add transform:translateY here — use align-items:center on the
     parent instead. translateY hacks compound with each other and break
     across different line-heights / font-sizes. */
}

/* Named icon variants — optical corrections, set here and nowhere else. */
.meta-icon--geo,
.meta-icon--clock,
.meta-icon--link{
  flex:0 0 auto;
}

/* Calendar icon sits 2 px low relative to cap-height at 13–14 px render
   size — lift it back into optical center. */
.meta-icon--calendar{
  flex:0 0 auto;
  transform:translateY(-2px);
}

.entity-meta-item a{
  color:inherit;
  text-decoration:none;
}

.entity-meta-item a:hover{
  text-decoration:underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS-CARD — unified card system for news/content, 4 render modes
   ─────────────────────────────────────────────────────────────────────────
   Modes: grid | list | featured | hype
   Media contract: position:relative + img position:absolute;inset:0
   Inner radius formula: outer(12px) − padding(4–8px) = 8px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell (shared by all modes) ─────────────────────────────────────────── */
.news-card{
  position:relative;
  /* Fill grid cell — ensures cards in the same row reach the same bottom edge */
  height:100%;
  border:1px solid var(--content-card-border);
  border-radius:var(--content-card-radius);
  background:var(--content-card-bg);
  box-shadow:var(--content-card-shadow);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.news-card:hover{
  border-color:var(--content-card-hover-border);
  transform:translateY(var(--content-card-hover-y));
  box-shadow:var(--content-card-hover-shadow);
}

/* Overlay link — full-card hit target */
.news-card__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}

/* Stacking: media/body/chips/topics above overlay */
.news-card__media,
.news-card__banner,
.news-card__body,
.news-card__chips,
.news-card__meta,
.news-card__side{
  position:relative;
  z-index:2;
}

/* Interactive chips above overlay */
.news-card__topics,
.news-card__topics *{
  position:relative;
  z-index:3;
  pointer-events:auto;
}

/* ── Media zone — shared contract for all modes ──────────────────────────── */
.news-card__media,
.news-card__banner{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--content-card-media-radius);
  background:var(--content-card-media-bg);
}

.news-card__media img,
.news-card__banner img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.news-card__body{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:6px;
}

.news-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--content-card-chip-gap);
}

.news-card__title{
  margin:0;
  font-size:var(--content-card-title-size);
  line-height:var(--content-card-title-line);
  font-weight:var(--content-card-title-weight);
  color:var(--content-card-title-color);
}

.news-card__title a{
  text-decoration:none;
  color:inherit;
}

.news-card__excerpt{
  margin:0;
  font-size:var(--content-card-summary-size);
  line-height:var(--content-card-summary-line);
  color:var(--content-card-summary-color);
}

.news-card__date{
  margin-top:auto;
  padding-top:4px;
  font-size:var(--content-card-meta-size);
  line-height:1.45;
  color:var(--content-card-meta-color);
}

.news-card__topics{
  display:flex;
  flex-wrap:wrap;
  gap:var(--content-card-chip-gap);
  margin-top:4px;
}

/* ── Mode A: Grid ────────────────────────────────────────────────────────── */
/*   Cover 16:9 top → chips → title → excerpt → date
     Tiles in auto-fit grid, equal-height columns                            */
.news-card--grid{
  display:flex;
  flex-direction:column;
  padding:var(--content-card-padding);
}

.news-card--grid .news-card__media{
  /* Inset: sits inside card padding — radius and overflow from base rule */
  aspect-ratio:16 / 9;
}

.news-card--grid .news-card__body{
  padding:var(--content-card-body-padding);
  flex:1;
}

/* ── Mode B: List ────────────────────────────────────────────────────────── */
/*   Media left (4:3, fixed width) | body right
     Compact horizontal row for dense listing                                */
.news-card--list{
  display:grid;
  grid-template-columns:var(--news-card-list-media-w, 160px) minmax(0,1fr);
  gap:var(--content-card-featured-gap);
  align-items:start;
  padding:var(--content-card-padding);
}

.news-card--list .news-card__media{
  aspect-ratio:4 / 3;
  width:var(--news-card-list-media-w, 160px);
}

.news-card--list .news-card__body{
  padding:4px 0;
}

.news-card--list .news-card__title{
  font-size:var(--content-card-title-compact-size, 14px);
  line-height:var(--content-card-title-compact-line, 1.3);
}

/* ── Mode C: Featured ────────────────────────────────────────────────────── */
/*   Media left (16:9, ≈38%) | body right
     Same media proportions as Grid, no oversized hero                       */
.news-card--featured{
  display:grid;
  grid-template-columns:minmax(280px,38%) minmax(0,1fr);
  gap:var(--content-card-featured-gap);
  align-items:start;
  padding:var(--content-card-padding);
}

.news-card--featured .news-card__media{
  aspect-ratio:16 / 9;  /* grid-consistent proportions */
}

.news-card--featured .news-card__body{
  padding:var(--content-card-body-padding-compact);
}

.news-card--featured .news-card__title{
  font-size:var(--content-card-title-featured-size);
  line-height:var(--content-card-title-featured-line);
}

/* ── Mode D: Hype ────────────────────────────────────────────────────────── */
/*   Wide cinematic banner 32:9 | content block below (optional side column)
     Editorial/highlight mode for digests, AI projects, announcements        */
.news-card--hype{
  display:flex;
  flex-direction:column;
  padding:var(--content-card-padding);
}

.news-card--hype .news-card__banner{
  aspect-ratio:32 / 9;
  border-radius:var(--content-card-media-radius);
}

.news-card--hype .news-card__content{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--news-card-hype-side-w, 0px);
  gap:24px;
  padding:var(--content-card-body-padding);
}

.news-card--hype .news-card__content--with-side{
  --news-card-hype-side-w:260px;
}

.news-card--hype .news-card__body{
  padding:0;
}

.news-card--hype .news-card__side{
  padding-top:4px;
  font-size:14px;
  line-height:1.55;
  color:var(--content-card-summary-color);
}

.news-card--hype .news-card__title{
  font-size:clamp(20px, 1.8vw, 26px);
  line-height:1.22;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .news-card--featured,
  .news-card--list{
    grid-template-columns:1fr;
  }

  .news-card--featured .news-card__media{
    aspect-ratio:16 / 9;
  }

  .news-card--list .news-card__media{
    width:100%;
    aspect-ratio:16 / 9;
  }

  .news-card--hype .news-card__content{
    grid-template-columns:1fr;
  }
}

/* ── news-listing: view-switch container ─────────────────────────────────── */
/*   Parent container gets data-view="grid"|"list"                           */
.news-listing [data-view-panel]{
  display:block;
}

.news-listing[data-view="list"] [data-view-panel="grid"],
.news-listing[data-view="grid"] [data-view-panel="list"]{
  display:none;
}

/* ── news-surface: homepage section shell ────────────────────────────────── */
.news-surface{
  padding:var(--content-card-padding);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Card grid equal-height system
   ─────────────────────────────────────────────────────────────────────────
   Problem: cards in a grid row have different heights causing "holes" at
   the bottom of shorter cards. Row height is determined by the tallest card,
   but shorter cards need explicit height:100% to fill their grid cell.

   Rule: in any symmetric card grid, every card should fill its row height.
   Cards already use display:flex + flex-direction:column so their inner
   content distributes correctly once height:100% is set.

   Masonry/editorial exception: add .grid--masonry or .grid--auto-height
   to the container to opt out of equal-height behaviour.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid containers: explicit stretch (default in CSS Grid, but stated
      clearly so overrides from other rules don't accidentally break it) ─── */
.grid,
.project-card-grid,
.news-related__grid,
.stream-layout__grid,
.cards-grid,
.catalog-grid,
.search-results-grid,
.news-cards,
.news-grid,
.news-grid--editorial,
.people-grid,
.persons-grid{
  align-items:stretch;
}

/* ── Grid items: fill their cell so bottom edges align across a row ──────── */
.grid > *,
.project-card-grid > *,
.news-related__grid > *,
.stream-layout__grid > *,
.cards-grid > *,
.catalog-grid > *,
.search-results-grid > *,
.news-cards > *,
.news-grid > *,
.news-grid--editorial > *,
.people-grid > *,
.persons-grid > *{
  height:100%;
}

/* ── Named card types that appear inside the grids above ─────────────────── */
/* .news-card already has height:100% on the base rule above */
.news-secondary-card,
.content-card,
.event-card-mini,
.people-grid .person-card,
.persons-grid .rko-entity-person-card{
  height:100%;
}

/* ── Masonry / editorial opt-out ─────────────────────────────────────────── */
/* Add one of these classes to a grid container to restore auto sizing.      */
.grid--masonry,
.grid--auto-height,
.grid--editorial{
  align-items:start;
}
.grid--masonry > *,
.grid--auto-height > *,
.grid--editorial > *{
  height:auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ShareBlock — unified action/share sidebar component
   Source of truth: event_detail sidebar (.card.action-card)
   Used by: event detail, news detail, publication show, project detail
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container — same shell as event .card */
.action-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#fff;
  border:1px solid var(--content-card-border,#e5ebf1);
  border-radius:12px;
  box-shadow:0 14px 36px rgba(17,41,71,.08);
  padding:20px;
}

/* CTA button stack */
.action-card__buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.action-card__buttons:empty{
  display:none;
}

/* Registration / status row (event mode) */
.action-card__status{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:2px;
}
.action-card__status--closed{
  padding:12px 14px;
  border:1px solid #f0d4d4;
  border-radius:10px;
  background:#fff7f7;
}
.action-card__status strong{
  font-size:14px;
  line-height:1.3;
  font-weight:600;
  color:#0d1621;
}
.action-card__status--closed strong{
  color:#b83232;
}
.action-card__status span{
  font-size:13px;
  line-height:1.45;
  color:#667b90;
}

/* Divider */
.action-card__divider,
.sidebar-divider{
  height:1px;
  background:#edf2f6;
  margin:0;
}

/* ── Sidebar buttons (pill CTAs) ─────────────────────────────────────────── */
.sidebar-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  border:0;
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar-button[hidden]{display:none !important}
.sidebar-button:hover{transform:translateY(-1px)}
.sidebar-button:focus-visible{outline:2px solid var(--cta-blue-bg,#1E5B91);outline-offset:2px}

.sidebar-button--primary{
  background:var(--cta-red-bg,#E65E57);
  color:var(--cta-red-text,#fff);
}
.sidebar-button--primary:hover{
  background:var(--cta-red-bg-hover,#D4524A);
  color:var(--cta-red-text,#fff);
}
.sidebar-button--secondary{
  background:var(--cta-blue-bg,#1E5B91);
  color:var(--cta-blue-text,#fff);
}
.sidebar-button--secondary:hover{
  background:var(--cta-blue-bg-hover,#184C79);
  color:var(--cta-blue-text,#fff);
}
.sidebar-button--ghost{
  background:var(--cta-gray-bg,#F0F2F5);
  color:var(--cta-gray-text,#4F5969);
}
.sidebar-button--ghost:hover{
  background:var(--cta-gray-bg-hover,#E5EAF0);
  color:var(--cta-gray-text,#4F5969);
}
.sidebar-button--success{
  background:var(--cta-green-bg,#54a887);
  color:var(--cta-green-text,#fff);
}
.sidebar-button--success:hover{
  background:var(--cta-green-bg-hover,#468f72);
  color:var(--cta-green-text,#fff);
}
.sidebar-button--download{gap:8px}
.sidebar-button--download svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
}

/* ── Share section ───────────────────────────────────────────────────────── */
/* Floats inside .action-card — top border separates from buttons above */
.action-card .share{
  margin:0;
  padding-top:16px;
  border-top:1px solid #edf2f6;
}
/* When share is the only child (no buttons above) remove separator */
.action-card .share:first-child{
  padding-top:0;
  border-top:none;
}

.share__head{
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8194a6;
}
.share__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.share__native,
.share__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:0;
  background:var(--cta-gray-bg,#F0F2F5);
  color:var(--cta-gray-text,#4F5969);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.share__native:hover,
.share__item:hover{
  background:var(--cta-gray-bg-hover,#E5EAF0);
  color:var(--cta-gray-text,#4F5969);
  transform:translateY(-1px);
}
/* "Скопировать ссылку" spans the full width when it wraps */
.share__copy{
  flex-basis:100%;
  width:max-content;
}
.share__feedback{
  min-height:16px;
  margin-top:6px;
  font-size:12px;
  line-height:1.3;
  color:#6f8499;
}
.share__feedback--ok{color:var(--cta-green-bg,#54a887)}
.share__feedback--error{color:var(--cta-red-bg,#E65E57)}