/* === Featured: width fix (bez full-bleed-a) === */
.featured-module,
.featured-module * {
  box-sizing: border-box;
}

.featured-module {
  background: #fff;
  display: flex;
  flex-direction: column;
  /* Uklonjeno full-bleed poravnanje (width:100vw itd.) */
}

/* Wrapper usklađen s ostalim modulima */
.feat-wrap {
  max-width: 1536px;
  padding: 0 80px;
}

/* Header */
.feat-header {
  text-align: center;
  margin: 40px 0 34px;
}

.feat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  border-radius: 56px;
  border: 1px solid #6c94e5;
}

.feat-badge span {
  color: #2665e2;
  font: 700 18px/1 Roboto, system-ui, Arial, sans-serif;
  letter-spacing: .005em;
}

.feat-title {
  margin: 18px 0 10px;
  color: #060402;
  font: 700 clamp(32px, 4vw, 56px) / 120% Roboto, system-ui, Arial, sans-serif;
  letter-spacing: -.015em;
}

.feat-sub {
  color: rgba(14, 10, 2, .6);
  font: 400 18px/150% Roboto, system-ui, Arial, sans-serif;
  max-width: 960px;
  margin: 0 auto;
}

.feat-accent {
  background: linear-gradient(90deg, #2665e2 0%, #c26de6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block;
}

.feat-accent--flip {
  background: linear-gradient(90deg, #c26de6 0%, #2665e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* Grid */
.feat-grid {
  --feat-h: 523px;
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 20px;
  padding: 0 0 50px;
  align-items: stretch;
}

.feat--no-header .feat-grid {
  padding-top: 50px;
}

.feat-hero-card {
  grid-column: 1 / -1;
}

/* Card */
.feat-card,
.feat-hero-card {
  display: block;
}

.feat-field {
  position: relative;
  width: 100%;
  height: var(--feat-h);
  border-radius: 20px;
  overflow: hidden;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  transition: transform .18s ease, box-shadow .22s ease;
  backface-visibility: hidden;
  transform: translateZ(0);
  box-shadow: 0 24px 40px -24px rgba(2, 6, 23, .35);
}

.feat-field:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 48px -30px rgba(2, 6, 23, .38);
}

.feat-base-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(206.46deg, rgba(38, 101, 226, 0) 0%, rgba(4, 4, 4, 1) 80%);
}

.feat-hover-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    linear-gradient(206.46deg, rgba(38, 101, 226, 0) 0%, rgba(4, 4, 4, .5) 80%),
    linear-gradient(90deg, rgba(38, 101, 226, .75) 0%, rgba(194, 109, 230, .75) 100%);
}

.feat-field:hover .feat-hover-overlay {
  opacity: 1;
}

/* Content */
.feat-post {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.feat-texts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.feat-text-big {
  color: #f5f5f5;
  font: 700 28px/130% "Roboto-Bold", sans-serif;
}

.feat-text-small {
  color: #f5f5f5;
  font: 600 12px/120% "Roboto-SemiBold", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Stats (optional) */
.feat-stats-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 32px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.feat-field:hover .feat-stats-wrap {
  opacity: 1;
  pointer-events: auto;
}

.feat-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.feat-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feat-bar {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 65px;
  background: rgba(10, 18, 32, .5);
}

.feat-bar > span {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  border-radius: 65px;
  background: #fff;
  width: 0%;
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

.feat-bar > i {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .35) inset,
    0 2px 8px rgba(0, 0, 0, .25);
  transition: left .9s cubic-bezier(.22, 1, .36, 1);
}

.feat-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}

.feat-stat-label {
  color: #f5f5f5;
  font: 600 12px/1.2 "Roboto-SemiBold", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.feat-stat-badge {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9999px;
  background: rgba(10, 18, 32, .5);
  color: #f5f5f5;
  font: 700 16px/1 "Roboto-Bold", sans-serif;
}

.feat-num {
  display: inline-block;
  min-width: 1ch;
}

/* Button */
.feat-read-btn {
  position: relative;
  overflow: hidden;
  background: #2665e2;
  border-radius: 8px;
  height: 40px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
  width: auto;
  max-width: max-content;
  align-self: center;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35);
}

.feat-read-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2665e2 0%, #c26de6 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}

.feat-read-btn > * {
  position: relative;
  z-index: 1;
}

.feat-read-btn:hover::before {
  opacity: 1;
}

.feat-btn-label {
  color: #f5f5f5;
  font: 700 14px/150% "Roboto-Bold", sans-serif;
  white-space: nowrap;
}

/* Bottom CTA */
.feat-btn-wrap {
  margin-bottom: 40px;
  text-align: center;
}

.feat-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 40px;
  border-radius: 8px;
  background: linear-gradient(90deg, #2665e2 0%, #c26de6 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35);
  backface-visibility: hidden;
  transform: translateZ(0);
  overflow: hidden;
}

.feat-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: linear-gradient(90deg, #c26de6 0%, #2665e2 100%);
  opacity: 0;
  transition: opacity .2s ease;
}

.feat-cta__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.feat-cta:hover::after {
  opacity: 1;
}

/* Responsive */
@media (max-width: 1280px) {
  .feat-wrap {
    padding: 0 80px;
  }
}

@media (max-width: 1100px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }
  .feat-field {
    height: var(--feat-h);
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .feat-wrap{ padding:0 20px; }

@media (max-width: 560px) {

  .feat-wrap {
    padding: 0 20px;
  }

  .feat-grid {
    --feat-h: 600px;
  }

  /* HERO FIX: na mobilu zadrži široki horizontalni pravougaonik */
  .feat-hero-card .feat-field {
    height: auto;
    aspect-ratio: 21 / 9;
  }

  .feat-field,
  .feat-hover-overlay,
  .feat-stats-wrap {
    padding: 24px;
  }

  .feat-text-big {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.35;
  }
}

/* UPDATED 2026-10-31: section eyebrow, was an outlined pill (Leon: "Na Success Stories, Solutions i Prototyping
   stranicama treba updateati eyebrow sa ovim novim stilom (Home, ALMA)"). Same spec as the service pages (2026-10-22)
   and .ree-eyebrow (design-system 2.1): navy 18px label, .08em tracking, uppercase by style so the text can be
   written in Title Case, gradient rule at 70% of the label, 36px rule to title (24px under 768). Appended last so it
   wins over the pill rules above and over the same rules loaded from the other story modules on the page. */
.feat-badge{ display:inline-block; height:auto; padding:0; border:0; border-radius:0; background:none; }
.feat-badge span{ display:inline; font:700 18px/1 Roboto,system-ui,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#0A1220; }
.feat-badge::after{ content:""; display:block; width:70%; height:3px; border-radius:2px; background:linear-gradient(30deg,#2665E2,#C26DE6); margin:14px auto 16px; }
@media (max-width:767.98px){
  .feat-badge span{ font-size:14px; }
  .feat-badge::after{ margin:12px auto 4px; }
}

/* Eyebrow underline, the 'Eyebrow Underline' field (2026-10-31). Default 'gradient', what this section showed before the option existed. */
.feat-badge.ree-eyebrow-line--gradient::after{ background:linear-gradient(30deg,#2665E2,#C26DE6); }
.feat-badge.ree-eyebrow-line--text::after{ background:#0A1220; }
.feat-badge.ree-eyebrow-line--violet::after{ background:#C26DE6; }
.feat-badge.ree-eyebrow-line--blue::after{ background:#2665E2; }