/**
 * News Posts Component Styles
 * Relies on main-variables.css for typography and color variables
 */

/* Posts Stack Container - Direct container for posts */
.posts-stack {
    display: flex;
    flex-direction: column;
    /* Mobile drag transform for news items */
    .news-posts-slider.is-dragging .news-item {
        transition: none !important; /* Remove transitions during drag */
        will-change: transform, opacity; /* Optimize for changes */
    }
    
    /* Ensure swipe indicators are visible */
    .news-posts-slider .swipe-indicator {
        z-index: 100;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        color: var(--secondary-300);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
    }
    
    .news-posts-slider .swipe-indicator.left {
        left: var(--spacing-4);
    }
    
    .news-posts-slider .swipe-indicator.right {
        right: var(--spacing-4);
    }
    
    /* Show indicators during drag */
    .news-posts-slider.is-dragging .swipe-indicator {
        opacity: 0.3;
    }
    
    .news-posts-slider.is-dragging.swipe-left .swipe-indicator.right {
        opacity: 0.8;
        transform: translateY(-50%) scale(1.2);
    }
    
    .news-posts-slider.is-dragging.swipe-right .swipe-indicator.left {
        opacity: 0.8;
        transform: translateY(-50%) scale(1.2);
    }
}

/* Individual News Item */
.news-item {
    background: var(--gray-50);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: 75vh;
    max-height: 800px; /* Allow more scaling before capping */
    min-height: 500px; /* Minimum height in pixels */
    position: relative;
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-14); /* 3.5rem spacing after each post */
}

/* No thumbnail variants - smaller height */
.news-item.no-thumbnail {
    height: 50vh;
    max-height: 533px; /* Maintain 2/3 proportional relationship (800px * 2/3) */
    min-height: 400px; /* Smaller minimum for no-thumbnail posts */
}

/* Post Thumbnail - Perfect Square */
.post-thumbnail {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1; /* This maintains square ratio */
    overflow: hidden;
    flex-shrink: 0;
}

.post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.15s ease;
}

.news-item:hover .post-thumbnail img {
    transform: scale(1.05);
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.15s ease;
}

.video-overlay i {
    color: var(--secondary-300);
    font-size: var(--font-size-h1);
    transition: transform 0.15s ease, color 0.2s ease;
}

.news-item:hover .video-overlay i {
    transform: scale(1.2);
    color: var(--secondary-200);
}

/* Post Content */
.post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Content Wrapper - Vertically Centered */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-12);
    padding-bottom: var(--spacing-12); /* Reduced since button is absolutely positioned outside */
    transition: transform 0.15s ease;
}

/* News Item Date Styling - Scoped to news component only */
.news-item .hero-actions-date {
    position: absolute;
    top: var(--spacing-6);
    right: var(--spacing-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: var(--font-weight-bold);
    color: var(--gray-100);
    line-height: 1;
    min-width: 40px;
    z-index: 10;
}

.news-item .hero-actions-date .date-month {
    font-size: var(--font-size-small);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 2px;
}

.news-item .hero-actions-date .date-day {
    font-size: 31px;
    font-weight: var(--font-weight-black);
    margin-top: -4px;
}

/* Dark background override if needed */
.news-item.bg-dark .hero-actions-date {
    color: var(--primary-700);
}

/* Category with transition */
.content-wrapper h5 {
    margin-bottom: var(--spacing-2);
    transition: transform 0.15s ease;
}

/* Add transition for h5 in two-column layout specifically */
.news-item.no-thumbnail.has-description .content-left h5 {
    margin-top: calc(-1 * var(--spacing-5));
    transition: transform 0.15s ease;
}

/* Post Title */
.post-title {
    margin: 0 0 var(--spacing-3) 0;
    /* font-size removed - will be set dynamically by JS */
    line-height: var(--line-height-tight);
    transition: font-size 0.3s ease, transform 0.15s ease;
}

.post-title a {
    color: inherit; /* Inherit color from parent h3 */
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-title a:hover {
    color: var(--primary-500);
}

/* Post Excerpt */
.post-excerpt {
    color: var(--gray-600);
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    transition: transform 0.15s ease;
}

/* Post Actions - ALWAYS Fixed to Bottom Right of news-item */
.post-actions {
    position: absolute;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 15; /* Above other elements */
}

.post-link {
    color: var(--secondary-300);
    text-decoration: none;
    font-size: 1.5em;
    transition: transform 0.15s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    position: relative; /* For tooltip positioning */
}

.post-link:hover {
    transform: translateX(5px);
    color: var(--secondary-400);
}

/* Enhanced hover effect for post actions icon */
.news-item:hover .post-link {
    transform: scale(1.2);
    color: var(--secondary-200);
}

/* Reading Time Tooltip */
.post-link .reading-time-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--gray-900);
    color: var(--gray-50);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.15s ease;
    pointer-events: none;
    margin-bottom: var(--spacing-2);
}

/* Tooltip arrow */
.post-link .reading-time-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--gray-900);
}

/* Show tooltip on hover */
.post-link:hover .reading-time-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ===== NO THUMBNAIL VARIANTS ===== */

/* No Thumbnail with Description - Two Column Layout */
.news-item.no-thumbnail.has-description {
    display: flex;
    flex-direction: row;
}

.news-item.no-thumbnail.has-description .post-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Left container - matches thumbnail width with fixed width calculation */
.news-item.no-thumbnail.has-description .content-left {
    width: max(calc(75vh - var(--spacing-8) * 2), calc(500px - var(--spacing-8) * 2)); /* Base on 75vh (thumbnail reference) but don't go below 500px equivalent */
    max-width: calc(800px - var(--spacing-8) * 2); /* Cap width to match new max-height */
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-6);
    padding-left: var(--spacing-10);
}

/* Left container for no-description variant - no background/border */
.news-item.no-thumbnail.no-description .content-left {
    width: max(calc(75vh - var(--spacing-8) * 2), calc(500px - var(--spacing-8) * 2)); /* Same consistent width logic */
    max-width: calc(800px - var(--spacing-8) * 2); /* Same max-width cap */
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-6);
}

/* Right container - description */
.news-item.no-thumbnail.has-description .content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-12);
    padding-bottom: var(--spacing-12); /* Reduced since button is absolutely positioned outside */
}

/* Reduce h5 margin in two-column layout for proper alignment */
.news-item.no-thumbnail.has-description .content-left h5 {
    margin-top: calc(-1 * var(--spacing-5));
    transition: transform 0.15s ease;
}

/* Add transition to post-title in two-column layout */
.news-item.no-thumbnail.has-description .content-left .post-title {
    transition: transform 0.15s ease;
}

/* Adjust content wrapper for two-column layout */
.news-item.no-thumbnail.has-description .content-wrapper {
    padding: 0;
    padding-bottom: 0;
}

/* No Thumbnail, No Description - Single Column Centered */
.news-item.no-thumbnail.no-description {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.news-item.no-thumbnail.no-description .post-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.news-item.no-thumbnail.no-description .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    width: 100%;
    max-width: 860px;
}

.news-item.no-thumbnail.no-description .post-actions {
    position: absolute;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    margin-top: var(--spacing-6);
}

.single-post-main {
    position:relative;
    background:var(--gray-50);
    margin-bottom:var(--spacing-24);
    padding:var(--spacing-24);
    margin-top: calc(var(--spacing-24) * -3);
    z-index:999;
}

.single-post-main p {
    margin: var(--spacing-14);
}

.single-post-main p a {
    color:var(--primary-500);
}

.wp-block-list { 
    padding: var(--spacing-4) var(--spacing-24);
}

.post-main-h4 {
    position:absolute;
    top:calc(var(--spacing-14) * -1);
    left:0;
    right:0;
    color:var(--gray-50);
}

/* Content Quote Wrapper Styles */
.content-quote-wrapper {
    position: relative;
    margin: var(--spacing-16) auto;
    padding: var(--spacing-12) 0;
    max-width: 90%;
    text-align: center;
}

.content-quote-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    color: var(--gray-200);
    opacity: 0.3;
    z-index: 0;
}

.content-quote {
    position: relative;
    z-index: 1;
    border: none;
    margin: 0;
    padding: 0;
}

.content-quote-text {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-relaxed);
    color: var(--gray-900);
    font-weight: var(--font-weight-normal);
    font-style: italic;
    margin-bottom: var(--spacing-6);
    margin-top: var(--spacing-8); /* Space for the quote icon */
}

.content-quote-attribution {
    display: block;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    color: var(--primary-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Remove default blockquote styling in entry content for our wrapped quotes */
.entry-content .content-quote-wrapper + blockquote,
.entry-content .content-quote {
    border-left: none;
    padding-left: 0;
    margin: 0;
    font-style: normal;
}

/* ===== DYNAMIC TITLE SIZING ===== */

/* Title length classes for additional styling adjustments */
.post-title--extra-long {
    line-height: 1.25; /* Tighter line height for very long titles */
    letter-spacing: -0.02em; /* Slightly tighter letter spacing */
}

.post-title--long {
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.post-title--medium {
    line-height: 1.35;
}

/* Ensure consistent appearance across different layouts */
.news-item.no-thumbnail .post-title--extra-long,
.news-item.no-thumbnail .post-title--long {
    max-width: 90%; /* Prevent edge-to-edge text on very long titles */
}

/* Two-column layout specific adjustments */
.news-item.no-thumbnail.has-description .content-left .post-title--extra-long {
    /* JS will handle font-size dynamically */
    max-width: 95%; /* Give a bit more room in constrained space */
}

/* Centered layout adjustments */
.news-item.no-thumbnail.no-description .post-title {
    max-width: 800px; /* Prevent titles from becoming too wide */
}

/* Optional: Visual indicator for character count in development */
.news-item .post-title[data-char-count]::after {
    content: attr(data-char-count) " chars";
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 10px;
    color: #999;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    display: none; /* Hidden by default */
}

/* Show character count in debug mode */
body.debug-titles .news-item .post-title[data-char-count]::after {
    display: block;
}

/* Responsive - JS handles font-size, CSS handles other properties */
@media (max-width: 1200px) {
    .post-title--extra-long,
    .post-title--long {
        letter-spacing: -0.01em; /* Less aggressive on smaller screens */
    }
}

@media (max-width: 768px) {
    .post-title {
        /* Base mobile size handled by JS */
        line-height: 1.3; /* Consistent line height on mobile */
    }
    
    .post-title--extra-long,
    .post-title--long,
    .post-title--medium {
        letter-spacing: normal; /* Reset letter spacing on mobile */
        line-height: 1.3;
    }
    
    .content-quote-wrapper {
        margin: var(--spacing-12) auto;
        padding: var(--spacing-8) 0;
    }
    
    .content-quote-icon {
        font-size: 60px;
    }
    
    .content-quote-text {
        font-size: var(--font-size-h4);
        margin-top: var(--spacing-6);
    }
    
    .content-quote-attribution {
        font-size: var(--font-size-small);
    }
}

/* Social Share Buttons */
.social-share-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-6) 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    margin: var(--spacing-8) auto var(--spacing-16);
    justify-content: center; /* Add this line */
    max-width:460px;
}

.share-label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--gray-100);
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s ease;
}

.share-button:hover {
    transform: translateY(-2px);
}

.share-button i {
    font-size: 18px;
}

/* Brand Colors on Hover */
.share-facebook:hover {
    background-color: #1877f2;
    color: white;
}

.share-twitter:hover {
    background-color: #000000;
    color: white;
}

.share-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.share-email:hover {
    background: var(--primary-500);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Regular news items (stack view) */
    .news-item {
        flex-direction: column;
        height: auto !important; /* Remove fixed height */
        max-height: none; /* Remove max-height constraint */
        min-height: auto; /* Let content determine height */
        margin-bottom: var(--spacing-8); /* Reduce spacing between cards */
        padding: 0; /* Match slider version - remove ALL padding */
    }
    
    /* Thumbnail adjustments */
    .post-thumbnail {
        width: 100%;
        height: 250px; /* Fixed height for images only */
        aspect-ratio: unset; /* Remove square constraint */
    }
    
    /* Content wrapper adjustments - REMOVED to match slider */
    .content-wrapper {
        padding: var(--spacing-4); /* Match slider version padding */
        padding-bottom: var(--spacing-16); /* Extra space for absolute positioned button */
    }
    
    /* Post content padding - REMOVED to match slider version */
    .post-content {
        padding: 0; /* No padding here - it's on content-wrapper */
    }
    
    /* Post actions - keep absolutely positioned but adjust location */
    .post-actions {
        position: absolute;
        bottom: var(--spacing-4);
        right: var(--spacing-4);
    }
    
    /* Title and text adjustments */
    .post-title {
        font-size: var(--font-size-h4);
        margin-bottom: var(--spacing-2);
    }
    
    .post-excerpt {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
    }
    
    /* Date positioning adjustment */
    .news-item .hero-actions-date {
        top: var(--spacing-4);
        right: var(--spacing-4);
    }
    
    .news-item .hero-actions-date .date-day {
        font-size: 24px;
    }
    
    /* No thumbnail variants */
    .news-item.no-thumbnail {
        height: auto !important;
        min-height: auto;
        max-height: none;
    }
    
    .news-item.no-thumbnail.has-description {
        flex-direction: column;
    }
    
    .news-item.no-thumbnail.has-description .post-content {
        flex-direction: column;
    }
    
    .news-item.no-thumbnail.has-description .content-left,
    .news-item.no-thumbnail.no-description .content-left {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        padding: var(--spacing-6);
    }
    
    .news-item.no-thumbnail.has-description .content-right {
        padding: var(--spacing-6);
        padding-bottom: var(--spacing-16); /* Space for button */
    }
    
    /* No thumbnail + no description centered variant */
    .news-item.no-thumbnail.no-description .content-wrapper {
        padding: var(--spacing-8);
        padding-bottom: var(--spacing-16);
        min-height: 200px; /* Minimum height for centered content */
    }
    
    /* Social share buttons */
    .social-share-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Hover effects for news-item */
/* Featured image posts - keep sliding animations */
.news-item:not(.no-thumbnail):hover .post-title {
    transform: translateX(6px);
}

.news-item:not(.no-thumbnail):hover h5 {
    transform: translateX(6px);
}

.news-item:not(.no-thumbnail):hover .post-excerpt {
    transform: translateX(6px);
}

/* No thumbnail + description - NO animations on text (only icon) */
/* Remove all hover transforms for text elements */

/* ===== SLIDER COMPONENT STYLES ===== */

/* News Posts Slider Container - Now uses universal slider */
.news-posts-slider {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    transition: height 0.2s ease;
    padding-bottom: 80px; /* Space for absolutely positioned controls */
}

/* ===== SLIDER MOBILE STYLES ===== */
@media (max-width: 768px) {
    /* News Posts Slider Container */
    .news-posts-slider {
        position: relative;
        overflow: hidden;
        padding-bottom: 60px; /* Space for controls */
        /* Enable touch actions */
        touch-action: pan-y pinch-zoom;
    }
    
    /* Enable horizontal swipe on slider items */
    .news-posts-slider .slider-item {
        touch-action: pan-y pinch-zoom;
    }
    
    /* Ensure news items fill the container properly on mobile */
    .news-posts-slider .news-item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /* Prevent text selection during swipe */
        user-select: none;
        -webkit-user-select: none;
    }
    
    /* Remove the glassmorphism background from controls */
    .news-posts-slider .slider-controls {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        background: none; /* Remove background */
        backdrop-filter: none; /* Remove blur effect */
        padding: var(--spacing-4) 0;
        border-radius: 0;
        margin-top: var(--spacing-4);
        width: 100%;
        justify-content: center;
        /* Prevent controls from interfering with swipe */
        pointer-events: auto;
    }
    
    /* Adjust control buttons for better mobile UX */
    .news-posts-slider .slider-dot {
        width: 10px;
        height: 10px;
    }
    
    .news-posts-slider .slider-arrow {
        font-size: 1.25em;
        padding: var(--spacing-2);
    }
}

/* News posts swipe feedback */
.news-posts-slider.is-dragging .news-item {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    /* Add subtle rotation during swipe for Tinder-like effect */
    .news-posts-slider.is-dragging .slider-item.active .news-item {
        transform-origin: center bottom;
        transition: none !important;
    }
    
    /* Visual feedback for swipe direction */
    .news-posts-slider.swipe-left .slider-item.active .news-item {
        opacity: 0.9;
    }
    
    .news-posts-slider.swipe-right .slider-item.active .news-item {
        opacity: 0.9;
    }

    /* Match these styles for ALL news items, not just slider */
    .news-item {
        padding: 0;
    }

    .post-content {
        padding: 1rem;
    }
}

.news-posts-empty {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--gray-600);
}

/* Single Post Main - Mobile Override (placed separately to ensure it works) */
@media (max-width: 768px) {
    .single-post-main {
        padding: var(--spacing-24) var(--spacing-12) !important;
    }
}

@media (max-width: 600px) {
    .single-post-main {
        padding: var(--spacing-16) var(--spacing-6) !important;
    }
    .single-post-main p {
        margin: var(--spacing-6) var(--spacing-2);
    }
    .wp-block-list {
        padding: var(--spacing-4) var(--spacing-4);
    }
}