/* =========================================
   1. FONTS & GLOBAL SETTINGS
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');
   

   
   .container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 15px;
   }
   
   /* Common Section Styling */
   .media-section, .pub-section {
       padding: 40px 8%;
       background-color: #f8f9fa;
   }
   
   /* =========================================
      2. HERO SECTION (BANNER)
      ========================================= */
   .page-hero {
       position: relative;
       width: 100%;
       min-height: 350px;
       display: flex;
       align-items: center;
       justify-content: center;
       /* Image path eka hariyatama balanna */
       background-image: url('../images/publicationsSlider.jpg'); 
       background-size: cover;
       background-position: center;
       background-color: #4a0202;
       padding-top: 80px;
   }
   
   .page-hero .overlay {
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: rgba(0, 0, 0, 0.6);
       z-index: 1;
   }
   
   .page-hero .container {
       position: relative;
       z-index: 2;
       text-align: center;
   }
   
   .page-hero h1 {
       /* font-family: 'Roboto Slab', serif; */
       font-size: 3rem;
       font-weight: 700;
       color: #ffffff;
       margin-bottom: 15px;
   }
   
   .breadcrumb {
       display: flex;
       justify-content: center;
       gap: 10px;
       color: #ffffff;
       font-size: 14px;
   }
   
   .breadcrumb a {
       color: #ffffff;
       text-decoration: none;
       opacity: 0.9;
   }
   
   .breadcrumb span[style] {
       color: #d1b24a !important; /* Gold Color */
       font-weight: 600;
   }
   
   /* =========================================
      4. SECTION HEADERS
      ========================================= */
   .section-header {
       margin-bottom: 30px;
   }
   
   .section-title {
       color: #580000;
       font-size: 26px;
       font-weight: 700;
       /* font-family: 'Roboto Slab', serif; */
       margin-bottom: 10px;
   }
   
   .title-line {
       width: 60px;
       height: 4px;
       background-color: #d1b24a; /* Gold */
       border-radius: 2px;
   }
   
   /* =========================================
      5. VIDEO GRID & CARDS
      ========================================= */
   .video-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 30px;
   }
   
   .video-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 30px;
   }
   
   .video-card {
       background: #ffffff;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 4px 15px rgba(0,0,0,0.05);
       border: 1px solid #eaeaea;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       display: flex;
       flex-direction: column;
   }
   
   .video-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 12px 30px rgba(0,0,0,0.1);
   }
   
   /* Video Wrapper (16:9 Aspect Ratio) */
   .video-wrapper {
       position: relative;
       padding-bottom: 56.25%; /* 16:9 Ratio */
       height: 0;
       overflow: hidden;
       background-color: #000;
   }
   
   .video-wrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: 0;
   }
   
   .video-body {
       padding: 20px;
       flex: 1;
       display: flex;
       flex-direction: column;
   }
   
   .video-category {
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #d1b24a; /* Gold */
       font-weight: 700;
       margin-bottom: 8px;
       display: block;
   }
   
   .video-title {
       font-size: 17px;
       color: #333333;
       font-weight: 700;
       line-height: 1.4;
       margin-bottom: 15px;
       /* Limit title to 2 lines */
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   .video-meta {
       margin-top: auto;
       display: flex;
       justify-content: space-between;
       font-size: 13px;
       color: #888888;
       border-top: 1px solid #f0f0f0;
       padding-top: 15px;
   }
   
   .video-meta span {
       display: flex;
       align-items: center;
       gap: 6px;
   }

   /* =========================================
      6. PAGINATION
      ========================================= */
   .video-pagination {
       margin-top: 35px;
       display: flex;
       justify-content: center;
       gap: 8px;
   }

   .video-page-btn {
       min-width: 34px;
       padding: 7px 12px;
       border-radius: 4px;
       border: 1px solid #d1d5db;
       background-color: #ffffff;
       font-size: 14px;
       cursor: pointer;
       color: #333333;
       transition: background-color 0.2s, color 0.2s, border-color 0.2s;
   }

   .video-page-btn:hover:not(:disabled) {
       background-color: #f3f4f6;
       border-color: #c49a18;
   }

   .video-page-btn.active {
       background-color: #580000;
       color: #ffffff;
       border-color: #580000;
   }

   .video-page-btn:disabled {
       opacity: 0.5;
       cursor: default;
   }
   
   /* =========================================
      7. RESPONSIVE DESIGN (MOBILE)
      ========================================= */
   @media (max-width: 768px) {
       .page-hero h1 {
           font-size: 2rem;
       }
   
       .video-grid {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 1024px) {
       .video-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }