/* Private shared comparison component. Neutral placeholders; no legacy image frames. */
.dio-comparison-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dio-comparison-card{min-width:0;margin:0;scroll-margin-top:120px}
.dio-comparison-card[hidden],.dio-comparison-more[hidden]{display:none!important}
.dio-comparison-more{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;margin:20px 0 0;padding:12px 18px;border:1px solid #788e9a;border-radius:5px;background:#fff;color:#203846;font:500 16px/1.4 var(--font,'Avenir Next',Avenir,Nunito Sans,sans-serif);cursor:pointer}
.dio-comparison-more:focus-visible{outline:3px solid #203846;outline-offset:3px}
.dio-comparison-teaser{padding-block:44px}
.dio-comparison-teaser-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.dio-comparison-teaser-heading h2{font-size:clamp(28px,2.5vw,36px);line-height:1.2;margin:0}
.dio-comparison-teaser-heading>a{min-height:48px;display:inline-flex;align-items:center;gap:24px;font-size:16px;text-decoration:none}
.dio-comparison-preview-note{font-size:13px;color:var(--muted,#526773);margin:16px 0 0}
.dio-comparison-photo{position:relative;isolation:isolate;aspect-ratio:5/4;overflow:hidden;border-radius:8px;background:#e7e9e8;clip-path:none}
.dio-comparison-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;border-radius:inherit;color:#465b65;cursor:zoom-in;font:inherit;text-align:center}
.dio-comparison-visual{width:100%;height:100%;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(145deg,#f3f3f0 0%,#e1e5e4 60%,#d4dcdd 100%)}
.dio-comparison-visual[data-view="before"]{background:linear-gradient(145deg,#edeeec 0%,#dfe2e0 60%,#d4dad9 100%)}
.dio-comparison-visual img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;border:0;border-radius:0;clip-path:none;filter:none}
.dio-comparison-placeholder{display:grid;gap:7px;transform:translateY(-18px);color:#4d6069;font-size:17px;line-height:1.4;pointer-events:none}
.dio-comparison-placeholder small{font-size:13px;letter-spacing:.015em;color:#53656c}
.dio-comparison-placeholder[hidden],.dio-comparison-visual img[hidden]{display:none}
.dio-comparison-expand{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:48px;height:48px;color:#2f4453;background:#ffffffbd;border-radius:50%;pointer-events:none}
.dio-comparison-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dio-comparison-pill{position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,88px);width:186px;max-width:calc(100% - 24px);padding:4px;gap:0;border:1px solid #fff;border-radius:999px;background:var(--dio-alu-silver,linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%));color:#1c3341;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,40,52,.28),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(20,40,52,.12);isolation:isolate;overflow:hidden}
.dio-comparison-pill>button{display:grid;place-items:center;position:relative;min-height:48px;min-width:48px;padding:10px 8px;border:0;border-radius:999px;background:transparent;color:#1c3341;text-shadow:0 1px 0 rgba(255,255,255,.55);font:500 16px/1.2 var(--font,'Avenir Next',Avenir,Nunito Sans,sans-serif);cursor:pointer;box-shadow:none;transition:color var(--dio-pill-label);animation:none}
.dio-comparison-pill>button[aria-pressed="true"]{background:var(--dio-alu-steel,linear-gradient(180deg,#68869a 0%,#56737f 40%,#4a6573 100%));color:#fff;font-weight:600;text-shadow:0 -1px 0 rgba(0,0,0,.28)}
/* The capsule clips its grain; this transparent wrapper carries the contact shadow. */
.dio-comparison-pill-shell{position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%);width:186px;max-width:calc(100% - 24px);filter:var(--dio-alu-contact,drop-shadow(0 1px 1px rgba(16,32,42,.22)) drop-shadow(0 6px 10px rgba(16,32,42,.16)))}
.dio-comparison-pill-shell>.dio-comparison-pill{position:relative;bottom:auto;left:auto;transform:none;width:100%;max-width:none}
.dio-comparison-pill::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.22;mix-blend-mode:overlay;pointer-events:none;animation:none;transition:none}
.dio-comparison-pill>button:focus-visible{outline:2px solid currentColor;outline-offset:-5px}
.dio-comparison-open:focus-visible{outline:3px solid #2f4453;outline-offset:-4px}
.dio-comparison-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dio-comparison-dialog{width:min(720px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:12px;background:#fff;color:#203846;overflow:auto;box-shadow:0 20px 80px #0003;font:16px/1.45 var(--font,'Avenir Next',Avenir,Nunito Sans,sans-serif)}
.dio-comparison-dialog::backdrop{background:rgb(15 24 29 / 72%)}
.dio-comparison-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 12px 8px 24px}
.dio-comparison-dialog-head h2{margin:0;font-size:17px;font-weight:500;line-height:1.4}
.dio-comparison-dialog .dio-comparison-photo{border-radius:0;max-height:calc(100dvh - 152px)}
.dio-comparison-dialog .dio-comparison-placeholder{font-size:22px}
.dio-comparison-dialog .dio-comparison-placeholder small{font-size:14px}
.dio-comparison-dialog button.dio-comparison-close,.dio-comparison-dialog-nav button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:10px 14px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:5px}
.dio-comparison-dialog button.dio-comparison-close:hover,.dio-comparison-dialog-nav button:hover{background:#eef2f3}
.dio-comparison-dialog button.dio-comparison-close:focus-visible,.dio-comparison-dialog-nav button:focus-visible{outline:2px solid #2f4453;outline-offset:-3px}
.dio-comparison-dialog-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;min-height:64px}
.dio-comparison-dialog-nav span{font-size:14px;color:#4d6069}
.dio-comparison-dialog-nav[hidden]{display:none}
html.dio-comparison-is-open{overflow:hidden;scrollbar-gutter:stable}
@media(min-width:768px) and (max-width:1099px){.dio-comparison-gallery{gap:16px}}
@media(max-width:767px){.dio-comparison-gallery{grid-template-columns:1fr;gap:16px}}
@media(max-width:599px){.dio-comparison-gallery{grid-template-columns:1fr;gap:16px}.dio-comparison-teaser{padding-block:32px}.dio-comparison-teaser-heading{display:block;margin-bottom:20px}.dio-comparison-teaser-heading>a{margin-top:8px}.dio-comparison-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.dio-comparison-dialog[open]{display:flex;flex-direction:column}.dio-comparison-dialog .dio-comparison-photo{flex:none;width:100%;margin-block:auto}.dio-comparison-dialog-head{padding-left:16px}.dio-comparison-dialog-nav{flex:none}}
@media(forced-colors:active){.dio-comparison-photo{outline:1px solid CanvasText}.dio-comparison-pill{background:Canvas;border-color:ButtonText;box-shadow:none}.dio-comparison-pill-shell{filter:none}.dio-comparison-pill::after{display:none}.dio-comparison-pill>button{color:ButtonText;text-shadow:none}.dio-comparison-pill>button[aria-pressed="true"]{background:Highlight;color:HighlightText;forced-color-adjust:none}}

/* Owner-approved single holding field; future pair slots remain inert templates. */
.dio-comparison-holding{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:240px;padding:clamp(28px,5vw,64px);background:#e8ebeb;color:#203846;border:0;border-radius:0;clip-path:none;text-align:left}
.dio-comparison-holding::before{content:"";position:absolute;z-index:-1;inset:0;background:url('assets/graffiti-grey-2026-10-22.webp?v=b1') center/cover no-repeat;mix-blend-mode:multiply;opacity:.14;pointer-events:none}
.dio-comparison-holding p{margin:0 0 10px;font:600 clamp(22px,2.2vw,30px)/1.25 var(--font,'Avenir Next',Avenir,Nunito Sans,sans-serif);max-width:24em}
.dio-comparison-holding>span{font-size:15px;line-height:1.5;max-width:34em;color:#3d5260}
@media(max-width:700px){.dio-comparison-holding{min-height:200px;padding:28px 24px}}
@media(forced-colors:active){.dio-comparison-holding{background:Canvas;color:CanvasText;border:1px solid CanvasText}.dio-comparison-holding::before{display:none}.dio-comparison-holding>span{color:CanvasText}}

/* Daniel 2026-10-12: real before/after pairs, cropped to the mouth at 3:2 and straightened; the tile matches. */
.dio-comparison-photo{aspect-ratio:3/2}
.dio-comparison-visual img{object-fit:cover}
/* mouth crops */

/* Daniel 2026-10-12: a smaller pill; the whole pill is one tap target that flips Before and After */
.dio-comparison-pill,.dio-comparison-pill-shell{width:150px;bottom:10px}
.dio-comparison-pill{grid-template-columns:repeat(2,70px);padding:3px}
.dio-comparison-pill>button,.dio-segmented-control.dio-comparison-pill>button{min-height:38px;padding:7px 6px;font-size:14px}
/* Daniel 2026-10-12: "See more results" matches the aluminium "Show all reviews" control */
.dio-comparison-more{min-height:48px;padding:10px 19px;border:1px solid #bcc7cc;border-radius:999px;background:linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%);color:#1c3341;font-weight:500;text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,40,52,.28),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(20,40,52,.12),0 1px 2px rgba(16,32,42,.12)}

/* 2026-11-11 audit: on tablets the three-across thumbnails are about 230px wide, so the Before/After control and the expand mark covered
   a third of each photo and the control sat on the lips. From 768 to 1023px (where the grid is three across), on Results and the landing page only, the control sits
   under its photo and the expand mark is smaller. Phones (one photo a row) and laptops keep the control on the photo. */
@media(min-width:768px) and (max-width:1023px){
 :is(.dio-results-page,.dio-landing-structure) .dio-comparison-gallery .dio-comparison-photo{aspect-ratio:auto;overflow:visible;background:none;border-radius:0;display:grid;justify-items:center;gap:8px}
 :is(.dio-results-page,.dio-landing-structure) .dio-comparison-gallery .dio-comparison-open{aspect-ratio:3/2;height:auto;border-radius:8px;overflow:hidden}
 :is(.dio-results-page,.dio-landing-structure) .dio-comparison-gallery .dio-comparison-pill-shell{position:static;transform:none}
 :is(.dio-results-page,.dio-landing-structure) .dio-comparison-gallery .dio-comparison-expand{width:32px;height:32px}
 :is(.dio-results-page,.dio-landing-structure) .dio-comparison-gallery .dio-comparison-expand svg{width:16px;height:16px}
}