/* TrueInstaller page media: image gallery + YouTube video slot */

.media-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.75rem 0; }
.media-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.media-gallery img { width: 100%; height: 200px; object-fit: cover; display: block; margin: 0; border-radius: 0; border: none; box-shadow: none; padding: 0; }
.media-gallery figcaption { font-size: .82rem; color: #6b7280; padding: 8px 12px; }

/* Video slot: shows a styled placeholder until data-video carries a YouTube ID.
   Admin: edit the page and set data-video="YOUTUBE_VIDEO_ID" to activate the player. */
.yt-slot { margin: 1.75rem 0; }
.yt-frame { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #111827, #1f2937); aspect-ratio: 16 / 9; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #e5e7eb; text-align: center; padding: 20px; }
.yt-play { width: 74px; height: 52px; background: #f00; border-radius: 14px; position: relative; box-shadow: 0 8px 24px rgba(255,0,0,.35); }
.yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-46%, -50%); border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.yt-text strong { display: block; font-size: 1.05rem; margin-bottom: 4px; color: #fff; }
.yt-text span { font-size: .85rem; color: #9ca3af; }
.yt-slot iframe { width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border: 0; border-radius: 16px; display: block; }