/*
 * 50 Page X-Ray Comparison.
 * Load order: content-style.css -> css/10-content-patterns.css -> css/15-woocommerce.css -> css/20-page-patterns.css -> css/20-support-pages.css -> style.css -> css/pages/50-page-*.css.
 * Purpose: X-Ray Sensor Comparison page-only mobile comparison scroller loaded only on page ID 17300 / slug x-ray-sensor-comparison.
 * Related files: content-style.css holds tokens/base utilities; css/10-content-patterns.css holds reusable components; css/20-page-patterns.css and css/20-support-pages.css hold page-family overrides.
 * Scope: these rules were moved from css/20-page-patterns.css and target .dmax-xcomp-* comparison cards.
 */

/* ── X-Ray Comparison — mobile card scroller ────────────── */
.dmax-xcomp-mobile {
    /* padding: 0 0 60px; */
    padding-bottom: 0;
    padding-top: clamp(100px, 4vw, 135px);
}

.dmax-xcomp-mobile+.dmax-xcomp-mobile {
    padding-top: 0;
}

.dmax-xcomp-mobile+.dmax-xcomp-mobile h2.wp-block-kadence-advancedheading:first-child {
    border-top: 0;
}

.dmax-xcomp-divider {
    border-top: 1px solid #dde5ea;
    padding-top: 20px;
    margin-top: 10px;
}

/* Target rendered Kadence advancedheading class pattern for mobile comparison H2s */
.wp-block-kadence-advancedheading[class*="kt-adv-headingxcmob"]:not([class*="kt-adv-headingxcmobtitle"]):not([class*="kt-adv-headingxcmobeye"]) {
    border-top: 1px solid #dde5ea;
    /* padding-top: 20px; */
    margin-top: 10px;
}

.wp-block-kadence-advancedheading[class*="kt-adv-headingxcmob"]:not([class*="kt-adv-headingxcmobtitle"]):not([class*="kt-adv-headingxcmobeye"]):first-child {
    margin-top: 0;
}


.dmax-xcomp-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 20px;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
    scrollbar-width: thin;
}

.dmax-xcomp-scroll::-webkit-scrollbar {
    height: 4px;
}

.dmax-xcomp-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.dmax-xcomp-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
}

.dmax-xcomp-card img {
    max-width: min(75vw, 300px);
    height: auto;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dmax-xcomp-value {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--dmax-ink, #757575);
}

.dmax-xcomp-value a {
    color: var(--dmax-blue, #155492);
    font-weight: 600;
}

.dmax-xcomp-value img {
    max-width: 100px;
    margin: 4px auto;
}

/* ── Section width rhythm ──────────────────────────────────
 * Text-heavy sections → 900px (comfortable reading width)
 * Intro / wider content → 1100px
 * Comparison card scrollers → keep 1200px (need horizontal space)
 */

/* Intro section — slightly narrower than default 1200px */
.kb-row-layout-idxcompintro>.kt-row-column-wrap {
    max-width: 1100px;
}

/* Reviews section — narrower for text readability */
.kb-row-layout-idxcompreview>.kt-row-column-wrap {
    max-width: 900px;
}

/* Ranking section — narrower */
.kb-row-layout-idxcranking>.kt-row-column-wrap {
    max-width: 900px;
}

/* FAQ section — narrower for text */
.kb-row-layout-idxcfaq>.kt-row-column-wrap {
    max-width: 900px;
}

/* ── Alternating section backgrounds ──────────────────────── */
/* Light tint on reviews section for visual rhythm */

.kb-row-layout-idxcompreview {
    background: var(--dmax-soft, #f4f7fb);
}

/* CTA row — bottom margin to separate from table */
.dmax-xcomp-cta-row {
    margin-bottom: 24px;
}

/* ── Page-title and hero overrides (moved from style.css) ── */

.page-id-17300.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul>li.menu-item>a {
    /* color: #fff; */
}

.page-id-17300 .entry-hero-container-inner {
    background: var(--dmax-navy);
}

.page-id-17300 .entry-hero-container-inner .entry-title {
    /* color: #fff; */
}

/* Sticky table header — only on comparison page */
.page-id-17300 .dmax-guide-table thead tr th,
.page-id-17300 .dmax-guide-table tr th {
    position: sticky;
    top: 126px;
    z-index: 10;
}

/* Override dmax-row overflow:hidden so sticky works */
.page-id-17300 .kb-row-layout-idxcomptable {
    overflow: visible;
}

/* ── Clean semantic comparison guide table overrides ────── */
.page-id-17300 .dmax-guide-table.dg-table,
.editor-styles-wrapper .dmax-guide-table.dg-table {
    border: none;
    table-layout: auto;
    width: 100%;
}

.page-id-17300 .dmax-guide-table .dg-header-cell,
.editor-styles-wrapper .dmax-guide-table .dg-header-cell {
    border-bottom: 2px solid black;
}

.page-id-17300 .dmax-guide-table .dg-w-logo,
.editor-styles-wrapper .dmax-guide-table .dg-w-logo {
    width: 245px;
}

.page-id-17300 .dmax-guide-table .dg-w-sensor,
.editor-styles-wrapper .dmax-guide-table .dg-w-sensor {
    width: 205px;
}

.page-id-17300 .dmax-guide-table tr.dg-row,
.editor-styles-wrapper .dmax-guide-table tr.dg-row {
    border: 1px solid #dee2e6;
}

.page-id-17300 .dmax-guide-table td.dg-label-cell,
.editor-styles-wrapper .dmax-guide-table td.dg-label-cell {
    color: #272a63;
    font-weight: bold;
    border: 1px solid #dee2e6;
    border-right-color: transparent;
    background: #ffffff;
}

.page-id-17300 .dmax-guide-table td.dg-bg-primary,
.editor-styles-wrapper .dmax-guide-table td.dg-bg-primary {
    background: #272a63;
    color: #ffffff;
    border: 1px solid #dee2e6;
}

.page-id-17300 .dmax-guide-table td.dg-bg-secondary,
.editor-styles-wrapper .dmax-guide-table td.dg-bg-secondary {
    background: #105492;
    color: #eeeeee;
    border: 1px solid #dee2e6;
}

.page-id-17300 .dmax-guide-table td.dg-rank,
.editor-styles-wrapper .dmax-guide-table td.dg-rank {
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
}

.page-id-17300 .dmax-guide-table td.dg-last-row-cell,
.editor-styles-wrapper .dmax-guide-table td.dg-last-row-cell {
    border-bottom: 2px solid black;
}