/* ===== made-solid/photo-counts (bone): ported from pages/real-estate-photography.html .rp-counts (source _src-real-estate-photography.html).
   Pick a photo count: the price, and a contact sheet that fills to that many frames. The compare table folded behind a button
   (the table's .matrix rules come from compare-matrix/style.css, loaded by its handle). Then every photo extra in one row that
   scrolls sideways inside itself, beside the virtual-staging photo. ===== */
.photo-counts{padding:var(--space-2xl) 0}
.photo-counts .head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-l);flex-wrap:wrap;margin-bottom:clamp(40px,4.5vw,72px)}
.photo-counts .head h2{max-width:14ch;text-wrap:balance}
.photo-counts .head p{max-width:32ch;font-size:var(--fs-lead);line-height:1.45;color:var(--plot-slate);text-wrap:balance}

/* the picker */
.photo-counts .picker{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,5vw,96px);align-items:center}
.photo-counts .seg{display:inline-flex;gap:4px;padding:5px;background:#fff;border-radius:999px;box-shadow:0 1px 2px rgba(20,17,14,.06),0 12px 26px -16px rgba(20,17,14,.3)}
.photo-counts .seg button{font:inherit;font-family:var(--font-display);font-weight:600;font-size:18px;min-width:64px;min-height:48px;padding:0 16px;border:0;border-radius:999px;
  background:transparent;color:var(--plot-slate);cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color var(--dur-ui) var(--ease-press),color var(--dur-ui) var(--ease-press)}
.photo-counts .seg button:hover{color:var(--plot-ink)}
.photo-counts .seg button[aria-checked="true"]{background:var(--plot-ink);color:var(--plot-bone)}
.photo-counts .seg button:focus-visible{outline:2px solid var(--plot-ink);outline-offset:2px}
.photo-counts .alc{margin-bottom:18px;font-size:17px;line-height:1.45;color:var(--plot-slate);max-width:34ch;text-wrap:balance}
.photo-counts .alc b,.photo-counts .alc strong{font-weight:600;color:var(--plot-ink)}
.photo-counts .readout{margin-top:clamp(28px,3vw,44px)}
.photo-counts .readout .n{display:flex;align-items:baseline;gap:.25em;font-family:var(--font-display);font-weight:var(--wt-display);letter-spacing:var(--track-display);line-height:.9}
.photo-counts .readout .n b{font-weight:inherit;font-size:clamp(5rem,3rem + 6vw,9rem);font-variant-numeric:tabular-nums}
.photo-counts .readout .n span{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);letter-spacing:-.02em}
.photo-counts .readout .n b .price{font-size:inherit;letter-spacing:inherit}
.photo-counts .readout .pr{margin-top:14px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.4rem + 1.4vw,2.8rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.photo-counts .readout .note{margin-top:8px;min-height:1.6em;font-size:17px;color:var(--plot-slate);text-wrap:balance}
.photo-counts .readout .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-l)}

/* the contact sheet: one sprite of sample frames, the chosen count lit */
.photo-counts .sheet{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.5vw,7px);padding:clamp(12px,1.3vw,18px);background:#fff;border-radius:var(--radius-card);
  box-shadow:0 1px 2px rgba(20,17,14,.06),0 30px 60px -30px rgba(20,17,14,.35)}
.photo-counts .sheet .slot{position:relative;aspect-ratio:3/2;border-radius:4px;background:#EEE9E1;overflow:hidden}
.photo-counts .sheet .slot i{position:absolute;inset:0;background-image:url(../../assets/img/blocks/photo-counts/sheet.jpg);
  background-image:image-set(url(../../assets/img/blocks/photo-counts/sheet.avif) type("image/avif"),url(../../assets/img/blocks/photo-counts/sheet.webp) type("image/webp"),url(../../assets/img/blocks/photo-counts/sheet.jpg) type("image/jpeg"));
  background-size:1000% 600%;background-repeat:no-repeat;opacity:0;transform:scale(1.08);
  transition:opacity 420ms var(--ease-settle),transform 700ms var(--ease-settle);transition-delay:var(--d,0ms)}
.photo-counts .sheet .slot.on i{opacity:1;transform:none}
/* before the first fill (motion on, public page only): the frames wait until the sheet comes into view */
html.motion-on .photo-counts:not(.is-static) .sheet:not(.is-filled) .slot.on i{opacity:0;transform:scale(1.08)}

/* the compare panel, folded */
.photo-counts .compare{margin-top:clamp(40px,4vw,64px);scroll-margin-top:110px}
.photo-counts .compare summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid #bdb5a8;color:var(--plot-ink);border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:17px;cursor:pointer}
.photo-counts .compare summary span{text-wrap:balance}
.photo-counts .compare summary::-webkit-details-marker{display:none}
.photo-counts .compare summary:hover{border-color:var(--plot-ink)}
.photo-counts .compare summary svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--dur-ui) var(--ease-settle)}
.photo-counts .compare[open] summary svg{transform:rotate(180deg)}
.photo-counts .compare .src{margin-top:10px;font-size:15px;color:var(--plot-slate);text-wrap:balance}
.photo-counts .compare .src a{color:var(--plot-ink)}

/* the extras: one row that scrolls sideways inside itself (native scroll, snap); the next card peeking in is the cue */
.photo-counts .addons{margin-top:clamp(56px,5vw,80px)}
.photo-counts .addons .ah{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-m);flex-wrap:wrap}
.photo-counts .addons .ah h3{font-size:clamp(1.7rem,1.2rem + 1.5vw,2.6rem);letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.photo-counts .addons .ah p{margin-top:10px;max-width:44ch;font-size:var(--fs-lead);line-height:1.45;color:var(--plot-slate);text-wrap:balance}
.photo-counts .rail-nav{display:flex;gap:10px}
.photo-counts .rail-nav button{width:52px;height:52px;border-radius:50%;border:1px solid #bdb5a8;background:transparent;color:var(--plot-ink);cursor:pointer;display:grid;place-items:center;padding:0}
.photo-counts .rail-nav button:hover{border-color:var(--plot-ink)}
.photo-counts .rail-nav button:disabled{opacity:.35;cursor:default;border-color:#bdb5a8}
.photo-counts .rail-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.photo-counts .rail{margin:clamp(24px,2.4vw,36px) calc(-1 * var(--grid-margin)) 0;padding:4px var(--grid-margin) 16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--grid-margin);scrollbar-width:thin;scrollbar-color:#cfc7ba transparent}
.photo-counts .rail:focus-visible{outline:2px solid var(--plot-ink);outline-offset:-2px}
.photo-counts .rail ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,1.2vw,18px);width:max-content}
.photo-counts .rail li{flex:none;width:clamp(232px,19vw,272px);scroll-snap-align:start;display:flex;flex-direction:column;padding:22px 22px 20px;background:#fff;
  border-radius:12px;box-shadow:0 1px 2px rgba(20,17,14,.06),0 14px 30px -22px rgba(20,17,14,.3)}
.photo-counts .rail li h4{margin:0;font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--plot-ink);text-wrap:balance}
.photo-counts .rail li p{margin-top:6px;font-size:16px;line-height:1.45;color:var(--plot-slate)}
.photo-counts .rail li .pr{margin-top:auto;padding-top:18px}
.photo-counts .rail li .pr b{display:block;font-family:var(--font-display);font-weight:var(--wt-display);font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--plot-ink)}
.photo-counts .rail li .pr small{display:block;margin-top:6px;font-size:15px;line-height:1.3;color:var(--plot-slate)}
/* the staging photo sits in the row beside its card, the row's height, so it never adds height to the section */
.photo-counts .rail li.ph{width:clamp(250px,24vw,340px);padding:0;position:relative;overflow:hidden;border-radius:4px;background:#e8e2d8}
.photo-counts .rail li.ph picture{display:contents}
.photo-counts .rail li.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--mss-fx,50% 50%)}
.photo-counts .rail li.ph .stamp{position:absolute;left:10px;right:10px;bottom:10px;background:var(--chip-bg);color:var(--chip-text);border-radius:4px;padding:6px 10px;font-size:15px;font-weight:500;line-height:1.3}
.photo-counts .addons .all{display:inline-block;margin-top:var(--space-s,16px);font-size:17px}

@media (max-width:1080px){
  .photo-counts .picker{grid-template-columns:1fr}
}
@media (max-width:760px){
  .photo-counts .seg{display:flex;width:100%}
  .photo-counts .seg button{flex:1;min-width:0;padding:0 8px}
  .photo-counts .sheet{grid-template-columns:repeat(6,minmax(0,1fr))}
  .photo-counts .sheet .slot:nth-child(n+37){display:none}
  .photo-counts .rail-nav{display:none}
  .photo-counts .rail li{width:68vw;max-width:280px;padding:20px 18px 18px}
  .photo-counts .rail li.ph{width:76vw;max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  .photo-counts .sheet .slot i,.photo-counts .seg button{transition:none!important}
}
/* ===== end photo-counts ===== */