/* Camera Comparisons post type: single page, archive, cards, device-page box, compare-page bar. */
.ls-cc-single, .ls-cc-archive { --ls-cc-blue: #0b5fd8; --ls-cc-purple: #6d28d9; --ls-cc-ink: #0b2545; --ls-cc-muted: #4a5d7a; --ls-cc-line: #dbe7f8; }

/* Hero */
.ls-cc-hero { position: relative; margin: 0 0 16px; padding: 22px 20px 18px; border-radius: 18px; background: linear-gradient(135deg, #071d33, #123a6b); color: #fff; text-align: center; overflow: hidden; }
.ls-cc-hero-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #cfe2ff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ls-cc-hero-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #5aa2ff, #a78bfa); box-shadow: 0 0 0 3px rgba(90, 162, 255, .25); }
.ls-cc-duo { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 8px; }
.ls-cc-phone { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 170px; min-width: 0; }
.ls-cc-phone-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 120px; }
.ls-cc-phone-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 120px; object-fit: contain; }
.ls-cc-phone-img svg { width: 60px; height: 110px; }
.ls-cc-phone a, .ls-cc-phone b { color: #fff; font-size: 14px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.ls-cc-phone a:hover { text-decoration: underline; }
.ls-cc-vs { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #0b5fd8, #6d28d9); font-weight: 900; font-size: 15px; }
.ls-cc-hero .ls-cc-title { margin: 10px auto 8px; max-width: 640px; color: #fff; font-size: clamp(19px, 2vw, 23px); line-height: 1.25; font-weight: 800; letter-spacing: -.2px; }
.ls-cc-dek { margin: 0 auto 10px; max-width: 640px; color: rgba(255, 255, 255, .85); font-size: 15.5px; line-height: 1.55; }
.ls-cc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; color: rgba(255, 255, 255, .78); font-size: 13px; }
.ls-cc-meta a { color: #fff; font-weight: 700; }
.ls-cc-author { display: inline-flex; align-items: center; gap: 6px; }
.ls-cc-author img { border-radius: 50%; }
.ls-cc-meta .ls-cc-views, .ls-cc-meta .ls-cc-views * { color: inherit; }

.ls-cc-content { font-size: 16px; line-height: 1.7; }
.ls-cc-content > p { color: #33465f; }

/* The two phones */
.ls-cc-phones, .ls-cc-more { margin: 24px 0; }
.ls-cc-phones h2, .ls-cc-more h2 { margin: 0 0 12px; padding-left: 10px; border-left: 4px solid var(--ls-cc-blue); font-size: 20px; }
.ls-cc-phones-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-cc-phone-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--ls-cc-line); border-radius: 14px; color: var(--ls-cc-ink); text-decoration: none; }
.ls-cc-phone-card:hover { border-color: var(--ls-cc-blue); text-decoration: none; }
.ls-cc-phone-card .ls-cc-phone-img { flex: 0 0 56px; width: 56px; height: 72px; }
.ls-cc-phone-card .ls-cc-phone-img img { max-height: 72px; }
.ls-cc-phone-card .ls-cc-phone-img svg { width: 36px; height: 66px; }
.ls-cc-phone-card strong { display: block; font-size: 15px; }
.ls-cc-phone-card small { color: var(--ls-cc-blue); font-weight: 700; }
.ls-cc-btn { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--ls-cc-blue); border-radius: 999px; background: #fff; color: var(--ls-cc-blue); font-size: 13.5px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.ls-cc-btn::after { content: "→"; }
.ls-cc-btn:hover { background: var(--ls-cc-blue); color: #fff; text-decoration: none; }

/* Cards (archive, "more", device box thumbnails) */
.ls-cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ls-cc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe7f8; border-radius: 16px; overflow: hidden; color: #0b2545; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.ls-cc-card:hover { box-shadow: 0 10px 26px rgba(7, 29, 51, .12); transform: translateY(-2px); text-decoration: none; }
.ls-cc-card-img { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; background: #e8edf5; }
.ls-cc-card-img > span { overflow: hidden; }
.ls-cc-card-img > span + span { border-left: 3px solid #fff; }
.ls-cc-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-cc-card-img i { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #0b5fd8, #6d28d9); color: #fff; font-style: normal; font-size: 13px; font-weight: 900; }
.ls-cc-card-b { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.ls-cc-tag { color: #0b5fd8; font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ls-cc-card strong { font-size: 16px; line-height: 1.3; }
.ls-cc-card-m { color: #4a5d7a; font-size: 12.5px; }
.ls-cc-card-r { margin-top: 4px; color: #0b5fd8; font-size: 12.5px; font-weight: 800; }

/* Archive */
.ls-cc-arch-head { margin: 0 0 16px; }
.ls-cc-arch-head h1 { margin: 0 0 6px; font-size: 30px; }
.ls-cc-arch-head p { margin: 0 0 8px; color: #4a5d7a; font-size: 15.5px; line-height: 1.6; }
.ls-cc-arch-count { color: #4a5d7a; font-size: 13.5px; }
.ls-cc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.ls-cc-filters a { padding: 7px 14px; border: 1px solid #dbe7f8; border-radius: 999px; background: #fff; color: #4a5d7a; font-size: 13px; font-weight: 700; text-decoration: none; }
.ls-cc-filters a:hover { border-color: #0b5fd8; color: #0b5fd8; text-decoration: none; }
.ls-cc-filters a.is-on { background: #0b2545; border-color: #0b2545; color: #fff; }
.ls-cc-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 22px 0; }
.ls-cc-pager a, .ls-cc-pager span { padding: 8px 13px; border: 1px solid #dbe7f8; border-radius: 10px; background: #fff; font-weight: 700; text-decoration: none; }
.ls-cc-pager .current { background: #0b5fd8; border-color: #0b5fd8; color: #fff; }
.ls-cc-empty { padding: 30px; background: #fff; border: 1px dashed #c9d8ee; border-radius: 14px; color: #4a5d7a; text-align: center; }

/* Device page box */
.ls-cc-devbox { margin: 22px 0; padding: 16px; background: #fff; border: 1px solid #dbe7f8; border-radius: 16px; }
.ls-cc-devbox h2 { margin: 0 0 12px; font-size: 18px; }
.ls-cc-devbox-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-cc-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #edf2fa; border-radius: 12px; color: #0b2545; text-decoration: none; }
.ls-cc-mini:hover { border-color: #0b5fd8; text-decoration: none; }
.ls-cc-mini-t { display: grid; flex: 0 0 90px; grid-template-columns: 1fr 1fr; width: 90px; height: 54px; border-radius: 8px; overflow: hidden; background: #e8edf5; }
.ls-cc-mini-t > span { overflow: hidden; }
.ls-cc-mini-t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-cc-mini strong { display: block; font-size: 14px; line-height: 1.3; }
.ls-cc-mini small { display: block; color: #4a5d7a; font-size: 12px; line-height: 1.4; }

/* Compare page bar */
.ls-cc-cmpbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px; background: linear-gradient(135deg, #eef4fd, #f5efff); border: 1px solid #dbe7f8; border-radius: 14px; color: #0b2545; text-decoration: none; }
.ls-cc-cmpbar:hover { border-color: #0b5fd8; text-decoration: none; }
.ls-cc-cmpbar-ic { font-size: 26px; }
.ls-cc-cmpbar strong { display: block; font-size: 15.5px; }
.ls-cc-cmpbar small { color: #4a5d7a; font-size: 13px; }
.ls-cc-cmpbar b { margin-left: auto; padding: 9px 14px; border-radius: 10px; background: #0b5fd8; color: #fff; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 1100px) { .ls-cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .ls-cc-hero { padding: 18px 12px 14px; border-radius: 14px; }
    .ls-cc-hero .ls-cc-title { font-size: 18.5px; }
    .ls-cc-duo { gap: 10px; }
    .ls-cc-phone { width: 120px; }
    .ls-cc-phone-img { height: 96px; }
    .ls-cc-phone-img img { max-height: 96px; }
    .ls-cc-vs { flex-basis: 40px; width: 40px; height: 40px; font-size: 13px; }
    .ls-cc-grid, .ls-cc-phones-row, .ls-cc-devbox-list { grid-template-columns: 1fr; }
    .ls-cc-arch-head h1 { font-size: 24px; }
    .ls-cc-cmpbar { flex-wrap: wrap; }
    .ls-cc-cmpbar b { margin: 0; width: 100%; text-align: center; }
}

/* Phone pictures in the hero: a soft light "stage" behind each phone plus an outline shadow,
   so dark, white, silver or colourful phones (with or without a background) always stand out. */
.ls-cc-hero .ls-cc-phone-img {
    width: 132px; height: 132px; padding: 10px; border-radius: 22px;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef4fd 62%, #d9e6f8 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 26px rgba(0, 0, 0, .35), 0 0 32px rgba(90, 162, 255, .35);
}
.ls-cc-hero .ls-cc-phone-img img {
    max-height: 112px;
    filter: drop-shadow(0 0 1px rgba(7, 29, 51, .55)) drop-shadow(0 6px 8px rgba(7, 29, 51, .28));
}
@media (max-width: 600px) {
    .ls-cc-hero .ls-cc-phone-img { width: 104px; height: 104px; padding: 8px; border-radius: 18px; }
    .ls-cc-hero .ls-cc-phone-img img { max-height: 88px; }
    .ls-cc-duo { gap: 12px; }
}