/**
 * ============================================================================
 * SkyDen MC - Blog Module Stylesheet v1.0.0
 * ============================================================================
 * 
 * @package     SkyDenMC
 * @subpackage  Frontend_Styles
 * @version     1.0.0
 * @author      Amirejk43
 * @author      SkyDen Development Team
 * 
 * @license     Proprietary Software License
 * @copyright   2026 SkyDen MC. All rights reserved.
 * 
 * @link        https://skydenmc.ir
 * @since       Version 1.0.0 (2024-01-01)
 * 
 * @description Complete blog styling with hero section, post cards, filters, and responsive design
 *
/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. Page Title Section (Hero)
   2. Breadcrumb Navigation
   3. Blog Post Cards
   4. Blog Filters & Sorting
   5. Single Article Page
   6. Blog Content Typography
   7. Pagination
   8. Responsive Design
   9. Utilities & Animations
   ============================================ */

/* --------------------------------------------
   1. PAGE TITLE SECTION (HERO)
--------------------------------------------- */

/**
 * Hero section for blog page
 * Displays page title with background image and gradient overlay
 */
.page-title-section {
  height: 65vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  background: url("../img/blog-background.jpeg");
  background-position: bottom;
  background-size: cover;
  position: relative;
  z-index: 2;
}

.page-title p {
  text-align: center !important;
}

/**
 * Gradient overlay for better text readability
 * Creates smooth transition from image to content
 */
.page-title-section::after {
  content: "";
  width: 100vw;
  position: absolute;
  bottom: -1px !important;
  background: linear-gradient(to top, rgb(17 18 24), transparent);
  height: 100%;
  z-index: -1;
}

/* --------------------------------------------
   2. BREADCRUMB NAVIGATION
--------------------------------------------- */

/**
 * Breadcrumb styling for navigation
 * Shows current location in site hierarchy
 */
.breadcrumb-item + .breadcrumb-item::before {
  color: #fff !important;
}

.breadcrumb-item.active {
  color: white;
}

.breadcrumb-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* --------------------------------------------
   3. PAGE TITLE COMPONENTS
--------------------------------------------- */

/**
 * Main page title wrapper
 */
.page-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 34px;
  font-weight: 900;
  flex-direction: column;
}

.page-title div span {
  margin-bottom: 6px;
}

/**
 * Server name with neon glow effect
 */
.page-title-section-server-name {
  color: rgb(151 91 255);
  text-shadow: 0 4px 40px rgb(151 91 255);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  font-family: "YekanBakh";
  font-size: 34px;
  margin-bottom: 6px !important;
  -webkit-text-shadow: 0 4px 40px rgb(103 47 190 / 88%);
  -moz-text-shadow: 0 4px 40px rgb(103 47 190 / 88%);
  margin-top: 0 !important;
  margin-inline: 10px;
  font-weight: 900 !important;
}

/**
 * Page description text
 */
.page-title-section p {
  font-size: 13px;
  font-weight: 400;
}

.page-title div {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* --------------------------------------------
   4. BLOG POST CARDS
--------------------------------------------- */

/**
 * Blog post card container
 * Features rounded corners and smooth hover transitions
 */
.product-card {
  border-radius: 22px;
  background: rgb(24 27 36);
  border: 1px solid rgb(41 45 57);
  transition: all ease 300ms !important;
  -webkit-transition: all ease 300ms !important;
  -moz-transition: all ease 300ms !important;
  -o-transition: all ease 300ms !important;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
}

/**
 * Blog post card image
 */
.product-card-img {
  border-radius: 22px 22px 0 0;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/**
 * Blog post title
 */
.product-card-title {
  font-size: 20px;
  font-family: "YekanBakh";
  color: #fff;
  font-weight: 900;
  margin-bottom: 0 !important;
  line-height: 35px;
}

/**
 * Hover effect - scale animation
 */
.product-card:hover {
  transform: scale(1.06);
  background: #1e2333;
}

/**
 * Card body background on hover
 */
.product-card:hover .card-body {
  background: #1e2333;
}

/**
 * Card body base styling
 */
.product-card .card-body {
  background: #0e1119;
  transition: all ease 300ms;
}

/**
 * Post price/metadata (reused from shop)
 */
.product-card-price {
  color: #b39ddb;
  font-size: 30px;
  font-weight: 900;
  font-family: "YekanBakh";
}

/**
 * Post metadata badge
 */
.per-month-product-card {
  color: #fff;
  font-size: 12px;
}

/**
 * Post details section
 */
.product-card-detail {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}

/**
 * Metadata currency/label
 */
.product-card-toman {
  margin: 0 !important;
  display: block;
  position: relative;
  top: -10px;
  margin-bottom: -24px !important;
  font-size: 14px;
  color: #fff;
}

/* --------------------------------------------
   5. BLOG FILTERS & SORTING
--------------------------------------------- */

/**
 * Filter buttons container
 */
.blog-filters {
  margin-bottom: 1rem;
}

/**
 * Individual filter button styling
 */
.blog-filters .btn {
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  padding: 8px 20px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
}

/**
 * Filter button hover effect
 */
.blog-filters .btn:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: rgba(108, 92, 231, 0.5);
  color: white;
  transform: translateY(-2px);
}

/**
 * Active filter button state
 */
.blog-filters .btn.active-filter {
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4ad7 100%);
  color: white;
  border-color: #6c5ce7;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

/**
 * Filter button icon spacing
 */
.blog-filters .btn i {
  margin-left: 8px;
  font-size: 13px;
}

/* --------------------------------------------
   6. SINGLE ARTICLE PAGE
--------------------------------------------- */

/**
 * Article container spacing
 * Adds top margin to account for fixed header
 */
article {
  margin-top: 250px !important;
}

/**
 * Article main title
 */
.article-title {
  font-size: 42px;
  color: #fff;
  font-family: "YekanBakh";
  font-weight: 900;
}

/**
 * Responsive article title
 */
.article-title {
  font-size: 32px !important;
  font-weight: 900;
  font-family: "YekanBakh";
}

/**
 * Blog content wrapper
 */
.blog-content {
  color: #fff;
  line-height: 30px;
}

/**
 * Blog content paragraph spacing
 */
.blog-content p {
  margin-bottom: 1.5rem;
}

/**
 * Blog content headings
 */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  color: #fff;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-family: "YekanBakh";
}

/**
 * Blog content images
 */
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem 0;
}

/**
 * Blog content blockquotes
 */
.blog-content blockquote {
  border-right: 4px solid #6c5ce7;
  padding-right: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #b0b0b0;
}

/**
 * Blog content code blocks
 */
.blog-content pre {
  background: #0e1119;
  padding: 1rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.blog-content code {
  background: rgba(108, 92, 231, 0.2);
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  font-size: 0.9em;
}

/**
 * Blog content lists
 */
.blog-content ul,
.blog-content ol {
  margin: 1rem 0;
  padding-right: 1.5rem;
}

.blog-content li {
  margin: 0.5rem 0;
}

/* --------------------------------------------
   7. PAGINATION
--------------------------------------------- */

/**
 * Pagination container
 */
.blog-pagination {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

/**
 * Pagination items
 */
.blog-pagination .pagination {
  gap: 8px;
  justify-content: center;
}

/**
 * Pagination links
 */
.blog-pagination .page-link {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/**
 * Pagination hover effect
 */
.blog-pagination .page-link:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: #6c5ce7;
  color: white;
  transform: translateY(-2px);
}

/**
 * Active pagination item
 */
.blog-pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4ad7 100%);
  border-color: #6c5ce7;
  color: white;
}

/**
 * Disabled pagination item
 */
.blog-pagination .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------
   8. SORTING DROPDOWN
--------------------------------------------- */

/**
 * Sort dropdown styling
 */
.blog-sorting .form-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  width: 200px;
  transition: all 0.3s ease;
}

/**
 * Sort dropdown hover
 */
.blog-sorting .form-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(108, 92, 231, 0.5);
}

/**
 * Sort dropdown focus
 */
.blog-sorting .form-select:focus {
  border-color: #6c5ce7;
  box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.25);
  outline: none;
}

/**
 * Sort dropdown options
 */
.blog-sorting .form-select option {
  background: #1a1a2e;
  color: #e0e0e0;
}

/* --------------------------------------------
   9. RESPONSIVE DESIGN
--------------------------------------------- */

/**
 * Tablet devices (max-width: 768px)
 */
@media (max-width: 768px) {
  /* Hero section */
  .page-title-section {
    height: 50vh;
  }

  .page-title {
    font-size: 24px;
  }

  .page-title-section-server-name {
    font-size: 24px;
  }

  /* Blog cards */
  .product-card-img {
    height: 180px;
  }

  .product-card-title {
    font-size: 16px;
    line-height: 28px;
  }

  /* Article page */
  article {
    margin-top: 180px !important;
  }

  .article-title {
    font-size: 24px !important;
  }

  .blog-content {
    font-size: 14px;
    line-height: 26px;
  }

  /* Filters */
  .blog-filters .btn {
    padding: 6px 14px;
    font-size: 12px;
  }

  .blog-filters .btn i {
    font-size: 11px;
  }

  /* Sorting */
  .blog-sorting .form-select {
    width: 100%;
    font-size: 12px;
  }

  /* Layout */
  .d-flex.flex-wrap {
    flex-direction: column;
    align-items: stretch !important;
  }

  .blog-sorting {
    width: 100%;
  }
}

/**
 * Mobile devices (max-width: 576px)
 */
@media (max-width: 576px) {
  /* Hero section */
  .page-title-section {
    height: 40vh;
  }

  .page-title {
    font-size: 18px;
  }

  .page-title-section-server-name {
    font-size: 18px;
  }

  .page-title-section p {
    font-size: 11px;
  }

  /* Blog cards */
  .product-card-img {
    height: 150px;
  }

  .product-card-title {
    font-size: 14px;
    line-height: 24px;
  }

  /* Article page */
  article {
    margin-top: 150px !important;
  }

  .article-title {
    font-size: 20px !important;
  }

  .blog-content {
    font-size: 13px;
    line-height: 24px;
  }

  /* Filters */
  .blog-filters .btn {
    padding: 5px 12px;
    font-size: 11px;
  }

  /* Pagination */
  .blog-pagination .page-link {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* --------------------------------------------
   10. UTILITIES & ANIMATIONS
--------------------------------------------- */

/**
 * Loading state for blog grid
 */
.blog-posts-grid {
  transition: opacity 0.3s ease;
  min-height: 400px;
  margin-top: -40px;
}

.blog-posts-grid.filtering {
  opacity: 0.5;
}

/**
 * Category badge on post cards
 */
.post-category-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4ad7 100%);
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/**
 * Read time indicator
 */
.read-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #a0a0a0;
}

.read-time i {
  font-size: 11px;
}

/**
 * Post metadata wrapper
 */
.post-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 13px;
  color: #a0a0a0;
}

.post-meta i {
  margin-left: 5px;
}

/**
 * Animation for post cards
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-posts-grid .col-12 {
  animation: fadeInUp 0.5s ease forwards;
}

/**
 * Back to top button for blog
 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4ad7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(108, 92, 231, 0.4);
}

/**
 * Share buttons for blog posts
 */
.share-buttons {
  display: flex;
  gap: 10px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
  cursor: pointer;
}

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

.share-btn.telegram {
  background: #0088cc;
}

.share-btn.twitter {
  background: #1da1f2;
}

.share-btn.whatsapp {
  background: #25d366;
}

@media screen and (max-width: 1200px) {
  .card-title {
    font-size: 20px !important;
  }

  .card-link {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 990px) {
  .card-title {
    font-size: 18px !important;
  }

  .card-link {
    font-size: 14px !important;
  }
}