/* ROUND 86 — Gallery / Awards listing cards on phones (inc/round86.php). Text-bearing tiles only
   (.gt--has-info); desktop and tablet rules are untouched. */
@media (max-width:768px){
  /* The overlay is in the tile's flow: the tile is as tall as the larger of its image ratio and its text.
     The image stays behind it (absolute, cover). 44px of headroom keeps image above the text. */
  .sh-r86-gal .gt--has-info{display:grid;grid-template-columns:100%;aspect-ratio:auto}
  /* the image's own ratio still reserves its space (before the image loads too); the overlay shares the
     cell, so the tile is as tall as the taller of the two */
  .sh-r86-gal .gt--has-info::before{content:"";grid-area:1/1;display:block;padding-top:calc(100% / (var(--gt-aspect,1)));pointer-events:none}
  .sh-r63.sh-r86-gal .gt--has-info .gt__info,
  .sh-r63.sh-r86-gal .gt.is-touch .gt__info{position:relative;left:auto;right:auto;bottom:auto;grid-area:1/1;align-self:end;height:auto;max-height:none;overflow:visible;justify-content:flex-end;gap:6px;padding:44px 48px 12px 12px;width:100%;box-sizing:border-box}
  .sh-r63.sh-r86-gal .gt.is-touch .gt__info>:first-child{margin-top:0}
  /* the tag sits below the 44px headroom, under the heart's row (heart: 10px inset, 32px tall) */
  /* titles wrap in full; nothing is clamped or shrunk */
  .sh-r63.sh-r86-gal .gt--has-info .gt__title{display:block;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere}
  /* location line: the destination page carries the title and region */
  .sh-r86-gal .gt--has-info .gt__sub{display:none}
  /* "N more photos" link: comfortable target, wraps under the title */
  .sh-r86-gal .gt--has-info .gt__more{min-height:24px;display:inline-flex;align-items:center;gap:6px;white-space:normal;line-height:1.3}
  /* Save: icon only on phones (label and saved state stay for assistive tech), 44px touch area */
  .sh-r63.sh-r86-gal .gt .gt__save{padding:8px}
  .sh-r63.sh-r86-gal .gt .gt__save-label{display:none}
  .sh-r86-gal .gt .gt__save::after{content:"";position:absolute;inset:-6px;border-radius:999px}
  .sh-r86-gal .gt .gt__save:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  /* 320-359px: 130px tiles leave 70px beside the maximise glyph, less than the link's shortest line, so
     the decorative glyph steps aside on text-bearing tiles (the whole tile still opens the viewer). */
  @media (max-width:359px){
    .sh-r63.sh-r86-gal .gt--has-info .gt__max{display:none}
    .sh-r63.sh-r86-gal .gt--has-info .gt__info{padding-right:12px}
  }
}