/*
 Theme Name: Digital Solution / Vupro Child
 Theme URI: https://digitalsolution.rs/   
 Description: Child theme for Hello Elementor used for Digital Solution / Vupro landing and site.
 Author: Jack Russell / Digital Solution
 Author URI: https://jackrussell.digital/
 Template: hello-biz
 Version: 1.0.0
 Text Domain: digital-solution-child
*/

/* Your existing CSS starts below this comment */

/* === Design tokens: colors & typography === */

:root {
  /* Brand (Increase-inspired) */
  --brand-blue: #0a2540;  /* Deep navy primary */
  --brand-amber: #e9ff5a; /* Neon lime highlight */

  /* Brand blues / navies scale */
  --blue-100: #e4ebf4;
  --blue-200: #ccd7eb;
  --blue-300: #9fb6d7;
  --blue-400: #6f92c2;
  --blue-500: #3e6ca5;
  --blue-600: #174a7a;
  --blue-700: #0f3254;
  --blue-800: #081f36;
  --blue-900: #040f1f;

  /* Lime highlight scale (using amber vars) */
  --amber-100: #f9ffe0;
  --amber-200: #f2ffc0;
  --amber-300: #ebff99;
  --amber-400: #e4ff73;
  --amber-500: #e9ff5a;
  --amber-600: #c4db4c;
  --amber-700: #9cac3b;
  --amber-800: #6a7a29;
  --amber-900: #3b4616;

  /* Neutrals – cool greys */
  --gray-50:  #f5f7fb;
  --gray-100: #edf1f7;
  --gray-200: #dde3ed;
  --gray-300: #c9d2e0;
  --gray-400: #aab4c6;
  --gray-500: #8a94a6;
  --gray-600: #697085;
  --gray-700: #4a5263;
  --gray-800: #2d3340;
  --gray-900: #111827;

  /* Accent colors */
  --accent-teal: #1fd0b0;
  --accent-sky:  #35c4ff;

  /* Semantic states */
  --success: #1fd0b0;
  --warning: #e9ff5a;
  --error:   #f0526c;
  --info:    #2f9de3;

  /* Backgrounds / surfaces */
  --bg-body: #edf1f7;
  --bg-card: #ffffff;
  --border-subtle: var(--gray-200);

  /* Fluid font sizes — updated */
  --fs-display: clamp(3rem, 5vw, 4.2rem); /* NEW big H1 */
  --fs-h1:      clamp(2.2rem, 3.4vw, 3rem); /* moved down from old h1 */
  --fs-h2:      clamp(1.7rem, 2.6vw, 2.2rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body:    0.95rem;
  --fs-small:   0.78rem;
}

/* === Base reset-ish === */

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

/* === Base typography === */

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--bg-body);
  color: var(--gray-900);
  line-height: 1.6;
}

/* === Global typography scale (theme is source of truth) === */

/* =========================================================
   HEADINGS & LEAD TEXT — GLOBAL TYPOGRAPHY SYSTEM
   Controlled from child theme (overrides Elementor)
   ====================================================== */

/* Base heading styling (native + Elementor) */
h1,
h2,
h3,
h4,
.elementor-heading-title {
  margin: 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

/* ---------------- H1 (HERO / PRIMARY) ---------------- */
/* All H1s, whether plain HTML or Elementor Heading set to H1 */
h1,
h1.elementor-heading-title {
  /* Bigger than before – true hero size */
  font-size: clamp(3rem, 5vw, 4.2rem) !important;
  line-height: 1.03 !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* Hero H1 – balanced width/spacing (utility) */
.h1-balanced .elementor-heading-title {
  max-width: 14ch;              /* keep it to ~2–3 lines */
  line-height: 1.03 !important; /* match hero line height */
  letter-spacing: -0.03em !important;
  margin-bottom: 0.4rem;        /* closer to the lead text */
}

/* Responsive fine-tuning ONLY for hero H1 */
@media (max-width: 768px) {
  .h1-balanced .elementor-heading-title {
    font-size: clamp(1.9rem, 5.6vw, 2.4rem) !important;
  }
}

@media (max-width: 480px) {
  .h1-balanced .elementor-heading-title {
    font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
  }
}

/* ---------------- H2 ---------------- */
/* New H2 gets the previous H1 scale for stronger section titles */
h2,
h2.elementor-heading-title {
  font-size: var(--fs-h1) !important;  /* old H1 size */
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

/* ---------------- H3 ---------------- */
/* New H3 gets the previous H2 scale */
h3,
h3.elementor-heading-title {
  font-size: var(--fs-h2) !important;  /* old H2 size */
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* ---------------- H4 ---------------- */
/* New H4 gets the previous H3 scale */
h4,
h4.elementor-heading-title {
  font-size: var(--fs-h3) !important;  /* old H3 size */
  line-height: 1.32 !important;
  font-weight: 600 !important;
}

/* ---------------- Body copy ---------------- */
p {
  margin: 0 0 0.75rem;
  font-size: var(--fs-body);
  color: var(--gray-800);
}

/* ---------------- Small text ---------------- */
small {
  font-size: var(--fs-small);
  color: var(--gray-600);
}

/* =========================================================
   LEAD / SUBHEAD — BUSINESS CLAIM UNDER H1
   Use on the wrapper: class="lead lead-tight" etc.
   ====================================================== */

/* Base lead text — premium business claim */
.lead p,
.lead div,
.lead span {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.28;
  font-weight: 600;
  color: var(--gray-900);
  max-width: 760px;
  margin: 0 0 1.1rem 0;
  letter-spacing: -0.012em;
}

/* Tight variant — sits close to H1 (hero style) */
.lead-tight p,
.lead-tight div,
.lead-tight span {
  margin-top: 0.15rem;
  margin-bottom: 0.7rem;
}

/* Loose variant — more breathing room (inner sections) */
.lead-loose p,
.lead-loose div,
.lead-loose span {
  margin-top: 0.7rem;
  margin-bottom: 1.8rem;
  line-height: 1.35;
}

/* Wide variant — for longer statements / multi-line claims */
.lead-max p,
.lead-max div,
.lead-max span {
  max-width: 900px;
}

/* Links */

a {
  color: var(--brand-blue);
  text-decoration-color: rgba(10, 37, 64, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: rgba(10, 37, 64, 1);
}

/* === Typography utilities === */

.text-brand {
  color: var(--brand-blue) !important;
}

.text-muted {
  color: var(--gray-600) !important;
}

/* =========================================================
   BUTTONS — CTA SYSTEM
   Shared height, padding, typography and border logic
   ====================================================== */

.btn-primary-solid .elementor-button,
.btn-secondary-ghost .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 3.35rem;
  padding: 0.85rem 2rem !important;

  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 999px !important;

  box-sizing: border-box !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap;

  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

/* Force Elementor inner text to inherit the exact same typography */
.btn-primary-solid .elementor-button-content-wrapper,
.btn-secondary-ghost .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: inherit !important;
}

.btn-primary-solid .elementor-button-text,
.btn-secondary-ghost .elementor-button-text {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* Primary solid button */
.btn-primary-solid .elementor-button {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #ffffff !important;
}

/* Secondary ghost button */
.btn-secondary-ghost .elementor-button {
  background: transparent !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}

/* Shared hover/focus state */
.btn-primary-solid .elementor-button:hover,
.btn-primary-solid .elementor-button:focus,
.btn-secondary-ghost .elementor-button:hover,
.btn-secondary-ghost .elementor-button:focus {
  background: var(--brand-amber) !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 480px) {
  .btn-primary-solid .elementor-button,
  .btn-secondary-ghost .elementor-button {
    width: 100%;
    justify-content: center !important;
  }
}

/* =========================================================
   HEADER CONTACT BUTTON — PULSE OUTLINE
   Add class "btn-header-pulse" to the Elementor Button widget
   ====================================================== */

.btn-header-pulse .elementor-button-wrapper {
  overflow: visible;
}

.btn-header-pulse .elementor-button {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Pulse rings */
.btn-header-pulse .elementor-button::before,
.btn-header-pulse .elementor-button::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--brand-blue);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  z-index: -1;
  animation: dsHeaderButtonPulse 2.4s ease-out infinite;
}

.btn-header-pulse .elementor-button::after {
  animation-delay: 0.7s;
}

@keyframes dsHeaderButtonPulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  18% {
    opacity: 0.35;
  }

  100% {
    opacity: 0;
    transform: scale(1.18, 1.38);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .btn-header-pulse .elementor-button::before,
  .btn-header-pulse .elementor-button::after {
    animation: none;
  }
}

/* =========================================================
   SINGLE POST + BLOG LOOP REFINEMENTS
   Category pills, meta, readable article width, article rhythm,
   featured image spacing and polished loop cards
   ====================================================== */


/* =========================================================
   1. SINGLE POST — GLOBAL WIDTH SYSTEM
   ====================================================== */

.single-post {
  /* Main readable article column */
  --ds-article-width: 620px;

  /* Wider visual areas: featured image + footer/related posts */
  --ds-article-wide-width: 860px;
}

/* Main article wrapper */
.single-post .ds-post {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* Keep single post page padded on smaller screens */
.single-post .ds-single-post {
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}


/* =========================================================
   2. CATEGORY PILLS — SINGLE POST + LOOP CARDS
   ====================================================== */

/*
  Use:
  Single post category widget: ds-post-category
  Loop item category widget:   ds-loop-category

  Important:
  Add ds-loop-category to the CATEGORY widget inside the Loop Item template,
  not only to the Loop Grid.
*/

.single-post .ds-post-category,
.ds-loop-category {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.15rem;
}

/* Elementor / Text Editor / Post Terms internal wrappers */
.single-post .ds-post-category .elementor-widget-container,
.ds-loop-category .elementor-widget-container,
.single-post .ds-post-category p,
.ds-loop-category p,
.ds-loop-category .elementor-post-info__terms-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  column-gap: 12px !important;
  row-gap: 8px !important;

  width: fit-content;
  max-width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

/* Individual category links */
.single-post .ds-post-category a,
.ds-loop-category a,
.ds-loop-category .elementor-post-info__terms-list-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: fit-content;
  max-width: 100%;

  padding: 0.42rem 0.72rem;

  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;

  background: var(--amber-100);
  color: var(--brand-blue);

  font-size: clamp(0.68rem, 0.66rem + 0.12vw, 0.78rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

/* Fallback only for old browsers without flex gap */
@supports not (gap: 1rem) {
  .single-post .ds-post-category a + a,
  .ds-loop-category a + a,
  .ds-loop-category .elementor-post-info__terms-list-item + .elementor-post-info__terms-list-item {
    margin-left: 12px;
  }
}

/* Do not let Elementor/Text Editor spans become pills */
.single-post .ds-post-category span:not(.elementor-post-info__terms-list-item),
.ds-loop-category span:not(.elementor-post-info__terms-list-item) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.single-post .ds-post-category a:hover,
.ds-loop-category a:hover,
.ds-loop-category .elementor-post-info__terms-list-item:hover {
  background: var(--brand-amber);
  border-color: rgba(10, 37, 64, 0.2);
  color: var(--brand-blue);
  text-decoration: none !important;
  transform: translateY(-1px);
}


/* Smaller category pills inside loop cards */
.single-post .ds-related-posts .ds-loop-category,
.home .ds-loop-category,
.blog .ds-loop-category,
.archive .ds-loop-category {
  margin-bottom: 0.85rem;
}

.single-post .ds-related-posts .ds-loop-category a,
.single-post .ds-related-posts .ds-loop-category .elementor-post-info__terms-list-item,
.home .ds-loop-category a,
.home .ds-loop-category .elementor-post-info__terms-list-item,
.blog .ds-loop-category a,
.blog .ds-loop-category .elementor-post-info__terms-list-item,
.archive .ds-loop-category a,
.archive .ds-loop-category .elementor-post-info__terms-list-item {
  padding: 0.38rem 0.65rem;
  font-size: 0.68rem;
}


/* =========================================================
   3. SINGLE POST — META ROW
   ====================================================== */

.single-post .ds-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 0.55rem 1rem;

  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-bottom: clamp(1.35rem, 2.5vw, 2rem);

  color: var(--gray-600);
  font-size: clamp(0.8rem, 0.78rem + 0.12vw, 0.9rem);
  line-height: 1.4;
}

.single-post .ds-post-date,
.single-post .ds-post-date .elementor-widget-container,
.single-post .ds-post-date p,
.single-post .ds-post-date span {
  margin: 0 !important;
  color: var(--gray-600);
  font-size: inherit;
  line-height: inherit;
}


/* =========================================================
   4. SINGLE POST — FEATURED IMAGE
   ====================================================== */

.single-post .ds-post-featured {
  width: 100%;
  max-width: var(--ds-article-wide-width);
  margin: clamp(1.45rem, 3vw, 2.25rem) auto 0;
}

.single-post .ds-post-featured img,
.single-post .ds-post-featured .elementor-widget-container img {
  display: block;
  width: 100%;
  height: auto;

  max-height: 580px;
  object-fit: cover;

  border-radius: clamp(0.9rem, 1.5vw, 1.35rem);
  box-shadow: 0 18px 50px rgba(10, 37, 64, 0.11);
}


/* =========================================================
   5. SINGLE POST — ARTICLE CONTENT WIDTH + IMAGE GAP
   ====================================================== */

/*
  The featured image can stay wider.
  The actual reading column is intentionally narrower.
*/

.single-post .ds-post-layout,
.single-post .ds-post-layout-single {
  display: block !important;

  width: 100%;
  max-width: var(--ds-article-width);

  /* Reduced from previous 3.25rem–5rem range */
  margin: clamp(2.15rem, 4vw, 3.25rem) auto 0 !important;
}

.single-post .ds-post-content,
.single-post .ds-post-content .elementor-widget-container {
  width: 100%;
  max-width: var(--ds-article-width);
  margin-inline: auto;
}


/* =========================================================
   6. SINGLE POST — BODY TEXT RHYTHM
   ====================================================== */

.single-post .ds-post-content,
.single-post .ds-post-content .elementor-widget-container,
.single-post .ds-post-content p,
.single-post .ds-post-content li {
  color: var(--gray-800);

  font-size: clamp(1.04rem, 0.98rem + 0.22vw, 1.13rem);
  line-height: 1.78;
  letter-spacing: -0.003em;
}

.single-post .ds-post-content p {
  margin: 0 0 1.28rem;
}

.single-post .ds-post-content strong {
  color: var(--gray-900);
  font-weight: 800;
}

.single-post .ds-post-content a {
  color: var(--brand-blue);
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(10, 37, 64, 0.35);
  text-underline-offset: 4px;
}

.single-post .ds-post-content a:hover {
  text-decoration-color: var(--brand-blue);
}

/* First and last content elements */
.single-post .ds-post-content .elementor-widget-container > *:first-child {
  margin-top: 0 !important;
}

.single-post .ds-post-content .elementor-widget-container > *:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   7. SINGLE POST — ARTICLE HEADINGS
   ====================================================== */

/*
  Better blog rhythm:
  - Larger space before H2/H3 to mark a new idea.
  - Smaller space after heading so it visually belongs to the text below.
*/

.single-post .ds-post-content h2 {
  margin: clamp(3.1rem, 5vw, 4.35rem) 0 1rem !important;

  color: var(--gray-900);
  font-size: clamp(1.85rem, 2.8vw, 2.45rem) !important;
  line-height: 1.13 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

/* First H2 should not create double spacing after the featured image */
.single-post .ds-post-content .elementor-widget-container > h2:first-child {
  margin-top: 0 !important;
}

.single-post .ds-post-content h3 {
  margin: clamp(2.25rem, 3.6vw, 3rem) 0 0.78rem !important;

  color: var(--gray-900);
  font-size: clamp(1.32rem, 1.7vw, 1.62rem) !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: -0.032em !important;
  text-wrap: balance;
}

.single-post .ds-post-content h4 {
  margin: 2rem 0 0.62rem !important;

  color: var(--gray-900);
  font-size: clamp(1.12rem, 1.25vw, 1.28rem) !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em !important;
}

/* Reduce gap when headings are stacked */
.single-post .ds-post-content h2 + h3,
.single-post .ds-post-content h3 + h4 {
  margin-top: 1.15rem !important;
}

/* Text directly after heading */
.single-post .ds-post-content h2 + p,
.single-post .ds-post-content h3 + p,
.single-post .ds-post-content h4 + p {
  margin-top: 0;
}


/* =========================================================
   8. SINGLE POST — LISTS / BULLETS
   ====================================================== */

.single-post .ds-post-content ul,
.single-post .ds-post-content ol {
  margin: 0.85rem 0 1.8rem;
}

.single-post .ds-post-content ul {
  padding-left: 0;
  list-style: none;
}

.single-post .ds-post-content ol {
  padding-left: 1.45rem;
}

.single-post .ds-post-content li {
  position: relative;
  margin: 0;
}

/* More readable spacing between list items */
.single-post .ds-post-content li + li {
  margin-top: 0.58rem;
}

/* Custom bullets */
.single-post .ds-post-content ul li {
  padding-left: 1.65rem;
}

.single-post .ds-post-content ul li::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0.72em;

  width: 0.48rem;
  height: 0.48rem;

  border-radius: 999px;
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.08);
}

.single-post .ds-post-content ol li::marker {
  color: var(--brand-blue);
  font-weight: 800;
}

/* Paragraph/label before a list */
.single-post .ds-post-content p + ul,
.single-post .ds-post-content p + ol {
  margin-top: 0.25rem;
}

/* Content after a list needs air */
.single-post .ds-post-content ul + p,
.single-post .ds-post-content ol + p,
.single-post .ds-post-content ul + h3,
.single-post .ds-post-content ol + h3,
.single-post .ds-post-content ul + h2,
.single-post .ds-post-content ol + h2 {
  margin-top: 1.9rem !important;
}


/* =========================================================
   9. SINGLE POST — BLOCKQUOTES / ANSWER BOXES
   Optional, useful for "Ukratko" / AEO sections
   ====================================================== */

.single-post .ds-post-content blockquote,
.single-post .ds-post-content .ds-answer-box,
.single-post .ds-post-content .ds-post-summary,
.single-post .ds-post-content .ds-key-takeaway {
  margin: clamp(2rem, 4.5vw, 3.25rem) 0;
  padding: clamp(1.25rem, 3vw, 2rem);

  border: 1px solid rgba(10, 37, 64, 0.12);
  border-left: 4px solid var(--brand-amber);
  border-radius: 1.25rem;

  background:
    linear-gradient(135deg, rgba(233, 255, 90, 0.26), rgba(255, 255, 255, 0) 46%),
    #ffffff;

  box-shadow: 0 14px 36px rgba(10, 37, 64, 0.06);
}

.single-post .ds-post-content blockquote p,
.single-post .ds-post-content .ds-answer-box p,
.single-post .ds-post-content .ds-post-summary p,
.single-post .ds-post-content .ds-key-takeaway p {
  margin-bottom: 0;
}


/* =========================================================
   10. SINGLE POST — ARTICLE IMAGES / MEDIA INSIDE CONTENT
   ====================================================== */

.single-post .ds-post-content figure,
.single-post .ds-post-content .wp-block-image {
  margin: clamp(2.1rem, 4vw, 3.25rem) 0;
}

.single-post .ds-post-content img {
  display: block;
  max-width: 100%;
  height: auto;

  border-radius: 1.15rem;
}


/* =========================================================
   11. SINGLE POST — FOOTER / CTA / RELATED POSTS
   ====================================================== */

.single-post .ds-post-footer {
  width: 100%;
  max-width: var(--ds-article-wide-width);
  margin: clamp(3.5rem, 6vw, 5.25rem) auto 0;
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);

  border-top: 1px solid rgba(10, 37, 64, 0.12);
}

.single-post .ds-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.single-post .ds-post-tags a {
  display: inline-flex;
  align-items: center;

  padding: 0.45rem 0.75rem;

  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;

  background: #ffffff;
  color: var(--gray-700);

  font-size: 0.82rem;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
}

.single-post .ds-post-tags a:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.single-post .ds-post-footer .elementor-button-wrapper {
  text-align: center;
}

.single-post .ds-related-posts {
  margin-top: clamp(2.75rem, 5vw, 4rem);
}


/* =========================================================
   12. POLISHED LOOP CARDS
   Homepage blog cards + related post cards
   ====================================================== */

/*
  Elementor Loop Item classes:

  Outer card container:    ds-loop-card
  Image wrapper/container: ds-loop-card-image
  Content container:       ds-loop-card-body
  Category widget:         ds-loop-category
  Title widget:            ds-loop-title
  Excerpt widget:          ds-loop-excerpt
  Read more heading/link:  ds-loop-readmore
*/

/* Carousel/grid item stretch */
.swiper-slide:has(.ds-loop-card),
.e-loop-item:has(.ds-loop-card) {
  height: auto;
}

/* Main card */
.ds-loop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;

  overflow: hidden;

  border: 1px solid rgba(10, 37, 64, 0.22);
  border-radius: 0;

  background: rgba(255, 255, 255, 0.18);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.ds-loop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 37, 64, 0.36);
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 20px 44px rgba(10, 37, 64, 0.08);
}

/* Image area */
.ds-loop-card-image,
.ds-loop-card-image .elementor-widget-container {
  width: 100%;
  overflow: hidden;
}

.ds-loop-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;

  transition: transform 0.35s ease;
}

.ds-loop-card:hover .ds-loop-card-image img {
  transform: scale(1.035);
}

/* Body */
.ds-loop-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: clamp(1.1rem, 1.6vw, 1.4rem);
}

/* Remove Elementor default widget margins inside card body */
.ds-loop-card-body > .elementor-element,
.ds-loop-card-body .elementor-widget-container,
.ds-loop-card-body p,
.ds-loop-card-body h1,
.ds-loop-card-body h2,
.ds-loop-card-body h3,
.ds-loop-card-body h4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Category row */
.ds-loop-card .ds-loop-category {
  margin: 0 0 1rem !important;
}

/* Title */
.ds-loop-title {
  width: 100%;
  margin: 0 0 0.9rem !important;

  color: var(--gray-900);
  font-size: clamp(1.22rem, 1vw + 0.95rem, 1.42rem) !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
}

.ds-loop-title .elementor-widget-container,
.ds-loop-title .elementor-heading-title,
.ds-loop-title .elementor-heading-title a,
.ds-loop-title a {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
}

/*
  Clamp title to 4 lines only as a safety limit.
  Do NOT reserve 4 lines of height.
*/
.ds-loop-title .elementor-heading-title,
.ds-loop-title .elementor-heading-title a,
.ds-loop-title a {
  display: -webkit-box;
  overflow: hidden;

  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.ds-loop-title a:hover {
  color: var(--brand-blue) !important;
}

/* Excerpt */
.ds-loop-excerpt {
  width: 100%;
  margin: 0 !important;

  color: var(--gray-800);
  font-size: 0.95rem;
  line-height: 1.42;
  letter-spacing: -0.005em;
}

.ds-loop-excerpt .elementor-widget-container,
.ds-loop-excerpt p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.ds-loop-excerpt p {
  display: -webkit-box;
  overflow: hidden;

  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Read more row */
.ds-loop-readmore {
  margin-top: auto !important;
  padding-top: 1.25rem !important;

  color: var(--brand-blue);
  font-size: 0.95rem !important;
  line-height: 1 !important;
  font-weight: 750 !important;
}

.ds-loop-readmore .elementor-widget-container,
.ds-loop-readmore .elementor-heading-title,
.ds-loop-readmore .elementor-heading-title a,
.ds-loop-readmore a {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

/*
  Use Elementor text: "Pročitajte"
  CSS adds the arrow.
*/
.ds-loop-readmore .elementor-heading-title a::after,
.ds-loop-readmore a::after {
  content: ">";
  display: inline-block;
  margin-left: 0.75rem;
  transition: transform 0.18s ease;
}

.ds-loop-card:hover .ds-loop-readmore .elementor-heading-title a::after,
.ds-loop-card:hover .ds-loop-readmore a::after {
  transform: translateX(3px);
}

/* Mobile */
@media (max-width: 767px) {
  .ds-loop-card-body {
    padding: 1.1rem;
  }

  .ds-loop-card .ds-loop-category {
    margin-bottom: 0.9rem !important;
  }

  .ds-loop-title {
    margin-bottom: 0.85rem !important;
    font-size: clamp(1.18rem, 5vw, 1.35rem) !important;
  }

  .ds-loop-excerpt p {
    -webkit-line-clamp: 3;
  }

  .ds-loop-readmore {
    padding-top: 1.15rem !important;
  }
}

/* =========================================================
   13. MOBILE TUNING
   ====================================================== */

@media (max-width: 767px) {
  .single-post {
    --ds-article-width: 100%;
    --ds-article-wide-width: 100%;
  }

  .single-post .ds-post-layout,
  .single-post .ds-post-layout-single {
    margin-top: 2.15rem !important;
  }

  .single-post .ds-post-content,
  .single-post .ds-post-content .elementor-widget-container,
  .single-post .ds-post-content p,
  .single-post .ds-post-content li {
    font-size: 1rem;
    line-height: 1.72;
  }

  .single-post .ds-post-content p {
    margin-bottom: 1.2rem;
  }

  .single-post .ds-post-content h2 {
    margin-top: 2.55rem !important;
    margin-bottom: 0.85rem !important;
    font-size: clamp(1.6rem, 7vw, 2.05rem) !important;
  }

  .single-post .ds-post-content .elementor-widget-container > h2:first-child {
    margin-top: 0 !important;
  }

  .single-post .ds-post-content h3 {
    margin-top: 2rem !important;
    margin-bottom: 0.65rem !important;
    font-size: clamp(1.22rem, 5vw, 1.45rem) !important;
  }

  .single-post .ds-post-content ul,
  .single-post .ds-post-content ol {
    margin-bottom: 1.65rem;
  }

  .single-post .ds-post-category .elementor-widget-container,
  .ds-loop-category .elementor-widget-container,
  .single-post .ds-post-category p,
  .ds-loop-category p,
  .ds-loop-category .elementor-post-info__terms-list {
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  .ds-loop-card-body {
    padding: 1.1rem;
  }

  .ds-loop-excerpt p {
    -webkit-line-clamp: 3;
  }
}
/* =========================================================
   REFERENCE / PORTFOLIO GRID
   Mosaic overlay version for Reference CPT
   ====================================================== */

/*
  Elementor classes:

  Loop Grid widget:        ds-reference-loop
  Outer card container:    ds-ref-card
  Image wrapper container: ds-ref-media
  Image widget:            ds-ref-image
  Overlay/body container:  ds-ref-body
  Industry widget:         ds-ref-industry
  Project title widget:    ds-ref-title
  Hidden project link:     ds-ref-link

  JS classes:
  ds-ref-large-left
  ds-ref-large-right
*/


/* ---------------------------------------------------------
   1. LOOP GRID
   JS sets --ds-ref-cell in pixels.
   --------------------------------------------------------- */

.ds-reference-loop {
  --ds-ref-gap: clamp(1.4rem, 2.4vw, 2.15rem);
  --ds-ref-cell: 260px;

  width: 100%;
}

.ds-reference-loop .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--ds-ref-cell) !important;
  gap: var(--ds-ref-gap) !important;
  grid-auto-flow: dense;
  align-items: stretch !important;
}

.ds-reference-loop .e-loop-item {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Large left block: 2 columns x 2 rows */
.ds-reference-loop .e-loop-item.ds-ref-large-left {
  grid-column: 1 / span 2 !important;
  grid-row: span 2 !important;
}

/* Large right block: 2 columns x 2 rows */
.ds-reference-loop .e-loop-item.ds-ref-large-right {
  grid-column: 2 / span 2 !important;
  grid-row: span 2 !important;
}


/* ---------------------------------------------------------
   2. CARD
   --------------------------------------------------------- */

.ds-ref-card {
  position: relative;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  cursor: none;

  transition:
    transform 0.24s ease,
    opacity 0.24s ease;
}

.ds-ref-card:hover {
  transform: translateY(-4px);
}


/* ---------------------------------------------------------
   3. MEDIA
   --------------------------------------------------------- */

.ds-ref-media {
  position: relative !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  min-height: 0 !important;
  overflow: hidden !important;

  isolation: isolate;

  border: 1px solid rgba(10, 37, 64, 0.16);
  background: rgba(255, 255, 255, 0.22);
}


/* ---------------------------------------------------------
   4. IMAGE
   --------------------------------------------------------- */

.ds-ref-image,
.ds-ref-image .elementor-widget-container,
.ds-ref-image .elementor-image,
.ds-ref-image a,
.ds-ref-image picture {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.ds-ref-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  filter: saturate(0.96) contrast(1.02);

  transition:
    transform 0.5s ease,
    filter 0.4s ease;
}

.ds-ref-card:hover .ds-ref-image img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.04);
}


/* ---------------------------------------------------------
   5. IMAGE OVERLAY GRADIENT
   --------------------------------------------------------- */

.ds-ref-media::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      to top,
      rgba(10, 37, 64, 0.82) 0%,
      rgba(10, 37, 64, 0.56) 24%,
      rgba(10, 37, 64, 0.18) 48%,
      rgba(10, 37, 64, 0.00) 74%
    );

  pointer-events: none;

  transition: background 0.35s ease;
}

.ds-ref-card:hover .ds-ref-media::after {
  background:
    linear-gradient(
      to top,
      rgba(10, 37, 64, 0.88) 0%,
      rgba(10, 37, 64, 0.60) 24%,
      rgba(10, 37, 64, 0.2) 48%,
      rgba(10, 37, 64, 0.00) 74%
    );
}


/* ---------------------------------------------------------
   6. OVERLAY TEXT BODY
   --------------------------------------------------------- */

.ds-ref-body {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.34rem;

  padding: clamp(0.95rem, 1.4vw, 1.25rem);
  padding-right: 4.5rem !important;
  padding-bottom: 1.1rem !important;
}

/* Remove Elementor widget spacing */
.ds-ref-body > .elementor-element,
.ds-ref-body .elementor-widget-container,
.ds-ref-body p,
.ds-ref-body h1,
.ds-ref-body h2,
.ds-ref-body h3,
.ds-ref-body h4 {
  margin: 0 !important;
}


/* ---------------------------------------------------------
   7. INDUSTRY / CATEGORY GLASS PILL
   --------------------------------------------------------- */

.ds-ref-industry {
  display: block;
  width: 100%;
  margin: 0 !important;
}

.ds-ref-industry .elementor-widget-container {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 !important;

  width: fit-content;
  max-width: 100%;

  padding: 0.34rem 0.56rem;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;

  background: rgba(10, 37, 64, 0.20);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ds-ref-industry-pill,
.ds-ref-industry a,
.ds-ref-industry span {
  display: inline !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: clamp(0.68rem, 0.64rem + 0.08vw, 0.78rem) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  text-decoration: none !important;
}

/* Remove old separators */
.ds-ref-industry-pill:not(:last-child)::after,
.ds-ref-industry a:not(:last-child)::after,
.ds-ref-industry span:not(:last-child)::after {
  content: none !important;
}

/* Clean slash separator */
.ds-ref-industry-pill + .ds-ref-industry-pill::before {
  content: " / ";
  color: rgba(255, 255, 255, 0.42);
}


/* ---------------------------------------------------------
   8. TITLE
   --------------------------------------------------------- */

.ds-ref-title {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: clamp(1.05rem, 1.05vw, 1.32rem) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;

  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);

  transition:
    transform 0.24s ease,
    color 0.24s ease;
}

.ds-ref-card:hover .ds-ref-title {
  transform: translateY(-1px);
}

.ds-ref-title .elementor-widget-container,
.ds-ref-title .elementor-heading-title,
.ds-ref-title .elementor-heading-title a,
.ds-ref-title a {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
}

/* Larger title for large blocks */
.ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-title,
.ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-title {
  max-width: 82%;

  font-size: clamp(1.45rem, 1.8vw, 2rem) !important;
  line-height: 1.02 !important;
}

.ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-body,
.ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-body {
  padding: clamp(1.15rem, 1.7vw, 1.55rem);
  padding-right: 5rem !important;
  padding-bottom: 1.35rem !important;
}


/* ---------------------------------------------------------
   9. BOTTOM-RIGHT HOVER ARROW
   --------------------------------------------------------- */

.ds-ref-card::before {
  content: none !important;
  display: none !important;
}

.ds-ref-card::after {
  content: "↘" !important;

  position: absolute !important;
  right: 1rem !important;
  bottom: 1rem !important;
  left: auto !important;
  top: auto !important;

  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 2.85rem !important;
  height: 2.85rem !important;

  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  color: #ffffff !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  text-align: center !important;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  opacity: 0 !important;
  transform: translateY(8px) scale(0.92) !important;

  pointer-events: none !important;

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease !important;
}

.ds-ref-card:hover::after {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;

  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Slightly larger arrow on large cards */
.ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-card::after,
.ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-card::after {
  width: 3.15rem !important;
  height: 3.15rem !important;
  font-size: 1.22rem !important;
}


/* ---------------------------------------------------------
   10. HIDDEN LINK
   --------------------------------------------------------- */

.ds-ref-link {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   11. CUSTOM PROJECT CURSOR
   --------------------------------------------------------- */

.ds-project-cursor {
  position: fixed;
  left: 0;
  top: 0;

  z-index: 99999;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 8.25rem;
  height: 8.25rem;

  padding: 1.25rem 1rem 0.95rem !important;
  border-radius: 999px;

  background: rgba(10, 37, 64, 0.55) !important;
  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.16);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  box-shadow: 0 18px 46px rgba(10, 37, 64, 0.18);

  font-size: 0.7rem !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em;
  text-align: center !important;
  text-transform: uppercase;

  pointer-events: none;

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.ds-project-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ds-project-cursor span {
  display: block;
  max-width: 5.4rem;
  margin: 0 auto;
  text-align: center;

  transform: translateY(0.55rem);
}

.ds-project-cursor::after {
  content: "↘";
  display: block !important;

  margin: 0.55rem 0 0 !important;

  font-size: 1rem;
  line-height: 1;

  transform: translateY(0.32rem);
}


/* ---------------------------------------------------------
   12. TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  .ds-reference-loop .elementor-loop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ds-reference-loop .e-loop-item,
  .ds-reference-loop .e-loop-item.ds-ref-large-left,
  .ds-reference-loop .e-loop-item.ds-ref-large-right {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-title,
  .ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-title {
    max-width: 100%;

    font-size: clamp(1.05rem, 1.05vw, 1.32rem) !important;
    line-height: 1.08 !important;
  }

  .ds-ref-body,
  .ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-body,
  .ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-body {
    padding-right: 4rem !important;
  }
}


/* ---------------------------------------------------------
   13. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .ds-reference-loop .elementor-loop-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .ds-reference-loop .e-loop-item,
  .ds-reference-loop .e-loop-item.ds-ref-large-left,
  .ds-reference-loop .e-loop-item.ds-ref-large-right {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .ds-ref-card {
    cursor: pointer;
  }

  .ds-project-cursor {
    display: none !important;
  }

  .ds-ref-body,
  .ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-body,
  .ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-body {
    padding-right: 3.5rem !important;
    padding-bottom: 0.95rem !important;
  }

  .ds-ref-card::after {
    width: 2.5rem !important;
    height: 2.5rem !important;
    right: 0.85rem !important;
    bottom: 0.85rem !important;
    font-size: 1rem !important;
  }

  .ds-ref-industry .elementor-widget-container {
    padding: 0.32rem 0.5rem;
  }

  .ds-ref-title,
  .ds-reference-loop .e-loop-item.ds-ref-large-left .ds-ref-title,
  .ds-reference-loop .e-loop-item.ds-ref-large-right .ds-ref-title {
    max-width: 100%;

    font-size: clamp(1.2rem, 5.7vw, 1.6rem) !important;
    line-height: 1.08 !important;
  }
}

/* =========================================================
   TESTIMONIAL LOOP / CARD
   Minimal DS-style testimonial component
   For nested Elementor structure
   ====================================================== */

/*
  Required Elementor CSS classes:

  Loop Grid widget:          ds-testimonials-loop

  Outer card container:      ds-testimonial-card
  Logo image widget:         ds-testimonial-logo
  Quote text widget:         ds-testimonial-quote

  Author row container:      ds-testimonial-author
  Avatar image widget:       ds-testimonial-avatar
  Author meta container:     ds-testimonial-meta
  Name widget:               ds-testimonial-name
  Role widget:               ds-testimonial-role
  Company widget:            ds-testimonial-company
*/


/* ---------------------------------------------------------
   1. LOOP WRAPPER
   --------------------------------------------------------- */

.ds-testimonials-loop {
  width: 100%;
}

.ds-testimonials-loop .elementor-loop-container {
  display: grid !important;
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  align-items: stretch !important;
}

.ds-testimonials-loop .e-loop-item {
  min-width: 0;
}


/* ---------------------------------------------------------
   2. CARD
   --------------------------------------------------------- */

.ds-testimonial-card {
  position: relative;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100%;
  max-width: 620px;

  margin-inline: auto;

  padding:
    clamp(1.75rem, 3vw, 2.65rem)
    clamp(1.35rem, 3vw, 2.4rem);

  text-align: center;

  color: var(--brand-blue);

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(10, 37, 64, 0.14);
  border-radius: 0;

  box-shadow: none;

  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}

.ds-testimonial-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(10, 37, 64, 0.2);
}


/* Reset Elementor default spacing inside card */
.ds-testimonial-card > .elementor-element,
.ds-testimonial-card .elementor-widget-container,
.ds-testimonial-card p {
  margin: 0 !important;
}


/* ---------------------------------------------------------
   3. LOGO
   --------------------------------------------------------- */

.ds-testimonial-logo {
  margin: 0 0 clamp(1rem, 1.8vw, 1.35rem) !important;
}

.ds-testimonial-logo .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: clamp(2.9rem, 4vw, 3.6rem);
  height: clamp(2.9rem, 4vw, 3.6rem);

  background: var(--brand-blue);
  border: 1px solid rgba(10, 37, 64, 0.18);
}

.ds-testimonial-logo img {
  display: block;

  width: 72% !important;
  height: 72% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain;
}


/* ---------------------------------------------------------
   4. QUOTE
   --------------------------------------------------------- */

.ds-testimonial-quote {
  max-width: 500px;

  margin: 0 auto clamp(1.25rem, 2vw, 1.65rem) !important;
  padding-bottom: clamp(1.1rem, 1.8vw, 1.4rem);

  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
}

.ds-testimonial-quote .elementor-widget-container,
.ds-testimonial-quote p {
  margin: 0 !important;
}

.ds-testimonial-quote,
.ds-testimonial-quote p {
  color: var(--brand-blue);

  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.24rem);
  line-height: 1.28;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.ds-testimonial-quote p::before {
  content: "“";
}

.ds-testimonial-quote p::after {
  content: "”";
}


/* ---------------------------------------------------------
   5. AUTHOR ROW
   --------------------------------------------------------- */

.ds-testimonial-author {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0.85rem;

  width: fit-content !important;
  max-width: 100%;

  margin: 0 auto !important;
  padding: 0 !important;

  text-align: left;
}

/* Elementor container inner fallback */
.ds-testimonial-author > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.85rem !important;

  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   6. AVATAR
   --------------------------------------------------------- */

.ds-testimonial-avatar {
  flex: 0 0 auto;

  width: auto !important;
  margin: 0 !important;
}

.ds-testimonial-avatar .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ds-testimonial-avatar img {
  display: block;

  width: clamp(3rem, 4vw, 3.45rem) !important;
  height: clamp(3rem, 4vw, 3.45rem) !important;

  border-radius: 999px;

  object-fit: cover;
  object-position: center;

  border: 1px solid rgba(10, 37, 64, 0.16);
}


/* ---------------------------------------------------------
   7. AUTHOR META
   --------------------------------------------------------- */

.ds-testimonial-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0.08rem;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left;
}

/* Elementor container inner fallback */
.ds-testimonial-meta > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0.08rem !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.ds-testimonial-name,
.ds-testimonial-role,
.ds-testimonial-company {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.ds-testimonial-name .elementor-widget-container,
.ds-testimonial-role .elementor-widget-container,
.ds-testimonial-company .elementor-widget-container,
.ds-testimonial-name p,
.ds-testimonial-role p,
.ds-testimonial-company p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.ds-testimonial-name,
.ds-testimonial-name p {
  color: var(--brand-blue);

  font-size: clamp(0.9rem, 0.86rem + 0.1vw, 0.98rem);
  line-height: 1.22;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.ds-testimonial-role,
.ds-testimonial-role p,
.ds-testimonial-company,
.ds-testimonial-company p {
  color: rgba(10, 37, 64, 0.68);

  font-size: clamp(0.78rem, 0.75rem + 0.08vw, 0.86rem);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.005em;
}


/* ---------------------------------------------------------
   8. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .ds-testimonial-card {
    max-width: 100%;

    padding:
      clamp(1.35rem, 6vw, 1.9rem)
      clamp(1.15rem, 5vw, 1.45rem);
  }

  .ds-testimonial-quote,
  .ds-testimonial-quote p {
    font-size: clamp(1rem, 5vw, 1.18rem);
    line-height: 1.28;
  }

  .ds-testimonial-author,
  .ds-testimonial-author > .e-con-inner {
    gap: 0.75rem !important;
  }

  .ds-testimonial-avatar img {
    width: 3rem !important;
    height: 3rem !important;
  }
}