/* ROUND 229 — Award Winning Homes on phones: the listing and the lightbox as on the Gallery page (inc/round229.php).
   Awards page only (body.sh-r229), phones only. Each block repeats the Gallery page rule it matches, at that rule's
   own breakpoint (cards and hearts 768px and down as r102, lightbox 767px and down as r167). Desktop and tablet are
   untouched. */

@media (max-width:768px){
  /* Cards: photo and heart only, no tag, title, "N more photos" or medals, at rest or on hover (r102 section 4).
     With the overlay gone the tile takes its photo's own ratio (r86's ::before), as Gallery tiles do. */
  .sh-r229 .gal__body .gt .gt__info,
  .sh-r229 .gal__body .gt .gt__corner-tag,
  .sh-r229 .gal__body .gt .gt__max,
  .sh-r229 .gal__body .gt .gt__awards{display:none!important}

  /* Heart: the Gallery card heart (r102 ring and shadow, r107 solid fill, r199 cream circle / dark heart, sage
     pill on hover, slate-green when saved). The lightbox pill is not a card heart. */
  .sh-r229 .gal__body .gt .gt__save:not(.gt__save--pill){background:var(--cream);color:var(--charcoal);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 3px rgba(0,0,0,.22),0 0 0 1px rgba(66,64,64,.14)}
  .sh-r229 .gal__body .gt .gt__save:not(.gt__save--pill) .gt__save-icon{background-image:url("inner/heart-dark.svg");filter:none}
  .sh-r229 .gal__body .gt:hover .gt__save:not(.gt__save--pill),
  .sh-r229 .gal__body .gt:focus-visible .gt__save:not(.gt__save--pill),
  .sh-r229 .gal__body .gt .gt__save:not(.gt__save--pill):focus-visible{background:var(--sage);color:#f7f3ea;box-shadow:none}
  .sh-r229 .gal__body .gt:hover .gt__save:not(.gt__save--pill) .gt__save-icon,
  .sh-r229 .gal__body .gt:focus-visible .gt__save:not(.gt__save--pill) .gt__save-icon,
  .sh-r229 .gal__body .gt .gt__save:not(.gt__save--pill):focus-visible .gt__save-icon{background-image:url("inner/heart.svg")}
  .sh-r229 .gal__body .gt .gt__save:not(.gt__save--pill).is-saved,
  .sh-r229 .gal__body .gt:hover .gt__save:not(.gt__save--pill).is-saved{background:var(--slate-green);color:#f7f3ea;box-shadow:none}
  .sh-r229 .gal__body .gt .gt__save:not(.gt__save--pill).is-saved .gt__save-icon{background-image:url("inner/heart-filled.svg")}

  /* Lightbox caption shade across the photo (r102 section 2); the tag pill trimmed to its capitals below (r102 section 3, phone padding) */
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__info{left:0;right:0}
  .sh-r229 .gt__save.gt__save--pill{box-shadow:none}
  .sh-r229 .gt__save.gt__save--pill .gt__save-icon{filter:none}
}
@supports (text-box-trim:trim-both) and (text-box-edge:cap alphabetic){
  @media (max-width:768px){
    .sh-r229 .glb .gt__tag{text-box-trim:trim-both;text-box-edge:cap alphabetic;padding-top:5.5px;padding-bottom:5.5px}
  }
}

/* Lightbox on phones (r167 section 2): Save pill on top, the photo, the tag over its corner, the copy under the
   photo, the arrows at the foot. */
@media (max-width:767px){
  .sh-r229.sh-r63 .glb{padding:72px 24px 56px}
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__card{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%;max-width:100%;max-height:100%;overflow:visible;background:transparent;box-shadow:none}
  .sh-r229.sh-r63 .glb.sh-r63-glb .gt__save--pill{position:static;order:-1;align-self:flex-end;margin:0 0 12px}
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__img{width:100%;max-width:100%;height:auto;max-height:calc(100svh - 300px);object-fit:cover;border-radius:8px;box-shadow:none}
  .sh-r229.sh-r63 .glb.sh-r63-glb .sh-glb-video,.sh-r229.sh-r63 .glb.sh-r63-glb .sh-glb-frame{width:100%;border-radius:8px}
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__info{position:static;left:auto;right:auto;bottom:auto;height:auto;margin-top:-13px;padding:0;background:none;gap:8px}
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__info .gt__tag{margin-left:12px}
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__info .gt__text{gap:4px;margin-top:2px;padding-left:12px} /* r178: copy under the chip's left edge */
  .sh-r229.sh-r63 .glb.sh-r63-glb .glb__info .gt__more{margin-top:4px}
  .sh-r229.sh-r63 .glb__nav{top:auto;bottom:16px;transform:none}
  .sh-r229.sh-r63 .glb__nav--prev{left:24px}
  .sh-r229.sh-r63 .glb__nav--next{right:24px}
}