/* Post Articles Widget Styles */

.post-articles-widget {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Mobile swiper (hidden by default) */
.post-articles-mobile-swiper {
    display: none;
}

.post-articles-mobile-swiper .swiper {
    width: 100%;
}


/* Mobile swiper item styles to match featured look */
.post-articles-mobile-swiper .post-articles-item {
    width: 100%;
    height: 350px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-articles-mobile-swiper .post-articles-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.post-articles-mobile-swiper .post-articles-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.post-articles-mobile-swiper .post-articles-item:hover .post-articles-item-image {
    transform: scale(1.05);
}

.post-articles-mobile-swiper .post-articles-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.post-articles-mobile-swiper .post-articles-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: #fff;
    z-index: 2;
}

.post-articles-mobile-swiper .post-articles-item-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.post-articles-mobile-swiper .post-articles-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-articles-mobile-swiper .post-articles-item-title a:hover {
    color: #007cba;
}

.post-articles-mobile-swiper .post-articles-item-excerpt {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cccccc;
}

.post-articles-mobile-swiper .post-articles-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #aaaaaa;
}



/* Header Styles */
.post-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.post-articles-header-content {
    flex: 1;
    min-width: 200px;
}

.post-articles-header-title {
    margin: 0 0 10px 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #333333;
}

.post-articles-header-subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #666666;
}

.post-articles-view-all-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #007cba;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.post-articles-view-all-btn:hover {
    background-color: #005a87;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.3);
}

/* Container Layout */
.post-articles-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* Featured Post Styles */
.post-articles-featured {
    height: 500px;
    position: relative;
}

.post-articles-featured .post-articles-item {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-articles-featured .post-articles-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.post-articles-featured .post-articles-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.post-articles-featured .post-articles-item:hover .post-articles-item-image {
    transform: scale(1.05);
}

.post-articles-featured .post-articles-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.post-articles-featured .post-articles-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: #fff;
    z-index: 2;
}

.post-articles-featured .post-articles-item-title {
    margin: 0 0 15px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.post-articles-featured .post-articles-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-articles-featured .post-articles-item-title a:hover {
    color: #007cba;
}

.post-articles-featured .post-articles-item-excerpt {
    margin: 0 0 15px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #cccccc;
}

.post-articles-featured .post-articles-item-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #aaaaaa;
}

.post-articles-featured .post-articles-item-date,
.post-articles-featured .post-articles-item-reading-time {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* Small Posts Container */
.post-articles-small-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-articles-small {
    height: 200px;
    position: relative;
}

.post-articles-small .post-articles-item {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.post-articles-small .post-articles-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.post-articles-small .post-articles-item-image {
    width: 40%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.post-articles-small .post-articles-item-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-articles-small .post-articles-item-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #333333;
}

.post-articles-small .post-articles-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-articles-small .post-articles-item-title a:hover {
    color: #007cba;
}

.post-articles-small .post-articles-item-excerpt {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #666666;
    flex: 1;
}

.post-articles-small .post-articles-item-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: #999999;
    margin-top: auto;
}

.post-articles-small .post-articles-item-date,
.post-articles-small .post-articles-item-reading-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-articles-small .post-articles-item-date::before , .post-articles-featured .post-articles-item-date::before {
 content: "";
  display: inline-block;
  width: 25px;
  height: 23px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='23' viewBox='0 0 25 23' fill='none'><path d='M12.5 2.21873C10.4974 2.21873 8.53988 2.81255 6.87483 3.9251C5.20978 5.03765 3.91204 6.61896 3.1457 8.46906C2.37936 10.3192 2.17885 12.355 2.56953 14.319C2.96021 16.2831 3.92452 18.0872 5.34052 19.5032C6.75653 20.9192 8.56063 21.8835 10.5247 22.2742C12.4887 22.6649 14.5245 22.4643 16.3747 21.698C18.2248 20.9317 19.8061 19.6339 20.9186 17.9689C22.0312 16.3038 22.625 14.3463 22.625 12.3437C22.6219 9.65936 21.5542 7.08581 19.656 5.18767C17.7579 3.28953 15.1844 2.2218 12.5 2.21873ZM12.5 20.7812C10.8312 20.7812 9.1999 20.2864 7.81236 19.3593C6.42482 18.4321 5.34336 17.1144 4.70475 15.5726C4.06613 14.0309 3.89904 12.3344 4.22461 10.6977C4.55017 9.06094 5.35376 7.55752 6.53377 6.37752C7.71377 5.19751 9.21719 4.39392 10.8539 4.06836C12.4906 3.74279 14.1871 3.90988 15.7289 4.5485C17.2706 5.18711 18.5884 6.26857 19.5155 7.65611C20.4426 9.04365 20.9375 10.675 20.9375 12.3437C20.935 14.5807 20.0452 16.7254 18.4634 18.3072C16.8816 19.889 14.737 20.7787 12.5 20.7812ZM5.50318 1.97193L2.12818 5.34693C1.96986 5.50526 1.75513 5.5942 1.53123 5.5942C1.30733 5.5942 1.0926 5.50526 0.934278 5.34693C0.775956 5.18861 0.687012 4.97388 0.687012 4.74998C0.687012 4.52608 0.775956 4.31135 0.934278 4.15303L4.30928 0.778028C4.4676 0.619706 4.68233 0.530762 4.90623 0.530762C5.13013 0.530762 5.34486 0.619706 5.50318 0.778028C5.66151 0.93635 5.75045 1.15108 5.75045 1.37498C5.75045 1.59888 5.66151 1.81361 5.50318 1.97193ZM24.0657 5.34693C23.9873 5.42538 23.8943 5.48762 23.7918 5.53008C23.6894 5.57254 23.5796 5.59439 23.4687 5.59439C23.3578 5.59439 23.2481 5.57254 23.1456 5.53008C23.0432 5.48762 22.9501 5.42538 22.8718 5.34693L19.4968 1.97193C19.3385 1.81361 19.2495 1.59888 19.2495 1.37498C19.2495 1.15108 19.3385 0.93635 19.4968 0.778028C19.6551 0.619706 19.8698 0.530762 20.0937 0.530762C20.3176 0.530762 20.5324 0.619706 20.6907 0.778028L24.0657 4.15303C24.1441 4.23139 24.2064 4.32445 24.2488 4.42687C24.2913 4.5293 24.3131 4.6391 24.3131 4.74998C24.3131 4.86086 24.2913 4.97066 24.2488 5.07309C24.2064 5.17552 24.1441 5.26857 24.0657 5.34693ZM18.4062 11.5C18.63 11.5 18.8446 11.5889 19.0029 11.7471C19.1611 11.9053 19.25 12.12 19.25 12.3437C19.25 12.5675 19.1611 12.7821 19.0029 12.9404C18.8446 13.0986 18.63 13.1875 18.4062 13.1875H12.5C12.2762 13.1875 12.0616 13.0986 11.9034 12.9404C11.7451 12.7821 11.6562 12.5675 11.6562 12.3437V6.43748C11.6562 6.2137 11.7451 5.99909 11.9034 5.84086C12.0616 5.68263 12.2762 5.59373 12.5 5.59373C12.7238 5.59373 12.9384 5.68263 13.0966 5.84086C13.2548 5.99909 13.3437 6.2137 13.3437 6.43748V11.5H18.4062Z' fill='%23565656'/></svg>") no-repeat center;
  background-size: contain;
}

.post-articles-small .post-articles-item-reading-time::before , .post-articles-featured .post-articles-item-reading-time::before  {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'><path d='M20.3125 3.125H17.9688V2.34375C17.9688 2.13655 17.8864 1.93784 17.7399 1.79132C17.5934 1.64481 17.3947 1.5625 17.1875 1.5625C16.9803 1.5625 16.7816 1.64481 16.6351 1.79132C16.4886 1.93784 16.4062 2.13655 16.4062 2.34375V3.125H8.59375V2.34375C8.59375 2.13655 8.51144 1.93784 8.36493 1.79132C8.21841 1.64481 8.0197 1.5625 7.8125 1.5625C7.6053 1.5625 7.40659 1.64481 7.26007 1.79132C7.11356 1.93784 7.03125 2.13655 7.03125 2.34375V3.125H4.6875C4.2731 3.125 3.87567 3.28962 3.58265 3.58265C3.28962 3.87567 3.125 4.2731 3.125 4.6875V20.3125C3.125 20.7269 3.28962 21.1243 3.58265 21.4174C3.87567 21.7104 4.2731 21.875 4.6875 21.875H20.3125C20.7269 21.875 21.1243 21.7104 21.4174 21.4174C21.7104 21.1243 21.875 20.7269 21.875 20.3125V4.6875C21.875 4.2731 21.7104 3.87567 21.4174 3.58265C21.1243 3.28962 20.7269 3.125 20.3125 3.125ZM7.03125 4.6875V5.46875C7.03125 5.67595 7.11356 5.87466 7.26007 6.02118C7.40659 6.16769 7.6053 6.25 7.8125 6.25C8.0197 6.25 8.21841 6.16769 8.36493 6.02118C8.51144 5.87466 8.59375 5.67595 8.59375 5.46875V4.6875H16.4062V5.46875C16.4062 5.67595 16.4886 5.87466 16.6351 6.02118C16.7816 6.16769 16.9803 6.25 17.1875 6.25C17.3947 6.25 17.5934 6.16769 17.7399 6.02118C17.8864 5.87466 17.9688 5.67595 17.9688 5.46875V4.6875H20.3125V7.8125H4.6875V4.6875H7.03125ZM20.3125 20.3125H4.6875V9.375H20.3125V20.3125Z' fill='%234C4C4C'/></svg>") no-repeat center;
  background-size: contain;
}
.post-articles-view-all-btn {
	display: flex;
	align-items: center;
	gap: 9px;
}
/* Responsive Design */
@media (max-width: 1024px) {
    .post-articles-container {
        gap: 20px;
    }
    
    .post-articles-featured {
        height: 400px;
    }
    
    .post-articles-featured .post-articles-item-content {
        padding: 25px;
    }
    
    .post-articles-featured .post-articles-item-title {
        font-size: 20px;
    }
    
    .post-articles-featured .post-articles-item-excerpt {
        font-size: 14px;
    }
    
    .post-articles-small {
        height: 180px;
    }
    
    .post-articles-small .post-articles-item-content {
        padding: 15px;
    }
    
    .post-articles-small .post-articles-item-title {
        font-size: 16px;
    }
    
    .post-articles-small .post-articles-item-excerpt {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .post-articles-header {
        align-items: stretch;
        text-align: center;
    }
    
    .post-articles-header-title {
        font-size: 28px;
    }
    
    /* Hide desktop grid and show mobile swiper when exists */
    .post-articles-widget .post-articles-mobile-swiper.force-show,
    .post-articles-widget.has-mobile-swiper .post-articles-mobile-swiper {
        display: block;
    }
    .post-articles-widget.has-mobile-swiper .post-articles-container {
        display: none;
    }
    
    .post-articles-featured {
        height: 350px;
    }
    
    .post-articles-featured .post-articles-item-content {
        padding: 20px;
    }
    
    .post-articles-featured .post-articles-item-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .post-articles-featured .post-articles-item-excerpt {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .post-articles-featured .post-articles-item-meta {
        font-size: 12px;
        gap: 10px;
    }
    
    .post-articles-small {
        height: 160px;
    }
    
    .post-articles-small .post-articles-item-image {
        width: 35%;
    }
    
    .post-articles-small .post-articles-item-content {
        padding: 12px;
    }
    
    .post-articles-small .post-articles-item-title {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    .post-articles-small .post-articles-item-excerpt {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .post-articles-small .post-articles-item-meta {
        font-size: 11px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .post-articles-header-title {
        font-size: 24px;
    }
    
    .post-articles-header-subtitle {
        font-size: 14px;
    }
    
    .post-articles-view-all-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .post-articles-featured {
        height: 300px;
    }
    
    .post-articles-featured .post-articles-item-content {
        padding: 15px;
    }
    
    .post-articles-featured .post-articles-item-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .post-articles-featured .post-articles-item-excerpt {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .post-articles-featured .post-articles-item-meta {
        font-size: 11px;
        gap: 8px;
    }
    
    .post-articles-small {
        height: 140px;
    }
    
    .post-articles-small .post-articles-item-image {
        width: 30%;
    }
    
    .post-articles-small .post-articles-item-content {
        padding: 10px;
    }
    
    .post-articles-small .post-articles-item-title {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .post-articles-small .post-articles-item-excerpt {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .post-articles-small .post-articles-item-meta {
        font-size: 10px;
        gap: 8px;
    }
}

/* Fallback for no featured image */
.post-articles-item-image[style*="background-image: url('')"],
.post-articles-item-image[style*="background-image: url('null')"] {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3e%3crect width="400" height="300" fill="%23f0f0f0"/%3e%3ctext x="50%25" y="50%25" text-anchor="middle" dy=".3em" font-family="Arial, sans-serif" font-size="16" fill="%23999"%3eNo Image%3c/text%3e%3c/svg%3e') !important;
}

/* Accessibility improvements */
.post-articles-item:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.post-articles-item-title a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.post-articles-view-all-btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .post-articles-featured .post-articles-item-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
    
    .post-articles-featured .post-articles-item-title {
        color: #ffffff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    .post-articles-featured .post-articles-item-excerpt {
        color: #ffffff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    .post-articles-small .post-articles-item {
        border: 2px solid #333333;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .post-articles-item,
    .post-articles-item-image,
    .post-articles-view-all-btn {
        transition: none;
    }
    
    .post-articles-item:hover {
        transform: none;
    }
    
    .post-articles-item:hover .post-articles-item-image {
        transform: none;
    }
    
    .post-articles-view-all-btn:hover {
        transform: none;
    }
}

/* Loading State */
.post-articles-widget.loading {
    opacity: 0.7;
    pointer-events: none;
}

.post-articles-widget.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

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

/* Print styles */
@media print {
    .post-articles-view-all-btn {
        display: none;
    }
    
    .post-articles-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .post-articles-featured .post-articles-item-overlay {
        background: rgba(0, 0, 0, 0.3);
    }
}