/* Grid */
.vmd-gge-wrap { --cols-lg:4; --gap:20px; }
.vmd-gge-wrap[data-per-row="1"]{--cols-lg:1}
.vmd-gge-wrap[data-per-row="2"]{--cols-lg:2}
.vmd-gge-wrap[data-per-row="3"]{--cols-lg:3}
.vmd-gge-wrap[data-per-row="4"]{--cols-lg:4}
.vmd-gge-wrap[data-per-row="5"]{--cols-lg:5}
.vmd-gge-wrap[data-per-row="6"]{--cols-lg:6}

.vmd-gge-grid{display:grid;grid-template-columns:repeat(var(--cols-lg),minmax(0,1fr));gap:var(--gap)}
@media(max-width:1200px){.vmd-gge-grid{grid-template-columns:repeat(min(var(--cols-lg),3),1fr)}}
@media(max-width:900px){.vmd-gge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.vmd-gge-grid{grid-template-columns:1fr}}

/* Card */
.vmd-gge-card{background:#fff;border:1px solid #ececec;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .15s ease,box-shadow .15s ease}
.vmd-gge-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.08)}
.vmd-gge-trigger{display:block;width:100%;text-align:left;background:0;border:0;padding:0;cursor:pointer}
.vmd-gge-image{aspect-ratio:6/5;overflow:hidden;background:#f6f6f6}
.vmd-gge-photo{width:100%;height:100%;object-fit:cover;display:block}
.vmd-gge-photo--placeholder{width:100%;height:100%;background:#eaeaea}
.vmd-gge-meta{padding:14px 14px 16px}
.vmd-gge-name{margin:0 0 8px;font-size:10px;line-height:1.3}

/* Brief fields under name */
.vmd-gge-brief{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.vmd-gge-brief-item{display:flex;align-items:center;gap:6px;font-size:.92rem;color:#444}
.vmd-gge-brief-item i{width:16px;text-align:center}

/* Expander */
.vmd-gge-expander{grid-column:1/-1;margin-top:var(--gap);border:1px solid #e7e7e7;border-radius:16px;background:#fff;overflow:clip;box-shadow:0 10px 32px rgba(0,0,0,.08);transition:opacity .2s ease,transform .2s ease,max-height .3s ease}
.vmd-gge-expander[hidden]{display:block;opacity:0;max-height:0;transform:translateY(-6px);border-width:0;padding:0;box-shadow:none}
.vmd-gge-detail-inner{padding:18px}
.vmd-gge-detail-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.vmd-gge-detail-head-left{display:flex;align-items:center;gap:12px}
.vmd-gge-detail-photo{width:72px;height:72px;object-fit:cover;border-radius:10px}
.vmd-gge-detail-name{margin:0; font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #990000;}
.vmd-gge-detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.vmd-gge-detail-tags .tag{display:inline-block;background:#f2f2f2;border-radius:999px;padding:4px 10px;font-size:.86rem}
.vmd-gge-close{border:0;background:#f2f2f2;cursor:pointer;width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1}
.vmd-gge-close:hover{background:#e7e7e7}

/* Expander sections */
.vmd-gge-sections{display:grid;gap:10px;margin:8px 0 12px}
.vmd-gge-sec h4{margin:0 0 4px;font-size:1rem}
.vmd-gge-sec p{margin:0}

/* Content */
.vmd-gge-detail-content :is(p,ul,ol){margin:0 0 10px}
.vmd-gge-detail-content img{max-width:100%;height:auto;border-radius:8px}

/* Focus */
.vmd-gge-trigger:focus-visible,.vmd-gge-close:focus-visible{outline:2px solid #3d436d;outline-offset:2px}

/* Empty */
.vmd-gge-empty{padding:10px 12px;border-left:4px solid #ccc;background:#f7f7f7;border-radius:6px}

.vmd-gge-expander.is-open{ overflow:visible !important; }
.vmd-gge-expander .vmd-gge-detail-inner{ display:block !important; }

/* Card: Students' name */
.vmd-gge-card .vmd-gge-name{
  
  
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #111;
}

/* Match Open Survey to Close link style */
.vmd-gge-action-link {
  display: inline-block;
  font-size: 14px;
  text-decoration: none;
}


/* Stack items vertically (so "Open Survey" sits under LinkedIn) */
.vmd-gge-card .vmd-gge-brief{
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* left align */
  gap: 8px;                  /* vertical spacing between rows */
}

/* One row = icon + text, nicely aligned */
.vmd-gge-card .vmd-gge-brief-item{
  display: flex;             /* put icon and text on one line */
  align-items: center;       /* vertically center icon with text */
  gap: 8px;                  /* space between icon and text */
  margin: 0;
  padding: 0;
}

/* Make sure icons don't stick to text */
.vmd-gge-card .vmd-gge-brief-item i{
  flex: 0 0 auto;
  line-height: 1;
  margin: 0;                 /* gap above already sets spacing */
  /* optional: fix width so text lines up even if icons vary */
  width: 18px;
  text-align: center;
}

/* Keep the LinkedIn + Open Survey links tidy */
.vmd-gge-card .vmd-gge-brief-item a{
  text-decoration: none;
}

/* "Open Survey" spacing (inherits layout from .vmd-gge-brief-item) */
.vmd-gge-card .vmd-gge-action-link{
  margin: 0;
}

/* Card: LinkedIn icon + text in brand blue, no underline ever */
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-li i{
  color: #0A66C2;
}
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-li a{
  color: #0A66C2;
  text-decoration: none;            /* no underline */
}
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-li a:hover,
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-li a:focus{
  color: #084d99;                   /* darker on hover/focus */
  text-decoration: none;            /* keep it off */
}

/* Expander: LinkedIn tag link in blue, no underline */
.vmd-gge-expander .vmd-gge-detail-tags a.tag{
  color: #0A66C2;
  border-color: #0A66C2;
  background: rgba(10,102,194,.06);
  text-decoration: none;
}
.vmd-gge-expander .vmd-gge-detail-tags a.tag:hover,
.vmd-gge-expander .vmd-gge-detail-tags a.tag:focus{
  color: #084d99;
  border-color: #084d99;
  text-decoration: none;
}

/* Card: icons (except LinkedIn) in #990000 */
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-loc i,
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-gen i,
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-occ i{
  color: #990000;
}

/* leave LinkedIn blue per previous rule; do not touch text styles */

/* Expander: Webpage tag in #990000, no underline */
.vmd-gge-expander .vmd-gge-detail-tags a.tag-webpage{
  color: #990000;
  border-color: #990000;
  background: rgba(153, 0, 0, .06);
  text-decoration: none;
}
.vmd-gge-expander .vmd-gge-detail-tags a.tag-webpage:hover,
.vmd-gge-expander .vmd-gge-detail-tags a.tag-webpage:focus{
  color: #7a0000;              /* mrvu tamnije na hover/focus */
  border-color: #7a0000;
  text-decoration: none;
}


/* Make all tags align icon + text nicely */
.vmd-gge-expander .vmd-gge-detail-tags a.tag{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.4;
}

/* Webpage tag in #990000 (već imaš stilove — ovo je samo poravnanje ikone) */
.vmd-gge-expander .vmd-gge-detail-tags a.tag-webpage i{
  position: relative;
  top: 0px;            /* podigni mrvu; probaj -1px do -2px */
  line-height: 1;       /* bez dodatnog vert. prostora */
  font-size: 0.95em;    /* opcionalno: mrvu manja ikona */
}




/* Top-right close (Font Awesome X) */
.vmd-gge-close-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;               /* veći klik-area */
  height: 36px;
  border-radius: 8px;
  color: #666;
  text-decoration: none;     /* nikad underline */
}
.vmd-gge-close-x i{
  font-size: 20px;
  line-height: 1;
}
.vmd-gge-close-x:hover,
.vmd-gge-close-x:focus{
  color: #000;
  background: rgba(0,0,0,0.05);
  text-decoration: none;
}

/* Visually hidden text for screen readers */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px);
  white-space: nowrap; border: 0;
}

/* Svaki red: ikona + tekst */
.vmd-gge-card .vmd-gge-brief-item{
  display: flex;
  align-items: flex-start;     /* poravnaj na vrh linije */
  gap: 8px;
}

/* Ikona: centriraj je unutar visine prve linije teksta */
.vmd-gge-card .vmd-gge-brief-item i{
  /* podesivo: postavi istu visinu kao line-height teksta */
  --brief-line-height: 1.8;    /* promijeni na 1.3–1.6 po izgledu teme */
  height: calc(var(--brief-line-height) * 1em);

  display: flex;
  align-items: center;         /* vert. centar u okviru prve linije */
  justify-content: center;

  width: 18px;                 /* ili 1.125em */
  font-size: 1em;              /* veličina ikone ≈ veličina teksta */
  line-height: 1;              /* bez dodatnog vert. prostora */
  margin-top: 0;               /* reset eventualnih starih podešavanja */
  text-align: center;
}

/* Leave room for sticky header when jumping to :target */
.vmd-gge-expander{
  scroll-margin-top: var(--gge-scroll-offset, 96px);
}

/* Card image: show a bit more top (reduce head crop) */
.vmd-gge-image{
  overflow: hidden;
  /*border-radius: 12px;*/
}

.vmd-gge-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: 50% 30%;   /* 50% = centar po x, 30% = fokus bliže vrhu */
}


@media (max-width: 640px){
  .vmd-gge-photo{
    object-position: 50% 35%;
  }
}

.vmd-gge-card .vmd-gge-brief-item.vmd-gge-web i,
.vmd-gge-card .vmd-gge-brief-item.vmd-gge-web a{
  color: #990000;
  text-decoration: none;
}


/* Pagination */
.vmd-gge-pagination {
  margin-top: 28px;
}
.vmd-gge-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.vmd-gge-pagination li {
  margin: 0;
}
.vmd-gge-pagination a,
.vmd-gge-pagination span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  text-decoration: none;
  line-height: 1;
}
.vmd-gge-pagination .current {
  font-weight: 700;
}

/* Sticky header scroll offset (prevents content from being hidden behind the header) */
.vmd-gge-wrap {
  --gge-scroll-offset: 136px; /* 96px + ~40px */
}

#graduates-top {
  scroll-margin-top: 136px;
}

/* Optional: slightly smaller offset on mobile if header is shorter */
@media (max-width: 768px) {
  .vmd-gge-wrap {
    --gge-scroll-offset: 120px;
  }
  #graduates-top {
    scroll-margin-top: 120px;
  }
}