/* =========================
   Root brand + tunables
========================= */
:root {
  --vmd-accent: #990000;   /* brand red */
  --fp-photo: 240px;       /* single profile photo width */
}

/* =========================
   GRID
========================= */
.vmd-fp-grid { display: grid; gap: 24px; }
.vmd-fp-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .vmd-fp-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .vmd-fp-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vmd-fp-cols-4 { grid-template-columns: 1fr; } }

/* =========================
   CARD
========================= */
.vmd-fp-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.vmd-fp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }

/* Image wrapper: fixed aspect on top; must not grow to cover content */
.vmd-fp-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  background: #f7f7f7;
  display: block;
}

/* Pin the image inside the wrapper */
.vmd-fp-img-wrap > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

/* Top/Center/Bottom focus helpers (optional) */
.vmd-fp-img-wrap > img.vmd-fp-top { object-position: 50% 10%; }
.vmd-fp-img-wrap > img.vmd-fp-center { object-position: 50% 50%; }
.vmd-fp-img-wrap > img.vmd-fp-bottom { object-position: 50% 85%; }

/* Generic thumbnail (defensive) */
.vmd-fp-thumb { display:block; width:100%; height:100%; object-fit:cover; }
.vmd-fp-thumb--placeholder {
  background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e9e9e9 10px, #e9e9e9 20px);
}

/* Card text blocks */
.vmd-fp-name { font-size: 1.05rem; margin: 12px 16px 6px; }
.vmd-fp-name a { text-decoration:none; color:#111; }
.vmd-fp-name a:hover { color: var(--vmd-accent); }
.vmd-fp-line { margin: 0 16px 4px; color:#444; font-size: .95rem; }
.vmd-fp-link { padding: 12px 16px 16px; }

/* Profile link button */
.vmd-fp-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vmd-accent);
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.vmd-fp-profile-link:hover,
.vmd-fp-profile-link:focus:hover {
  background: #306580;
  color: #fff !important;
}
.vmd-fp-profile-link:visited { color: #fff; }
.vmd-fp-profile-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(48,101,128,.25);
}
.vmd-fp-profile-link:active { transform: translateY(1px); }
.vmd-fp-profile-link i { font-size: 0.95em; }

/* Ensure text blocks above image stacking context */
.vmd-fp-name, .vmd-fp-line, .vmd-fp-link { position: relative; z-index: 1; }

/* =========================
   SINGLE FACULTY (compact)
========================= */
.vmd-fp-single-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 12px;
}

.vmd-fp-single-header {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
  flex-wrap: wrap;
}




/* Placeholder if no image */
.vmd-fp-single-img--placeholder {
  aspect-ratio: 1/1;
  background: repeating-linear-gradient(
    45deg,#f3f3f3,#f3f3f3 12px,#eaeaea 12px,#eaeaea 24px
  );
}

/* Right column with bottom-right aligned title */
.vmd-fp-single-text {
  flex: 1 1 360px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 6px;
}

/* Constrain inner width and set text alignment */
.vmd-fp-single-text-inner {
  width: 100%;
  max-width: 640px;
  text-align: right;
}

/* Title */
.vmd-fp-single-title {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.2;
}

/* Optional meta block */
.vmd-fp-single-meta { color: #555; }
.vmd-fp-single-meta div { margin-bottom: 4px; }

/* Divider */
.vmd-fp-sep {
  border: 0;
  height: 1px;
  background: #990000;
  margin: 20px 0 24px;
}

/* Content body */
.vmd-fp-single-content {
  font-size: 1.025rem;
  line-height: 1.7;
}

/* Responsive tweaks */
@media (max-width: 700px) {
  .vmd-fp-single-photo { width: 200px; }
  .vmd-fp-single-title { font-size: 1.6rem; }
  .vmd-fp-single-text { align-items: flex-start; }
  .vmd-fp-single-text-inner { text-align: left; }
}

/* =========================
   FALLBACKS (theme injects image into content)
========================= */
body.single-faculty .vmd-fp-single-img {
  max-width: var(--fp-photo) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

body.single-faculty .post-thumbnail,
body.single-faculty .entry-thumbnail,
body.single-faculty .wp-post-image:not(.vmd-fp-single-img) {
  max-width: var(--fp-photo) !important;
  width: 100% !important;
}

/* Float only when image sits inside entry-content, not in our wrapper */
@media (min-width: 800px) {
  body.single-faculty .entry-content .vmd-fp-single-img {
    float: left;
    margin: 0 24px 12px 0;
  }
  .vmd-fp-single-photo .vmd-fp-single-img {
    float: none !important;
    margin: 0 !important;
  }
}

/* Neutralize theme backgrounds on common wrappers */
body.single-faculty .post-thumbnail,
body.single-faculty .entry-thumbnail {
  background: transparent !important;
  line-height: 0 !important;
  padding: 0 !important;
}

/* =========================
   Big side arrows (Prev/Next)
========================= */
.vmd-fp-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 42px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--vmd-accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  text-decoration:none;
  z-index: 9999;
  opacity: 0.92;
}
.vmd-fp-arrow:hover { opacity: 1; }
.vmd-fp-arrow--prev { left: 24px; }
.vmd-fp-arrow--next { right: 24px; }

/* =========================
   Bottom navigation (related links)
========================= */
.vmd-fp-bottom-nav { margin-top: 48px; }
.vmd-fp-bottom-nav h3 { font-size: 1.1rem; margin-bottom: 12px; }
.vmd-fp-bottom-list { display:grid; gap:10px; grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .vmd-fp-bottom-list { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .vmd-fp-bottom-list { grid-template-columns: 1fr; } }
.vmd-fp-bottom-item a {
  display:block; padding:10px 12px; border:1px solid #eee; border-radius:8px; text-decoration:none; color:#222;
}
.vmd-fp-bottom-item a:hover { border-color: var(--vmd-accent); color: var(--vmd-accent); }

/* =========================
   Table utility
========================= */
.vmd-table { width:100%; border:1px solid #dcdcdc; border-collapse:collapse; }
.vmd-table th, .vmd-table td { padding:8px; vertical-align: top; }
.vmd-table td ul { margin-top: 0; }
.vmd-table th + th, .vmd-table td + td { border-left:1px solid #dcdcdc; }
.vmd-table tr + tr td { border-top:1px solid #eee; }
.vmd-table tr:first-child th, .vmd-table tr:first-child td { background-color:#f4f4f4; }

/* =========================
   GRID portrait mode (contain, rounded)
========================= */
.vmd-fp-grid {
  --card-aspect: 1 / 1;   /* set 3/4 for taller */
  --card-inset: 10px;
  --card-bg: #fff;
}
.vmd-fp-grid .vmd-fp-img-wrap {
  aspect-ratio: var(--card-aspect);
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.vmd-fp-grid .vmd-fp-img-wrap > img {
  position: absolute;
  inset: var(--card-inset);
  width: calc(100% - 2 * var(--card-inset)) !important;
  height: calc(100% - 2 * var(--card-inset)) !important;
  object-fit: contain;
  object-position: 50% 50%;
  display: block;
  border-radius: 10px;
}
/* Slight top bias (optional):
.vmd-fp-grid .vmd-fp-img-wrap > img { object-position: 50% 40%; }
*/

/* =========================
   Avada Layout centering fix
========================= */
.vmd-fp-single-wrap,
.fusion-row .fusion-column-wrapper > .vmd-fp-single-wrap {
  display: block;
  width: 100%;
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px;
  padding-right: 12px;
}

/* Neutralize any legacy float when inside TB content */
.fusion-tb-content .vmd-fp-single-img {
  float: none !important;
  margin: 0 !important;
}

/* Pin name/degree block to bottom-right, override Avada */
.single-faculty .vmd-fp-single-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;  /* bottom */
  align-items: flex-end !important;      /* right */
  text-align: right !important;
  flex: 1 1 auto !important;
  min-width: 280px !important;
  padding-bottom: 6px !important;
}

/* If there is an inner wrapper, push it down too (safe even if ne postoji) */
.single-faculty .vmd-fp-single-text > *:last-child {
  margin-top: auto !important;
  width: 100% !important;
  max-width: 640px !important;
}

/* Make sure the header row lets columns be same height */
.single-faculty .vmd-fp-single-header {
  display: flex !important;
  align-items: stretch !important;
  gap: 24px !important;
  flex-wrap: wrap !important; /* stack on small screens */
}

/* Photo column stays fixed width (adjust if different name wrappera) */
.single-faculty .vmd-fp-single-photo {
  flex: 0 0 auto !important;
  width: var(--fp-photo, 240px) !important;
}

/* Mobile: poravnaj lijevo ako želiš */
@media (max-width: 700px) {
  .single-faculty .vmd-fp-single-text {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

.vmd-fp-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.vmd-fp-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0a66c2;           /* LinkedIn blue */
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.vmd-fp-linkedin:hover,
.vmd-fp-linkedin:focus {
  background: #094f97;
  color: #fff !important;
}
.vmd-fp-linkedin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,102,194,.25);
}
.vmd-fp-linkedin:active { transform: translateY(1px); }
.vmd-fp-linkedin i { font-size: 0.95em; }


/* Hover utility for buttons/links — background + white text */
/* Add class "vmd-hover-306580" to your element */
.vmd-hover-306580:hover,
.vmd-hover-306580:focus,
.vmd-hover-306580:active {
  background-color: #306580 !important; /* hover bg */
  color: #fff !important;               /* hover text */
  border-color: #306580 !important;     /* keep border in sync */
  text-decoration: none !important;     /* no underline on hover */
  outline: none !important;             /* remove focus outline */
}

/* Ensure inner icons/text turn white too */
.vmd-hover-306580:hover i,
.vmd-hover-306580:hover svg,
.vmd-hover-306580:hover span,
.vmd-hover-306580:focus i,
.vmd-hover-306580:focus svg,
.vmd-hover-306580:focus span {
  color: #fff !important;
  fill: #fff !important; /* for SVGs */
}

/* Optional: smoothen the change */
.vmd-hover-306580 {
  transition: all .2s ease-in-out;
}