/* The magazine look on the B2B home (business/includes/r13_magazine.html).
 * Editorial spread: title and note, the try-on with numbered points, the list
 * and the card of the active piece. The callout of the active piece is a solid
 * line from its point to a label at the picture's edge. */
.r13-mag { display: grid; grid-template-columns: minmax(0, 1fr); }
.r13-mag-text { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; border-bottom: 1px solid #E6E4E1; }
.r13-mag-text .display { line-height: .95; }
.r13-mag-fig { position: relative; background: #F2F2F2; min-width: 0; align-self: start; }
.r13-mag-fig > img { display: block; width: 100%; height: auto; }
.r13-mag-side { display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0; }

.r13-mag-dot { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 9999px;
  border: 2px solid #fff; background: rgba(18,17,16,.55); color: #fff; font: 500 12px/1 'DM Mono', ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.2,0,0,1), background-color .18s; }
.r13-mag-dot:hover { transform: scale(1.12); background: #121110; }
.r13-mag-dot[aria-pressed="true"] { background: #F5B82E; color: #121110; border-color: #121110; transform: scale(1.18); }

.r13-mag-call { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .25s cubic-bezier(.2,0,0,1); }
.r13-mag-call.is-right { flex-direction: row-reverse; }
.r13-mag-call.is-on { opacity: 1; }
.r13-mag-call i { flex: 1 0 18px; min-width: 18px; height: 1.5px; background: #121110; transform-origin: right center;
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2,0,0,1) .05s; }
.r13-mag-call.is-right i { transform-origin: left center; }
.r13-mag-call.is-on i { transform: scaleX(1); }
.r13-mag-label { flex: 0 1 auto; min-width: 0; max-width: 150px; background: #fff; color: #121110; padding: 5px 8px; font-size: 12px; line-height: 1.3;
  font-family: 'DM Mono', ui-monospace, monospace; border: 1.5px solid #121110; }
.r13-mag-label b { display: block; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; font-size: 13px; }

.r13-mag-item { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; background: none;
  border: 0; border-top: 1px solid #E6E4E1; color: #121110; font-size: 15px; cursor: pointer; text-align: left; }
.r13-mag-item:hover { background: #F2F2F2; }
.r13-mag-num { flex: none; width: 26px; height: 26px; border-radius: 9999px; border: 1.5px solid #121110; display: flex; align-items: center;
  justify-content: center; font: 500 12px/1 'DM Mono', ui-monospace, monospace; }
.r13-mag-item[aria-pressed="true"] { background: #121110; color: #fff; }
.r13-mag-item[aria-pressed="true"] .r13-mag-num { background: #F5B82E; color: #121110; border-color: #F5B82E; }

.r13-mag-card { border-top: 1px solid #121110; padding-top: 14px; }
.r13-mag-product { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 14px; align-items: start; }
.r13-mag-product:not([hidden]) { animation: r13-mag-in .3s cubic-bezier(.2,0,0,1) both; }
.r13-mag-pic { display: flex; aspect-ratio: 3 / 4; background: #F2F2F2; overflow: hidden; }
.r13-mag-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
@keyframes r13-mag-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Phones: no room for a label beside the figure; the card says the same. */
@media (max-width: 639px) { .r13-mag-call { display: none; } }
@media (min-width: 640px) {
  .r13-mag-text { padding: 32px; }
  .r13-mag-side { padding: 28px; }
}
@media (min-width: 1024px) {
  .r13-mag { grid-template-columns: minmax(0, 300px) minmax(0, 480px) minmax(0, 1fr); }
  .r13-mag-text { border-bottom: 0; border-right: 1px solid #E6E4E1; justify-content: flex-end; padding: 40px 32px; }
  .r13-mag-side { padding: 40px 32px; justify-content: flex-end; }
  .r13-mag-product { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .r13-mag-dot, .r13-mag-call, .r13-mag-call i { transition: none; }
  .r13-mag-product:not([hidden]) { animation: none; }
}
.r13-mag-product[hidden] { display: none !important; }