/* Today versus with this (ix-compare.js), design language v2. Finished state first: two panes stacked, each with a
   small-caps label, the picture and a one-line margin note. `.is-enhanced` (set by the script) swaps that for two ruled
   tabs and a crossfading stack. Overrides .art-frame for this component only: square, hairline, no shadow. */
.art-frame.compare {
  margin: 0;
  overflow: visible;
  border: 1px solid var(--ix-hair);
  border-radius: 0;
  /* Paper backing only because the frame sits on the painted hero, where bare text would not read. */
  background: var(--bg-1);
  box-shadow: none;
}
.compare__pane { margin: 0; display: flex; flex-direction: column; }
.compare__pane + .compare__pane { border-top: 1px solid var(--ix-rule); }
.compare__cap { display: block; padding: var(--s-3) var(--ix-pad); border-bottom: 1px solid var(--ix-hair); }
/* Beats the generic `.art-frame img` rule, which crops to 16/10; these mocks are 1200x813 and must not be cropped. */
.art-frame .compare__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 813;
  object-fit: cover;
  object-position: top;
}

/* Margin note: a hairline leader, then the plain line. */
.compare__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--ix-pad);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--text-1);
}
.compare__line::before {
  content: "";
  flex: none;
  width: var(--s-6);
  align-self: center;
  border-top: 1px solid var(--ix-rule);
}

.compare__bar { display: flex; padding: 0; border-bottom: 1px solid var(--ix-hair); }
.compare__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s-4);
  font-family: inherit;
  cursor: pointer;
}
.compare__tab + .compare__tab { margin-left: -1px; }
.compare__tab[aria-selected="true"] { cursor: default; }
.compare__tab:focus-visible { outline-offset: -3px; z-index: 1; }
.compare__tab[aria-selected="true"] { z-index: 1; }
@media (max-width: 639px) {
  .compare__tab { padding: 0 var(--s-2); letter-spacing: 0.08em; }
}
@media (min-width: 640px) {
  .compare__tab { flex: none; min-width: 220px; }
}

.compare.is-enhanced .compare__bar { border: 0; margin-bottom: -1px; position: relative; z-index: 1; }
.compare.is-enhanced .compare__stage {
  position: relative;
  aspect-ratio: 1200 / 813;
  border-top: 1px solid var(--ix-hair);
}
.compare.is-enhanced .compare__pane {
  position: absolute;
  inset: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ix-t-swap) var(--ix-ease);
}
.compare.is-enhanced .compare__pane.is-active { opacity: 1; pointer-events: auto; }
.compare.is-enhanced .compare__pane .compare__img { height: 100%; }

.compare__notes { display: grid; border-top: 1px solid var(--ix-hair); }
.compare__notes .compare__line {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--ix-t-swap) var(--ix-ease);
}
.compare__notes .compare__line.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .compare.is-enhanced .compare__pane,
  .compare__notes .compare__line { transition: none; }
}

/* Visible label for the hero mock-ups; sits on the painted hero, so it takes the hero text colour and shadow. */
.compare__note { margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--text-1); text-shadow: var(--hero-shadow); }