/* ROUND 78 — Gallery page only (body.sh-r78-gal, set by inc/round78.php on the Gallery
   template). Awards, House & Land and every other page keep their existing gallery rules.
   Selectors carry .sh-r63 / .sh-r74 alongside .sh-r78-gal so they outrank the round 63 / 74
   rules of equal weight whatever the stylesheet order. */

/* ---- Load more (reuses the round 74 "Show more" pill so the look is unchanged) ---- */
.sh-r78-gal .gal__loadmore[hidden]{display:none}
.sh-r78-gal .gal__loadmore{display:block}

/* ---- Grid: the columns keep their width while tiles are appended ---- */
.sh-r78-gal .gal__grid{align-items:flex-start}

/* ---- Filters toggle (phones / tablets): the label must never disappear.
        The shared .btn--outline-dark hover swaps the text to cream and relies on the charcoal
        sweep behind it; on touch screens the hover state sticks after a tap, which left a
        cream label on the cream pill. Explicit colours for every state, sweep off. ---- */
@media (max-width:1023px){
  .sh-r63.sh-r78-gal .gal__filters-toggle,
  .sh-r63.sh-r78-gal .gal__filters-toggle:hover,
  .sh-r63.sh-r78-gal .gal__filters-toggle:focus-visible,
  .sh-r63.sh-r78-gal .gal__filters-toggle:active{color:var(--charcoal);background:var(--cream);border-color:var(--charcoal)}
  .sh-r63.sh-r78-gal .gal__filters-toggle::before{display:none}
  .sh-r63.sh-r78-gal .gal__filters-toggle[aria-expanded="true"]{color:var(--cream);background:var(--charcoal);border-color:var(--charcoal)}
}

/* ---- Mobile filter sheet: full screen, "Filters" heading, close, page locked behind ---- */
.sh-r78-gal .gal__filters-head{display:none}
@media (max-width:1023px){
  .sh-r63.sh-r78-gal .gal__filters.is-open{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;
    display:flex;flex-direction:column;flex-wrap:nowrap;gap:24px;align-items:stretch;
    max-height:none;height:100%;width:100%;box-sizing:border-box;
    margin:0;padding:0 24px calc(40px + env(safe-area-inset-bottom,0px));
    border-radius:0;background:var(--cream);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain
  }
  .sh-r63.sh-r78-gal .gal__filters.is-open .gal__filters-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    position:sticky;top:0;z-index:1;margin:0 -24px;padding:calc(16px + env(safe-area-inset-top,0px)) 24px 16px;
    background:var(--cream);border-bottom:1px solid rgba(66,64,64,.12)
  }
  .sh-r78-gal .gal__filters-title{margin:0;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
  .sh-r78-gal .gal__filters-close{
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -8px -8px 0;
    padding:0;border:0;border-radius:22px;background:transparent;color:var(--charcoal);cursor:pointer;
    -webkit-tap-highlight-color:transparent
  }
  .sh-r78-gal .gal__filters-close svg{width:20px;height:20px}
  .sh-r78-gal .gal__filters-close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .sh-r63.sh-r78-gal .gal__filters.is-open .gal__group{width:100%}
  .sh-r63.sh-r78-gal .gal__filters.is-open .gal__reset{align-self:flex-start;margin-top:8px}
  html.sh-r78-lock,html.sh-r78-lock body{overflow:hidden;height:100%}
}

/* ---- Cards on phones: two 150px columns. Title steps down with the tile, the info column
        stops short of the maximise glyph, and the heart keeps a 44px touch area. ---- */
@media (max-width:768px){
  .sh-r78-gal .gt__info{padding:12px 48px 12px 12px}
  /* The overlay is always on for touch. On a short (panoramic) tile its text is taller than
     the tile: it used to spill out of the top and lose the title. Now the block sits at the
     foot when it fits and otherwise starts at the top, so the title is always the part shown. */
  .sh-r78-gal .gt.is-touch .gt__info{justify-content:flex-start;overflow:hidden}
  .sh-r78-gal .gt.is-touch .gt__info>:first-child{margin-top:auto}
  .sh-r78-gal .gt__title{font-size:clamp(12px,3.7vw,15px);line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .sh-r78-gal .gt__sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .sh-r78-gal .gt__sub{font-size:11px;line-height:1.4}
  .sh-r78-gal .gt__tag,.sh-r78-gal .gt__corner-tag{font-size:10px;padding:3px 6px}
  .sh-r78-gal .gt__more{font-size:11px;white-space:normal;line-height:1.3}
  .sh-r78-gal .gt.is-touch .gt__save{padding:8px}
  .sh-r78-gal .gt.is-touch .gt__save::after{content:"";position:absolute;inset:-6px;border-radius:999px}
  .sh-r78-gal .gt__max{right:10px;bottom:10px}
}
@media (min-width:769px) and (max-width:1023px){
  .sh-r78-gal .gt__info{padding-right:56px}
}