/**
 * MLT Highlight Paragraph Styling (Service nodes)
 * ========================================================================
 * Highlights are rendered at page-template level (outside any .container)
 * via page--node--mt-service.html.twig, so they're genuinely full-width
 * with no CSS trickery required.
 *
 * This file handles:
 *  - Vertical padding/spacing on each highlight
 *  - Inner content containment at readable width
 *  - Light text modifier for dark backgrounds
 */

/* ========================================================================
 * WRAPPER + PER-HIGHLIGHT SPACING
 * ======================================================================== */
.mlt-service-highlights {
  width: 100%;
}

.mlt-service-highlights .paragraph--type--mt-highlight {
  padding: 60px 0;
  width: 100%;
}

/* ========================================================================
 * ALTERNATING LAYOUT
 * Odd highlights: image left, text right (default)
 * Even highlights: image right, text left (flipped)
 *
 * Uses flex order since .row has display:flex via Bootstrap.
 * ======================================================================== */
.mlt-service-highlights .paragraph--type--mt-highlight:nth-child(even) .mlt-highlight__inner .row {
  flex-direction: row-reverse;
}

/* ========================================================================
 * INNER CONTENT CONSTRAINT
 * Keeps text/images at readable width while background stays full-width.
 * ======================================================================== */
.mlt-service-highlights .mlt-highlight__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Preserve Bootstrap row gutters */
.mlt-service-highlights .mlt-highlight__inner > .row {
  margin-left: -15px;
  margin-right: -15px;
}

/* ========================================================================
 * TEXT ALIGNMENT
 * Driven by field_mt_highlight_align. Smart behaviour:
 *  - With image: just aligns text within its column
 *  - Without image: narrows and centres the column for readability
 * ======================================================================== */

/* Basic text alignment — applies inside the content column */
.mlt-highlight--align-left .col-md-6.align-self-center,
.mlt-highlight--align-left .col-12.align-self-center {
  text-align: left;
}

.mlt-highlight--align-center .col-md-6.align-self-center,
.mlt-highlight--align-center .col-12.align-self-center {
  text-align: center;
}

.mlt-highlight--align-right .col-md-6.align-self-center,
.mlt-highlight--align-right .col-12.align-self-center {
  text-align: right;
}

/* When centred + no image (col-12 instead of col-md-6), narrow the column
   for readable line length and centre it on the page. ~720px works well
   for reading comfort (around 70ch depending on font size). */
.mlt-highlight--align-center .col-12.align-self-center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* When centred, also centre the CTA buttons */
.mlt-highlight--align-center .mlt-highlight__ctas {
  justify-content: center;
}

/* When right-aligned, push the CTA buttons to the right */
.mlt-highlight--align-right .mlt-highlight__ctas {
  justify-content: flex-end;
}

/* Ensure images inside centred text columns also centre (e.g. any
   inline images within the body field). */
.mlt-highlight--align-center .field--name-field-mt-highlight-body img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
 * CTA BUTTONS (Primary + Secondary)
 * Primary = filled button (uses existing .mt-button site styles)
 * Secondary = outlined/ghost variant
 * ======================================================================== */
.mlt-highlight__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  align-items: center;
}

/* Primary button inherits existing .mt-button site styling by default.
   If you need to explicitly style it, add rules here. */

/* Secondary button - outlined variant */
.mlt-highlight__cta--secondary {

}

.mlt-highlight__cta--secondary:hover {
  background: currentColor !important;
  color: #ffffff !important;
}

/* On light text (dark background) highlights, secondary button uses white border */
.mlt-highlight--light-text .mlt-highlight__cta--secondary {
  border-color: #ffffff;
  color: #ffffff !important;
}

.mlt-highlight--light-text .mlt-highlight__cta--secondary:hover {
  background: #ffffff !important;
  color: var(--mt-color-shade) !important;
}

/* ========================================================================
 * LIGHT TEXT MODIFIER
 * Applied when field_mt_highlight_light_text is ticked.
 * ======================================================================== */
.mlt-highlight--light-text,
.mlt-highlight--light-text h1,
.mlt-highlight--light-text h2,
.mlt-highlight--light-text h3,
.mlt-highlight--light-text h4,
.mlt-highlight--light-text h5,
.mlt-highlight--light-text h6,
.mlt-highlight--light-text p,
.mlt-highlight--light-text li,
.mlt-highlight--light-text strong,
.mlt-highlight--light-text em {
  color: #ffffff;
}

.mlt-highlight--light-text h4 a {
  color: #ffffff;
  text-decoration: none;
}

.mlt-highlight--light-text h4 a:hover {
  color: var(--mt-color-primary);
  text-decoration: none;
}

/* Flip CTA button for contrast on dark backgrounds */
.mlt-highlight--light-text .mt-button a {
  background: #ffffff;
  color: var(--mt-color-shade);
}

.mlt-highlight--light-text .mt-button a:hover {
  background: var(--mt-color-shade);
  color: #ffffff;
}

/* ========================================================================
 * RESPONSIVE
 * ======================================================================== */
@media (max-width: 767.98px) {
  .mlt-service-highlights .paragraph--type--mt-highlight {
    padding: 40px 0;
  }

  .mlt-service-highlights .mlt-highlight__inner {
    padding: 0 16px;
  }

  /* Reset the flex reverse on mobile so stacking order is always:
     image on top, text below (regardless of odd/even). */
  .mlt-service-highlights .paragraph--type--mt-highlight:nth-child(even) .mlt-highlight__inner .row {
    flex-direction: column;
  }

  .mlt-service-highlights .paragraph--type--mt-highlight .mlt-highlight__inner .row {
    flex-direction: column;
  }
}




























.page-node-type-mt-service  .field--name-field-mt-srv-highlight {
	padding-top: 0px !important;
}

.page-node-type-mt-service .main-content__section, .page-node-type-mt-service .sidebar__section {
        padding-top: 0px !important;
    }

.page-node-type-mt-service .page-title {
	text-align: center;
	max-width: 100% !important;
	margin-top: 20px;
}

.header-top .container-fluid {
	padding-left: 0rem !important;
	padding-right: 0rem !important;
}

.header-top .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.header-top .col-12 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}










/**
 * MLT Hero Paragraph Styles
 * ========================================================================
 * Scoped to .mlt-hero so it can be used on any node/page site-wide.
 * Uses theme CSS variables: --mt-pff, --mt-hff, --mt-color-primary,
 * --mt-color-primary-value, --mt-color-shade, --mt-color-shade-contrast,
 * --mt-color-shade-value.
 */

/* ========= HERO SECTION ========= */
.mlt-hero {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fef6ec 0%, #fdf0dc 50%, #fef8ed 100%);
  font-family: var(--mt-pff);
  color: #0f172a;
  line-height: 1.6;
}

.mlt-hero *,
.mlt-hero *::before,
.mlt-hero *::after {
  box-sizing: border-box;
}

.mlt-hero a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.mlt-hero ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mlt-hero p {
  margin: 0;
}

/* Background blobs */
.mlt-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mlt-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.mlt-hero__blob--1 {
  top: -10%;
  right: -5%;
  width: 45%;
  height: 45%;
  background: hsla(var(--mt-color-primary-value), 0.25);
}

.mlt-hero__blob--2 {
  bottom: -10%;
  left: -10%;
  width: 35%;
  height: 35%;
  background: rgba(251, 191, 36, 0.25);
  filter: blur(80px);
}

.mlt-hero__blob--3 {
  top: 20%;
  left: 10%;
  width: 25%;
  height: 25%;
  background: rgba(253, 230, 138, 0.3);
  filter: blur(60px);
}

/* Container */
.mlt-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Grid layout */
.mlt-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Content column */
.mlt-hero__content > * + * {
  margin-top: 28px;
}

/* Badge */
.mlt-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mlt-hero__badge-stars {
  display: inline-flex;
  gap: 2px;
}

.mlt-hero__badge-stars svg {
  width: 16px;
  height: 16px;
  color: #fbbf24;
  fill: #fbbf24;
}

.mlt-hero__badge > span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.02em;
}

/* Heading */
.mlt-hero__heading {
  font-family: var(--mt-hff);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: #0f172a;
}

.mlt-hero__accent {
  background: linear-gradient(to right, var(--mt-color-primary), #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subheading */
.mlt-hero__sub {
  font-size: 20px;
  color: #475569;
  font-weight: 500;
  line-height: 1.5;
}

/* Bullet list */
.mlt-hero__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}

.mlt-hero__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 500;
  color: #334155;
}

.mlt-hero__check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: hsla(var(--mt-color-primary-value), 0.1);
  color: var(--mt-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mlt-hero__check svg {
  width: 16px;
  height: 16px;
}

/* CTA row */
.mlt-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
}

/* Visual column */
.mlt-hero__visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}

.mlt-hero__visual-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, hsla(var(--mt-color-primary-value), 0.2), transparent);
  border-radius: 40px;
  filter: blur(32px);
  transform: translate(16px, 16px);
}

.mlt-hero__image {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  border: 1px solid #f1f5f9;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: #fff;
  aspect-ratio: 4 / 5;
}

.mlt-hero__image img,
.mlt-hero__image .field--name-field-mt-hero-image img,
.mlt-hero__image .field img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Ensure Drupal field wrapper doesn't break layout */
.mlt-hero__image .field {
  height: 100%;
}

.mlt-hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.2) 50%, transparent);
  pointer-events: none;
}

.mlt-hero__caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.mlt-hero__caption-inner {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.mlt-hero__caption-inner p {
  color: #1e293b;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}

/* ========= BUTTONS (scoped to .mlt-hero) ========= */
.mlt-hero .mlt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9999px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--mt-hff);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

.mlt-hero .mlt-btn--lg {
  height: 56px;
  padding: 0 32px;
  font-size: 18px;
}

.mlt-hero .mlt-btn--dark {
  background: var(--mt-color-shade);
  color: var(--mt-color-shade-contrast);
  box-shadow: 0 8px 30px hsla(var(--mt-color-shade-value), 0.3);
}

.mlt-hero .mlt-btn--dark:hover {
  background: var(--mt-color-shade);
  color: var(--mt-color-shade-contrast);
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px hsla(var(--mt-color-shade-value), 0.4);
}

.mlt-hero .mlt-btn--outline {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mlt-hero .mlt-btn--outline:hover {
  background: #f8fafc;
  color: var(--mt-color-shade);
  transform: translateY(-2px);
}

/* ========= RESPONSIVE ========= */
@media (max-width: 991.98px) {
  .mlt-hero {
    padding: 50px 0;
  }

  .mlt-hero__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .mlt-hero__visual {
    max-width: 440px;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .mlt-hero {
    padding: 40px 0;
  }

  .mlt-hero__container {
    padding: 0 16px;
  }

  .mlt-hero__heading {
    font-size: 36px;
  }

  .mlt-hero__sub {
    font-size: 17px;
  }

  .mlt-hero__list li {
    font-size: 15px;
  }

  .mlt-hero__ctas {
    flex-direction: column;
  }

  .mlt-hero__ctas .mlt-btn {
    width: 100%;
  }

  .mlt-hero__image {
    aspect-ratio: 1 / 1;
  }
}