/* clx-sr-services — /seo-reseller/ S3 thin layer.
 * The cards reuse the shipped clx-svc-card archetype (clx-svc-card.css) and
 * the per-card agent loader reuses the IT live console (clx-aiworkflows-live.css).
 * This file only adds: the section heading/intro, the "Why agencies sell it"
 * bullet list, and the agent block's name/role layout. Scoped under .clx-sr-svcs. */

.clx-sr-svcs { max-width:1132px; margin:56px auto 0; padding:0 20px; box-sizing:border-box;
  font-family:"DM Sans",system-ui,sans-serif; }
.clx-sr-svcs * { box-sizing:border-box; }

.clx-sr-svcs__head { margin-bottom:28px; }
/* Section heading reuses the shipped .title.main-heading spec (Cabin 52/60/500,
   -1.56px) — identical to every section H2 on /digital-marketing/. Those
   classes are added in markup; here we only own spacing + alignment. */
.clx-sr-svcs__h2 { margin:0 0 14px; text-align:left; }
.clx-sr-svcs__intro { font-size:18px; line-height:28px; color:#898D90; margin:0 0 10px; max-width:none; }
.clx-sr-svcs__intro:last-child { margin-bottom:0; }

/* the archetype grid (.svc-cards-grid) handles columns/gap; nothing to add */

/* Mobile: clx-cost-curves.css forces .svc-cards-grid to 2 columns with
   !important for ALL widths <=1024 (DM's capability grid needs it). That
   squeezes the tall S3 reseller cards to half-width on phones. Force the S3
   grid to one full-width column at <=768 so cards span edge to edge like the
   S4 hero. Higher specificity + !important to beat the cost-curves rule. */
@media (max-width: 768px) {
  body.page-seo-reseller .clx-sr-svcs__grid.svc-cards-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* minmax(0,..) lets the column shrink below the cards' min-content so they
     never overflow the viewport. Also drop the grid's own inner padding since
     .clx-sr-svcs already pads the section (double padding squeezed the cards). */
  body.page-seo-reseller .clx-sr-svcs__grid.svc-cards-grid { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Reserve a uniform 3-line description height so the why-bullets, tiles and
   agent loader line up across all 9 cards regardless of copy length (shorter
   ones like Content Strategy / Reputation Management otherwise rode up). */
.clx-sr-svcs .svc-card-desc { min-height: 92px; }

/* Stat-tile sizing (20px + no-wrap so two-token tops stay one line) now lives
   in the shared archetype clx-svc-card.css, applied consistently on every page
   that uses the card — no seo-reseller-only override here. */

/* "Why agencies sell it" — bullet list under the shipped .svc-card-specs-label */
.clx-sr-svcs .clx-srs-why { list-style:none; margin:0; padding:0; }
.clx-sr-svcs .clx-srs-why li { position:relative; padding-left:18px; font-size:13.5px; line-height:1.5;
  color:#3a4754; margin-bottom:6px; }
.clx-sr-svcs .clx-srs-why li:last-child { margin-bottom:0; }
.clx-sr-svcs .clx-srs-why li::before { content:""; position:absolute; left:2px; top:8px; width:6px; height:6px;
  border-radius:50%; background:#FA4900; }

/* agent live-console block — loader visuals come from clx-aiworkflows-live.css
   (.iaw-status / .iaw-slot__bar / .iaw-telemetry / .iaw-spark). Here: separation
   + the name/id/role typography + bar spacing. */
.clx-sr-svcs .clx-srs-agent { margin-top:18px; padding-top:16px; border-top:1px solid #efefed; }
.clx-sr-svcs .clx-srs-agent__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.clx-sr-svcs .clx-srs-agent__name { font-family:"Cabin",sans-serif; font-weight:700; font-size:15px; color:#142533; }
.clx-sr-svcs .clx-srs-agent__id { font-family:"DM Mono","SFMono-Regular",ui-monospace,monospace; font-size:11px;
  font-weight:500; color:#9aa3ab; margin-left:7px; }
.clx-sr-svcs .clx-srs-agent__role { text-transform:uppercase; font-size:10.5px; letter-spacing:.06em;
  color:#8a8a98; margin:5px 0 12px; }
.clx-sr-svcs .clx-srs-agent .iaw-status { margin-right:0; }
.clx-sr-svcs .clx-srs-agent .iaw-slot__bar-wrap { margin:0; }
/* The telemetry footer is a non-wrapping flex row ("RUNNING … · LAST ACTION …")
   that overflows the card on narrow phones (and pushed the whole page into
   horizontal scroll). Let it wrap; the bar + sparkline stay full width. */
.clx-sr-svcs .iaw-telemetry { flex-wrap: wrap; }

/* ============================================================================
 * S4 — "Why Agencies Choose Clixlogix"  (.clx-sr-exp)
 * Hero card + icon cards reuse global classes (clx-ai-sysdesign-banner,
 * clx-partner-card). Only the section rhythm, 3-up grid, sub-headings and the
 * inline read-more link are defined here. Scoped under .clx-sr-exp.
 * ==========================================================================*/
/* S4 section head — two columns: heading left, intro right, vertically
   centered (S3 keeps the default stacked head). Stacks on mobile. */
@media (min-width: 768px) {
  .clx-sr-exp .clx-sr-svcs__head {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 32px;
  }
  .clx-sr-exp .clx-sr-svcs__head .clx-sr-svcs__h2 { margin-bottom: 0; }
}

.clx-sr-exp__hero { margin: 28px 0 8px; }

/* 3-up grid — replaces Elementor's column flex with a plain CSS grid so we
   don't depend on Elementor column inline widths. The .clx-partner-card glass
   chrome (site-wide.css) styles each cell; align-items:stretch gives equal
   height like the AI page's .clx-partner-grid row. */
.clx-sr-exp__sub { margin-top: 40px; }
.clx-sr-exp__subh { font-family:"Cabin",sans-serif; font-size:1.5em; line-height:1.25; font-weight:700;
  color:#142533; margin:0 0 8px; text-align:left; }
.clx-sr-exp__subintro { font-size:18px; line-height:28px; color:#898D90; margin:0 0 22px; max-width:none; }
/* Inline prose links inside the section intros/outros — canonical ember-orange
   underline treatment (same as .clx-svc-card__outcome-text a). !important beats
   Elementor's `.elementor a {text-decoration:none}`. */
.clx-sr-svcs__intro a, .clx-sr-exp__subintro a {
  color:#FF6A1C !important; text-decoration:underline !important; text-decoration-color:#FF6A1C !important;
  text-decoration-thickness:1px !important; text-underline-offset:3px !important;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.clx-sr-svcs__intro a:hover, .clx-sr-exp__subintro a:hover { color:#FA4900 !important; text-decoration-color:#FA4900 !important; }
.clx-sr-exp__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.clx-sr-exp__grid > .clx-partner-card { display:flex; }
.clx-sr-exp__grid > .clx-partner-card > .elementor-element-populated { width:100%; }

/* Icon — brand-orange stroke glyph, centered like the AI page partner cards.
   .clx-partner-card .elementor-icon-box-icon (global) handles the 14px gap. */
.clx-sr-exp .elementor-icon-box-icon { color:#FA4900; line-height:0; }
.clx-sr-exp .elementor-icon-box-icon svg { display:inline-block; }

/* Read-more CTA — canonical site .clx-lc link (orange, uppercase, auto arrow
   via ::after). Right-aligned per the site-wide CTA convention. */
.clx-sr-exp__readmore { margin:32px 0 0 !important; text-align:right; }

@media (max-width: 900px) {
  .clx-sr-exp__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .clx-sr-exp__grid { grid-template-columns:1fr; }
}