/*
 * Performance Impressions gallery pages: one stylesheet for the white card, the thumbnail grid and the buttons.
 * Lives next to pi-gallery-grid.php in wp-content/mu-plugins/ and is loaded on any post that uses [pi_gallery_grid].
 * Spacing and sizes are in rem (values converted from px at 16px = 1rem). Hairline borders and outlines stay in px.
 * The card rules use !important on purpose: they replace inline styles, which used to beat every theme rule.
 */

/* ---------- Card around the description, prints line and licensing block ---------- */
.pi-gallery-card{background:#fff !important;border-radius:.625rem !important;box-shadow:0 .25rem .625rem 0 rgba(0,0,0,.15) !important;padding:2.25rem 1.875rem !important;max-width:98% !important;margin:0 auto 2.5rem !important}
.pi-gallery-card .pi-gallery-card__text{font-size:1rem !important;line-height:1.4 !important;color:#333 !important;margin:0 0 1.125rem !important}
.pi-gallery-card .pi-gallery-card__license{margin-top:1.75rem !important;padding-top:1.125rem !important;padding-left:1rem !important;border-top:1px solid #e3e3e3 !important}
.pi-gallery-card .pi-gallery-card__license-text{font-size:.875rem !important;line-height:1 !important;color:#333 !important;margin:.625rem !important}
.pi-gallery-card .pi-gallery-card__text a,.pi-gallery-card .pi-gallery-card__license-text a{text-decoration:underline !important}

/* ---------- Thumbnail grid: justified rows, no cropping, gallery order kept ---------- */
/* Each tile grows in proportion to its aspect ratio, so every row is the same height.
   --pi-row is the target row height, --pi-gap the space between tiles, --pi-line the border colour. */
.pi-gallery-grid{--pi-row:9.375rem;--pi-gap:1.875rem;--pi-line:#111;display:flex;flex-wrap:wrap;gap:var(--pi-gap);list-style:none;margin:1.5rem 0;padding:0}
.pi-gallery-grid::after{content:"";flex-grow:1000000}
.pi-gallery-grid__item{position:relative;box-sizing:border-box;overflow:hidden;margin:0;padding:0;border:1px solid var(--pi-line);flex-grow:var(--g,150);flex-basis:calc(var(--ar,1.5) * var(--pi-row));max-width:100%;scroll-margin-top:6.25rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.pi-gallery-grid__item a,.pi-gallery-grid__item a:hover{display:block;color:#fff;text-decoration:none !important}
.pi-gallery-grid__item img{display:block;width:100%;height:auto}
.pi-gallery-grid__title{position:absolute;left:0;right:0;bottom:0;padding:1.75rem .625rem .5rem;font-size:.8125rem;line-height:1.3;text-align:left;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));opacity:0;transform:translateY(100%);transition:opacity .2s,transform .25s ease;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pi-gallery-grid__item:hover,.pi-gallery-grid__item:focus-within{transform:scale(1.04);z-index:2;box-shadow:0 .25rem .875rem rgba(0,0,0,.35)}
.pi-gallery-grid__item a:hover .pi-gallery-grid__title,.pi-gallery-grid__item a:focus-visible .pi-gallery-grid__title{opacity:1;transform:translateY(0)}
.pi-gallery-grid__item:target{outline:3px solid #000;outline-offset:2px}

/* ---------- Watch Slideshow and Back buttons (match the photo pages: 9px radius, 1.5px border) ---------- */
.pi-gallery-grid__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:1rem 0}
.pi-gallery-grid__bar a{text-decoration:none !important}
.pi-gallery-grid__btn{display:inline-flex !important;align-items:center;gap:.55em;box-sizing:border-box;margin:0;padding:.9em 1.7em !important;border:1.5px solid #000 !important;border-radius:.5625rem !important;font-family:inherit;font-size:.95rem !important;font-weight:600 !important;line-height:1 !important;letter-spacing:.02em;text-transform:uppercase;text-decoration:none !important;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.pi-gallery-grid__btn svg{flex-shrink:0;width:.875rem;height:.875rem}
.pi-gallery-grid__btn--solid{background:#333 !important;border-color:#333 !important;color:#fff !important}
.pi-gallery-grid__btn--solid:hover,.pi-gallery-grid__btn--solid:focus-visible{background:#000 !important;border-color:#000 !important;color:#fff !important}
.pi-gallery-grid__btn--outline{background:#fff !important;color:#000 !important}
.pi-gallery-grid__btn--outline:hover,.pi-gallery-grid__btn--outline:focus-visible{background:#000 !important;color:#fff !important}

/* ---------- Touch, reduced motion, phones ---------- */
@media (hover:none){.pi-gallery-grid__title{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pi-gallery-grid__item,.pi-gallery-grid__title{transition:none}.pi-gallery-grid__item:hover,.pi-gallery-grid__item:focus-within{transform:none}}
@media (max-width:600px){.pi-gallery-grid{--pi-row:6.875rem;--pi-gap:.75rem}}