/**
 * @file celthrac-services.css
 *
 * Celthrac-specific CSS overrides for the /services page.
 * Loaded globally via drupalet_quanto/global-styling library.
 *
 * Sections covered:
 *   1. Hero section refinements
 *   2. Service Groups (cards + view block)
 *   3. Delivery Process timeline
 *   4. Industries We Serve grid
 *   5. Cross-section utilities
 */

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */

/**
 * The hero section wraps with .quanto-hero-service-section which already
 * provides padding-top:200px. We add a subtle bottom border separator.
 */
.page-node-58 .quanto-hero-service-section {
  padding-bottom: 80px;
  border-bottom: 1px solid var(--color-5);
}

@media only screen and (max-width: 991.98px) {
  .page-node-58 .quanto-hero-service-section {
    padding-bottom: 60px;
  }
}

/* Tighten hero intro paragraph max-width for readability */
.page-node-58 .quanto-hero__info p {
  max-width: 720px;
}


/* ==========================================================================
   2. SERVICE GROUPS SECTION
   ========================================================================== */

/**
 * Hide the auto-generated "Service Groups" view title above the cards.
 * The section heading "Our Core Services" is already present via
 * paragraph_content (pid 422).
 */
.page-node-58 .viewsreference--view-title {
  display: none;
}

/**
 * The viewsreference module strips the Views wrapper — .col-lg-4.col-md-6
 * items are direct children of .paragraph--type--paragraph-views-reference.
 * Add Bootstrap .row flex behavior to this paragraph wrapper so the grid works.
 */
.page-node-58 .paragraph--type--paragraph-views-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
  margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem));
}

.page-node-58 .paragraph--type--paragraph-views-reference > [class*="col-"] {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-top: var(--bs-gutter-y, 1.5rem);
}

.page-node-58 .quanto-service2-section .quanto-service-box {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card hover: subtle lift + shadow */
.page-node-58 .quanto-service2-section .quanto-service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/**
 * Remove the Drupal field wrapper span around the title so it
 * doesn't break typography.
 */
.page-node-58 .quanto-service-box .quanto-iconbox-data h5 .field--name-title {
  display: contents;
}

/* Constrain card description for uniform card heights */
.page-node-58 .quanto-service-box .quanto-iconbox-data > p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  min-height: 5.2em;
}


/* ==========================================================================
   3. DELIVERY PROCESS TIMELINE
   ========================================================================== */

/**
 * Give the timeline section a light background for visual separation.
 * Uses --color-2 (#f5f5f5).
 */
.page-node-58 .paragraph--type--paragraph-section:nth-of-type(3) {
  background-color: var(--color-2);
}

/**
 * Refine the vertical timeline connector (left border).
 * Make the border thicker and use the primary color for emphasis.
 */
.page-node-58 .quanto-service-box5 {
  border-left-width: 2px;
  border-left-color: var(--color-primary);
  position: relative;
}

/* Timeline step dots: circle markers on the left border */
.page-node-58 .quanto-service-box5 > .quanto-content {
  position: relative;
}

.page-node-58 .quanto-service-box5 > .quanto-content::before {
  content: "";
  position: absolute;
  left: -47px;
  top: 44px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}

@media only screen and (max-width: 1199.98px) {
  .page-node-58 .quanto-service-box5 > .quanto-content::before {
    left: -37px;
    top: 30px;
    width: 10px;
    height: 10px;
  }
}

/* Step icon color */
.page-node-58 .quanto-service-box5 h4 i {
  margin-right: 10px;
  color: var(--color-primary);
  opacity: 0.7;
}

/* Step Engagement/Commitments/Outcomes labels */
.page-node-58 .quanto-service-box5 .content-wrapper p strong {
  color: var(--color-primary);
}

/* Reduce gap on smaller screens for better readability */
@media only screen and (max-width: 767.98px) {
  .page-node-58 .quanto-service-box5 {
    gap: 60px;
    padding-inline: 20px;
  }

  .page-node-58 .quanto-service-box5 > .quanto-content::before {
    left: -27px;
    width: 8px;
    height: 8px;
  }
}


/* ==========================================================================
   4. INDUSTRIES WE SERVE
   ========================================================================== */

/**
 * Industry card compact padding — replaces inline styles.
 * Applied via specificity on the 4th section of the services page.
 */
.page-node-58 .paragraph--type--paragraph-section:nth-of-type(4) .quanto-service-box {
  padding: 32px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-node-58 .paragraph--type--paragraph-section:nth-of-type(4) .quanto-iconbox-icon {
  margin-bottom: 24px;
}

/* Industry card hover */
.page-node-58 .paragraph--type--paragraph-section:nth-of-type(4) .quanto-service-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Industry icon size and color */
.page-node-58 .paragraph--type--paragraph-section:nth-of-type(4) .quanto-iconbox-icon i {
  color: var(--color-primary);
  font-size: 2rem;
}

/* Ensure uniform card heights in the card grid (not the outer layout .row > .col-12) */
.page-node-58 .paragraph--type--paragraph-section:nth-of-type(4) .row.g-4 > [class*="col-"] {
  display: flex;
}

/* Subtle description text */
.page-node-58 .paragraph--type--paragraph-section:nth-of-type(4) .quanto-iconbox-data p {
  font-size: 0.925rem;
  line-height: 1.65;
  opacity: 0.85;
}


/* ==========================================================================
   5. CROSS-SECTION UTILITIES
   ========================================================================== */

/**
 * Full-width page: remove any unintended sidebar/margin on the services page.
 */
.page-node-58 .main-content {
  width: 100%;
}

/**
 * Section title consistency: ensure all quanto-section-title headings
 * on the services page have matching bottom margin.
 */
.page-node-58 .quanto-section-title h2 {
  margin-bottom: 16px;
}

.page-node-58 .quanto-section-title p {
  max-width: 640px;
  opacity: 0.8;
}

/**
 * Smooth scroll anchor offset for internal links.
 */
.page-node-58 section[id] {
  scroll-margin-top: 100px;
}

/* ============================================================
 * MANAGED SERVICES PAGE (node/74) - /newwebsite/managed-services
 * ============================================================ */

/**
 * Smooth scroll anchor offset.
 */
.page-node-74 section[id] {
  scroll-margin-top: 100px;
}

/**
 * Hero section: Match existing services hero pattern.
 */
.page-node-74 .quanto-hero-service-section {
  padding-bottom: 80px;
  border-bottom: 1px solid var(--color-5);
}

/**
 * Service cards: Hover lift effect matching existing pattern.
 */
.page-node-74 .quanto-service-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-node-74 .quanto-service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/**
 * Service card SVG icons.
 */
.page-node-74 .quanto-service-box svg {
  color: var(--color-primary);
}

/**
 * Process timeline: Vertical line dots on left border.
 */
.page-node-74 .managed-services-timeline .quanto-service-box5 {
  border-left-width: 2px;
  border-left-color: var(--color-primary);
}

.page-node-74 .managed-services-timeline .quanto-service-box5 > .quanto-content::before {
  content: "";
  position: absolute;
  left: -47px;
  top: 44px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}

/**
 * Stats counter section.
 */
.page-node-74 .counter h2 {
  font-size: 3.5rem;
}

/**
 * Client logos: Color on hover.
 */
.page-node-74 #clients-section .swiper-slide img:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

/**
 * CTA section: Dark background text overrides.
 */
.page-node-74 .bg-color-primary h2,
.page-node-74 .bg-color-primary h5,
.page-node-74 .bg-color-primary p,
.page-node-74 .bg-color-primary span {
  color: #fff;
}

.page-node-74 .bg-color-primary .bg-color-white h5,
.page-node-74 .bg-color-primary .bg-color-white p,
.page-node-74 .bg-color-primary .bg-color-white span {
  color: var(--color-primary);
}

/**
 * CTA form styling.
 */
.page-node-74 .managed-services-form .form-control {
  border: 1px solid var(--color-5);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 15px;
}

.page-node-74 .managed-services-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(15, 15, 15, 0.1);
}

.page-node-74 .managed-services-form .quanto-btn {
  display: block;
  justify-content: center;
}

/* ==========================================================================
   Global: hide viewsreference module title divs
   ========================================================================== */
.viewsreference--view-title {
  display: none;
}

/* Section continuity: paragraph_views_reference with bg-color-primary sits
   directly after a same-background header section with no gap. */
.paragraph--type--paragraph-views-reference.bg-color-primary,
.paragraph--type--paragraph-views-reference.bg-color-2 {
  margin-top: 0;
}

/* ==========================================================================
   Global: process box text on dark bg-color-primary sections
   ========================================================================== */

/**
 * .process-box cards embed headings/paragraphs that default to black text.
 * When the wrapping section uses bg-color-primary (#0f0f0f) the text is
 * invisible.  Override headings and body copy to white, and restore dark text
 * on hover (the hover-overlay turns the card white).
 */
.bg-color-primary .process-box .process-title,
.bg-color-primary .process-box .process-info p,
.bg-color-primary .process-box .process-description {
  color: var(--color-white);
}

.bg-color-primary .process-box:hover .process-title,
.bg-color-primary .process-box:hover .process-info p,
.bg-color-primary .process-box:hover .process-description {
  color: var(--color-primary);
}

/**
 * Section titles (h2/p) placed directly inside a bg-color-primary paragraph.
 * Affects .quanto-section-title blocks on dark-background paragraphs.
 */
.bg-color-primary .quanto-section-title h2,
.bg-color-primary .quanto-section-title h3,
.bg-color-primary .quanto-section-title p,
.bg-color-primary .quanto-section-title span {
  color: var(--color-white);
}