/**
 * Content Slots — Frontend Styles
 *
 * Normalized CSS variables (--vtp-*) bridge different theme naming conventions:
 *   videotube: --bg-secondary, --text-primary, --accent-color, --border-color
 *   videobox:  --bg-secondary, --text-primary, --accent,       --border
 *   inkbox:    --bg-surface,   --text,         --accent,       --border
 *
 * Templates use --vtp-* so they look correct in any theme + light/dark mode.
 */

/* ── Normalized variables ──────────────────────────────────── */
.vtp-slot {
    /* Background: theme surface / secondary */
    --vtp-bg:         var(--bg-secondary, var(--bg-surface, #1a1a1a));
    --vtp-bg-subtle:  var(--bg-tertiary, var(--bg-card, var(--bg-elevated, #2a2a2a)));

    /* Text */
    --vtp-text:       var(--text-primary, var(--text, #ffffff));
    --vtp-text-muted: var(--text-secondary, var(--text-muted, #999999));

    /* Accent */
    --vtp-accent:     var(--accent-color, var(--accent, #ff6b00));

    /* Border */
    --vtp-border:     var(--border-color, var(--border, rgba(255,255,255,.1)));

    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── CLS prevention ────────────────────────────────────────── */
/* Keep min-height from inline style until content loads */
.vtp-slot[data-vtp-lazy="1"]:not(.vtp-slot--loaded) {}

/* Remove min-height after content is injected */
.vtp-slot--loaded {
    min-height: 0 !important;
}

/* ── Device targeting (CSS @media — CDN/cache friendly) ──── */
@media (max-width: 767px) {
    .vtp-slot--desktop { display: none !important; }
}
@media (min-width: 768px) {
    .vtp-slot--mobile { display: none !important; }
}

/* ── Contained inner wrapper ────────────────────────────────
   Slots that render outside the theme container (after_header,
   before_footer, before_content) get an inner wrapper that
   matches the theme's max-width. Falls back through each
   theme's container variable. */
.vtp-slot--fullwidth .vtp-slot-inner {
    max-width: var(--container-max, var(--wrap, 1400px));
    margin-inline: auto;
    padding-inline: var(--pad, var(--space-md, 1rem));
    width: 100%;
    box-sizing: border-box;
}

/* ── In-grid slot ──────────────────────────────────────────── */
.vtp-slot--in-grid {
    grid-column: 1 / -1;
    padding: 12px 0;
}

/* ── Responsive media inside slots ─────────────────────────── */
.vtp-slot img,
.vtp-slot iframe {
    max-width: 100%;
    height: auto;
}

/* ── Template helper classes (used by quick templates) ─────── */

/* Banner */
.vtp-tpl-banner {
    background: var(--vtp-accent);
    color: #fff;
    padding: 16px 24px;
    text-align: center;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.5;
}

/* CTA */
.vtp-tpl-cta {
    text-align: center;
    padding: 20px 16px;
    margin: 12px 0;
}
.vtp-tpl-cta a {
    display: inline-block;
    background: var(--vtp-accent);
    color: #fff;
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: opacity .2s;
}
.vtp-tpl-cta a:hover { opacity: 0.85; color: #fff; }
.vtp-tpl-cta .vtp-tpl-sub {
    margin: 10px 0 0;
    color: var(--vtp-text-muted);
    font-size: 13px;
}

/* Ad zone placeholder */
.vtp-tpl-ad {
    text-align: center;
    padding: 16px 0;
    margin: 12px 0;
}
.vtp-tpl-ad-placeholder {
    background: var(--vtp-bg-subtle);
    border: 1px dashed var(--vtp-border);
    border-radius: 8px;
    padding: 40px 20px;
    color: var(--vtp-text-muted);
    font-size: 13px;
}

/* Notice bar */
.vtp-tpl-notice {
    background: var(--vtp-bg-subtle);
    border-left: 4px solid var(--vtp-accent);
    padding: 14px 20px;
    margin: 12px 0;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--vtp-text);
    line-height: 1.6;
}
.vtp-tpl-notice strong { color: var(--vtp-text); }
.vtp-tpl-notice a {
    color: var(--vtp-accent);
    text-decoration: underline;
}

/* Text block */
.vtp-tpl-text {
    max-width: 800px;
    margin: 20px auto;
    padding: 24px;
    background: var(--vtp-bg-subtle);
    border-radius: 12px;
    line-height: 1.7;
    color: var(--vtp-text-muted);
    font-size: 14px;
}
.vtp-tpl-text h3 {
    margin: 0 0 12px;
    color: var(--vtp-text);
    font-size: 18px;
}
.vtp-tpl-text p { margin: 0; }

/* Two columns */
.vtp-tpl-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 0;
    margin: 12px 0;
}
@media (max-width: 600px) {
    .vtp-tpl-cols { grid-template-columns: 1fr; }
}
.vtp-tpl-col {
    background: var(--vtp-bg-subtle);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.vtp-tpl-col-icon { font-size: 28px; margin-bottom: 8px; }
.vtp-tpl-col strong {
    color: var(--vtp-text);
    display: block;
    margin-bottom: 6px;
}
.vtp-tpl-col span {
    color: var(--vtp-text-muted);
    font-size: 13px;
}