/* Samanburðurinn: einn kafli, notaður á forsíðu og Réttunum. Byggir á tokens úr base/app. */
/* ---------- samanburður: munurinn ----------
   The familiar comparison shape, in this site's hand: bowls on top, a line
   icon per claim, one answer per cell. Our column is the one yellow thing,
   the others sit on oat. Answers are ink strokes in circles, never green
   and red: the page has one action colour and it is yellow. */
.compare{padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,120px)}
/* On Réttirnir it follows a band, not the recipe grid, so it needs its own top room. */
.compare.after-band{padding-top:clamp(56px,8vw,104px);background:var(--oat);border-radius:var(--radius-lg)}
.compare-head{max-width:640px;margin-bottom:clamp(28px,4vw,44px)}
.compare-head .display{margin:14px 0 0;font-size:clamp(2.2rem,5vw,3.6rem)}
.compare-head .display>span{display:block;text-wrap:balance}
.compare-head .display em{font-style:normal;position:relative;z-index:0;display:inline-block;white-space:nowrap}
.compare-head .display em::after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:.28em;background:var(--yellow);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.cmp{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(110px,1fr));column-gap:12px;align-items:stretch}
.cmp-row{display:contents}
.cmp-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:22px 10px 14px;text-align:center;border-radius:var(--radius) var(--radius) 0 0}
.cmp-col.is-us{background:var(--yellow)}
.cmp-col:not(.is-us){background:var(--oat)}
.cmp-bowl{width:min(88px,100%)}
.cmp-bowl svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(26,31,30,.14))}
.cmp-name{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;margin-top:6px}
.cmp-col.is-us .cmp-name{font-size:1.7rem}
.cmp-short{display:none}
.cmp-claim{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 0;font-weight:600;font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.3;border-bottom:1px solid rgba(26,31,30,.1)}
.cmp-row-head .cmp-claim{border-bottom:0}
.cmp-row:last-child .cmp-claim{border-bottom:0}
.cmp-icon{display:inline-flex;width:42px;height:42px;border-radius:13px;background:var(--oat);align-items:center;justify-content:center;flex:none}
.cmp-cell{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px 8px}
.cmp-cell.is-us{background:var(--yellow)}
.cmp-cell:not(.is-us){background:var(--oat)}
.cmp-row:last-child .cmp-cell{border-radius:0 0 var(--radius) var(--radius);padding-bottom:22px}
.cmp-col-tag{display:none}
.cmp-ans{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%}
.cmp-ans.yes{background:#2E7D4F;color:#fff}
.cmp-ans.no{background:#C0473E;color:#fff}
.cmp-cell.is-us .cmp-ans.yes{width:40px;height:40px}
.cmp-ink{width:18px;height:15px;display:block}
.cmp-ans.no .cmp-ink{width:13px;height:13px}
.cmp-ans.note{width:auto;height:auto;border-radius:999px;background:#E8823A;padding:7px 13px;font-size:.82rem;font-weight:600;color:#fff;line-height:1.2;white-space:nowrap}
.cmp-switch{display:none}
@media (max-width:760px){
  /* Two columns beside the claim: ours and the one picked in the switch. */
  .cmp-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--oat);margin:0 0 18px}
  .cmp-switch-btn{border:0;background:transparent;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);padding:9px 14px;border-radius:999px;cursor:pointer}
  .cmp-switch-btn.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(26,31,30,.12)}
  .cmp{grid-template-columns:minmax(0,1fr) 88px 88px;column-gap:8px}
  .cmp [data-col]:not([data-col="nd"]){display:none}
  .cmp[data-cmp="dry"] [data-col="dry"],.cmp[data-cmp="wet"] [data-col="wet"],.cmp[data-cmp="raw"] [data-col="raw"]{display:flex}
  .cmp-col{padding:16px 6px 12px;gap:2px}
  .cmp-bowl{width:min(64px,100%)}
  .cmp-name{font-size:1.15rem}
  .cmp-col.is-us .cmp-name{font-size:1.25rem}
  .cmp-claim{font-size:.9rem;gap:10px;padding:12px 8px 12px 0}
  .cmp-icon{width:32px;height:32px;border-radius:10px}
  .cmp-icon svg{width:18px;height:18px}
  .cmp-cell{padding:12px 4px}
  .cmp-ans,.cmp-cell.is-us .cmp-ans.yes{width:32px;height:32px}
  .cmp-ink{width:16px;height:13px}
  .cmp-ans.no .cmp-ink{width:12px;height:12px}
  .cmp-ans.note{white-space:normal;padding:5px 7px;font-size:.7rem;line-height:1.15}
}