/* Risingshadow Design System v1.2.16: Hero Actions
 * Overlay controls on unpredictable hero imagery. Not a generic button replacement.
 * Readability first; translucent only enough to soften the surface.
 */
.rs-hero-actions{position:absolute;z-index:2;inset-block-start:var(--rs-space-4,16px);inset-inline-end:var(--rs-space-4,16px);display:flex;align-items:center;gap:8px}
.rs-hero-action{box-sizing:border-box;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:1px solid rgba(148,166,180,.35);border-radius:12px;background:#192129;color:#e8edf0;font:inherit;line-height:1;text-decoration:none;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}
@supports (background:color-mix(in srgb,black,white)){.rs-hero-action{background:rgba(20,28,35,.92)}}
@supports (backdrop-filter:blur(8px)){.rs-hero-action{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.rs-hero-action:hover{background:#27343e;border-color:rgba(173,193,208,.65);color:#fff;text-decoration:none}
.rs-hero-action:focus-visible{outline:2px solid var(--rs-border-focus,#78b9e9);outline-offset:3px}
.rs-hero-action:active{background:#30404b}
.rs-hero-action[aria-pressed="true"]{background:#20364a;border-color:#527c9f;color:#b3dcff}
.rs-hero-action:disabled,.rs-hero-action[aria-disabled="true"]{opacity:.48;cursor:not-allowed}
.rs-hero-action svg{display:block;width:20px;height:20px;flex:none;stroke:currentColor}
@media(max-width:480px){.rs-hero-actions{inset-block-start:12px;inset-inline-end:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.rs-hero-action{transition:none}}

/* Semantic favorite toggle: only favorite controls use success styling.
 * Keep the general pressed state blue for other toggle semantics. */
.rs-hero-action--favorite[aria-pressed="true"]{background:#193327;border-color:#397a56;color:#72d39a}
.rs-hero-action--favorite[aria-pressed="true"]:hover{background:#214431;border-color:#56a775;color:#9ae9b8}
.rs-hero-action--favorite[aria-pressed="true"]:active{background:#27503a}
.rs-hero-action--favorite[aria-pressed="true"] svg{fill:currentColor}
.rs-hero-action--favorite[aria-pressed="false"] svg{fill:none}

/* Mobile refinement: reduce visual weight without sacrificing the 44px hit area.
 * Hero owner reserves space for the actions; never overlap identity content. */
@media (max-width: 600px) {
  .rs-hero-actions {
    inset-block-start: 10px;
    inset-inline-end: 10px;
    gap: 6px;
  }
  .rs-hero-action {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #192129;
    border-color: rgba(148,166,180,.27);
  }
  .rs-hero-action svg { width: 18px; height: 18px; }
  @supports (background: color-mix(in srgb, black, white)) {
    .rs-hero-action { background: rgba(20,28,35,.88); }
  }
}

/* v1.2.17 mobile: visible 38px tile inside a 44px interactive box.
   This changes the actual painted footprint, not merely the icon. */
@media (max-width: 600px) {
  .rs-hero-actions { gap: 4px; }
  .rs-hero-action {
    position: relative;
    isolation: isolate;
    width: 44px;
    height: 44px;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 12px;
  }
  .rs-hero-action::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 3px;
    border-radius: 10px;
    border: 1px solid rgba(148,166,180,.30);
    background: rgba(20,28,35,.88);
    transition: background-color 150ms ease,border-color 150ms ease;
  }
  .rs-hero-action:hover::before {background:rgba(37,49,59,.94);border-color:rgba(173,193,208,.60)}
  .rs-hero-action:active::before {background:#30404b}
  .rs-hero-action[aria-pressed="true"]::before {background:#20364a;border-color:#527c9f}
  .rs-hero-action--favorite[aria-pressed="true"]::before {background:#193327;border-color:#397a56}
  .rs-hero-action--favorite[aria-pressed="true"]:hover::before {background:#214431;border-color:#56a775}
  .rs-hero-action svg {width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce) {.rs-hero-action::before{transition:none}}

/* v1.2.18 opt-in compact visual tile: 34px surface within 44px hit area.
   Applies to desktop and mobile; no module-specific overrides. */
.rs-hero-actions--compact { gap: 4px; }
.rs-hero-actions--compact .rs-hero-action {
  position: relative; isolation: isolate; width: 44px; height: 44px;
  border-color: transparent; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.rs-hero-actions--compact .rs-hero-action::before {
  content: ""; position: absolute; z-index: -1; inset: 5px;
  border-radius: 9px; border: 1px solid rgba(148,166,180,.38);
  background: #192129;
  transition: background-color 150ms ease,border-color 150ms ease;
}
@supports (background: color-mix(in srgb,black,white)) {
  .rs-hero-actions--compact .rs-hero-action::before { background: rgba(20,28,35,.94); }
}
.rs-hero-actions--compact .rs-hero-action:hover::before { background:#27343e; border-color:rgba(173,193,208,.65); }
.rs-hero-actions--compact .rs-hero-action:active::before { background:#30404b; }
.rs-hero-actions--compact .rs-hero-action[aria-pressed="true"]::before { background:#20364a; border-color:#527c9f; }
.rs-hero-actions--compact .rs-hero-action--favorite[aria-pressed="true"]::before { background:#193327; border-color:#397a56; }
.rs-hero-actions--compact .rs-hero-action--favorite[aria-pressed="true"]:hover::before { background:#214431; border-color:#56a775; }
.rs-hero-actions--compact .rs-hero-action svg { width:18px; height:18px; }
@media (prefers-reduced-motion:reduce) { .rs-hero-actions--compact .rs-hero-action::before { transition:none; } }

/* v1.2.19: Compact favorite hover paints only the inner 34px tile border.
   Prevent the base favorite hover from outlining the 44px hit target. */
.rs-hero-actions--compact .rs-hero-action--favorite[aria-pressed="true"]:hover {
  border-color: transparent;
}

/* v1.2.20: The compact outer 44px element is a hit target ONLY.
   Base hover/pressed/favorite selectors previously repainted its background,
   creating a second 44px square around the 34px ::before surface.
   Keep all visible state painting on ::before, including pointer hover. */
.rs-hero-actions--compact .rs-hero-action:is(:hover, :active, [aria-pressed="true"]) {
  background: transparent;
  border-color: transparent;
}