/* =========================================================
   Compare page: ready-made matchups ("Most compared phones", brand sections).
   Markup: inc/compare-sections.php. Settings: Devices > Compare Sections.
   ========================================================= */
.ls-mu-wrap.is-popular { margin: 16px 0 22px; }
.ls-mu-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 26px 0 8px; min-width: 0; }
.ls-mu-wrap > .ls-mu-section { min-width: 0; }
.ls-mu-section { padding: 18px; background: #f6f9fe; border: 1px solid #d6e4fb; border-top: 4px solid #0b5fd8; border-radius: 16px; box-shadow: 0 8px 24px rgba(7, 29, 51, .06); }
.ls-mu-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.ls-mu-head-icon { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid #dbe7f8; box-shadow: 0 2px 6px rgba(7, 29, 51, .06); }
.ls-mu-head-icon .ls-ico { width: 26px; height: 26px; }
.ls-mu-head-icon img { max-width: 28px; max-height: 28px; width: auto; height: auto; object-fit: contain; }
.ls-mu-head-text { min-width: 0; }
.ls-mu-head h2 { margin: 0; padding: 0; border: 0; color: #071d33; font-size: 19px; font-weight: 800; line-height: 1.25; }
.ls-mu-head p { margin: 4px 0 0; color: #4a5d7a; font-size: 13.5px; line-height: 1.5; }

.ls-mu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ls-mu-item { margin: 0; padding: 0; list-style: none; min-width: 0; }
.ls-mu { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid #dbe7f8; border-radius: 14px;
    color: #071d33; text-decoration: none; box-shadow: 0 1px 3px rgba(11, 42, 82, .05); transition: border-color .15s ease, box-shadow .15s ease; }
/* Simple hover: blue border, slightly stronger shadow. */
.ls-mu:hover, .ls-mu:focus-visible { border-color: #0b5fd8; box-shadow: 0 4px 12px rgba(11, 95, 216, .12); color: #071d33; text-decoration: none; }
.ls-mu:hover .ls-mu-cta, .ls-mu:focus-visible .ls-mu-cta { text-decoration: none; }

/* The "stage": both devices on a soft blue gradient with a VS badge between them. */
.ls-mu-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 4px; padding: 14px 10px 10px;
    background: radial-gradient(70% 90% at 25% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(70% 90% at 75% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%); }
.ls-mu-dev { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.ls-mu-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 92px; }
.ls-mu-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 92px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(7, 29, 51, .16)); }
.ls-mu-img .ls-cmp-noimg .ls-ico { width: 44px; height: 44px; }
.ls-mu-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; color: #071d33; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.ls-mu-vs { align-self: center; margin-top: -26px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #0866ff 0%, #5b8cff 100%); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .5px;
    border: 3px solid #fff; box-shadow: 0 4px 12px rgba(8, 102, 255, .35); }

.ls-mu-cta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding: 9px 10px; border-top: 1px solid #e6eef9; color: #0b5fd8; font-size: 12.5px; font-weight: 700; }
.ls-mu-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* "Hot" counter on much-compared pairs. */
.ls-mu-count { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 5px; border-radius: 999px;
    background: #fff4e5; color: #b45309; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px rgba(7, 29, 51, .08); }
.ls-mu-count .ls-ico { width: 13px; height: 13px; }

@media (max-width: 1024px) {
    .ls-mu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: each section swipes sideways, the next card peeks in. */
@media (max-width: 600px) {
    .ls-mu-section { padding: 14px 0 14px 14px; border-radius: 14px; }
    .ls-mu-head { padding-right: 14px; }
    .ls-mu-head h2 { font-size: 17px; }
    .ls-mu-head p { font-size: 13px; }
    .ls-mu-grid { display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 6px 0; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .ls-mu-grid::-webkit-scrollbar { display: none; }
    .ls-mu-item { flex: 0 0 74%; scroll-snap-align: start; }
    .ls-mu-img { height: 84px; }
    .ls-mu-img img { max-height: 84px; }
}