/* FR build – triangle-only play icon (z-index fix) & FR labels */
.ytg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px){ .ytg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .ytg-grid { grid-template-columns: 1fr; } }

.ytg-card { cursor: pointer; text-align: center; outline: none; }
.ytg-thumb { position: relative; padding-top: 56.25%; overflow: hidden; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); --ytg-play-color:#1e6aa8; }
.ytg-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; z-index: 1; }

/* Triangle only above image */
.ytg-thumb::after { content: none; }
.ytg-thumb::before {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-38%,-50%);
  width: 0; height: 0;
  border-left: 56px solid var(--ytg-play-color);
  border-top: 34px solid transparent;
  border-bottom: 34px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  z-index: 2; pointer-events: none;
}

/* Hover/focus effects */
.ytg-card:hover .ytg-thumb img, .ytg-card:focus .ytg-thumb img { transform: scale(1.03); }

.ytg-title { margin: 12px 0 4px; font-size: 1.05rem; line-height: 1.3; font-weight: 700; }
.ytg-date { font-size: .9rem; opacity: .75; }

.ytg-load { display: block; margin: 24px auto 0; padding: 10px 16px; border-radius: 8px; border: 1px solid #ddd; background: #fff; cursor: pointer; }

/* Lightbox */
.ytg-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.ytg-lightbox[hidden] { display: none; }
.ytg-embed { width: 90vw; max-width: 960px; aspect-ratio: 16/9; background: #000; }
.ytg-embed iframe { width: 100%; height: 100%; border: 0; }
.ytg-close { position: absolute; top: 16px; right: 20px; font-size: 32px; color: #fff; background: none; border: 0; cursor: pointer; }