/* ROUND 173 — see inc/round173.php. Body class sh-r173 on story pages and gallery item pages. */

/* ---- 1. Gallery item, phones: the Inspired block in the photo list after the fourth photo (r173.js) ---- */
@media (max-width:767px){
  .sh-r173 .gd__photos .gd__inspired--inline{width:100%;margin:20px 0 20px;padding:0;gap:12px;align-items:flex-start} /* 32px to the photo above and below (the list's 12px gap + 20px) */
  .sh-r173 .gd__photos .gd__inspired--inline .gd__inspired-title{margin:0}
  .sh-r173 .gd__photos .gd__inspired--inline .btn{margin-top:4px}
}

/* ---- 2. Partner with Sentinel: the circle banner sized for its copy ---- */
.sh-r173.sh-page-partner-with-sentinel .ch__circle{width:640px;min-height:640px;padding:64px 80px;gap:16px}
.sh-r173.sh-page-partner-with-sentinel .ch__circle .kd__title.h1{font-size:40px;line-height:1.1}
.sh-r173.sh-page-partner-with-sentinel .ch__circle .ch__copy{font-size:16px;line-height:1.5}
.sh-r173.sh-page-partner-with-sentinel .ch__circle .ch__copy + .ch__copy{margin-top:-4px}
@media (max-width:1200px){
  .sh-r173.sh-page-partner-with-sentinel .ch__circle{width:560px;height:auto;min-height:560px;padding:48px 56px}
  .sh-r173.sh-page-partner-with-sentinel .ch__circle .kd__title.h1{font-size:36px}
  .sh-r173.sh-page-partner-with-sentinel .ch__circle .ch__copy{font-size:15px}
}
@media (max-width:1023px){
  .sh-r173.sh-page-partner-with-sentinel .ch__circle{width:100%;min-height:0;max-width:520px;padding:40px 28px;gap:20px}
  .sh-r173.sh-page-partner-with-sentinel .ch__circle .ch__copy{font-size:16px}
}

/* ---- 3. Story cards (Charity Homes layout): equal-height cards, the photo always the same shape ---- */
.sh-r173 .sy-stories--cards .chp-how__cards{align-items:stretch}
.sh-r173 .sy-stories--cards .chp-card{height:auto}
.sh-r173 .sy-stories--cards .chp-card__media{flex:none;aspect-ratio:4 / 3}
.sh-r173 .sy-stories--cards .chp-card__body{flex:1 1 auto}
@media (min-width:1024px){
  .sh-r173 .sy-stories--cards .chp-how__cards{flex-wrap:nowrap} /* three in a row down to 1024px (inner.css wraps the charity cards under 1200px) */
  .sh-r173 .sy-stories--cards .chp-card{flex:1 1 0;min-width:0}
}
@media (min-width:769px) and (max-width:1023px){
  .sh-r173 .sy-stories--cards .chp-card{flex:0 0 calc(50% - 16px);min-width:0} /* two per row; a third sits under them at the same width */
}