/* Photo likes (gallery.php, assets/gallery-likes.js): a heart + count on each photo in the strip and in the viewer's
   pill, and the "Like this photo?" sign-in card. Brand tokens only (the --gs-* names come from assets/gallery.css).
   Mobbin: Microsoft Copilot (heart in the top corner of each photo, clear of the strip's counter), Variant (heart + count pill).
   Liking: happn (small hearts bursting out around the heart), Glassdoor (hearts flying off the like button), Lovable (heart confetti).
   The heart red reuses the site's existing "live" red (#d42f2f, bulletin.css / event-page.css): asked for by name, it isn't in the brand palette. */
.gs-page{--gs-heart:#d42f2f}
.gs-like{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-width:40px;height:40px;padding:0 11px;border:0;border-radius:20px;background:var(--gs-glass);color:var(--gs-ink);font:600 13px/1 var(--brand-font-body,"DM Sans",Raleway,Arial,sans-serif);font-variant-numeric:tabular-nums;box-shadow:0 10px 30px -12px color-mix(in srgb,var(--gs-night) 55%,transparent);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease,background .2s;-webkit-tap-highlight-color:transparent}
.gs-like svg,.gs-like-v svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.gs-like span:empty,.gs-like-v span:empty{display:none}
.gs-like:hover{background:var(--brand-bg,#fff)}
/* Shown on the photo you point at (no click needed: :hover, plus gallery.js's .is-hot on the photo under the pointer),
   while the strip's controls show, or once the photo has likes. Always on touch screens. */
.gs-item:hover .gs-like,.gs-item.is-hot .gs-like,.gs.show-chrome .gs-like,.gs-like:focus-visible,.gs-like.has-likes,.gs-like.is-liked,.gs-like.is-tour{opacity:1;transform:none}
@media(hover:none),(any-pointer:coarse){.gs-like{opacity:1;transform:none}}
.gs-like:focus-visible,.gs-like-v:focus-visible{outline:3px solid var(--gs-accent);outline-offset:2px}
.gs-like.is-liked svg,.gs-like-v.is-liked svg{fill:var(--gs-heart);stroke:var(--gs-heart)}
.gs-track.is-dragging .gs-like{pointer-events:none}
/* Strip pill heart (phones): landscape photos are wider than the screen, so a corner heart would sit off-screen.
   Phones use this one, for the photo the counter shows; computers keep the heart on each photo. */
.gs-hud-like{display:none;align-items:center;gap:5px;height:30px;min-width:30px;padding:0 8px;border:0;border-radius:15px;background:color-mix(in srgb,var(--gs-ink) 8%,transparent);color:var(--gs-ink);font:600 12.5px/1 var(--brand-font-body,"DM Sans",Raleway,Arial,sans-serif);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gs-hud-like svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.gs-hud-like span:empty{display:none}
.gs-hud-like.is-liked svg{fill:var(--gs-heart);stroke:var(--gs-heart)}
.gs-hud-like:focus-visible{outline:3px solid var(--gs-accent);outline-offset:2px}
@media(max-width:820px){.gs-like{display:none}.gs-hud-like{display:inline-flex}}

/* Viewer pill: heart + count beside Share. */
.gs-pill .gs-like-v{display:inline-flex;gap:5px;font:600 13px/1 var(--brand-font-body,"DM Sans",Raleway,Arial,sans-serif);font-variant-numeric:tabular-nums}
.gs-pill .gs-like-v span{padding-right:3px}

/* Pointing at a heart: the pointer becomes a white heart with a red outline, and the heart leans in red.
   (The strip's round "View" cursor steps aside while a heart is under the pointer.) */
.gs-like,.gs-hud-like,.gs-pill .gs-like-v{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 7 4.5c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.6 0 5.6 3.5 4.3 6.8-1.8 4.6-9.3 9.2-9.3 9.2Z' fill='%23fff' stroke='%23d42f2f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,pointer}
.gs:has(.gs-like:hover) .gs-cursor{opacity:0!important}
.gs-like svg,.gs-like-v svg,.gs-hud-like svg{transition:fill .2s,stroke .2s,transform .2s cubic-bezier(.2,.7,.2,1.4)}
@media(hover:hover){.gs-like:hover svg,.gs-like-v:hover svg,.gs-hud-like:hover svg{stroke:var(--gs-heart);transform:scale(1.12)}}

/* Liking: the heart squashes, springs up filled red, and a ring + little hearts and sparks burst out around it. */
.is-pop svg{animation:gs-like-pop .55s cubic-bezier(.2,.7,.2,1.4)}
@keyframes gs-like-pop{0%{transform:scale(1)}15%{transform:scale(.6)}50%{transform:scale(1.38)}75%{transform:scale(.92)}100%{transform:scale(1)}}
.is-unpop svg{animation:gs-like-unpop .3s ease}
@keyframes gs-like-unpop{0%{transform:scale(1)}45%{transform:scale(.72)}100%{transform:scale(1)}}
.gs-like-fx{--gs-heart:#d42f2f;--gs-accent:var(--brand-accent,#d9b24c);position:fixed;z-index:60;width:0;height:0;pointer-events:none}
.gs-like-fx>i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:solid var(--gs-heart);animation:gs-like-ring .5s ease-out forwards}
@keyframes gs-like-ring{0%{transform:scale(.2);border-width:10px;opacity:.9}100%{transform:scale(1.5);border-width:0;opacity:0}}
.gs-like-fx>b{position:absolute;left:calc(var(--z) / -2);top:calc(var(--z) / -2);width:var(--z);height:var(--z);opacity:0;animation:gs-like-fly .75s cubic-bezier(.15,.75,.3,1) var(--w,0s) forwards}
.gs-like-fx>b svg{display:block;width:100%;height:100%;fill:var(--gs-heart)!important;stroke:none!important;animation:none!important;transform:none!important}
.gs-like-fx>b.is-spark{border-radius:50%;background:var(--gs-accent)}
@keyframes gs-like-fly{0%{opacity:1;transform:rotate(var(--a)) translateY(-6px) rotate(calc(var(--a) * -1)) scale(.3)}60%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(calc(var(--a) * -1 + var(--t,0deg))) scale(1)}}

/* "Like this photo?" for guests (shares the share sheet's card look). */
.gs-likeask-text{margin:4px 0 18px;color:var(--gs-muted);font-size:15px;line-height:1.5}
.gs-likeask .gs-copy{display:grid;place-items:center;text-decoration:none}
.gs-likeask-new{display:block;text-align:center;color:var(--gs-ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.gs-like{transition:none}.is-pop svg,.is-unpop svg{animation:none}.gs-like-fx{display:none}}