/* th-prop-ex.css — /property-examples in the V13 look (webbo-cf, 2026-10-26). Duval: "yes redesign property-examples in the
   new look too". Loaded by this page only (_thbuild/th_prop_examples.js; bump its EX_CSS_V with any change here).
   The parts are the solution pages' own: the V13 hero + loop frame (th.css §54 / §73), the display cases (§53, th-fix.js);
   this file only lays them out for a gallery and styles the white cards on paper and the glass cards on deep.
   Fonts are literal: th.css's --fd/--fu tokens live on .fm / .fx3 only. Mint is never an ink on paper (brand.md). */

/* ── HERO ── */
.exh .tp-go{margin-top:clamp(1.3rem,2.8vw,2rem)}
.exh .s-hero__meta{margin-top:1.1rem}

/* ── THE VIDEOS: N real renders in the display cases. Desktop: rows of three, a short last row centred, no case forward ── */
.exv .fx3__row{row-gap:clamp(26px,3vw,46px)}
@media (min-width:1025px){
  .exv .fx3__row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .exv .fx3__it{grid-column:span 2}
  .exv .fx3[data-n="4"] .fx3__it:nth-child(4){grid-column:3/span 2}
  .exv .fx3[data-n="5"] .fx3__it:nth-child(4){grid-column:2/span 2}
  .exv .fx3__it:nth-child(2){transform:none}
}
.exv__cap{margin:clamp(1.6rem,3vw,2.4rem) auto 0;max-width:46rem;text-align:center;
  font:500 .95rem/1.55 'Switzer',ui-sans-serif,system-ui,sans-serif;color:rgba(2,36,25,.8)}

/* ── EVERY LISTING LOOK: white cards on paper; two rows, then "Show all" ── */
.exl__f{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;width:max-content;max-width:100%;margin:clamp(1.4rem,2.6vw,2rem) auto 0;
  padding:5px;border-radius:30px;background:#fff;box-shadow:0 0 0 1px rgba(2,36,25,.12),0 18px 40px -30px rgba(2,24,15,.5)}
.exl__fb{min-height:44px;padding:0 20px;border:0;border-radius:99px;background:none;cursor:pointer;
  font:600 .92rem/1 'Switzer',ui-sans-serif,system-ui,sans-serif;color:rgba(4,36,26,.74);transition:background .3s var(--e-out),color .3s var(--e-out)}
.exl__fb.is-on{background:#063D2B;color:#fff}
.exl__fb:focus-visible{outline:2px solid #0B7A55;outline-offset:2px}
.exl__grid{margin-top:clamp(1.6rem,3vw,2.4rem);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.exl__grid:not(.is-all) .exl__i:nth-child(n+13){display:none}
.exl .exl__i{margin:0;padding:5px;border-radius:20px;background:#fff;overflow:visible;
  box-shadow:0 0 0 1px rgba(2,36,25,.1),0 26px 50px -34px rgba(2,24,15,.5);transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.exl .exl__i[hidden]{display:none}
.exl .exl__i .looks__b{position:relative;border-radius:15px;overflow:hidden}
.exl .exl__i figcaption{position:static;padding:.7rem .45rem .35rem;background:none}
.exl .exl__i figcaption b{display:block;font:900 .95rem/1.15 'Satoshi',ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;color:#04241A;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exl .exl__i figcaption span{display:block;margin-top:3px;font:500 .78rem/1.35 'Switzer',ui-sans-serif,system-ui,sans-serif;color:rgba(4,36,26,.68);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){
  .exl .exl__i:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(2,36,25,.16),0 34px 60px -34px rgba(2,24,15,.6)}
}
.exl__more{display:flex;width:max-content;margin:clamp(1.4rem,2.6vw,2rem) auto 0}
.exl__grid.is-all ~ .exl__more{display:none}
.exl__cap{margin:1.5rem auto 0;max-width:52rem;text-align:center;font:500 .92rem/1.6 'Switzer',ui-sans-serif,system-ui,sans-serif;color:rgba(4,36,26,.74)}
@media (max-width:1024px){
  .exl__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .exl__grid:not(.is-all) .exl__i:nth-child(n+9){display:none}
}
/* phones: three small cards a row, two rows, the name only (deslopcheck prices this page at 7 screens + the outro) */
@media (max-width:700px){
  .exl__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .exl__grid:not(.is-all) .exl__i:nth-child(n+7){display:none}
  .exl .exl__i{padding:3px;border-radius:14px}
  .exl .exl__i .looks__b{border-radius:11px}
  .exl .exl__i figcaption{padding:.4rem .25rem .15rem}
  .exl .exl__i figcaption b{font-size:.78rem}
  .exl .exl__i figcaption span{display:none}
  .exl__fb{padding:0 16px;font-size:.88rem}
}

/* ── BEYOND THE LISTING: glass cards on deep ── */
.exf .exf__grid{list-style:none;margin:clamp(1.8rem,3.4vw,2.8rem) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);max-width:1180px}
.exf .exf__i{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:18px 20px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);font:500 .92rem/1.45 'Switzer',ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.72)}
.exf__i > i{position:relative;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--mint)}
.exf__i > i::after{content:"";position:absolute;left:8.5px;top:5px;width:5px;height:10px;border:solid var(--on-mint);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.exf__i b{display:block;margin-bottom:3px;font:700 1rem/1.3 'Switzer',ui-sans-serif,system-ui,sans-serif;color:#fff}
@media (max-width:1024px){ .exf .exf__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .exf .exf__grid{grid-template-columns:1fr;gap:8px}
  .exf .exf__i{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:11px 13px;border-radius:16px;font-size:.86rem}
  .exf__i > i{width:20px;height:20px}
  .exf__i > i::after{left:7px;top:3.5px;width:4.5px;height:9px;border-width:0 2px 2px 0}
  .exf__i b{font-size:.94rem;margin-bottom:1px}
}

/* ── YOUR BRAND: one double-bezel card on paper ── */
.exb__case{max-width:980px;margin:0 auto;padding:6px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  box-shadow:0 0 0 1px rgba(2,36,25,.12),0 60px 100px -60px rgba(2,24,15,.45)}
.exb__core{border-radius:28px;background:#fff;padding:clamp(38px,6vw,84px) clamp(22px,5vw,72px);text-align:center}
.exb h2 em{font-style:normal;color:#0B7A55}
.exb .lede{color:rgba(4,36,26,.76)}
@media (max-width:700px){
  .exv .fx3__fr--video{max-width:190px}
  .exv .fx3__stage{padding:46px 14px 18px}
  .exb__case{border-radius:28px;padding:5px}
  .exb__core{border-radius:23px;padding:30px 18px}
}