/* ====== Merlien Video Grid – layout & design ====== */
:root{
  --mvg-card-bg:#fff;
  --mvg-text:#111827;
  --mvg-muted:#6b7280;
  --mvg-brand:#0C3B5E;
  --mvg-shadow-soft:0 10px 30px rgba(0,0,0,.08);
  --mvg-shadow-medium:0 14px 36px rgba(0,0,0,.12);
  --mvg-shadow-strong:0 18px 48px rgba(0,0,0,.16);
  --mvg-gap:22px;
  --mvg-play-red:#ea4335;
}

/* ===== Grid ===== */
/* ===== Grid ===== */
.mv-grid{
  --mvg-cols-desktop:4;
  --mvg-cols-tablet:2;
  --mvg-cols-mobile:1;
  --gap:var(--mvg-gap);

  display:grid;
  grid-template-columns:repeat(var(--mvg-cols-desktop), minmax(0,1fr));
  gap:var(--gap);
  box-sizing:border-box;
}


/* Desktop oszlopszám shortcodból (columns="x") */
.mv-grid.columns-1{ --mvg-cols-desktop:1; }
.mv-grid.columns-2{ --mvg-cols-desktop:2; }
.mv-grid.columns-3{ --mvg-cols-desktop:3; }
.mv-grid.columns-4{ --mvg-cols-desktop:4; }
.mv-grid.columns-5{ --mvg-cols-desktop:5; }
.mv-grid.columns-6{ --mvg-cols-desktop:6; }

.mv-grid.gap-small{ --gap:14px; }
.mv-grid.gap-medium{ --gap:22px; }
.mv-grid.gap-large{ --gap:32px; }

/* Tablet */
@media (max-width:960px){
  .mv-grid{
    grid-template-columns:repeat(var(--mvg-cols-tablet), minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width:768px){
  .mv-grid{
    grid-template-columns:repeat(var(--mvg-cols-mobile), minmax(0,1fr));
  }
}

/* ===== Card ===== */
.mv-card{
  background:var(--mvg-card-bg);
  border-radius:var(--mvg-card-radius,16px);
  box-shadow:var(--mvg-card-shadow, var(--mvg-shadow-soft));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.mv-card.shadow-none{ box-shadow:none; }
.mv-card.shadow-soft{ --mvg-card-shadow:var(--mvg-shadow-soft); }
.mv-card.shadow-medium{ --mvg-card-shadow:var(--mvg-shadow-medium); }
.mv-card.shadow-strong{ --mvg-card-shadow:var(--mvg-shadow-strong); }

.mv-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--mvg-shadow-medium);
}

/* Thumbnail as separate block (YouTube style) */
.mv-thumb-wrapper{
  position:relative;
  overflow:hidden;
}

/* Play gomb overlay a thumbnailen (alsó középen) */
.mv-thumb-wrapper::before,
.mv-thumb-wrapper::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none; /* ne blokkolja a kattintást */
}

/* piros kapszula */
.mv-thumb-wrapper::after{
  bottom:12px;
  width:55px;
  height:35px;
  border-radius:999px;
  background:var(--mvg-primary, var(--mvg-play-red));
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  z-index:2;
}

/* fehér háromszög */
.mv-thumb-wrapper::before{
  bottom:20px;
  width:0;
  height:0;
  border-left:15px solid #fff;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-left:3px; /* kis eltolás, hogy optikailag középen legyen */
  z-index:3;
}

.mv-thumb-ratio{
  position:relative;
  padding-top:56.25%; /* 16:9 */
}
.mv-thumb-ratio img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Background thumbnail mode */
.mv-card.mv-card-thumb-bg{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
}
.mv-card.mv-card-thumb-bg .mv-card-inner{
  background:rgba(0,0,0,var(--mvg-thumb-overlay,.45));
}

/* Card inner/body */
.mv-card-inner{
  padding:16px 14px 14px;
}
.mv-card.pad-small .mv-card-inner{ padding:10px 10px 12px; }
.mv-card.pad-medium .mv-card-inner{ padding:16px 14px 14px; }
.mv-card.pad-large .mv-card-inner{ padding:20px 18px 18px; }

.mv-card.text-left .mv-card-inner{ text-align:left; }
.mv-card.text-center .mv-card-inner{ text-align:center; }

/* Title */
.mv-title{
  font-size:var(--mvg-title-size, 1rem);
  line-height:1.4;
  font-weight:var(--mvg-title-weight, 600);
  color:var(--mvg-title-color, var(--mvg-text));
  margin:0 0 6px;
}

.mv-card.theme-dark:not(.mv-card-thumb-bg) .mv-title{ color:#111827; }
.mv-card.theme-light:not(.mv-card-thumb-bg){
  --mvg-card-bg:#f9fafb;
}
.mv-card.mv-card-thumb-bg .mv-title{
  color:#fff;
}

/* line clamp – max N sor */
.mv-title[class*="mv-title-lines-"]{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mv-title.mv-title-lines-1{ -webkit-line-clamp:1; }
.mv-title.mv-title-lines-2{ -webkit-line-clamp:2; }
.mv-title.mv-title-lines-3{ -webkit-line-clamp:3; }
.mv-title.mv-title-lines-4{ -webkit-line-clamp:4; }
.mv-title.mv-title-lines-5{ -webkit-line-clamp:5; }

/* Meta/speaker sor */
.mv-meta-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mv-speaker-block{
  flex:1 1 auto;
  min-width:0;
}
.mv-speaker{
  font-weight:var(--mvg-speaker-weight, 600);
  font-size:var(--mvg-speaker-size, .9rem);
  color:var(--mvg-speaker-color, var(--mvg-text));
}

.mv-card.mv-card-thumb-bg .mv-speaker{ color:#fff; }

.mv-role{
  font-size:var(--mvg-role-size, .85rem);
  font-weight:var(--mvg-role-weight, 400);
  color:var(--mvg-role-color, var(--mvg-muted));
  margin-top:2px;
}

.mv-card.mv-card-thumb-bg .mv-role{ color:rgba(255,255,255,.85); }

.mv-stats-row{
  font-size:var(--mvg-stats-size, .8rem);
  color:var(--mvg-stats-color, var(--mvg-muted));
  margin-top:2px;
}
.mv-card.mv-card-thumb-bg .mv-stats-row{
  color:rgba(255,255,255,.85);
}


/* Logo / company jobbra */
.mv-logo-company{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  max-width:40%;
}
.mv-logo img{
  max-height: 40px;
  max-width: 100px;
  object-fit:contain;
  display:block;
}
.mv-company{
  font-size:.85rem;
  color:var(--mvg-muted);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.mv-card.mv-card-thumb-bg .mv-company{ color:rgba(255,255,255,.85); }

/* Play row */
.mv-play-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
.mv-card.text-center .mv-play-row{
  justify-content:center;
}
.mv-card.text-left .mv-play-row{
  justify-content:flex-start;
}

.mv-play-btn{
  position:relative;
  width:46px;
  height:32px;
  border:0;
  border-radius:999px;
  background:var(--mvg-primary, var(--mvg-play-red));
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.mv-play-btn::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:0;
  height:0;
  border-left:10px solid #fff;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.mv-play-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.mv-play-btn:focus{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

.mv-card:not(.mv-card-thumb-bg) .mv-play-row .mv-play-btn{
  display:none;
}

/* Google Play link */
.mv-google-play{
  font-size:.85rem;
  color:var(--mvg-muted);
  text-decoration:none;
}
.mv-google-play:hover{
  text-decoration:underline;
}

/* Featured pill (if used) */
.mv-badge-featured{
  display:inline-block;
  margin-bottom:6px;
  background:#F5CF66;
  color:#222;
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  font-weight:700;
}

/* Modal (meglévő struktúra finoman) */
.mv-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.mv-modal.is-open{
  display:block;
}

.mv-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.mv-modal-content{
  position:relative;
  max-width:960px;
  margin:5vh auto;
  border-radius:12px;
  overflow:hidden;
  z-index:1;
}

/* dark theme – inkább a videóhoz */
.mv-modal.theme-dark .mv-modal-backdrop{
  background:rgba(0,0,0,.6);
}
.mv-modal.theme-dark .mv-modal-content{
  background:#000;
  color:#f9fafb;
}
.mv-modal.theme-dark .mv-modal-close{
  color:#fff;
}

/* light theme – HubSpot formhoz kényelmes */
.mv-modal.theme-light .mv-modal-backdrop{
  background:rgba(15,23,42,.35);
}
.mv-modal.theme-light .mv-modal-content{
  background:#fff;
  color:#111827;
}
.mv-modal.theme-light .mv-modal-close{
  color:#111827;
}

.mv-modal-close{
  position:absolute;
  right:8px;
  top:8px;
  background:transparent;
  border:0;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

#mv-player iframe{
  width:100%;
  height:54vw;
  max-height:540px;
}
.mv-gate{
  padding:24px;
  background:transparent;
  border-radius:8px;
}

/* alap default, ha nincs egyedi szín / radius */
.mv-modal.theme-dark .mv-gate{
  background:rgba(15,23,42,.9);
}
.mv-modal.theme-light .mv-gate{
  background:#f9fafb;
}

/* Widget */
.mv-widget{ display:flex; flex-direction:column; gap:8px; }
.mv-widget-item{ text-decoration:none; }