/* -----------------------------------------------------------
   PROMO (AD1) — strogo namespacano, ništa izvan .promo-main--ad1
   ----------------------------------------------------------- */

/* Wrapper */
.promo-main--ad1{
  --promo-height: 560px;           /* ciljna (max) visina sekcije */
  --promo-media-max: 60%;          /* max širina desnog panela */
  --pad-x: clamp(16px, 3vw, 48px);
  --pad-y: clamp(16px, 3vw, 40px);
  --gap: 0;
  --radius: 18px;

  /* Razmak naslova kao postotak od VISINE sekcije (desktop) */
  --title-gap-ratio: 0.05;         /* 5% visine – prilagodi po želji */

  position: relative;
  display: flex;
  gap: var(--gap);
  width: 100%;                                                         /* 100% na >1920 */
  height: var(--promo-height-current, var(--promo-height)) !important; /* dinamički */
  box-sizing: border-box;

  /* VANJSKI RAZMAK (desktop, >1920) */
  margin-block: clamp(120px, 8vw, 180px);  /* top & bottom */
  margin-inline: 0;

  background: var(--promo-bg, #1f1f1f);    /* ⟵ boja iz backoffice-a */
  border-radius: var(--radius);
  overflow: hidden;
}

/* ≤ Full HD i niže: 95% širine + centriranje + zadrži vertikalni razmak */
@media (max-width: 1920px){
  .promo-main--ad1{
    width: 95%;
    margin: clamp(50px, 8vw, 120px) auto; /* top/bottom + centriraj */
  }
}

/* Lijevi panel (tekst) */
.promo-main--ad1 .promo-main__text{
  flex: 1 1 0%;
  min-width: 0;
  color: var(--promo-content-color, #fff);  /* ⟵ CONTENT boja iz backoffice-a */
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  overflow: auto; /* ako je teksta previše na uskim širinama */
  position: relative; 
  z-index: 10; /* ispod overlay-a, ali iznad pozadine */
}

/* Naslov — desktop: razmak ovisan o VISINI sekcije */
.promo-main--ad1 .promo-main__title{
  margin: 0 0 clamp(
    20px,
    calc(var(--promo-height-current, var(--promo-height)) * var(--title-gap-ratio)),
    28px
  );
  line-height: 1.08;
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 42px);
  color: var(--promo-title-color, #fff);    /* ⟵ HEADLINE boja iz backoffice-a */
}

/* Tijelo teksta */
.promo-main--ad1 .promo-main__content{
  font-size: clamp(13px, 1.0vw, 18px);
  line-height: clamp(1.35, 1.2vw, 1.55);
  opacity: 0.95;
}

/* Desni panel (slika) */
.promo-main--ad1 .promo-main__media{
  flex: 0 1 var(--promo-media-max);
  max-width: var(--promo-media-max);
  height: 100%;
  display: flex;
  align-items: stretch;      /* picture = 100% visine */
  justify-content: flex-end; /* naslonjeno na desni rub */
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  position: relative; 
  z-index: 10; /* ispod overlay-a, ali iznad pozadine */
}
.promo-main--ad1 .promo-main__media picture{
  display: block;
  width: 100%;
  height: 100%;
}
.promo-main--ad1 .promo-main__img{
  display: block;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;            /* bez croppanja (desktop) */
  object-position: right center;  /* drži desni rub */
  user-select: none;
  -webkit-user-drag: none;
}
/* kad JS zatraži cover (jako široko) */
.promo-main--ad1[data-fit="cover"] .promo-main__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: right center;
}

/* Klikabilni overlay — koristi se samo ako u DOM-u postoji <a class="promo-main__overlay"> */
.promo-main--ad1 .promo-main__overlay{
  position: absolute;
  inset: 0;
  z-index: 999;                 /* sigurno iznad svega */
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.promo-main--ad1 .promo-main__overlay:focus-visible{
  outline: 2px dashed #fff;
  outline-offset: 4px;
}

/* ===== Mobile / tablet (stack) ===== */
@media (max-width: 999px){
  .promo-main--ad1{
    display: block;
    width: 95%;
    height: auto !important;                    /* visina raste po sadržaju */
    margin: clamp(120px, 16vw, 160px) auto;     /* responsive razmak + centriranje */
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .promo-main--ad1 .promo-main__text{
    padding: 7% 6%;
    background: var(--promo-bg, #1f1f1f);       /* ⟵ varijabla umjesto fiksne boje */
    color: var(--promo-content-color, #fff);    /* ⟵ CONTENT boja i na mobile */
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: visible;
  }

  /* MOBILNI TIPOGRAFIJA – veći i responsive */
  .promo-main--ad1 .promo-main__title{
    font-size: clamp(24px, 7vw, 34px);     /* veći naslov na mobu */
    line-height: 1.12;
    margin-bottom: clamp(35px, 3vw, 48px); /* responsive razmak na mobu */
    color: var(--promo-title-color, #fff); /* ⟵ HEADLINE boja i na mobile */
  }
  .promo-main--ad1 .promo-main__content{
    font-size: clamp(15px, 4.2vw, 18px);   /* veći body na mobu */
    line-height: 1.55;
  }

  .promo-main--ad1 .promo-main__media{
    height: auto;
    max-width: 100%;
    background: var(--promo-bg, #1f1f1f);       /* ⟵ varijabla umjesto fiksne boje */
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
  }
  .promo-main--ad1 .promo-main__media picture{ width: 100%; height: auto; }
  .promo-main--ad1 .promo-main__img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
    object-position: center center;
  }
}