/* ROUND 119 — Gallery detail (body.sh-r119-gd) + Plan detail (body.sh-r119-pd), inc/round119.php.
   Loads after inner.css, r63, r67, r77, r81-plan, r99 and r116. */

/* ===================================================================== Gallery detail: title over the photo
   Desktop (round 77) lifts the amber italic title onto the foot of the hero photo: the photo's edge crosses the
   letters about two-thirds of the way down. Phones and tablets had the title under the photo (static, padded);
   they now get the same overlap at their own type size, and the content under the title keeps its distance. */
@media (max-width:1023px){
  .sh-r119-gd .gd__deco{position:relative;left:0;z-index:3;top:-36px;margin:0 0 -36px;padding-top:0}  /* 56px type: 64% of the line;
     left:0 cancels inner.css's desktop left offset, which a relative box would otherwise keep: the letters start on
     the 24px gutter, level with the logo and the content below (AJ, 9 Oct) */
}
@media (max-width:768px){
  .sh-r119-gd .gd__deco{top:-28px;margin-bottom:-28px;padding-right:144px}                     /* 44px type; room for the Save pill */
}

/* ===================================================================== Gallery detail: Save on the photo's corner (phones)
   The Save pill leaves the actions row and sits on the hero photo's bottom-right corner, half on the photo and
   half on the charcoal (40px pill, 20px up). Same pill, same behaviour; VIEW PLAN, when the entry has one, stays
   where it was. With Save alone the empty actions row collapses so nothing else moves. */
@media (max-width:768px){
  .sh-r119-gd .gd__body{position:relative}
  .sh-r119-gd .gd__actions .gd__save{position:absolute;right:24px;top:-20px;z-index:4;margin:0}
  .sh-r119-gd .gd__actions:not(:has(.btn--sand)){min-height:0;height:0;overflow:visible}
}

/* ===================================================================== Plan detail: lighter hero on phones
   Round 63's head shade (55% at the top edge, 220px) plus round 81's foot shade (62%, 55% of the frame) made the
   render murky on phones. Both are eased: head 32% over 160px, foot 42% over 48%. The name keeps its text shadow
   and the photo trigger its own label backdrop, so both stay readable on any render. Desktop untouched. */
@media (max-width:768px){
  .sh-r119-pd.sh-r63 .pd--r63 .pd__shade{height:160px;background:linear-gradient(180deg,rgba(30,30,30,.32),rgba(30,30,30,0))}
  .sh-r119-pd.sh-r81-pd .pd--r63 .pd__media::after{height:48%;background:linear-gradient(to top,rgba(20,20,20,.42),rgba(20,20,20,0))}
}

/* ===================================================================== Plan detail: the map on phones is a button
   Until r119.js has collapsed the Map Configurator to its phone button (class is-mobile-collapsed, the plugin's
   own state), the card is kept out of sight so it never flashes; the body gets sh-r119-map once that is done. */
@media (max-width:767px){
  .sh-r119-pd:not(.sh-r119-map) .smc-app:not(.is-mobile-open):not(.is-mobile-collapsed){height:56px;visibility:hidden}
}