/**
 * Archive Pages Styles
 *
 * Minimal and modern styling for archive pages (blog, services, portfolio, etc.)
 *
 * @package Nila
 * @since 1.0.0
 */

/* ============================================
   Main Container
   ============================================ */
   .archive .container,
   .blog .container {
       padding: 40px 15px;
   }
   
   .archive .row,
   .blog .row {
       margin: 0;
   }
   
   /* ============================================
      Page Header
      ============================================ */
   .page-header {
       margin-bottom: 50px;
       padding-bottom: 30px;
       border-bottom: 1px solid #e5e5e5;
   }
   
   .page-title {
       font-size: 42px;
       font-weight: 300;
       color: #1a1a1a;
       margin: 0 0 15px 0;
       letter-spacing: -0.5px;
   }
   
   .archive-description {
       font-size: 16px;
       color: #666;
       line-height: 1.6;
       margin-top: 15px;
   }
   
   /* ============================================
      Posts Wrapper
      ============================================ */
   .posts-wrapper {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 30px;
       margin-bottom: 50px;
   }
   
   .archive-posts {
       margin-bottom: 50px;
   }
   
   /* ============================================
      Post Item (Grid Layout)
      ============================================ */
   .post {
       background: transparent;
       border-radius: 0;
       box-shadow: none;
       overflow: visible;
       border-bottom: 1px solid #e5e5e5;
       padding-bottom: 30px;
       margin-bottom: 30px;
   }
   
   .post:last-child {
       border-bottom: none;
       padding-bottom: 0;
       margin-bottom: 0;
   }
   
   .post-thumbnail {
       margin-bottom: 20px;
       border-radius: 0;
       overflow: hidden;
       border: 1px solid #e5e5e5;
   }
   
   .post-thumbnail img {
       width: 100%;
       height: auto;
       display: block;
       transition: opacity 0.2s ease;
   }
   
   .post-thumbnail:hover img {
       opacity: 0.8;
   }
   
   .post-title {
       font-size: 24px;
       font-weight: 400;
       margin: 0 0 15px 0;
       line-height: 1.4;
   }
   
   .post-title a {
       color: #1a1a1a;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .post-title a:hover {
       color: #667eea;
   }
   
   .post-meta {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 15px;
       font-size: 13px;
       color: #999;
       flex-wrap: wrap;
   }
   
   .post-meta span {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .post-meta i {
       font-size: 12px;
       color: #999;
   }
   
   .post-meta a {
       color: #666;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .post-meta a:hover {
       color: #667eea;
   }
   
   .post-excerpt {
       font-size: 15px;
       line-height: 1.7;
       color: #555;
       margin-bottom: 20px;
   }
   
   .post-read-more {
       display: inline-block;
       padding: 8px 20px;
       font-size: 13px;
       font-weight: 500;
       color: #1a1a1a;
       text-decoration: none;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
       transition: all 0.2s ease;
       background: transparent;
   }
   
   .post-read-more:hover {
       background: #1a1a1a;
       color: #fff;
       border-color: #1a1a1a;
   }
   
   /* ============================================
      Services Archive
      ============================================ */
   .services-archive .services-archive-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 40px;
       margin-bottom: 50px;
   }
   
   .services-archive .service-item {
       background: transparent;
       border-radius: 0;
       box-shadow: none;
       padding: 0;
       border-bottom: 1px solid #e5e5e5;
       padding-bottom: 30px;
       transition: transform 0.2s ease;
   }
   
   .services-archive .service-item:hover {
       transform: translateX(5px);
   }
   
   .services-archive .service-content {
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   
   /* Hide price, duration, button if they exist */
   .services-archive .service-item .service-price,
   .services-archive .service-item .service-duration,
   .services-archive .service-item .service-button,
   .services-archive .service-item .service-thumbnail {
       display: none !important;
   }
   
   .services-archive .service-icon {
       width: auto;
       height: auto;
       background: #f8f9fa;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid #e5e5e5;
       flex-shrink: 0;
       transition: all 0.2s ease;
       margin-bottom: 0;
   }
   
   .services-archive .service-item:hover .service-icon {
       background: #667eea;
       border-color: #667eea;
   }
   
   .services-archive .service-icon i {
       font-size: 24px;
       color: #667eea;
       transition: color 0.2s ease;
   }
   
   .services-archive .service-item:hover .service-icon i {
       color: #fff;
   }
   
   .services-archive .service-icon-image {
       width: 184px;
       height: 184px;
       object-fit: contain;
       display: block;
       transition: opacity 0.2s ease;
   }
   
   .services-archive .service-item:hover .service-icon-image {
       opacity: 0.8;
   }
   
   .services-archive .service-title {
       font-size: 19px;
       font-weight: 400;
       margin: 0;
       line-height: 2;
       text-align: center;
   }
   
   .services-archive .service-title a {
       color: #1a1a1a;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .services-archive .service-title a:hover {
       color: #667eea;
   }
   
   .services-archive .service-excerpt {
       font-size: 15px;
       line-height: 1.7;
       color: #555;
       margin: 0;
       display: block;
   }
   
   /* ============================================
      Portfolio Archive
      ============================================ */
   .portfolio-archive .container {
       padding: 40px 15px;
   }
   
   .portfolio-filter {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-bottom: 40px;
       padding-bottom: 30px;
       border-bottom: 1px solid #e5e5e5;
   }
   
   .filter-btn {
       padding: 8px 20px;
       font-size: 13px;
       font-weight: 500;
       color: #666;
       background: transparent;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
       cursor: pointer;
       transition: all 0.2s ease;
   }
   
   .filter-btn:hover,
   .filter-btn.active {
       background: #1a1a1a;
       color: #fff;
       border-color: #1a1a1a;
   }
   
   .portfolio-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 30px;
       margin-bottom: 50px;
   }
   
   .portfolio-item {
       background: transparent;
       border-radius: 0;
       box-shadow: none;
       overflow: hidden;
       border: 1px solid #e5e5e5;
       transition: border-color 0.2s ease;
   }
   
   .portfolio-item:hover {
       border-color: #1a1a1a;
   }
   
   /* ============================================
      Team Archive
      ============================================ */
   .team-archive-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: 30px;
       margin-bottom: 50px;
   }
   
   .team-member-item {
       background: transparent;
       border-radius: 0;
       box-shadow: none;
       text-align: center;
       border-bottom: 1px solid #e5e5e5;
       padding-bottom: 30px;
   }
   
   .team-member-thumbnail {
       margin-bottom: 20px;
       border-radius: 0;
       overflow: hidden;
       border: 1px solid #e5e5e5;
   }
   
   .team-member-thumbnail img {
       width: 100%;
       height: auto;
       display: block;
   }
   
   .team-member-name {
       font-size: 20px;
       font-weight: 400;
       margin: 0 0 10px 0;
   }
   
   .team-member-name a {
       color: #1a1a1a;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .team-member-name a:hover {
       color: #667eea;
   }
   
   .team-member-job-title {
       font-size: 14px;
       color: #999;
       margin: 0 0 15px 0;
   }
   
   .team-member-excerpt {
       font-size: 14px;
       line-height: 1.7;
       color: #555;
       margin-bottom: 20px;
   }
   
   .team-member-link {
       display: inline-block;
       padding: 8px 20px;
       font-size: 13px;
       font-weight: 500;
       color: #1a1a1a;
       text-decoration: none;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
       transition: all 0.2s ease;
       background: transparent;
   }
   
   .team-member-link:hover {
       background: #1a1a1a;
       color: #fff;
       border-color: #1a1a1a;
   }
   
   /* ============================================
      Testimonials Archive
      ============================================ */
   .testimonials-archive-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 30px;
       margin-bottom: 50px;
   }
   
   .testimonial-item {
       background: transparent;
       border-radius: 0;
       box-shadow: none;
       padding: 0;
       border-bottom: 1px solid #e5e5e5;
       padding-bottom: 30px;
   }
   
   .testimonial-content {
       padding: 0;
   }
   
   .testimonial-rating {
       margin-bottom: 15px;
       display: flex;
       gap: 4px;
   }
   
   .testimonial-rating i {
       font-size: 14px;
       color: #ffc107;
   }
   
   .testimonial-text {
       font-size: 15px;
       line-height: 1.7;
       color: #555;
       margin-bottom: 20px;
       font-style: italic;
   }
   
   .testimonial-author {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .testimonial-avatar {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       overflow: hidden;
       border: 1px solid #e5e5e5;
       flex-shrink: 0;
   }
   
   .testimonial-avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .testimonial-info {
       flex: 1;
   }
   
   .testimonial-name {
       font-size: 16px;
       font-weight: 500;
       color: #1a1a1a;
       margin: 0 0 5px 0;
   }
   
   .testimonial-company,
   .testimonial-position {
       display: block;
       font-size: 13px;
       color: #999;
       margin-bottom: 2px;
   }
   
   /* ============================================
      FAQ Archive
      ============================================ */
   .faq-accordion {
       margin-bottom: 50px;
   }
   
   .faq-item {
       border-bottom: 1px solid #e5e5e5;
       padding: 20px 0;
   }
   
   .faq-question {
       display: flex;
       align-items: center;
       justify-content: space-between;
       cursor: pointer;
       padding: 0;
   }
   
   .faq-question h3 {
       font-size: 18px;
       font-weight: 400;
       color: #1a1a1a;
       margin: 0;
       flex: 1;
   }
   
   .faq-toggle {
       width: 30px;
       height: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #f8f9fa;
       border-radius: 4px;
       border: 1px solid #e5e5e5;
       transition: all 0.2s ease;
   }
   
   .faq-toggle i {
       font-size: 14px;
       color: #666;
       transition: transform 0.2s ease;
   }
   
   .faq-item.active .faq-toggle {
       background: #1a1a1a;
       border-color: #1a1a1a;
   }
   
   .faq-item.active .faq-toggle i {
       color: #fff;
       transform: rotate(45deg);
   }
   
   .faq-answer {
       display: none;
       padding: 20px 0 0 0;
       font-size: 15px;
       line-height: 1.7;
       color: #555;
   }
   
   .faq-item.active .faq-answer {
       display: block;
   }
   
   /* ============================================
      Pagination
      ============================================ */
   .pagination,
   .posts-navigation {
       margin-top: 50px;
       padding-top: 30px;
       border-top: 1px solid #e5e5e5;
   }
   
   .pagination .nav-links {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       flex-wrap: wrap;
   }
   
   .pagination .page-numbers {
       display: inline-block;
       padding: 8px 14px;
       font-size: 14px;
       color: #666;
       text-decoration: none;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
       transition: all 0.2s ease;
       background: transparent;
   }
   
   .pagination .page-numbers:hover,
   .pagination .page-numbers.current {
       background: #1a1a1a;
       color: #fff;
       border-color: #1a1a1a;
   }
   
   .pagination .prev,
   .pagination .next {
       padding: 8px 16px;
   }
   
   /* ============================================
      No Posts Found
      ============================================ */
   .no-posts,
   .no-faq,
   .no-services {
       text-align: center;
       padding: 60px 20px;
       color: #999;
       font-size: 16px;
   }
   
   /* ============================================
      Responsive Design
      ============================================ */
   @media (max-width: 768px) {
       .archive .container,
       .blog .container {
           padding: 20px 10px;
       }
       
       .page-header {
           margin-bottom: 40px;
           padding-bottom: 20px;
       }
       
       .page-title {
           font-size: 32px;
       }
       
       .posts-wrapper,
       .services-archive-grid,
       .portfolio-grid,
       .team-archive-grid {
           grid-template-columns: 1fr;
           gap: 25px;
       }
       
       .post {
           padding-bottom: 25px;
           margin-bottom: 25px;
       }
       
       .post-title {
           font-size: 20px;
       }
   }
   
   /* ============================================
      RTL Support
      ============================================ */
   .rtl .post-meta {
       direction: rtl;
   }