/* Shared salon Nail Ideas V2.5 — Featured Portrait / Subtle Preview Hover.
   All salons use ONE stylesheet and ONE WebForms control. Colors come from theme vars.
   The featured photo remains unmodified (contain), without blur, overlay or crop.
   Media Caption and verified credit come from DM_Item_Media via SalonNailIdeasHelper.
   Data selection/tenant isolation/SQL V4 and tg2 tracking are unchanged.
*/
.sng-section{--sng-accent:var(--sw-accent,var(--plum,#632741));--sng-line:var(--sw-line,#eadce5);padding:2px 0 8px;background:transparent}
.sng-section *{box-sizing:border-box}
.sng-card{max-width:780px;width:100%;margin:0 auto;padding:15px 20px 12px;border:1px solid var(--sng-line);background:var(--sw-paper,#fffcf8);border-radius:20px;box-shadow:0 10px 32px rgba(68,35,49,.055);color:var(--sng-accent)}
.sng-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px}
.sng-header h2{font:500 clamp(26px,3vw,36px)/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.035em;margin:0;color:var(--sng-accent)}
.sng-header h2::before{content:"NAIL INSPIRATION";display:block;font:800 9px/1.3 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;letter-spacing:.16em;color:var(--sw-gold,#b78d59);margin-bottom:4px}
.sng-more{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 13px;border:1px solid var(--sng-accent);border-radius:11px;text-decoration:none;background:var(--sng-accent);color:white;white-space:nowrap;font-size:12px;font-weight:750;transition:background-color .12s}
.sng-more:hover,.sng-more:focus-visible{color:white;background:#421a30;text-decoration:none}
/* Keep gallery height fixed while pictures auto-rotate: no layout shifting or cropping.
   Portrait image uses ~4:5 frame; image itself may be 3:4 (contained exactly).
   Thumbnails are small previews and may use cover, never the full main photo. */
.sng-stage{display:grid;grid-template-columns:minmax(0,332px) minmax(0,332px);gap:12px;align-items:start;justify-content:center;width:100%;max-width:676px;height:auto;margin:0 auto}
.sng-feature{min-width:0;display:flex;flex-direction:column}
.sng-main-wrap{height:410px;position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:13px;background:transparent}
.sng-open{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in;line-height:0}
.sng-main-image,.sng-card[data-sng-shape] .sng-main-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:11px;transition:opacity .15s ease}
.sng-main-image.is-changing{opacity:.65}
.sng-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-width:0;min-height:0;height:410px;width:100%}
.sng-thumb{min-width:0;min-height:0;padding:0;border:2px solid transparent;border-radius:11px;overflow:hidden;background:#f4eeeb;cursor:pointer;transition:border-color .12s}
.sng-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sng-thumb:hover,.sng-thumb:focus-visible{border-color:#bba09b}
.sng-thumb.is-active{border-color:var(--sng-accent)}
.sng-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:40px;border:0;border-radius:50%;background:#fffffff0;color:var(--sng-accent);font:500 26px/1 Georgia,serif;cursor:pointer;box-shadow:0 4px 14px #270e241a}
.sng-prev{left:5px}.sng-next{right:5px}
.sng-arrow:hover{background:white}
.sng-zoom{position:absolute;z-index:2;right:9px;bottom:9px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fffefcf1;color:var(--sng-accent);font-size:21px}
.sng-counter{position:absolute;z-index:2;bottom:10px;left:8px;pointer-events:none;display:block;background:#2b1729d9;border-radius:20px;padding:4px 9px;font-size:12px;font-weight:750;color:white}
/* Exactly two calm lines UNDER the photo. No price or duration in this version. */
.sng-caption{min-height:44px;margin:8px 0 0;max-width:100%;text-align:left}
.sng-caption-title{display:block;margin:0;color:var(--sng-accent);font:500 15px/1.35 Georgia,"Times New Roman",serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sng-caption-byline{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:#887983;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.sng-empty{color:#806b74;font-size:14px}
.sng-dialog{max-width:min(900px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:12px;border:0;border-radius:17px;background:#fffcf9;color:var(--sng-accent);box-shadow:0 20px 65px #1d08128c}
.sng-dialog::backdrop{background:#180e19de}
.sng-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 8px;font-size:13px;font-weight:700}
.sng-close{width:40px;height:40px;border:0;border-radius:50%;background:#f0e4e8;color:var(--sng-accent);font-size:25px;cursor:pointer}
.sng-dialog-image{display:block;max-height:74dvh;max-width:100%;height:auto;width:auto;object-fit:contain;margin:auto;border-radius:11px}
.sng-dialog-caption{text-align:center;color:#776671;font-size:12px;margin:9px 0 0}
@media(min-width:651px) and (max-width:900px){
 .sng-card{max-width:760px;padding:14px}
 .sng-stage{grid-template-columns:minmax(0,350px) minmax(0,190px);max-width:550px;gap:10px}
 .sng-main-wrap{height:380px}
 .sng-thumbs{height:380px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,116px);align-content:center;gap:8px}
}
@media(max-width:650px){
 .sng-section{padding:2px 0 6px}
 .sng-card{max-width:100%;padding:11px 10px 10px;border-radius:17px}
 .sng-header{margin-bottom:9px}
 .sng-header h2{font-size:clamp(26px,6.2vw,30px)}
 .sng-header h2::before{font-size:8px}
 .sng-more{min-height:36px;padding:6px 11px;font-size:11px}
 .sng-stage{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:100%}
 .sng-feature{width:100%}
 .sng-main-wrap{height:clamp(295px,92vw,398px);border-radius:11px}
 .sng-main-image{border-radius:10px}
 .sng-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:65px;gap:7px;height:65px}
 .sng-thumb{border-radius:8px}
 .sng-arrow{width:34px;height:39px}
 .sng-caption{min-height:42px;margin-top:6px}
 .sng-caption-title{font-size:14px}
 .sng-caption-byline{font-size:10px}
}
@media(max-width:360px){.sng-thumbs{grid-template-rows:53px;height:53px;gap:5px}.sng-card{padding-inline:8px}.sng-main-wrap{height:315px}}
@media(prefers-reduced-motion:reduce){.sng-main-image,.sng-thumb{transition:none}}

/* Desktop: make the featured portrait the clear focal point.
   Grid height stays auto so its two-line caption remains INSIDE the card.
   Previews are ~94 x 126px, centered beside the main photo. */
@media(min-width:901px){
 .sng-card{max-width:660px}
 .sng-stage{grid-template-columns:minmax(0,340px) minmax(0,198px);max-width:550px;height:auto;gap:12px;align-items:start}
 .sng-main-wrap{height:410px}
 .sng-thumbs{height:410px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,126px);align-content:center;gap:10px}
}


/* V2.5: Gentle hover on the four previews only. No layout movement. */
.sng-thumb{position:relative}
@media (hover:hover) and (pointer:fine){
 .sng-thumb{
  transition:border-color .12s ease, transform .18s ease-out, box-shadow .18s ease-out;
 }
 .sng-thumb:hover{
  z-index:1;
  transform:scale(1.03);
  box-shadow:0 5px 15px rgba(68,35,49,.13);
 }
}
@media (prefers-reduced-motion:reduce){
 .sng-thumb{transition:none}
 .sng-thumb:hover{transform:none}
}

/* Popup text may wrap fully; the gallery's one-line ellipsis stays unchanged.
   The modal's title/credit split needs the existing shared JS updated. */
.sng-dialog-caption{
 max-width:58ch;
 margin:10px auto 0;
 white-space:normal;
 overflow-wrap:break-word;
 line-height:1.5;
}
.sng-dialog-caption-title{
 display:block;
 color:var(--sng-accent);
 font:500 15px/1.45 Georgia,"Times New Roman",serif;
 white-space:normal;
 overflow-wrap:break-word;
}
.sng-dialog-caption-byline{
 display:block;
 margin-top:4px;
 color:#887983;
 font-size:12px;
 line-height:1.5;
 white-space:normal;
 overflow-wrap:break-word;
}
.sng-dialog{overflow-y:auto}


/* Responsive feedback V2.6: fast press + slow-network progress, no layout shift. */
.sng-more{
  position:relative;
  transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.sng-more:active{transform:scale(.95);box-shadow:0 1px 3px rgba(68,35,49,.14)}
.sng-more.is-opening{
  background:var(--sng-accent);
  color:#fff;
  cursor:progress;
  pointer-events:none;
  opacity:.9;
  min-width:94px;
}
.sng-more.is-opening::before{
  content:"";
  width:12px;
  height:12px;
  flex:0 0 12px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:sng-loading-spin .7s linear infinite;
}
.sng-thumb:active{transform:scale(.96)}
.sng-arrow{transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease}
.sng-arrow:active{transform:translateY(-50%) scale(.92);box-shadow:0 1px 4px rgba(39,14,36,.16)}
.sng-open:active .sng-zoom{transform:scale(.9)}
.sng-zoom{transition:transform .12s ease}
.sng-close{transition:transform .12s ease,background-color .12s ease}
.sng-close:active{transform:scale(.92)}
.sng-main-wrap.is-loading::after,
.sng-main-wrap.is-load-error::after{
  position:absolute;
  z-index:5;
  top:10px;
  right:10px;
  border-radius:20px;
  padding:6px 11px;
  background:rgba(255,252,249,.96);
  box-shadow:0 2px 12px rgba(41,16,33,.15);
  color:var(--sng-accent);
  font:600 11px/1.4 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  pointer-events:none;
}
.sng-main-wrap.is-loading::after{content:"Loading photo…"}
.sng-main-wrap.is-load-error::after{content:"Could not load. Try again."}
.sng-thumb.is-loading{border-color:var(--sng-accent);position:relative}
.sng-thumb.is-loading::after{
  content:"";
  position:absolute;
  z-index:3;
  left:calc(50% - 11px);
  top:calc(50% - 11px);
  width:22px;
  height:22px;
  border:3px solid rgba(255,255,255,.8);
  border-top-color:var(--sng-accent);
  border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.4);
  animation:sng-loading-spin .7s linear infinite;
  pointer-events:none;
}
.sng-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@keyframes sng-loading-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){
 .sng-more:hover:not(.is-opening){box-shadow:0 5px 13px rgba(68,35,49,.15);transform:translateY(-1px)}
 .sng-more:active:not(.is-opening){transform:scale(.95)}
}
@media(prefers-reduced-motion:reduce){
 .sng-more,.sng-arrow,.sng-close,.sng-zoom{transition:none}
 .sng-more:active,.sng-arrow:active,.sng-thumb:active,.sng-close:active,
 .sng-open:active .sng-zoom{transform:none}
 .sng-more.is-opening::before,.sng-thumb.is-loading::after{animation:none}
}