/* [C] HMP static-site helpers — replaces the Squarespace JS-driven pieces (galleries, video, forms). */

/* Squarespace animations are JS-driven; make sure nothing stays hidden without it */
[data-animation-role], .preFade, .preScale, .preSlide, .preClip, .preFlex { opacity: 1 !important; transform: none !important; clip-path: none !important; }
img { max-width: 100%; }

/* Reviews section: cards removed, Elfsight widget sits under the heading; stack blocks instead of the fixed grid */
.hmp-reviews-section .fluid-engine { display: block !important; }
.hmp-reviews-section .fe-block { grid-area: auto !important; }
.hmp-reviews-section .hmp-rv-wrap [class*="elfsight-app"] { margin-bottom: 28px; }

/* ---------- Masonry gallery ---------- */
.hmp-masonry { display: flex; gap: var(--g, 10px); align-items: flex-start; width: 100%; }
.hmp-masonry .hmp-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--g, 10px); }
.hmp-masonry:not(.is-ready) { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); }
.hmp-masonry[data-width="inset"] { box-sizing: content-box; max-width: var(--sqs-site-max-width, 1020px); margin: 0 auto; padding: var(--sqs-site-gutter, 4vw); }
@media (max-width: 767px) { .hmp-masonry[data-width="inset"] { padding: var(--sqs-mobile-site-gutter, 6vw); } }
.hmp-m-item { margin: 0; overflow: hidden; background: #eee; }
.hmp-m-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hmp-masonry[data-lightbox="1"] .hmp-m-item, .hmp-reel[data-lightbox="1"] .hmp-reel-item { cursor: zoom-in; }

/* ---------- Reel (horizontal strip) ---------- */
.hmp-reel { position: relative; width: 100%; }
.hmp-reel-track { display: flex; gap: 10px; height: var(--reel-h, 50vh); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hmp-reel-track::-webkit-scrollbar { display: none; }
.hmp-reel-item { margin: 0; height: 100%; flex: 0 0 auto; scroll-snap-align: start; }
.hmp-reel-item img { height: 100%; width: auto; display: block; object-fit: cover; }
.hmp-reel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #222; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.hmp-reel-btn.prev { left: 12px; } .hmp-reel-btn.next { right: 12px; }
@media (max-width: 767px) { .hmp-reel-btn { display: none; } }

/* ---------- Lightbox ---------- */
.hmp-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(15,13,10,.94); display: flex; align-items: center; justify-content: center; }
.hmp-lb[hidden] { display: none; }
.hmp-lb img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.hmp-lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 42px; cursor: pointer; padding: 12px 18px; opacity: .8; }
.hmp-lb button:hover { opacity: 1; }
.hmp-lb .x { top: 8px; right: 8px; font-size: 34px; } .hmp-lb .p { left: 4px; } .hmp-lb .n { right: 4px; }

/* ---------- Video embeds ---------- */
.sqs-video-wrapper { position: absolute; inset: 0; }
.embed-block-wrapper { position: relative; }
.sqs-video-wrapper iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* ---------- Forms (Netlify Forms; styled to match the old Squarespace form) ---------- */
.hmp-form { font-family: "Source Sans 3", "Source Sans Pro", sans-serif; font-size: 17px; color: #000; text-align: left; }
.hmp-field { margin: 0 0 22px; }
.hmp-field > label { display: block; padding-bottom: 4px; }
.hmp-req { font-size: 12px; opacity: .7; margin-left: 4px; }
.hmp-desc { font-size: 13px; opacity: .7; margin: 0 0 6px; }
.hmp-form input[type=text], .hmp-form input[type=email], .hmp-form input[type=tel], .hmp-form input[type=url],
.hmp-form input[type=number], .hmp-form input[type=date], .hmp-form textarea, .hmp-form select {
  width: 100%; box-sizing: border-box; font: inherit; color: #000; background: #f5f5f5; border: 1px solid #000; border-radius: 0; padding: 8px 10px; }
.hmp-form select { appearance: none; -webkit-appearance: none; padding-right: 32px; color: rgba(0,0,0,.75);
  background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 12px center; }
.hmp-form textarea { min-height: 110px; resize: vertical; }
.hmp-form input:focus, .hmp-form textarea:focus, .hmp-form select:focus { outline: 2px solid #c5a46d; outline-offset: 1px; }
.hmp-opt { display: block; margin: 4px 0; }
.hmp-submit { text-align: center; }
.hmp-submit button { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15.5px; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; background: #000; border: 1px solid #fff; padding: 17px 22px; cursor: pointer; transition: opacity .2s; }
.hmp-submit button:hover { opacity: .8; } .hmp-submit button[disabled] { opacity: .5; cursor: wait; }
.hmp-form-msg { text-align: center; font-size: 20px; padding: 30px 0; }
.hmp-form-err { text-align: center; color: #9b2c2c; padding-top: 12px; }