/* Home — Specialty spotlight ("Centar za rane i vaskularna dijagnostika").
   S3 "Staklene pločice" variant — premium dark-pine band with a 2x2
   grid of frosted glass tiles for the four service highlights instead
   of a plain bullet list. Mirrors the hero's color vocabulary (pine
   gradient + sage corner glows) but stays clean — no extra ring
   decoration in this variant. */

.specialty{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #0f3a36 0%, #0a2a27 100%);
  padding:78px 0 86px;
  color:#fff;
}

/* Sage glow top-right, teal glow bottom-left — keep them subtle so
   the frosted tiles in the middle stay the focal point. */
.specialty::before{
  content:"";
  position:absolute;
  top:-140px;right:-110px;
  width:380px;height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.25), transparent 68%);
  pointer-events:none;
}
.specialty::after{
  content:"";
  position:absolute;
  bottom:-150px;left:-120px;
  width:380px;height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(42,111,101,.27), transparent 68%);
  pointer-events:none;
}

.specialty .wrap{position:relative;z-index:1}

.specialty .band-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:center;
}

/* --- Text column --- */
.specialty .eyebrow{color:var(--sage-300)}
.specialty .eyebrow::before{background:var(--sage-300)}

.specialty h2{
  color:#fff;
  font-family:"Fraunces",serif;
  font-size:clamp(1.95rem, 3.3vw, 2.55rem);
  font-weight:300;
  margin:16px 0 14px;
  line-height:1.15;
  letter-spacing:-.015em;
}
.specialty h2 em{
  color:var(--sage-300);
  font-weight:400;
  font-style:italic;
}

.specialty .sp-lead{
  color:#bcd7d1;
  font-size:1.01rem;
  line-height:1.65;
  max-width:36em;
  margin:0 0 22px;
}

/* --- S3: 2x2 frosted glass tile grid for the highlights --- */
.specialty .sp-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.specialty .sp-tile{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 15px;
  color:#eef6f3;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:500;
  font-size:.91rem;
  line-height:1.4;
  transition:background .3s ease, border-color .3s ease;
}
.specialty .sp-tile:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}

/* Circular icon tile inside each glass tile. */
.specialty .sp-pic{
  width:32px;height:32px;
  border-radius:50%;
  flex:none;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:#d9e8e4;
  display:flex;
  align-items:center;
  justify-content:center;
}
.specialty .sp-pic svg{
  width:15px;height:15px;
  color:inherit;
}

/* CTA */
.specialty .sp-cta{margin-top:28px}
.specialty .sp-cta .btn-light{background:#fff;color:var(--pine)}
.specialty .sp-cta .btn-light:hover{background:var(--cream);color:var(--pine)}

/* --- Right column visual --- */
.specialty .band-visual{
  position:relative;
  isolation:isolate;
}
.specialty .band-img{
  position:relative;
  z-index:1;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 46px 92px -42px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.1);
}
.specialty .band-img img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
}

.specialty .band-inset{
  position:absolute;
  top:-26px;right:-30px;
  width:46%;
  z-index:2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(10,42,39,.5);
  border:5px solid #0d322e;
  background:#0d322e;
}
.specialty .band-inset img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  display:block;
}

.specialty .band-badge{
  position:absolute;
  bottom:-16px;left:20px;
  z-index:3;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:100px;
  padding:9px 18px 9px 14px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.78rem;
  font-weight:700;
  color:var(--pine);
  letter-spacing:.04em;
  box-shadow:0 16px 32px -18px rgba(10,42,39,.42);
}
.specialty .band-badge-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 0 4px rgba(94,155,148,.25);
}

/* --- Responsive --- */
@media(max-width:980px){
  .specialty{padding:62px 0 70px}
  .specialty .band-grid{grid-template-columns:1fr;gap:50px}
  /* On mobile, restore natural reading order (text first, then visual). */
  .specialty .sp-text{order:1}
  .specialty .band-visual{order:2}
  .specialty .band-inset{top:-18px;right:-12px;width:38%;border-width:4px}
  .specialty .band-badge{bottom:-12px;left:12px;font-size:.7rem;padding:7px 14px 7px 11px}
}
@media(max-width:680px){
  .specialty{padding:54px 0 62px}
  .specialty h2{font-size:1.72rem}
  .specialty .sp-tiles{grid-template-columns:1fr}
  .specialty .band-inset{top:-14px;right:0;width:46%;border-width:3px}
  .specialty .band-badge{bottom:-10px;left:8px;font-size:.66rem}
  .specialty .sp-cta .btn{width:100%;justify-content:center}
}