/* ===================== Social Media Block (smd.css) ===================== */


/* Wrapper */
.smd{
  margin-top: 60px;
  /* bazne vrijednosti */
  --gap-base: clamp(12px, 2vw, 24px);
  --size-base: clamp(84px, 10vw, 140px);

  /* efektivne vrijednosti (override-amo po breakpointima) */
  --gap: var(--gap-base);
  --size: var(--size-base);

  --base: #38424b;                          /* osnovna boja kruga */
  --ease: cubic-bezier(.2,.6,.2,1);

  height: 300px;                             /* desktop visina */
  width: 100%;
  display: grid;
  grid-template-rows: 20% 80%;
  gap: var(--gap);
  padding: var(--gap);
  box-sizing: border-box;

  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Headline */
.smd__headline{
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 600;                          /* Lato Semibold */
  line-height: 1.15;
  letter-spacing: .2px;
  font-size: clamp(18px, 1.2vw + .8rem, 32px);
  margin: 0;
}

/* Red s ikonama (desktop jedan red) */
.smd__content{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
}

/* Krug = <a> container (1:1) */
.smd__item{
  flex: 0 0 auto;
  width: var(--size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--base);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background-color .4s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* Ikonica unutar kruga */
.smd__icon{
  width: 62%;
  height: 62%;
  object-fit: contain;
  transition: transform .2s var(--ease);
}

/* Hover/focus/tap — koristi boju stavke (--smd-bg) + shrink ikone */
.smd__item:hover,
.smd__item:focus-visible,
.smd__item:active{
  background: var(--smd-bg, #000);
}
.smd__item:hover .smd__icon,
.smd__item:focus-visible .smd__icon,
.smd__item:active .smd__icon{
  transform: scale(.86);
}

/* ===== Desktop tweak (≥769px): -15% veličina, +20% razmak ===== */
@media (min-width: 769px){
  .smd{
    --size: calc(var(--size-base) * 0.85);
    --gap:  calc(var(--gap-base)  * 1.20);
  }
}

/* ===== Mobile (≤768px): auto visina, 80% širine, veći razmak, 3 u redu ===== */
@media (max-width: 768px){
  .smd{
    height: auto;                              /* auto visina na mobu */
    grid-template-rows: auto auto;
    width: 80%;                                /* uži container */
    margin-inline: auto;                       /* centriraj */
    --gap: clamp(16px, 5vw, 28px);             /* malo veći razmak na mobu */
  }

  .smd__headline{
    font-size: clamp(20px, 6vw, 30px);         /* veći naslov */
  }

  .smd__content{
    flex-wrap: wrap;                           /* 3 u redu, wrap */
    align-content: center;
    justify-content: center;
  }

  .smd__item{
    width: calc((100% - 2 * var(--gap)) / 3);  /* max 3 kolone */
    aspect-ratio: 1 / 1;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .smd__item{ transition-duration: .1s; }
  .smd__icon{ transition-duration: .1s; }
}
/* =================== /Social Media Block ====================== */