@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-gray-100: #f7f7f7;
  --color-gray-300: #e7e6e6;
  --color-gray-700: #333;
  --color-gray-900: #282828;
  --color-white: #fff;
  --spacing: .25em;
  --container-3xl: 48em;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --color-primaryGreen: #00A870;
  --color-dullGreen: #2B816D;
  --color-richGreen: #008055;
  --color-limeGreen: #A6EF00;
  --color-neonGreen: #00E194;
  --radius-lg: 0.5em;
}

#tp-blog .tp-blog-content .content .mini-banner { 
  margin: 2em 0 0 0;
  font-family: Manrope;
  font-size: 16px;
}

#tp-blog .tp-blog-content .content .mini-banner .mini-banner__link{
  display:block;
  border-radius: 0.375em;
  text-decoration:none;
  color:#fff;
}

#tp-blog .tp-blog-content .content .mini-banner .mini-banner__inner{
  padding: clamp(1.5em, 3vw, 3em) clamp(1.5em, 3vw, 2em);
  max-width: 35em;
}

#tp-blog .tp-blog-content .content .mini-banner h2.mini-banner__title {
  font-weight:300;
  line-height:1.2;
  font-size:clamp(1.8em, 4vw, 2.25em);
  color: #fff;
  margin: 0 0 0.5em 0;
}

#tp-blog .tp-blog-content .content .mini-banner h2.mini-banner__title span.limeGreen {
  color: var(--color-limeGreen);
}

#tp-blog .tp-blog-content .content .mini-banner h2.mini-banner__title span.neonGreen {
  color: var(--color-neonGreen);
}

#tp-blog .tp-blog-content .content .mini-banner p.mini-banner__subtitle {
  font-weight:400;
  line-height:1.5;
  font-size:clamp(0.875em, 2vw, 1em);
  color: #fff;
  margin-bottom: 1.5em;
}

#tp-blog .tp-blog-content .content .mini-banner .btn-primary {
  display: inline-block;
  background-color: var(--color-primaryGreen);
  color: #fff;
  border-radius: .25em;
  padding: .7em 1.2em;
  font-weight: 500;
  font-size: clamp(.975em, 1vw + .2em, 1em);
  width: fit-content;
  text-wrap: nowrap;
  transition: .2s ease-in-out;
  border: none;
  text-decoration: none;
}

#tp-blog .tp-blog-content .content.mini-banner .btn-primary:hover {
  background-color: var(--color-dullGreen);
  transition: .2s ease-in-out;
  color: #fff;
}

@media (max-width: 46em){
  #tp-blog .tp-blog-content .content .mini-banner .mini-banner__inner{ padding:1.5em; max-width: 100%; }
  #tp-blog .tp-blog-content .content .mini-banner .mini-banner__link{ background-position: 80% 50%; }
}

/* =============================================================================
   CTA Type Variants
   ============================================================================= */

/* --- Small variant — reduced h2 --- */
#tp-blog .tp-blog-content .content .mini-banner--small h2.mini-banner__title {
  font-size: clamp(1.65em, 3vw, 2em);
}

/* --- Blog Post CTA 1 — Deep Teal --- */
#tp-blog .tp-blog-content .content .mini-banner--blog-1 .mini-banner__link {
  background-color: #0a5a5a;
  background-image: url("img/solid-teal-cta_bg.svg");
  background-position: center;
  background-size: cover;
}

/* --- Blog Post CTA 2 — Dark/Black --- */
#tp-blog .tp-blog-content .content .mini-banner--blog-2 .mini-banner__link {
  background-color: #2b2b2b;
  background-image: url("img/solid-black-cta_bg.svg");
  background-position: center;
  background-size: cover;
}

/* --- Consultation CTAs — shared photo background base --- */
#tp-blog .tp-blog-content .content .mini-banner--consult-1,
#tp-blog .tp-blog-content .content .mini-banner--consult-2 {
  max-width: 28em;
}

/* --- Small variant — shared styles --- */

#tp-blog .tp-blog-content .content .mini-banner--consult-1 .mini-banner__link,
#tp-blog .tp-blog-content .content .mini-banner--consult-2 .mini-banner__link {
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  min-height: 24em;
  display: flex;
  align-items: flex-end;
}

#tp-blog .tp-blog-content .content .mini-banner--consult-1 .mini-banner__inner,
#tp-blog .tp-blog-content .content .mini-banner--consult-2 .mini-banner__inner {
  max-width: 100%;
  width: 100%;
  padding: clamp(1.5em, 3vw, 2em);
}

/* --- Consultation CTA 1 — Photo: professionals --- */
#tp-blog .tp-blog-content .content .mini-banner--consult-1 .mini-banner__link {
  background-image:
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, transparent 100%),
    url("img/consultation-cta-1_bg.jpg");
}

/* --- Consultation CTA 2 — Photo: server room --- */
#tp-blog .tp-blog-content .content .mini-banner--consult-2 .mini-banner__link {
  background-image:
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, transparent 100%),
    url("img/consultation-cta-2_bg.jpg");
}

/* --- Consultation CTA 3 — Wide landscape photo --- */
#tp-blog .tp-blog-content .content .mini-banner--consult-3 .mini-banner__link {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.6) 50%, transparent 100%),
    url("img/consultation-cta-3_bg.jpg");
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
}

/* --- Consultation CTA 4 — Solid teal --- */
#tp-blog .tp-blog-content .content .mini-banner--consult-4 .mini-banner__link {
  background-color: var(--color-primaryGreen);
  background-image: url("img/solid-teal-cta_bg.svg");
  background-position: center;
  background-size: cover;
}

@media (max-width: 46em) {
  #tp-blog .tp-blog-content .content .mini-banner--consult-1 .mini-banner__inner,
  #tp-blog .tp-blog-content .content .mini-banner--consult-2 .mini-banner__inner {
    max-width: 100%;
  }

  #tp-blog .tp-blog-content .content .mini-banner--consult-3 .mini-banner__link {
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 100%),
      url("img/consultation-cta-3_bg.jpg");
    }
}