/* ===== PINTO INSTAGRAM SHOWCASE (front end) ===== */
.pis{--pis-accent:#7F1641;--pis-deep:#5A0E2B;--pis-muted:#BFBFBF;--pis-gap:20px;--pis-r:18px;--pis-cols:var(--pis-cols-d,3);
  position:relative;width:100%;box-sizing:border-box;color:#fff;font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.pis *,.pis *::before,.pis *::after{box-sizing:border-box}
.pis svg{display:block;fill:currentColor}

/* ---- track: swipeable row or grid */
.pis__track{display:flex;align-items:flex-start;gap:var(--pis-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding:8px 2px 16px;margin:0 -2px;overscroll-behavior-x:contain}
.pis__track::-webkit-scrollbar{display:none}
.pis--grid .pis__track{display:grid;grid-template-columns:repeat(var(--pis-cols),minmax(0,1fr));align-items:start;overflow:visible;scroll-snap-type:none;padding-bottom:4px}

/* ---- one reel / post */
.pis__item{position:relative;display:flex;flex-direction:column;margin:0;flex:0 0 calc((100% - var(--pis-gap) * (var(--pis-cols) - 1)) / var(--pis-cols));
  min-width:min(326px,100%);border-radius:var(--pis-r);overflow:hidden;background:#fff;scroll-snap-align:start;
  box-shadow:0 14px 34px rgba(10,2,6,.38),0 0 0 1px rgba(255,255,255,.10)}
.pis--grid .pis__item{flex:none;min-width:0}
.pis__item iframe{display:block;width:100%;max-width:100%;border:0;background:#fff;opacity:0;transition:opacity .35s}
.pis__item.is-loaded iframe{opacity:1}

/* ---- placeholder card (before Instagram loads, in tap mode, and without JavaScript) */
.pis__ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;aspect-ratio:9/16;padding:24px;overflow:hidden;
  color:#fff!important;text-decoration:none!important;text-align:center;background:linear-gradient(165deg,#5A0E2B,#2A0716)}
.pis__item--p .pis__ph{aspect-ratio:4/5}
.pis__badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:99px;background:rgba(20,4,10,.46);
  border:1px solid rgba(255,255,255,.28);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1}
.pis__badge svg{width:13px;height:13px}
.pis__glyph{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08);transition:background .3s,transform .3s}
.pis__glyph svg{width:30px;height:30px}
.pis__ph:hover .pis__glyph,.pis__ph:focus-visible .pis__glyph{background:var(--pis-accent);transform:scale(1.08)}
.pis__ph:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.pis__cta{display:flex;flex-direction:column;gap:3px}
.pis__cta-main{display:none;font-size:15px;font-weight:800}
.pis__cta-sub{font-size:13px;font-weight:700;color:var(--pis-muted);text-decoration:underline;text-underline-offset:3px}
.pis--js .pis__cta-main{display:block}
.pis--js .pis__cta-sub{display:none}
.pis--js.pis--tap .pis__item:not(.is-loading) .pis__cta-sub{display:none}
.pis--js .pis__item.is-slow .pis__cta-sub{display:block}

/* while Instagram loads, the card keeps its place and the placeholder covers it */
.pis__item.is-loading .pis__ph{position:absolute;inset:0;z-index:2;aspect-ratio:auto}
.pis__item.is-loading .pis__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 8%,rgba(255,255,255,.14) 18%,transparent 33%);background-size:220% 100%;animation:pis-shimmer 1.5s linear infinite}
.pis__item.is-loaded .pis__ph{display:none}
@keyframes pis-shimmer{to{background-position-x:-220%}}

/* ---- carousel controls */
.pis__nav{position:absolute;z-index:5;top:calc(50% - 30px);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid rgba(255,255,255,.55);background:rgba(42,7,22,.78);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s,transform .25s;box-shadow:0 8px 22px rgba(10,2,6,.4)}
.pis__nav:hover,.pis__nav:focus-visible{background:var(--pis-accent);border-color:#fff;outline:none;transform:scale(1.07)}
.pis__nav svg{width:18px;height:18px}
.pis__nav--prev{left:-16px}.pis__nav--next{right:-16px}
.pis__nav[hidden]{display:none}
.pis__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.18);margin:6px 2px 0;overflow:hidden}
.pis__bar i{display:block;height:100%;width:30%;border-radius:3px;background:#fff;transition:margin-left .12s linear,width .2s}
.pis__bar[hidden]{display:none}
.pis--grid .pis__bar,.pis--grid .pis__nav{display:none}

/* ---- nothing added yet */
.pis__follow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 28px;border-radius:var(--pis-r);border:1px dashed rgba(255,255,255,.38);background:rgba(255,255,255,.06);
  color:#fff!important;text-decoration:none!important}
.pis__follow>svg{width:44px;height:44px;flex:none}
.pis__follow div{display:flex;flex-direction:column;gap:3px}
.pis__follow strong{font-size:19px;font-weight:800;line-height:1.25}
.pis__follow span{font-size:15px;color:var(--pis-muted)}
.pis__admin{padding:12px 16px;border-radius:10px;background:#fff4e0;color:#5a3a00;font:600 14px/1.4 system-ui,sans-serif;margin-bottom:12px}
.pis__admin a{color:#7F1641;text-decoration:underline}
.pis__nojs{margin:12px 0 0}.pis__nojs a{color:#fff;font-weight:700}

/* ---- responsive */
@media(max-width:1100px){.pis{--pis-cols:min(var(--pis-cols-d,3),3);--pis-gap:16px}.pis__nav--prev{left:-8px}.pis__nav--next{right:-8px}}
@media(max-width:820px){.pis{--pis-cols:min(var(--pis-cols-d,3),2)}}
@media(max-width:680px){.pis{--pis-cols:1.12;--pis-gap:14px}.pis--grid{--pis-cols:1}.pis__item{min-width:min(300px,100%)}}
@media(hover:none){.pis__nav{display:none}}
@media(prefers-reduced-motion:reduce){.pis__track{scroll-behavior:auto}.pis__item iframe,.pis__glyph{transition:none}.pis__item.is-loading .pis__ph::after{animation:none}}