/* clx-dm-platforms-grid — "Marketing Platforms & Tools We Operate".
 * Visual chrome mirrors .clx-ai-tool-card from the AI page (glassmorphic
 * white surface, 20px radius, soft shadow, hover lift) but rendered
 * through clean component markup so we don't need Elementor wrappers.
 *
 * Grid is 4-up on desktop, 2-up on tablet, 1-up on phone.
 */

.clx-dm-platforms-section {
  width: 100%;
  /* Standard site gray background — matches .clx-industries-section,
     .clx-casestudies-section, etc. on /digital-marketing/. */
  background: #F8F8F8;
  font-family: 'DM Sans', sans-serif;
  color: #142533;
  -webkit-font-smoothing: antialiased;
  /* No top padding — the Elementor section wrapping this shortcode
     already supplies its own 56px section padding rhythm. We only
     handle horizontal gutter + bottom breathing room. */
  padding: 0 20px 64px;
  box-sizing: border-box;
}

/* Creative & Design page uses the same .clx-dm-platforms-* chain for
   its "Design Platforms & Tools We Operate" section, but the page
   rhythm wants a white background here (the gray belongs to DM only). */
.page-creative-design .clx-dm-platforms-section {
  background: #FFFFFF;
}
.clx-dm-platforms-section *,
.clx-dm-platforms-section *::before,
.clx-dm-platforms-section *::after { box-sizing: border-box; }

.clx-dm-platforms-inner { max-width: 1140px; margin: 0 auto; }

/* ----- Section header — h2 matches .clx-industries-heading
   .elementor-heading-title typography exactly. ----- */
.clx-dm-platforms-title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533;
  margin: 0 0 24px !important;
}
/* Section intro paragraph — matches .clx-industries-sub p typography
   (the "Our marketing teams carry sector knowledge..." paragraph). */
.clx-dm-platforms-intro {
  color: #898D90;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 48px;
  max-width: 880px;
}

/* ----- Sub-category ----- */
.clx-dm-platforms-category { margin: 0 0 56px; }
.clx-dm-platforms-category:last-child { margin-bottom: 0; }

/* Sub-category h3 — matches AI page sub-section headings
   ("Foundational Model Providers", "LLM Orchestration & RAG", etc.)
   which render at 2em inline / 32px Cabin 800 dark with -0.3px tracking. */
.clx-dm-platforms-h3 {
  font-family: 'Cabin', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: #1a2236;
  margin: 0 0 8px;
}
/* Sub-category lead — same typography as the section intro so the
   body copy across the section reads as one consistent voice. */
.clx-dm-platforms-lead {
  color: #898D90;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 24px;
  max-width: 720px;
}

/* ----- 4-up grid ----- */
.clx-dm-platforms-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1023px) {
  .clx-dm-platforms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .clx-dm-platforms-grid { grid-template-columns: 1fr; }
}

/* ----- Tool card chrome — mirrors .clx-ai-tool-card visual ----- */
.clx-dm-tool-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Floor card height so visual rhythm matches the AI page tool grid.
     Cards with shorter copy stretch via flex:1 on the description so
     extra space distributes below the text rather than stacking. */
  min-height: 240px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.clx-dm-tool-card:hover {
  border-color: rgba(232, 97, 26, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Logo zone — fixed height for visual rhythm across uneven aspect logos */
.clx-dm-tool-card__logo-wrap {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clx-dm-tool-card__logo-wrap img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.clx-dm-tool-card__logo-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #F4F6F8;
  border: 1px dashed #E1E6EB;
  color: #7A8B9A;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Description — matches AI page tool card description typography for
   visual consistency: 15px DM Sans, 26px line-height, gray text,
   centered under the logo. flex:1 stretches text area to fill any
   remaining card height so short copy still anchors to min-height. */
.clx-dm-tool-card__desc {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: #898D90;
  text-align: center;
  margin: 0;
  flex: 1 1 auto;
}
.clx-dm-tool-card__todo {
  color: #B5BEC8;
  font-style: italic;
}

/* ----- Mobile typography — h2 mirrors Industries heading at 30/38/-0.6px ----- */
@media (max-width: 720px) {
  .clx-dm-platforms-section { padding: 0 20px 48px; }
  .clx-dm-platforms-title {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 4px !important;
  }
  .clx-dm-platforms-h3 { font-size: 22px; }
  .clx-dm-platforms-intro,
  .clx-dm-platforms-lead { font-size: 16px; line-height: 26px; }
  .clx-dm-platforms-intro { margin-bottom: 32px; }
  .clx-dm-platforms-category { margin-bottom: 40px; }
}