/* ========================================================
   NOTE: Claude Code generated workaround

   This CSS handles video embeds coming from user-embedded
   content in markdown (raw HTML iframes). This is a
   workaround to prevent overflow on mobile devices.

   TODO: Consider removing this if a more elegant solution
   is implemented for embedding videos (e.g., markdown
   shortcodes, server-side processing, or JavaScript-based
   embed handling).
   ======================================================== */

/* ========================================================
   POST CONTENT STYLING
   Responsive styling for embedded content in post markdown
   ======================================================== */

/* Ensure box containers don't allow horizontal overflow */
.box {
    overflow: hidden;
}

/* Handle word wrapping in post content */
.box .content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Make all iframes within post content responsive */
.content iframe {
    max-width: 100%;
    height: auto;
}

/* Video embeds (YouTube, Vimeo) - maintain 16:9 aspect ratio */
/* Desktop: side by side when space allows, Mobile: stacked */
.content iframe[src*="youtube.com"],
.content iframe[src*="youtu.be"],
.content iframe[src*="vimeo.com"] {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 560px; /* Cap size on desktop */
    height: auto;
    display: inline-block; /* Allow side by side on desktop */
    vertical-align: top;
    margin: 0.5rem; /* Add spacing around videos */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    /* On mobile, force videos to stack full width */
    .content iframe[src*="youtube.com"],
    .content iframe[src*="youtu.be"],
    .content iframe[src*="vimeo.com"] {
        display: block; /* Force stacking */
        max-width: 100%;
        margin: 1rem 0; /* Vertical spacing when stacked */
    }

    /* Reduce box padding on mobile for more content space */
    .box {
        padding: 1rem;
    }
}