/* Homepage comparison composition. Media and scene text come from the Page. */
.comparison-wrap{background:var(--color-surface-soft)}
.comparison-section{min-width:0}
.comparison-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 25px}
.comparison-tab{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:10px 22px;background:transparent;color:var(--color-text-muted);font-size:.875rem;line-height:1.35}
.comparison-tab[aria-selected=true]{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface)}
.comparison-panel{min-width:0}
.mzg-comparison{position:relative;width:100%;aspect-ratio:4/3;max-height:800px;overflow:hidden;border-radius:4px;--split:50%}
.mzg-comparison>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.mzg-comparison__before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.mzg-comparison__label{position:absolute;top:20px;z-index:1;max-width:calc(50% - 28px);overflow-wrap:anywhere;padding:7px 16px;border-radius:var(--radius-pill);background:#f6f1ebee;color:var(--color-text);font-size:.75rem;letter-spacing:.1em;line-height:1.3}
.mzg-comparison__label--before{left:20px}
.mzg-comparison__label--after{right:20px}
.mzg-comparison__divider{position:absolute;left:var(--split);top:0;bottom:0;z-index:1;width:2px;background:white;pointer-events:none}
.mzg-comparison__divider:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border:1px solid white;border-radius:50%;background:var(--color-text);color:white;font-size:1.4rem}
.mzg-comparison input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.mzg-comparison:focus-within{outline:3px solid var(--color-focus);outline-offset:5px}
.comparison-caption{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:22px}
.comparison-caption h3{font-size:1.5rem}
.comparison-hint{color:var(--color-text-muted);font-size:.8rem}
@media(max-width:760px){
  .comparison-section{padding-bottom:110px}
  .comparison-tabs{gap:8px}
  .comparison-tab{padding:9px 14px;font-size:.8rem}
  .mzg-comparison__label{top:12px;max-width:calc(50% - 18px);padding:6px 10px;font-size:.65rem}
  .mzg-comparison__label--before{left:12px}
  .mzg-comparison__label--after{right:12px}
  .mzg-comparison__divider:after{width:42px;height:42px}
  .comparison-caption{display:block;margin-top:18px}
  .comparison-caption h3{font-size:1.3rem}
  .comparison-hint{display:block;margin-top:10px}
}