/*
Theme Name: trhthirtyone
Description: A responsive masonry layout theme with tag filtering for portfolios and blogs. Features CSS column-based masonry layout and Splide slideshow integration.
Author: Byoungil Choi
Version: 1.8.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trhthirtyone
Tags: portfolio, blog, masonry, responsive, tags, filtering
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/* Comprehensive CSS Reset for Cross-Browser Compatibility */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove default styling from HTML5 elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* Reset list styles */
ol, ul {
    list-style: none;
}

/* Reset table styles */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Reset form elements */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/* Reset button styles */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Reset link styles */
a {
    text-decoration: none;
    color: inherit;
}

/* Reset image styles for better control and lazy loading fix */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
    opacity: 1 !important;
    visibility: visible !important;
    /* Force image loading and prevent lazy loading issues */
    loading: eager;
    /* Prevent browser lazy loading interference */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Force immediate rendering */
    will-change: auto;
}

/* Prevent iOS text size adjust after orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Basic Typography */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
}

a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header */
.site-header {
    background: transparent;
    border-bottom: none;
    padding: 2rem 0 1.5rem 0; /* Top: 2rem (2x), Bottom: 1.5rem (1.5x) */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.site-title a {
    color: #333;
    text-decoration: none;
}

/* Main Navigation with Tag Filters */
.main-navigation {
    width: 100%;
}

.main-navigation .tag-filters {
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1.4; /* 태그 버튼이 여러 줄일 때 적절한 행간 */
}

/* Navigation */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: #666;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #0073aa;
}

/* Tag Filter Buttons */
.tag-filters {
    text-align: center;
    margin: 2rem 0;
    padding: 0;
    background: transparent;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    line-height: 1.5; /* 일반 태그 필터 영역의 행간 */
}

.tag-filter-btn {
    display: inline-block;
    margin: 0.125rem; /* 50% of 0.25rem */
    padding: 0.45rem 0.9rem; /* 90% of 0.5rem 1rem */
    background: #f0f0f0;
    color: #333;
    border: none;
    -webkit-border-radius: 18px; /* 90% of 20px */
    -moz-border-radius: 18px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 0.7875rem; /* 90% of 0.875rem */
    font-weight: 500;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.tag-filter-btn:hover {
    -webkit-box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.5);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
}

.tag-filter-btn.active {
    -webkit-box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.5);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Masonry Container */
#masonry-container {
    /* Column settings now controlled by customizer */
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;
    position: relative;
    min-height: 200px;
    orphans: 1;
    widows: 1;
    
    /* Flexbox fallback for browsers that don't support CSS columns */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

/* Modern browsers with column support */
@supports (column-count: 1) {
    #masonry-container {
        display: block;
    }
}

/* Post Cards */
.post-card {
    display: inline-block;
    width: 100%;
    /* margin-bottom now controlled by customizer */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    -webkit-transition: box-shadow 0.3s ease;
    -moz-transition: box-shadow 0.3s ease;
    -ms-transition: box-shadow 0.3s ease;
    -o-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
}

/* Safari-specific post card fixes for pixel-perfect alignment */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .post-card {
        /* Force pixel-perfect positioning */
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Prevent subpixel rendering issues */
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Flexbox fallback for post cards when columns aren't supported */
@supports not (column-count: 1) {
    .post-card {
        display: block;
        width: calc(33.333% - 20px);
        margin: 0 10px 20px 10px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 calc(33.333% - 20px);
        -ms-flex: 0 0 calc(33.333% - 20px);
        flex: 0 0 calc(33.333% - 20px);
    }
    
    /* Tablet fallback */
    @media (max-width: 1024px) {
        .post-card {
            width: calc(50% - 20px);
            -webkit-flex: 0 0 calc(50% - 20px);
            -ms-flex: 0 0 calc(50% - 20px);
            flex: 0 0 calc(50% - 20px);
        }
    }
    
    /* Mobile fallback */
    @media (max-width: 768px) {
        .post-card {
            width: calc(100% - 20px);
            -webkit-flex: 0 0 calc(100% - 20px);
            -ms-flex: 0 0 calc(100% - 20px);
            flex: 0 0 calc(100% - 20px);
        }
    }
}

/* Hover effects - prevent size/position changes */
.post-card:hover {
    /* No shadow effects as per requirement 4.5 */
    /* No size changes as per requirement 4.6 */
}

/* Image Container */
.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    /* Force immediate image rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Prevent lazy loading issues */
    contain: layout style;
}

/* Force image visibility on load */
.image-container img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Prevent browser lazy loading */
    loading: eager !important;
}

/* Additional image loading fixes for Edge browser */
.post-card img,
.slideshow-image,
.post-image {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Prevent lazy loading */
    loading: eager !important;
}

/* Force image rendering on hover */
.post-card:hover img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Safari-specific image container fixes for pixel-perfect alignment */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .image-container {
        /* Force pixel-perfect positioning */
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Prevent subpixel rendering */
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Ensure images don't change size on hover */
.post-card:hover .image-container {
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

/* Mobile/Tablet: Ensure slideshow containers respect JavaScript height */
@media (max-width: 1024px) {
    .slideshow-container {
        height: auto !important;
    }
    
    .slideshow-container[style*="height"] {
        height: inherit !important;
    }
}

.post-card:hover .image-container img,
.post-card:hover .post-image {
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
}

/* Post Images */
.post-image,
.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Splide Slideshow - Minimal CSS with height guarantee */
.slideshow-container {
    position: relative;
    width: 100%;
    /* Remove min-height to allow natural sizing */
}

.slideshow-container .splide {
    /* Remove min-height to allow natural sizing */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slideshow-container .splide.is-initialized {
    opacity: 1;
}

/* Safari-specific slide visibility fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .slideshow-container .splide__slide {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        /* Force hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Ensure first slide is visible by default */
.slideshow-container .splide__slide:first-child {
    opacity: 1;
}

/* Hide other slides until Splide is ready (except Safari) */
.slideshow-container .splide:not(.is-initialized) .splide__slide:not(:first-child) {
    opacity: 0;
}

/* Safari: Show all slides during initialization - but not for iOS Edge */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .slideshow-container .splide:not(.is-initialized) .splide__slide {
        opacity: 1 !important;
    }
    
    /* Simplified slideshow initialization */
    .slideshow-container .splide:not(.is-initialized) .splide__slide:not(:first-child) {
        opacity: 0;
        visibility: hidden;
    }
}

.slideshow-container .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove min-height to allow natural sizing */
}

/* Style the link inside slide to fill the slide */
.slideshow-container .splide__slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Let Splide handle all the layout - minimal interference */
.slideshow-container .splide__slide img {
    width: 100%;
    height: 100%; /* Fill the container height completely */
    display: block;
    max-width: 100%;
    object-fit: contain; /* Maintain aspect ratio while filling container */
}

/* Hide Splide navigation arrows */
.slideshow-container .splide__arrows,
.slideshow-container .splide__arrow {
    display: none !important;
}

/* Splide pagination - iOS Edge compatible */
.slideshow-container .splide__pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
}

.slideshow-container .splide__pagination__page {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
}

.slideshow-container .splide__pagination__page.is-active {
    background: rgba(255, 255, 255, 0.9);
}

/* Hide pagination when data-navigation is false */
.slideshow-container[data-navigation="false"] .splide__pagination {
    display: none;
}

/* Simple hover protection - prevent size changes */
.post-card:hover .slideshow-container {
    transform: none !important;
    height: inherit !important; /* Maintain fixed height on hover */
}

.post-card:hover .slideshow-container .splide {
    height: inherit !important; /* Maintain splide height on hover */
}

.post-card:hover .slideshow-container .splide__slide {
    align-items: center !important; /* Keep center alignment on hover */
    justify-content: center !important;
}

.post-card:hover .slideshow-container .splide__slide a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.post-card:hover .slideshow-container .splide__slide img,
.post-card:hover .slideshow-image {
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Video Container */
.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* YouTube Embed */
.video-container.youtube-embed {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    min-height: 200px; /* Minimum height for Safari */
    overflow: hidden;
}

.video-container.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Safari-specific YouTube embed fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .video-container.youtube-embed {
        /* Remove transform to prevent subpixel rendering issues */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Force pixel-perfect positioning */
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    
    .video-container.youtube-embed iframe {
        /* Force pixel-perfect positioning */
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Ensure crisp edges */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Media Library Video */
.video-container.media-video {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    /* Fallback for browsers that don't support aspect-ratio */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    min-height: 200px; /* Minimum height for Safari */
}

/* Modern browsers with aspect-ratio support */
@supports (aspect-ratio: 16/9) {
    .video-container.media-video {
        height: auto;
        padding-bottom: 0;
        aspect-ratio: 16/9;
        min-height: 200px; /* Keep minimum height even with aspect-ratio */
    }
}

.video-container.media-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    /* Prevent flickering and ensure smooth playback */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Remove any transitions that might cause flickering */
    transition: none;
    animation: none;
}

/* Safari-specific video fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .video-container.media-video {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .video-container.media-video video {
        -webkit-appearance: none;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* Fallback for very old Safari versions without object-fit */
@supports not (object-fit: cover) {
    .video-container.media-video video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

/* Ensure video containers don't get affected by hover effects */
.post-card:hover .video-container {
    transform: none !important;
    scale: none !important;
    translate: none !important;
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

.post-card:hover .video-container.youtube-embed {
    padding-bottom: 56.25% !important;
    height: 0 !important;
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

.post-card:hover .video-container iframe,
.post-card:hover .video-container video {
    transform: none !important;
    scale: none !important;
    translate: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Additional Safari-specific hover protection for videos */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .post-card:hover .video-container {
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: auto !important;
    }
    
    .post-card:hover .video-container iframe,
    .post-card:hover .video-container video {
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: auto !important;
    }
}

/* No Image Placeholder */
.no-image-placeholder {
    background: #f5f5f5;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.placeholder-content {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Text Container */
.text-container {
    padding: 1rem;
    border-radius: 0;
}

/* Hover effect for text container background - Customizer controlled */
.post-card:hover .text-container {
    /* Background color will be set by customizer CSS */
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    /* Ensure smooth transitions across all hosting environments */
    will-change: background-color;
}

/* Default hover effect (will be overridden by customizer) */
.post-card:hover .text-container {
    background-color: rgba(230, 230, 230, 0.9);
}


    -moz-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    scale: none !important;
    translate: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Entry Header */
.entry-header {
    margin-bottom: 0.5rem;
}

/* Single post entry header - tighter spacing */
.single-post .entry-header {
    margin-bottom: 0.25rem;
}

.single-post .entry-title {
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.entry-title {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.entry-title a {
    color: #737373;
    text-decoration: none;
}

.entry-title a:hover {
    color: #00aeef;
}

.entry-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

/* Single post entry meta - tighter spacing */
.single-post .entry-meta {
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

/* Hide entry-meta completely when no date is shown and no other content */
.entry-meta:empty {
    display: none;
    margin: 0;
}

/* PC and Tablet: Reduce title and date size to 85% and line-height to 70% */
@media (min-width: 769px) {
    .post-card .entry-title {
        font-size: 1.0625rem; /* 85% of 1.25rem */
        line-height: 0.91; /* 70% of 1.3 */
        margin: 0 0 0.425rem 0; /* Adjusted margin proportionally */
    }
    
    .post-card .entry-meta {
        font-size: 0.74375rem; /* 85% of 0.875rem */
        line-height: 1.12; /* 70% of default 1.6 */
        margin-bottom: 0.425rem; /* Adjusted margin proportionally */
    }
}

/* Entry Content */
.entry-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 1rem;
}

/* Post Tags */
.post-tags {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.06rem; /* Updated spacing for tag buttons */
    margin-top: 1rem;
}

/* Fallback for browsers without gap support */
@supports not (gap: 0.06rem) {
    .post-tags {
        margin: 1rem -0.03rem 0 -0.03rem;
    }
    
    .post-tags .tag-btn {
        margin: 0.03rem;
    }
}

.tag-btn {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    color: #333;
    border: none;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.tag-btn:hover {
    opacity: 0.8;
    -webkit-transform: none; /* No transform effects */
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* Tag buttons with custom colors */
.post-tags .tag-btn[style*="background-color"] {
    color: #333;
}

.post-tags .tag-btn[style*="background-color"]:hover {
    opacity: 0.8;
}

/* Footer */
.site-footer {
    background: #333;
    color: #fff;
    padding: 2rem 0;
    margin-top: 3rem;
}

.footer-content {
    text-align: left;
}

.footer-nav-menu {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer-nav-menu a {
    color: #fff;
    text-decoration: none;
}

.footer-nav-menu a:hover {
    color: #ccc;
}

/* Pagination Simple Text Links */
.pagination-nav {
    text-align: left;
    margin: 2rem 0 1rem 0;
}

.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination li {
    display: inline;
    margin-right: 1rem;
}

.pagination li a,
.pagination li span {
    color: #00aeef;
    text-decoration: underline;
    font-size: 1rem;
    font-weight: normal;
}

.pagination li a:hover {
    color: #0088cc;
    text-decoration: underline;
}

.pagination .current {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    /* 헤더 태그 필터 컨테이너 행간 조정 */
    .main-navigation .tag-filters {
        line-height: 1.6; /* 모바일에서 더 넓은 행간 */
    }
    
    /* Header tag filter buttons - 1.1x size on mobile */
    .main-navigation .tag-filter-btn {
        padding: 0.495rem 0.99rem; /* 1.1x of 0.45rem 0.9rem */
        font-size: 0.86625rem; /* 1.1x of 0.7875rem */
        margin: 0.25rem 0.1375rem; /* 상하 여백 증가로 행간 개선 */
        border-radius: 19.8px; /* 1.1x of 18px */
    }
    
    /* Regular tag filter buttons (non-header) keep original size */
    .tag-filter-btn:not(.main-navigation .tag-filter-btn) {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        margin: 0.2rem;
        border-radius: 16px;
    }
    
    .post-tags .tag-btn {
        padding: 0.2rem 0.6rem;
        font-size: 0.7rem;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    
    .container {
        padding: 0 10px;
    }
    
    /* 헤더 태그 필터 컨테이너 행간 조정 (작은 모바일) */
    .main-navigation .tag-filters {
        line-height: 1.7; /* 작은 화면에서 더 넓은 행간 */
    }
    
    /* Header tag filter buttons - 1.1x size on mobile */
    .main-navigation .tag-filter-btn {
        padding: 0.495rem 0.99rem; /* 1.1x of 0.45rem 0.9rem */
        font-size: 0.86625rem; /* 1.1x of 0.7875rem */
        margin: 0.3rem 0.1375rem; /* 작은 화면에서 더 큰 상하 여백 */
        border-radius: 19.8px; /* 1.1x of 18px */
    }
    
    /* Regular tag filter buttons (non-header) keep smaller size */
    .tag-filter-btn:not(.main-navigation .tag-filter-btn) {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        margin: 0.15rem;
        border-radius: 12px;
    }
    
    .post-tags .tag-btn {
        padding: 0.15rem 0.5rem;
        font-size: 0.65rem;
        border-radius: 12px;
    }
}/* Cards wit
hout image container - text-only cards */
.post-card:not(:has(.image-container)) .text-container {
    /* Text-only cards styling */
    border-radius: 0;
}

/* Fallback for browsers that don't support :has() */
.post-card.text-only .text-container {
    border-radius: 0;
}/* P
agination Styles */
/* Duplicate pagination styles removed - using simple text links above *//* 
Loading States */
.masonry-container.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.masonry-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0073aa;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}

@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
}

@keyframes spin {
    0% { 
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% { 
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.masonry-container.layout-updating {
    transition: opacity 0.3s ease;
}

/* Pagination focus state for accessibility */
.pagination a:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}/* R
ead More Link */
.read-more-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #0073aa;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.read-more-link:hover {
    color: #005a87;
    text-decoration: underline;
}

.read-more-link::after {
    content: ' →';
    margin-left: 0.25rem;
}

/* Entry Content Spacing */
.entry-content {
    margin-bottom: 1rem;
}

/* Single post - increase spacing between tags and content */
.single-post .post-tags {
    margin-bottom: 1.5rem;
}

.single-post .entry-content {
    margin-top: 1.5rem;
}

.excerpt-text {
    line-height: 1.5;
    color: #666;
}

.excerpt-text p:last-child {
    margin-bottom: 0;
}/* 
Limit excerpt text to 2-3 lines */
.excerpt-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* Approximately 3 lines (1.5em line-height * 3) */
    line-height: 1.5;
}

/* Fallback for browsers that don't support -webkit-line-clamp */
@supports not (-webkit-line-clamp: 3) {
    .excerpt-text {
        max-height: 4.5em;
        overflow: hidden;
        position: relative;
    }
    
    .excerpt-text::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 1.5em;
        background: -webkit-linear-gradient(left, transparent, white);
        background: -moz-linear-gradient(left, transparent, white);
        background: -ms-linear-gradient(left, transparent, white);
        background: -o-linear-gradient(left, transparent, white);
        background: linear-gradient(to right, transparent, white);
    }
}/* Post
 Card Tag Buttons - Different styling from main filter buttons */
.post-tags .tag-btn {
    margin: 0.06rem; /* Updated spacing for tag buttons */
}

.post-tags .tag-btn:hover {
    -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7); /* Smaller shadow for card tags */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
}

.post-tags .tag-btn.active {
    -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7); /* Smaller shadow for card tags */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
}/* Debug
 styles for AWS Lightsail color extraction (remove in production) */
/* Post Navigation Styles */
/* Post Navigation Simple Text Links */
.post-navigation {
    margin: 2rem 0 1rem 0;
}

.post-navigation .nav-links {
    text-align: left;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    margin-bottom: 0.5rem;
}

.post-navigation a {
    color: #00aeef;
    text-decoration: none;
    font-size: 1rem;
    font-weight: normal;
    display: inline;
}

.post-navigation a:hover {
    color: #0088cc;
}

.post-navigation .nav-subtitle {
    display: inline;
    font-size: 1rem;
    color: #00aeef;
    font-weight: normal;
    text-decoration: none;
}

.post-navigation .nav-title {
    display: inline;
    font-size: 1rem;
    font-weight: normal;
    color: #00aeef;
    text-decoration: underline;
}

.post-navigation a:hover .nav-title {
    text-decoration: underline;
}

/* Back to Top Simple Text Link */
.back-to-top-simple {
    text-align: left;
    margin: 2rem 0 1rem 0;
}

.back-to-top-text-link {
    color: #00aeef;
    text-decoration: underline;
    font-size: 1rem;
    font-weight: normal;
}

.back-to-top-text-link:hover {
    color: #0088cc;
    text-decoration: underline;
}





@media (max-width: 480px) {
    .post-navigation {
        margin: 1.5rem 0 1rem 0;
    }
    
    .back-to-top-simple {
        margin: 1.5rem 0 1rem 0;
    }
}

/* Splide fade effect - basic styles only */
.slideshow-container .splide--fade .splide__slide {
    opacity: 0;
}

.slideshow-container .splide--fade .splide__slide.is-active {
    opacity: 1;
}
/* =======
===================================================================
   Forced Colors Mode Support (Replaces deprecated -ms-high-contrast)
   ========================================================================== */

/* Modern Forced Colors Mode support for accessibility */
@media (forced-colors: active) {
    /* Focus indicators for slideshow elements */
    .splide__slide:focus-visible,
    .splide__slide:focus {
        outline: 3px solid ButtonText;
        outline-offset: -3px;
    }
    
    /* Ensure proper contrast for interactive elements */
    .tag-filter-btn {
        border: 1px solid ButtonText;
        background-color: ButtonFace;
        color: ButtonText;
    }
    
    .tag-filter-btn:hover,
    .tag-filter-btn.active {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }
    
    /* Post card borders for better visibility */
    .post-card {
        border: 1px solid ButtonText;
    }
    
    /* Navigation links */
    .nav-menu a {
        color: LinkText;
    }
    
    .nav-menu a:hover {
        color: HighlightText;
        background-color: Highlight;
    }
    
    /* Ensure text remains readable */
    .site-title a,
    .post-title a,
    .post-content {
        color: CanvasText;
    }
}

/* Modern Forced Colors Mode support (replaces deprecated -ms-high-contrast) */
@media (forced-colors: active) {
    .splide__slide:focus-visible {
        outline: 3px solid ButtonText;
        outline-offset: -3px;
        border: none; /* Prevent double borders */
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .post-card {
        border: 2px solid currentColor;
    }
    
    .tag-filter-btn {
        border: 2px solid currentColor;
        font-weight: bold;
    }
    
    .tag-filter-btn:hover,
    .tag-filter-btn.active {
        background-color: currentColor;
        color: white;
    }
}/*
 ==========================================================================
   Splide Library Overrides - Modern Accessibility Support
   ========================================================================== */

/* Override deprecated -ms-high-contrast with modern forced-colors */
@media (forced-colors: active) {
    /* Splide slide focus indicators */
    .splide__slide:focus-visible {
        outline: 3px solid ButtonText !important;
        outline-offset: -3px !important;
        border: none !important; /* Remove conflicting border */
    }
    
    /* Splide navigation arrows */
    .splide__arrow {
        background-color: ButtonFace !important;
        color: ButtonText !important;
        border: 2px solid ButtonText !important;
    }
    
    .splide__arrow:hover {
        background-color: Highlight !important;
        color: HighlightText !important;
        border-color: Highlight !important;
    }
    
    /* Splide pagination dots */
    .splide__pagination__page {
        background-color: ButtonText !important;
    }
    
    .splide__pagination__page.is-active {
        background-color: Highlight !important;
    }
}

/* Ensure focus indicators work in all browsers */
@supports (outline-offset: -3px) {
    .splide.is-focus-in .splide__slide:focus {
        outline: 3px solid;
        outline-offset: -3px;
        border: none; /* Prevent double borders */
    }
}

/* Remove deprecated -ms-high-contrast dependency */
@media screen and (forced-colors: active) {
    .splide__slide:focus-visible {
        border: 3px solid ButtonText;
        outline: none; /* Use border instead of outline for better compatibility */
    }
}/* =
=========================================================================
   iOS Edge Browser Specific Fixes
   ========================================================================== */

/* iOS Edge: Fix text container visibility issues in masonry columns */
@supports (-webkit-touch-callout: none) {
    /* Target iOS devices */
    @media screen and (max-device-width: 1024px) {
        /* Force text container to be visible and stable */
        .text-container {
            /* Prevent transform conflicts */
            -webkit-transform: none !important;
            transform: none !important;
            /* Force layer creation for stable rendering */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper positioning */
            position: relative;
            z-index: 1;
            /* Force repaint */
            -webkit-font-smoothing: antialiased;
            /* Prevent column break issues */
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* Fix post card rendering in columns */
        .post-card {
            /* Prevent transform conflicts in columns */
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
            /* Force stable positioning */
            position: relative;
            /* Ensure proper stacking */
            z-index: auto;
            /* Prevent column break issues */
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            page-break-inside: avoid;
            /* Force repaint on changes */
            will-change: auto;
        }
        
        /* Specific fix for second and third column first row cards */
        #masonry-container .post-card:nth-child(2) .text-container,
        #masonry-container .post-card:nth-child(3) .text-container {
            /* Force immediate visibility */
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            /* Prevent transform issues */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper positioning */
            position: relative;
            z-index: 2;
        }
        
        /* Fix hover state instability */
        .post-card:hover .text-container {
            /* Prevent transform changes on hover */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Maintain visibility */
            opacity: 1 !important;
            visibility: visible !important;
            /* Smooth transition without transform */
            -webkit-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        
        /* Force masonry container stability */
        #masonry-container {
            /* Prevent column rendering issues */
            -webkit-column-fill: auto;
            column-fill: auto;
            /* Force stable rendering */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            /* Ensure proper overflow handling */
            overflow: visible;
        }
    }
}

/* Additional iOS Edge specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
    /* iOS devices with Webkit engine */
    .text-container {
        /* Force GPU acceleration for stable rendering */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /* Prevent subpixel rendering issues */
        -webkit-font-smoothing: subpixel-antialiased;
        /* Force immediate paint */
        will-change: transform;
    }
    
    /* Fix for column break issues */
    .post-card {
        /* Ensure cards don't break across columns */
        display: inline-block;
        vertical-align: top;
        /* Force stable positioning */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}/* =======
===================================================================
   iOS Edge Browser Class-based Fixes
   ========================================================================== */

/* When iOS Edge browser is detected via JavaScript */
body.ios-edge-browser {
    /* Force stable rendering for the entire page */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

body.ios-edge-browser #masonry-container {
    /* Force column stability */
    -webkit-column-fill: auto;
    column-fill: auto;
    /* Prevent rendering glitches */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.ios-edge-browser .post-card {
    /* Ensure stable card rendering */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* Force immediate visibility */
    opacity: 1 !important;
    visibility: visible !important;
}

body.ios-edge-browser .text-container {
    /* Force text container stability */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Prevent column break issues */
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    /* Force layer creation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Stable positioning */
    position: relative;
    z-index: 1;
}

body.ios-edge-browser .post-card:hover .text-container {
    /* Maintain stability on hover */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}/* ========
==================================================================
   iOS Edge Browser - Image Container Fixes
   ========================================================================== */

/* iOS Edge: Fix image container visibility issues in masonry columns */
@supports (-webkit-touch-callout: none) {
    /* Target iOS devices */
    @media screen and (max-device-width: 1024px) {
        /* Force image container to be visible and stable */
        .image-container {
            /* Prevent transform conflicts */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Force layer creation for stable rendering */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper positioning */
            position: relative;
            z-index: 1;
            /* Force repaint */
            -webkit-font-smoothing: antialiased;
            /* Prevent column break issues */
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
            /* Force immediate rendering */
            will-change: transform;
        }
        
        /* Force images within containers to be stable */
        .image-container img {
            /* Prevent transform conflicts */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Force visibility */
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
            /* Prevent lazy loading issues */
            loading: eager !important;
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Stable positioning */
            position: relative;
        }
        
        /* Specific fix for second and third column first row cards */
        #masonry-container .post-card:nth-child(2) .image-container,
        #masonry-container .post-card:nth-child(3) .image-container {
            /* Force immediate visibility */
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            /* Prevent transform issues */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper positioning */
            position: relative;
            z-index: 2;
            /* Force repaint */
            will-change: transform;
        }
        
        /* Fix images in problematic positions */
        #masonry-container .post-card:nth-child(2) .image-container img,
        #masonry-container .post-card:nth-child(3) .image-container img {
            /* Force immediate visibility */
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            /* Prevent transform issues */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Force hardware acceleration */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        /* Fix hover state instability for images */
        .post-card:hover .image-container {
            /* Prevent transform changes on hover */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Maintain visibility */
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
        }
        
        .post-card:hover .image-container img {
            /* Prevent transform changes on hover */
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
            /* Maintain visibility */
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
        }
        
        /* Fix slideshow containers within image containers */
        .image-container .slideshow-container {
            /* Force stable rendering */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        /* Fix video containers within image containers */
        .image-container .video-container {
            /* Force stable rendering */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    }
}

/* Additional iOS Edge specific fixes for images */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
    /* iOS devices with Webkit engine */
    .image-container {
        /* Force GPU acceleration for stable rendering */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /* Prevent subpixel rendering issues */
        -webkit-font-smoothing: subpixel-antialiased;
        /* Force immediate paint */
        will-change: transform;
        /* Ensure proper overflow handling */
        overflow: hidden;
    }
    
    .image-container img {
        /* Force stable image rendering */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /* Prevent image rendering issues */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Force crisp rendering */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}/* ======
====================================================================
   iOS Edge Browser Class-based Image Container Fixes
   ========================================================================== */

/* When iOS Edge browser is detected via JavaScript */
body.ios-edge-browser .image-container {
    /* Force stable image container rendering */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Prevent column break issues */
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    /* Force layer creation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Stable positioning */
    position: relative;
    z-index: 1;
    /* Force immediate rendering */
    will-change: transform;
}

body.ios-edge-browser .image-container img {
    /* Force stable image rendering */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Force hardware acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent lazy loading issues */
    loading: eager !important;
    /* Force crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

body.ios-edge-browser .post-card:hover .image-container {
    /* Maintain stability on hover */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body.ios-edge-browser .post-card:hover .image-container img {
    /* Maintain image stability on hover */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body.ios-edge-browser .image-container .slideshow-container {
    /* Force slideshow stability */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.ios-edge-browser .image-container .video-container {
    /* Force video container stability */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}/* ==
========================================================================
   iOS Edge Browser - Media Library Video Thumbnail Fixes
   ========================================================================== */

/* iOS Edge: Fix media library video thumbnail display */
@supports (-webkit-touch-callout: none) {
    /* Target iOS devices */
    @media screen and (max-device-width: 1024px) {
        /* Force video thumbnail loading */
        .video-container.media-video video {
            /* Force first frame display */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Ensure video is visible */
            opacity: 1 !important;
            visibility: visible !important;
            /* Force hardware acceleration */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Prevent lazy loading */
            loading: eager;
            /* Force immediate rendering */
            will-change: transform;
        }
        
        /* Force video container stability */
        .video-container.media-video {
            /* Stable positioning */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper overflow */
            overflow: hidden;
        }
    }
}

/* iOS Edge class-based video fixes */
body.ios-edge-browser .video-container.media-video {
    /* Force stable video container */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Force layer creation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.ios-edge-browser .video-container.media-video video {
    /* Force video thumbnail display */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Force hardware acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Force first frame load */
    object-fit: cover;
    object-position: center;
}

/* Force video loading on hover */
body.ios-edge-browser .post-card:hover .video-container.media-video video {
    /* Maintain stability on hover */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}/*
 ==========================================================================
   iOS Edge Browser - Slideshow Fixes
   ========================================================================== */

/* iOS Edge: Fix slideshow playback issues */
@supports (-webkit-touch-callout: none) {
    /* Target iOS devices */
    @media screen and (max-device-width: 1024px) {
        /* Force slideshow container stability */
        .slideshow-container {
            /* Prevent transform conflicts */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper positioning */
            position: relative;
            z-index: 1;
            /* Force immediate rendering */
            will-change: transform;
        }
        
        /* Fix Splide container */
        .slideshow-container .splide {
            /* Stable positioning */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* Fix Splide track */
        .slideshow-container .splide__track {
            /* Force stable track rendering */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Prevent rendering issues */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure proper overflow */
            overflow: hidden;
        }
        
        /* Fix Splide list */
        .slideshow-container .splide__list {
            /* Force stable list rendering */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Prevent rendering glitches */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        /* Fix individual slides */
        .slideshow-container .splide__slide {
            /* Force slide stability */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
            /* Force layer creation */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Prevent column break issues */
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
        }
        
        /* Fix slideshow images */
        .slideshow-container .splide__slide img {
            /* Force image stability */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Ensure visibility */
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
            /* Force hardware acceleration */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Prevent lazy loading */
            loading: eager !important;
        }
    }
}

/* iOS Edge class-based slideshow fixes */
body.ios-edge-browser .slideshow-container {
    /* Force stable slideshow container */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Force layer creation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Simplified slideshow styles with iOS Edge fixes */
.slideshow-container .splide {
    opacity: 1;
    visibility: visible;
    /* iOS Edge: Force hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.slideshow-container .splide__slide {
    opacity: 1;
    visibility: visible;
    /* iOS Edge: Ensure proper positioning */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.slideshow-container .splide__slide img {
    opacity: 1;
    visibility: visible;
    display: block;
    /* iOS Edge: Prevent image shifting */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}/* ==
========================================================================
   iOS Edge Browser - Slideshow Initial Display Fixes
   ========================================================================== */

/* iOS Edge: Fix initial slideshow display to show first slide only */
@supports (-webkit-touch-callout: none) {
    /* Target iOS devices */
    @media screen and (max-device-width: 1024px) {
        /* Override Safari rule - hide non-first slides during initialization */
        .slideshow-container .splide:not(.is-initialized) .splide__slide:not(:first-child) {
            opacity: 0 !important;
            visibility: hidden !important;
            display: none !important;
        }
        
        /* Ensure first slide is visible during initialization */
        .slideshow-container .splide:not(.is-initialized) .splide__slide:first-child {
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
        }
        
        /* Force proper slide order after initialization */
        .slideshow-container .splide.is-initialized .splide__slide {
            opacity: 1;
            visibility: visible;
            display: block;
        }
    }
}

/* Simplified slideshow initialization - all browsers */
.slideshow-container .splide:not(.is-initialized) .splide__slide:not(:first-child) {
    opacity: 0;
    visibility: hidden;
}

.slideshow-container .splide:not(.is-initialized) .splide__slide:first-child {
    opacity: 1;
    visibility: visible;
}

.slideshow-container .splide.is-initialized .splide__slide {
    opacity: 1;
    visibility: visible;
}

/* iOS Edge: Additional slideshow stability */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-device-width: 1024px) {
        /* Target iOS devices including iOS Edge */
        .slideshow-container .splide__track {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .slideshow-container .splide__list {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        /* Ensure slides don't shift during initialization */
        .slideshow-container .splide:not(.is-initialized) .splide__slide {
            position: relative;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        
        /* Force proper slide positioning after initialization */
        .slideshow-container .splide.is-initialized .splide__slide {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        
        /* iOS Edge: Force pagination visibility and centering */
        .slideshow-container .splide__pagination {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            left: 0 !important;
            right: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            z-index: 10 !important;
            -webkit-transform: none !important;
            transform: none !important;
        }
        
        .slideshow-container .splide__pagination__page {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            pointer-events: auto !important;
        }
    }
}/
* Video playback stability - prevent flickering */
.video-container.media-video video::-webkit-media-controls {
    /* Ensure controls don't cause flickering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.video-container.media-video video::-webkit-media-controls-panel {
    /* Stable control panel */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Prevent video loading spinner flickering */
.video-container.media-video video::-webkit-media-controls-start-playback-button {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}