/* ================================
   STORY CAROUSEL — VISUALS ONLY
   (container-aligned, mobile-first)
   ================================ */

:root{
  --sc-gap: clamp(8px, 2.4vw, 24px);
  --sc-radius: 12px;
  --sc-shadow: 0 8px 28px rgba(0,0,0,.10);
  --sc-blue: #0b64a7;
  --sc-blue-200:#cfe6f7;
  --sc-text: #0f1923;
  --sc-muted:#384656;
  --sc-white:#fff;

  /* offsets postavlja JS; fallbackovi ispod */
  --sc-off-before: 0px;
  --sc-off-after: 0px;

  /* MOBILE PEEK — vidi se dio idućeg slajda */
  --sc-peek: 40px;
}

/* Wrap & head */
.mic-sc-wrap{ position:relative; overflow:visible; }
.mic-sc-head{ display:flex; justify-content:flex-end; margin-top:60px; }
.mic-sc-nav{ margin-right: 20px; display:flex; gap:20px; }

/* Swiper shell */
.mic-sc-swiper{ overflow:visible; }
.mic-sc-swiper .swiper-wrapper{ align-items:stretch; }
.mic-sc-swiper .swiper-slide{ display: flex; margin-right: var(--sc-gap); }

/* Pointer ergonomics (miš drag) */
.mic-sc-swiper, .mic-sc-item { touch-action: pan-y; }
.mic-sc-item { cursor: grab;  }
.mic-sc-item div {
	font-family: "Neue-Frutiger-World", Sans-serif;
}
.mic-sc-item:active { cursor: grabbing; }
.mic-sc-item img { user-select:none; -webkit-user-drag:none; }

/* Kartice — desktop/tablet */
.mic-sc-item{
  width: calc( var(--w, clamp(260px, 26vw, 400px)) * var(--ratio, 1) );
  height: clamp(240px, 34vw, 520px);
  background:#f7f9fb;
  overflow:hidden; position:relative; flex:0 0 auto;
  box-shadow: var(--sc-shadow);
}
.mic-sc-item img{ width:100%; height:100%; object-fit:cover; display:block; }

.type-bg-overlay > div {
	font-weight: 200;
}

/* =======================
   LAYOUT 1 — TEXT (narrow)
   ======================= */
.type-text-only{ background:#fff; border:1px solid var(--sc-blue-200); }
.mic-sc-card{
  padding: clamp(34px, 2vw, 56px) clamp(34px, 2vw, 48px);
  height:100%; display:flex; flex-direction:column; justify-content: space-between;
}
.mic-sc-hl{
  color:var(--sc-text);
  font-weight:700; letter-spacing:.2px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height:1.2; margin:0 0 .45em;
}
.mic-sc-sub{ color:var(--sc-muted); font-size: clamp(20px,1.35vw,20px); line-height:1.55; }
.type-text-only .mic-sc-sub2 { font-size:20px; color:#006699; font-weight:500; }

/* =======================
   LAYOUT 2 — IMAGE ONLY 1:1
   ======================= */
.type-image-only{ background:#000; }
.mic-sc-square{ aspect-ratio: 1 / 1; }

/* ==============================================
   LAYOUT 3 — WIDE HERO (BG + DARKER OVERLAY)
   ============================================== */
.type-bg-overlay{
  background-image: var(--bg);
  background-size:cover; background-position:center;
  color: var(--sc-white);
}
.type-bg-overlay.mic-sc-has-overlay::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.50), rgba(0,0,0,.36));
}
.mic-sc-hero{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(34px, 2vw, 56px) clamp(34px, 2vw, 48px);
  max-width: 490px; box-sizing: content-box;
}
.mic-sc-hero-top { font-size:20px; line-height: 160%; }
.mic-sc-hero-top .mic-sc-hl{ color:#fff;  }
.mic-sc-hero-bottom .mic-sc-sub{ color:#fff; opacity:.95; font-family: "Neue-Frutiger-World", Sans-serif; }
.mic-sc-sub1 { font-weight: 500; }

/* ===================================================
   LAYOUT 4 — IMAGE + TOP-LEFT TEXT (bez overlay-a)
   =================================================== */
.type-image-caption .mic-sc-photo-callout{ position:relative; display: flex; height:100%; font-family: "Neue-Frutiger-World", Sans-serif; font-size: 20px; font-weight: 500;  }
.type-image-caption .mic-sc-callout{
  position:absolute; left: clamp(12px,2vw,48px); top: clamp(12px,2vw,56px);
  color:#fff; max-width:80%;
  /*text-shadow:0 2px 8px rgba(0,0,0,.35);*/
}
.mic-sc-callout .mic-sc-sub2 {
	font-size: 16px;
	font-weight: 700;
	margin-top: 8px;
}
.type-image-caption .mic-sc-chip{
  margin-top:6px; background:rgba(0,0,0,.55);
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; font-size:13px; border-radius:6px; line-height:1.1;
}
.mic-sc-txt-dark .mic-sc-callout{ color:#0f1923; text-shadow:none; }
.mic-sc-txt-dark .mic-sc-chip{ background:rgba(255,255,255,.85); color:#0f1923; }

/* ==========================================
   LAYOUT 5 — QUOTE (gornji tekst + donja slika)
   ========================================== */
.type-quote .mic-sc-quote{
  background:#fff;
  display:flex; flex-direction:column; height:100%;
  padding: clamp(34px, 64px, 64px) clamp(34px, 2.5vw, 48px);
  justify-content: space-between;
}
.mic-sc-quote-top{
  font-size: clamp(20px,2vw,24px); line-height:1.35;
  margin-bottom:12px; color:var(--sc-text); font-weight:700;
}
.mic-sc-sub.mic-sc-sm { font-size:28px; font-weight:700; }
.mic-sc-quote-bottom{ display:flex; column-gap:24px; }
.mic-sc-quote-media{ max-width:55px; }
.mic-sc-quote-media img{ height:100%; object-fit:cover; display:block; }
.mic-sc-quote-meta{ min-width:0; }
.mic-sc-person{ font-weight:500; color: #006699; font-size: 20px; font-family:  }
.mic-sc-role{ color:#006699; font-size:16px; font-weight: 700; margin:2px 0 6px; }
.mic-sc-sm{ font-size:.95em; color:var(--sc-muted); line-height:1.45; }
.mic-sc-quote {
	font-family: "Neue-Frutiger-World", Sans-serif;
}

/* ==========================
   Navigacijske tipke (SVG)
   ========================== */
.mic-sc-prev::before, .mic-sc-next::before { content:none !important; }

.mic-sc-prev, .mic-sc-next,
.ui-e-button.ui-e-carousel-button.ui-e-previous,
.ui-e-button.ui-e-carousel-button.ui-e-next{
  width:auto; height:auto;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; background:transparent;
  border-style: solid; border-width: 2px; border-radius: 100px; padding: 12px;
  border-color: var(--e-global-color-uicore_primary, #0b64a7);
  color: var(--e-global-color-uicore_primary, #0b64a7);
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mic-sc-prev svg, .mic-sc-next svg,
.ui-e-button.ui-e-carousel-button svg{ width:16px; height:16px; display:block; fill: currentColor; }
.mic-sc-prev:hover, .mic-sc-next:hover,
.ui-e-button.ui-e-carousel-button:hover{ background: var(--e-global-color-uicore_primary, #0b64a7); color:#fff; }
.mic-sc-prev:focus-visible, .mic-sc-next:focus-visible,
.ui-e-button.ui-e-carousel-button:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(11,100,167,.2); }
.swiper-button-disabled{ opacity:.4; pointer-events:none; }

/* =================
   RESPONSIVE TWEAKS
   ================= */
@media (max-width: 1024px){
  .mic-sc-item{ height: clamp(260px, 42vw, 460px); }
}

/* ===== MOBILE (<=768px): jednake širine + auto height + peek ===== */
@media (max-width: 768px){
  /* svaki slide iste širine: viewport - container offseti - gap - PEEK */
  .mic-sc-item{
    width: calc(100vw - var(--sc-off-before, 0px) - var(--sc-off-after, 0px) - var(--sc-gap) - var(--sc-peek));
    height: auto; min-height: 0;
    display: flex;
  }
  .mic-sc-item img{ height:auto; }     /* prirodna visina */
  .mic-sc-square{ aspect-ratio:auto; display: flex; } /* ukloni 1:1 */

  /* quote stack */
  .mic-sc-quote-bottom{ flex-direction: column; row-gap: 12px; }
  .mic-sc-quote-media{ order:2; }
  .mic-sc-quote-meta{ order:1; }

  /* razmak između slajdova */
  .mic-sc-swiper .swiper-slide{ margin-right: clamp(8px, 3vw, 14px); }
  .mic-sc-sub.mic-sc-sm { font-size: 20px; }
  .type-text-only .mic-sc-sub2 {
    margin-top: 30px;
      
  }
	.mic-sc-hero-top {
		max-height: 380px;
    	overflow: scroll;
    	margin-bottom: 30px;
	}
  }