/* Bendras stilius kortelėms ir mygtukams */
.news-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.215);
    /* Optimized transition - only animate specific properties to prevent layout shift */
    transition: height 0.2s ease, box-shadow 0.3s ease-in-out, opacity 0.2s ease-in-out;
    position: relative;
    /* Prevent layout shift during expansion - but allow proper expansion calculations */
    contain: layout style paint;
}

/* Desktop-only layouts - moved to main @media block below */

/* Expanded card takes full width when NOT using overlay (absolute) mode */
.news-card.expanded:not(.overlay-expanded) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    z-index: 10;
    position: relative;
}

.news-card:hover {
    transform: none;
    box-shadow: 0 0 15px 5px rgba(96, 165, 250, 0.7);
    /* Light blue shadow */
}

/* Invisible spacer that preserves layout when a card is overlay-expanded */
.news-card-spacer {
    display: block;
    width: 100%;
    visibility: hidden;
}

.important-news {
    background-color: #feffda;
    border-color: #bc181889;
}

/* Nuotraukų stilius */
.news-image {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: block;
    box-shadow: none !important;
    /* nuimame šešėlį nuo IMG */
}

.news-image:hover {
    transform: scale(1.04);
}

/* Naujas šešėlis per konteinerį */
.image-grid>div {
    border-radius: 0.5rem;
    overflow: hidden;
    /* kad IMG kampai būtų apvalūs */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.45);
    /* šešėlis */
    position: relative;
    z-index: 1;
}

/* Attachment container - prevent layout shift */
.attachment {
    display: block;
    position: relative;
}

/* SVG icons - prevent layout shift (only fix size, don't force it) */
svg.h-6.w-6 {
    flex-shrink: 0;
    display: inline-block;
}



.read-less-btn1 {
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    margin-right: auto;
    /* stumia į kairę, jei flex konteineris */

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.35);

    text-decoration: none;
    /* kad nebūtų pabraukimo */
    transition: all 0.3s ease;
}

.read-less-btn1:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.45);
    color: #fff;
    /* užtikrina, kad hover metu spalva neišnyks */
}

/* Mygtukų stilius */
.read-more-btn,
.read-less-btn {
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.35);

    transition: all 0.3s ease;
}

/* Read More -> dešinėje */
.read-more-btn {
    margin-left: auto;
}

/* Read Less -> kairėje */
.read-less-btn {
    margin-right: auto;
}

/* Hover efektas */
.read-more-btn:hover,
.read-less-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.45);
}


.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #fff;
    border-radius: 9999px;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

.like-btn:hover {
    background-color: #f7fafc;
}

.heart-icon {
    transition: transform 0.3s ease;
}

.liked .heart-icon {
    animation: heartBeat 0.5s ease forwards;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Teksto ir mygtukų matomumas */
.read-less-btn,
.news-card.expanded .read-more-btn,
.news-card.expanded .collapsed-title,
.news-card:not(.expanded) .expanded-title,
.news-card:not(.expanded) .hidden-on-collapsed {
    display: none;
}

.news-card.expanded .read-less-btn,
.news-card.expanded .expanded-title,
.news-card.expanded .hidden-on-collapsed,
.news-card:not(.expanded) .collapsed-title,
.news-card:not(.expanded) .comments-count-btn,
.news-card.expanded .comments-count-btn {
    display: block;
}

/* Comments count button styling */
.comments-count-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.comments-count-btn:hover {
    background-color: #f3f4f6;
}

/* Comments section styling */
.comments-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.3rem; /* 80% mažiau nei 1.5rem (1.5 * 0.2 = 0.3) */
    margin-top: 1.5rem;
}

/* Comments list with max height and scroll */
.comments-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Scrollbar styling for comments */
.comments-list::-webkit-scrollbar {
    width: 6px;
}

.comments-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.comments-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.comments-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Comments section visibility - hidden by default */
.comments-section.comments-hidden {
    display: none !important;
}

.comments-section.comments-visible {
    display: block !important;
}

/* Ensure comments section works identically in modal - same as collapsed cards */
.mobile-modal-card .comments-section {
    /* Modal comments section should behave exactly like collapsed cards */
    display: none !important;
}

.mobile-modal-card .comments-section.comments-hidden {
    display: none !important;
}

.mobile-modal-card .comments-section.comments-visible {
    display: block !important;
}

/* Comments count button should be visible in modal and expanded cards */
.mobile-modal-card .comments-count-btn,
.news-card.expanded .comments-count-btn {
    display: inline-flex !important;
}

/* Comments section should be hidden by default in expanded cards too */
.news-card.expanded .comments-section.comments-hidden {
    display: none !important;
}

.news-card.expanded .comments-section.comments-visible {
    display: block !important;
}

/* Ensure comments list has proper spacing and scroll */
.comments-section .comments-list {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Comment form always at bottom */
.comments-section form {
    margin-top: 1rem;
}

/* Comment input bar styling - like messaging app */
.comment-input-bar {
    margin-top: 1rem;
}

/* Reply styling - smaller bubble, indented from left */
.comments-list .bg-gray-100 {
    margin-left: 2rem !important; /* Indent from left */
    max-width: calc(100% - 2rem) !important; /* Smaller width */
    padding: 0.75rem !important; /* Smaller padding */
}

.comments-list .bg-gray-100 .text-sm {
    font-size: 0.875rem;
}

.comments-list .bg-gray-100 .font-semibold {
    font-size: 0.875rem;
}

/* Reply form styling */
[id^="reply-form-"] {
    margin-left: 0.5rem;
}

.comment-input-bar .flex {
    min-height: 48px;
}

.comment-input-bar textarea {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.comment-input-bar textarea:focus {
    outline: none !important;
    ring: none !important;
    box-shadow: none !important;
    border: none !important;
}

.comment-input-bar textarea::-webkit-scrollbar {
    width: 4px;
}

.comment-input-bar textarea::-webkit-scrollbar-track {
    background: transparent;
}

.comment-input-bar textarea::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.comment-input-bar textarea::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Teksto apribojimas */
.news-content,
.news-scaled-container .news-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Mobile: 3 eilutės (apie 72px su line-height 1.6) */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6 !important; /* Suvienodinta su mobile modal */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal !important; /* Suvienodinta su mobile modal */
    text-align: left;
}

.news-card.expanded .news-content,
.news-scaled-container .news-card.expanded .news-content {
    overflow: visible;
    max-height: none;
    white-space: normal !important; /* Normal white-space - <br> tagai veiks per CSS */
    display: block !important; /* Išskleistoms kortelėms - normalus display */
    -webkit-line-clamp: unset !important; /* Pašalinti line-clamp išskleistoms kortelėms */
    -webkit-box-orient: unset !important;
    text-overflow: unset !important;
    line-height: 1.6 !important; /* Sumažinta nuo 1.8 - suvienodinta su mobile modal */
    word-spacing: normal;
    letter-spacing: normal;
}


/* Pagrindinis tėvinis elementas, kad kortelių pozicijos būtų nustatomos teisingai */
.news-grid-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* desktop – 3 stulpeliai */
    gap: 1rem;
    width: 100%;
    min-height: 1200px;
}

/* Minimize gap between post date and image */
.news-card .post-date {
    margin-bottom: 0 !important;
    /* Remove bottom margin */
    margin-top: 0 !important;
    /* Remove top margin */
}

.news-card .expanded-content {
    margin-top: 0 !important;
    /* Remove top margin completely */
}

/* Fix gap in collapsed cards - reduce image container margins */
.news-card:not(.expanded) .image-container {
    margin-top: 0.25rem !important; /* Minimal gap only */
}

.news-card:not(.expanded) .image-grid {
    margin-top: 0 !important; /* Remove top margin from image grid */
}



/* RESPONSIVE DESIGN - Prisitaikymas prie skirtingų ekrano dydžių */

/* Tabletės (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .news-grid-container {
        grid-template-columns: repeat(2, 1fr);
        /* planšetė – 2 stulpeliai */
        gap: 1rem;
        min-height: auto;
    }
}

/* Mobilieji įrenginiai (iki 768px) */
@media (max-width: 768px) {
    .news-grid-container {
        grid-template-columns: 1fr;
        /* mobilus – 1 stulpelis */
        gap: 1rem;
        min-height: auto;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Large cards mobiliuose užima 1 stulpelį (kaip ir small) */
    .large-card {
        grid-column: span 1;
    }

    /* Empty slots mobiliuose taip pat 1 stulpelis */
    .empty-slot {
        grid-column: span 1;
        min-height: 80px;
        height: 80px;
    }
    
    /* Užtikrinti, kad news-card mobile versijoje neturėtų horizontal scroll */
    .news-card {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Užtikrinti, kad news-content mobile versijoje neturėtų horizontal scroll */
    .news-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    
    /* Užtikrinti, kad text-container mobile versijoje neturėtų horizontal scroll */
    .text-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Išplėstos kortelės bendras stilius */


/* Išplėstos kortelės vaizdų stilius */
.news-card.expanded .news-image {
    max-height: 450px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    order: unset;
    box-shadow: none !important;
    /* iš IMG nuimame */
}

.news-card.expanded .image-grid>div {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

/* KORTELIŲ BŪSENOS VILKIMO METU */
.news-card.dragging {
    opacity: 0.5 !important;
    pointer-events: none !important;
    /* SVARBU: Ignoruojame pelės įvykius pačiam elementui */
    transform: scale(1.02) !important;
    z-index: 1000 !important;
}

/* Mygtukų ir turinio išdėstymas išplėstoje kortelėje */
.news-card.expanded .mt-6,
.news-card.expanded .flex.flex-col.sm\:flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.news-card.expanded .mt-6 {
    margin-top: auto;
}

.news-card.expanded .mt-6>div:first-child {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.news-card.expanded .mt-6>div:last-child {
    margin-top: 0;
}

.news-card.expanded .image-grid.middle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* Dviejų stulpelių išdėstymas - perrašomas desktop float layout */

.news-card.expanded .text-container {
    text-align: left;
    padding: 1.25rem;
}

.news-card.expanded.left-card .expanded-content {
    flex-direction: row;
}

.news-card.expanded.left-card .image-container {
    border-right: 1px solid #e5e7eb;
}

.news-card.expanded.right-card .expanded-content {
    flex-direction: row-reverse;
}

.news-card.expanded.right-card .text-container {
    border-right: 1px solid #e5e7eb;
}

.news-card.expanded.right-card .image-container {
    margin-left: 1rem;
}

.news-card.expanded.left-card .image-container {
    margin-right: 1rem;
}

/* Desktop expanded card adjustments */
@media (min-width: 769px) {
    
    /* LARGE left/right ir small left/right: naudoti float layout, kad tekstas tekėtų po nuotrauka */
    .news-card.expanded.large-left .expanded-content,
    .news-card.expanded.large-right .expanded-content,
    .news-card.expanded.small-card.expanded-left .expanded-content,
    .news-card.expanded.small-card.expanded-right .expanded-content {
        display: block !important; /* Pakeisti iš flex į block */
    }
    
    /* LARGE left: nuotrauka kairėje su float */
    .news-card.expanded.large-left .expanded-content .image-container {
        float: left !important;
        width: 40% !important;
        max-width: 400px !important;
        margin-right: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    .news-card.expanded.large-left .expanded-content .text-container {
        display: block !important; /* Block, kad tekstas tekėtų aplink float */
        padding: 0 !important;
    }
    
    /* LARGE right: nuotrauka dešinėje su float */
    .news-card.expanded.large-right .expanded-content .image-container {
        float: right !important;
        width: 40% !important;
        max-width: 400px !important;
        margin-left: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    .news-card.expanded.large-right .expanded-content .text-container {
        display: block !important; /* Block, kad tekstas tekėtų aplink float */
        padding: 0 !important;
    }
    
    /* Small cards left: nuotrauka kairėje su float */
    .news-card.expanded.small-card.expanded-left .expanded-content .image-container {
        float: left !important;
        width: 40% !important;
        max-width: 300px !important;
        margin-right: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    .news-card.expanded.small-card.expanded-left .expanded-content .text-container {
        display: block !important; /* Block, kad tekstas tekėtų aplink float */
        padding: 0 !important;
    }
    
    /* Small cards right: nuotrauka dešinėje su float */
    .news-card.expanded.small-card.expanded-right .expanded-content .image-container {
        float: right !important;
        width: 40% !important;
        max-width: 300px !important;
        margin-left: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    .news-card.expanded.small-card.expanded-right .expanded-content .text-container {
        display: block !important; /* Block, kad tekstas tekėtų aplink float */
        padding: 0 !important;
    }
    
    /* Hover efektas nuotraukoms su float layout (left/right): padidina 130% su mouse tracking */
    /* Užtikrinti, kad image-container turėtų overflow: hidden, kad padidinta nuotrauka neišeitų už ribų */
    .news-card.expanded.large-left .expanded-content .image-container,
    .news-card.expanded.large-right .expanded-content .image-container,
    .news-card.expanded.small-card.expanded-left .expanded-content .image-container,
    .news-card.expanded.small-card.expanded-right .expanded-content .image-container {
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Nuotrauka su smooth transition (bus kontroliuojama per JavaScript) */
    /* Pašalinti bet kokį CSS transform, kad JavaScript galėtų visiškai kontroliuoti */
    .news-card.expanded.large-left .expanded-content .image-container .attachment,
    .news-card.expanded.large-right .expanded-content .image-container .attachment,
    .news-card.expanded.small-card.expanded-left .expanded-content .image-container .attachment,
    .news-card.expanded.small-card.expanded-right .expanded-content .image-container .attachment {
        overflow: hidden !important;
        position: relative !important;
    }

    /* Center column: image top, text below (tik center, left/right naudoja float) */
    .news-card.expanded.small-card.expanded-center .expanded-content {
        flex-direction: column !important;
        align-items: stretch;
        gap: 1rem;
    }
    .news-card.expanded.small-card.expanded-center .image-container,
    .news-card.expanded.small-card.expanded-center .text-container {
        width: 100% !important;
        order: unset !important;
        padding: 0 !important;
    }

    /* Kiti layout (large_top, small center): paliekame flex */
    .news-card.expanded:not(.large-left):not(.large-right):not(.expanded-left):not(.expanded-right) .text-container,
    .news-card.expanded.large-top .text-container,
    .news-card.expanded.small-card.expanded-center .text-container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Make image container full width (bet perrašysime left/right aukščiau) */
    .news-card.expanded:not(.large-left):not(.large-right):not(.expanded-left):not(.expanded-right) .image-container,
    .news-card.expanded.large-top .image-container,
    .news-card.expanded.small-card.expanded-center .image-container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        float: none !important;
    }

    /* Desktop: padidinti iki 4 eilutės (apie 90px su line-height 1.6) tik neišskleistoms kortelėms */
    .news-content,
    .news-scaled-container .news-content {
        -webkit-line-clamp: 4 !important; /* Desktop: 4 eilutės (apie 90px) */
    }

    /* Image grid flex row for images */
    .news-card.expanded .image-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    /* Set image widths based on data-image-count attribute */
    .news-card.expanded .image-container[data-image-count="1"] .image-grid>div {
        flex: 0 0 100%;
    }

    .news-card.expanded .image-container[data-image-count="2"] .image-grid>div {
        flex: 0 0 50%;
    }

    .news-card.expanded .image-container[data-image-count="3"] .image-grid>div {
        flex: 0 0 33.3%;
    }
}



/* Added spacing between image and text containers when side by side */
.expanded-content.flex-row>.image-container {
    margin-right: 1rem;
}

.expanded-content.flex-row-reverse>.image-container {
    margin-left: 1rem;
}
/* Additional mobile responsive styles for expanded cards */
@media (max-width: 768px) {
    /* Mobile: remove contain: layout from original cards to prevent layout issues */
    .news-card.mobile-original {
        contain: style paint !important; /* Remove layout containment for mobile original cards */
    }

    /* Mobile expanded card centering - JS controls positioning, minimal CSS */
    .news-card.mobile-expanded.expanded,
    .news-card.mobile-expanded.expanded.overlay-expanded {
        /* JS sets all positioning - no conflicting CSS */
        z-index: 100000 !important; /* Aukščiau nei overlay (99999) */
        border-radius: 12px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* Ensure the expanded card doesn't interfere with other elements */
    .news-card.mobile-expanded * {
        max-width: 100%;
    }
    
    /* Remove transition to prevent layout shift on mobile */
    .news-grid-container {
        transition: none;
        /* Optimize rendering - but allow layout changes for mobile */
        contain: style paint;
    }

    /*
      Priverstinai nustatome, kad visų kortelių (tiek išplėstų, tiek sutrauktų) turinys
      (nuotrauka + tekstas) mobiliuosiuose įrenginiuose būtų rodomas stulpeliu.
    */
    .expanded-content {
        flex-direction: column !important;
        align-items: center;
        /* Center content horizontally */
    }

    /*
      Panaikiname šoninių nuotraukų stilius ir nustatome, kad tiek nuotraukų,
      tiek teksto konteineriai užimtų visą kortelės plotį.
    */
    .news-card .image-container,
    .news-card .text-container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        /* Pašaliname bet kokius rėmelius tarp stulpelių */
    }

    /*
      Užtikriname, kad jei yra kelios nuotraukos, jos būtų rodomos viena po kitos
      vertikaliai (stulpeliu).
    */
    .image-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        /* Center images horizontally */
    }

    .image-grid>div {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        /* Center each image container */
    }
    
    /* Leidžiame wrapper div susitraukti iki nuotraukos dydžio */
    .news-card:not(.expanded) .image-grid > div.w-full {
        width: fit-content !important;
        max-width: 100% !important;
    }

    .news-card:not(.expanded) .news-image {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        max-height: 12rem !important;
        object-fit: contain !important;
        /* Ensure image doesn't exceed container */
        margin: 0 auto !important;
        /* Center image if smaller than container */
        display: block !important;
    }
    
    .news-image {
        max-width: 100%;
        /* Ensure image doesn't exceed container */
        margin: 0 auto;
        /* Center image if smaller than container */
    }

    /* Išplėstoje kortelėje esančius mygtukus (social, skaityti mažiau)
       mobiliajame vaizde išdėstome nebe horizontaliai, o vertikaliai */
    .news-card.expanded .mt-6 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    /* Ensure buttons are properly sized and aligned */
    .news-card.expanded .mt-6 .read-less-btn,
    .news-card.expanded .mt-6 .read-more-btn {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Like button alignment */
    .news-card.expanded .mt-6 .like-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        margin-left: 0.5rem;
    }

    /* Guest news cards - mobile expanded button alignment */
    .news-card.expanded .mt-6 .flex.flex-col.sm\:flex-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .news-card.expanded .mt-6 .flex.flex-col.sm\:flex-row > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    /* Guest version read more/less buttons */
    .news-card.expanded .mt-6 .read-less-btn,
    .news-card.expanded .mt-6 .read-more-btn {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Guest version like button */
    .news-card.expanded .mt-6 .flex.items-center {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        margin-left: 0.5rem;
    }
}

/* News content formatting styles - additional styles for HTML content */
.news-content a {
    color: #2563eb !important; /* Blue color for links */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.news-content a:hover {
    color: #1e40af !important; /* Darker blue on hover */
}

.news-content ul,
.news-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.news-content ul {
    list-style-type: disc;
}

.news-content ol {
    list-style-type: decimal;
}

.news-content li {
    margin: 0.25rem 0;
}

.news-content b,
.news-content strong {
    font-weight: 700;
}

.news-content i,
.news-content em {
    font-style: italic;
}

.news-content div[style*="text-align"] {
    margin: 0.25rem 0 !important; /* Sumažinta nuo 0.5rem - suvienodinta su mobile modal */
}

.news-content p {
    margin: 0.25rem 0 !important; /* Sumažinta nuo 0.75rem - suvienodinta su mobile modal */
    line-height: 1.6 !important;
}

.news-content br {
    line-height: 1.6 !important;
}

/* Ensure br tags work properly in expanded cards - they should create line breaks */
.news-card.expanded .news-content br,
.news-scaled-container .news-card.expanded .news-content br {
    line-height: 1.6 !important;
    /* Ensure br tags are not hidden or collapsed */
    display: inline !important;
    content: "" !important;
}

/* Fix for inline elements spacing - they should not have margins */
.news-content b,
.news-content strong,
.news-content i,
.news-content em,
.news-content a,
.news-content span {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Ensure proper spacing between block elements - suvienodinta su mobile modal */
/* Padidinta specifiškumas, kad veiktų abiem failams (news.blade.php ir guest_news.blade.php) */
.news-content div,
.news-content p,
.news-content ul,
.news-content ol,
.news-scaled-container .news-content div,
.news-scaled-container .news-content p,
.news-scaled-container .news-content ul,
.news-scaled-container .news-content ol {
    display: block;
    margin-top: 0.25rem !important; /* Sumažinta nuo 0.75rem - suvienodinta su mobile modal */
    margin-bottom: 0.25rem !important; /* Sumažinta nuo 0.75rem - suvienodinta su mobile modal */
    line-height: 1.6 !important; /* Sumažinta nuo 1.8 - suvienodinta su mobile modal */
}

.news-content div:first-child,
.news-content p:first-child,
.news-content ul:first-child,
.news-content ol:first-child {
    margin-top: 0 !important;
}

.news-content div:last-child,
.news-content p:last-child,
.news-content ul:last-child,
.news-content ol:last-child {
    margin-bottom: 0 !important;
}

/* Ensure proper spacing for direct children (but not inline elements) - suvienodinta su mobile modal */
.news-content > div,
.news-content > p,
.news-content > ul,
.news-content > ol {
    margin-top: 0.25rem !important; /* Sumažinta nuo 0.75rem - suvienodinta su mobile modal */
    margin-bottom: 0.25rem !important; /* Sumažinta nuo 0.75rem - suvienodinta su mobile modal */
}

.news-content > div:first-child,
.news-content > p:first-child,
.news-content > ul:first-child,
.news-content > ol:first-child {
    margin-top: 0 !important;
}

.news-content > div:last-child,
.news-content > p:last-child,
.news-content > ul:last-child,
.news-content > ol:last-child {
    margin-bottom: 0 !important;
}

/* Expanded card specific styles for better formatting - suvienodinti su mobile modal */
/* Padidinta specifiškumas, kad veiktų abiem failams (news.blade.php ir guest_news.blade.php) */
.news-card.expanded .news-content div,
.news-card.expanded .news-content p,
.news-card.expanded .news-content ul,
.news-card.expanded .news-content ol,
.news-scaled-container .news-card.expanded .news-content div,
.news-scaled-container .news-card.expanded .news-content p,
.news-scaled-container .news-card.expanded .news-content ul,
.news-scaled-container .news-card.expanded .news-content ol {
    margin-top: 0.25rem !important; /* Sumažinta nuo 1rem - suvienodinta su mobile modal */
    margin-bottom: 0.25rem !important; /* Sumažinta nuo 1rem - suvienodinta su mobile modal */
    line-height: 1.6 !important; /* Sumažinta nuo 1.8 - suvienodinta su mobile modal */
}

.news-card.expanded .news-content div:first-child,
.news-card.expanded .news-content p:first-child,
.news-card.expanded .news-content ul:first-child,
.news-card.expanded .news-content ol:first-child {
    margin-top: 0 !important;
}

.news-card.expanded .news-content div:last-child,
.news-card.expanded .news-content p:last-child,
.news-card.expanded .news-content ul:last-child,
.news-card.expanded .news-content ol:last-child {
    margin-bottom: 0 !important;
}

/* Overlay - fixed pozicija, kad dengtų visą ekraną, įskaitant app layout */
/* Overlay is appended to body, so it's outside .news-scaled-container and not affected by zoom */
#expandedCardOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Use 100% instead of 100vw to avoid zoom issues */
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important; /* Labai aukštas z-index, kad būtų virš visų elementų */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    /* Užtikriname, kad overlay būtų virš visų elementų - naudojame stacking context */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: opacity;
}

#expandedCardOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Užtikriname, kad expanded kortelė būtų aukščiau nei overlay */
/* JS sets position: fixed and moves card to body, so it's outside zoom container */
.news-card.expanded.overlay-expanded {
    position: absolute !important;
    z-index: 100000 !important; /* Aukščiau nei overlay (99999) */
    /* Užtikriname, kad kortelė būtų virš overlay - naudojame stacking context */
    will-change: transform, height;
}

/* Mobile modal card - imitates the card, centered, not fullscreen */
.mobile-modal-card {
    position: fixed !important;
    z-index: 100000 !important;
    background-color: #ffffff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    max-width: 100vw !important; /* Never exceed viewport width */
    box-sizing: border-box !important;
    /* Outside zoom container, so no zoom issues */
    /* Size and position set by JS to match original card */
}

/* Mobile modal specific styles */
@media (max-width: 768px) {
    /* Nuotraukos modale - nuo krasto iki krasto */
    .mobile-modal-card .image-container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mobile-modal-card .image-grid {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mobile-modal-card .image-grid > div {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .mobile-modal-card .news-image {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Tekstas modale - 4px tarpas nuo krastu */
    .mobile-modal-card .text-container {
        padding: 4px !important;
        margin: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Užtikrinti, kad news-content mobile versijoje neturėtų horizontal scroll */
    .mobile-modal-card .news-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile modal - perrašyti visus news-content stilius, kad nebūtų dvigubų tarpų */
    .mobile-modal-card.expanded .news-content {
        white-space: normal !important; /* Pašalinti pre-line, kuris sukuria tarpus */
        line-height: 1.6 !important; /* Normalus line-height, ne 1.8 */
    }
    
    /* news.blade.php mobile modal - naudoja pre-line, kad <br> tagai veiktų */
    .mobile-modal-card.expanded.news-app-card .news-content {
        white-space: pre-line !important; /* pre-line leidžia <br> tagams veikti news.blade.php */
    }
    
    .mobile-modal-card .news-content p,
    .mobile-modal-card .news-content div,
    .mobile-modal-card .news-content ul,
    .mobile-modal-card .news-content ol {
        margin-top: 0.25rem !important; /* Sumažinti nuo 0.75rem */
        margin-bottom: 0.25rem !important; /* Sumažinti nuo 0.75rem */
        line-height: 1.6 !important; /* Normalus line-height, ne 1.8 */
    }
    
    .mobile-modal-card .news-content p:first-child,
    .mobile-modal-card .news-content div:first-child,
    .mobile-modal-card .news-content ul:first-child,
    .mobile-modal-card .news-content ol:first-child {
        margin-top: 0 !important;
    }
    
    .mobile-modal-card .news-content p:last-child,
    .mobile-modal-card .news-content div:last-child,
    .mobile-modal-card .news-content ul:last-child,
    .mobile-modal-card .news-content ol:last-child {
        margin-bottom: 0 !important;
    }
    
    .mobile-modal-card .news-content br {
        line-height: 1.6 !important;
    }
}

/* Original card when mobile modal is open - hidden but keeps layout */
.news-card.mobile-original {
    opacity: 0;
    pointer-events: none;
    /* Card stays in place, just invisible */
}