/* Osnova */
.smg4{ --radius:18px; --shadow:0 10px 28px rgba(0,0,0,.08); --cellH:78px; --fg:#0f2a21; --muted:#5e6e67; }
.smg4, .smg4 *{ box-sizing:border-box; font-family:inherit; }
.smg4__wrap{ background:#f6f9f7; border-radius:var(--radius); padding:8px; }

/* Glava */
.smg4__head{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; padding:8px 14px 6px; font-weight:800; color:var(--fg); }
.smg4__head div{text-transform:lowercase}

/* GRID (tabela) */
.smg4__grid{
  position:relative; display:grid; grid-template-columns:repeat(7,1fr);
  background:#fff; border-radius:calc(var(--radius) - 6px);
  padding:8px 14px 14px; box-shadow:var(--shadow); overflow:visible;
}

/* SAMO VERTIKALNE črte – subtilne (1px, temno siva) */
.smg4__grid::after{
  content:"";
  position:absolute; left:14px; right:14px; top:8px; bottom:14px;
  border-radius:calc(var(--radius) - 6px); pointer-events:none;
  background-image:repeating-linear-gradient(
    to right,
    transparent,
    transparent calc((100%/7) - 0.5px),
    rgba(0,0,0,.18) calc((100%/7) - 0.5px),
    rgba(0,0,0,.18) calc((100%/7) + 0.5px)
  );
}


/* DAN – brez horizontalnih črt */
.smg4__day{ position:relative; min-height:calc(4 * var(--cellH)); padding:4px 4px 8px; }
.smg4__day::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:none !important; /* izklopi vodoravne linije */
}

/* KARTICA (termin) */
.smg4-slot{
  position:absolute; left:2px; right:2px;
  background:#fff; border-radius:16px; padding:12px 14px 14px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:6px; font-weight:800; color:var(--fg);
  outline:3px solid #d7bf63;
}

/* Naslov – manjši, brez elipse, lahko 1–2 vrstici */
.smg4-slot__title{
  font-size: 16px;          /* prej 20px */
  line-height: 1.15;
  letter-spacing: .1px;
  white-space: normal;      /* dovoli prelom med besedami */
  word-break: normal;       /* ne lomi sredi besede */
  hyphens: auto;            /* slovensko deljenje, če je podprto */
  overflow: visible;
  display: block;           /* brez line-clampa */
  margin: 0 0 2px 0;
}

@media (max-width: 1280px){
  .smg4-slot__title{ font-size: 15px; }
}

/* Adaptivno zmanjšanje pri daljših naslovih (če imaš v PHP data-title-size) */
.smg4-slot[data-title-size="lg"] .smg4-slot__title{ font-size:18px; }
.smg4-slot[data-title-size="xl"] .smg4-slot__title{ font-size:16px; }

.smg4-slot__time{ font-size:13px; font-weight:600; color:var(--muted); }
.smg4-slot__tag{ font-size:12px; font-weight:700; opacity:.9; }
.smg4-btn{ margin-top:6px; }

/* Barve po tipu */
.smg4-slot[data-type="solo"]{ outline-color:#0d5c3d; }
.smg4-slot[data-type="senior"]{ outline-color:#b47788; }
.smg4-slot[data-type="pari"]{ outline-color:#f0a5b8; }

/* Gumb */
.smg4-btn{
  align-self:flex-start; display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding:10px 14px; border-radius:100px; font-weight:800; font-size:13px;
  background:#0f2a21; color:#fff; border:0; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.smg4 .smg4-btn,
.smg4 .smg4-btn:hover,
.smg4 .smg4-btn:focus,
.smg4 .smg4-btn:active,
.smg4 .smg4-btn:visited{ color:#fff !important; text-decoration:none !important; }
.smg4 .smg4-btn:hover{ transform:translateY(-1px); background:#113429; }

/* MOBILNO */
@media (max-width:1024px){
  .smg4__head{ display:none; }
  .smg4__grid{ grid-template-columns:1fr; padding:6px; gap:10px; box-shadow:none; background:transparent; }
  .smg4__grid::after{ display:none; } /* brez vertikalnih črt na mobitelu */
  .smg4__day{ background:#fff; border-radius:16px; padding:36px 10px 14px; box-shadow:var(--shadow); }
  .smg4__day[data-day]::after{ content:attr(data-day); position:absolute; top:10px; left:12px; font-weight:900; color:var(--fg); z-index:2; }
  .smg4__day::before{ background:none !important; }
  .smg4__day .smg4-slot{ position:relative; left:auto; right:auto; top:auto !important; height:auto !important; margin-top:10px; }
  .smg4__day[data-empty="1"], .smg4__day.is-empty{ display:none; }
  .smg4-btn{ width:100%; justify-content:center; }
}