/* --- PAGE HEADER --- */
 .page-header {
   position: relative;
   padding: 180px 20px 120px;
   text-align: center;
   background: url('media/airport background wide.png') center/cover fixed;
   border-bottom: 1px solid var(--border);
 }

 .page-header::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(var(--bg-dark-rgb), 0.5) 0%, rgba(var(--bg-dark-rgb), 0.8) 50%, rgba(var(--bg-dark-rgb), 1) 100%);
   z-index: 1;
 }

 .page-header h1,
 .page-header p {
   position: relative;
   z-index: 2;
 }

 .page-header h1 {
   font-size: 52px;
   margin-bottom: 15px;
   background: var(--metal-bg);
   background-size: 200% auto;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(0 4px 15px var(--accent-glow));
 }

 .page-header p {
   font-size: 18px;
   color: var(--text-muted);
   max-width: 600px;
   margin: auto;
 }

 /* --- BLOG GRID & CARDS --- */
 .blog-section {
   padding: 20px 20px;
   position: relative;
   z-index: 2;
 }

 .blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
   margin-top: 20px;
   margin-bottom: 20px;
 }

.blog-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    text-align: left;
}

 .blog-card:hover {
   transform: translateY(-10px);
   border-color: var(--accent);
   box-shadow: 0 15px 40px var(--accent-glow);
 }

 .blog-img {
   width: 100%;
   aspect-ratio: 3 / 2;
   position: relative;
   overflow: hidden;
   border-bottom: 1px solid var(--border);
 }

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

 .blog-card:hover .blog-img img {
   transform: scale(1.08);
 }

 .blog-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background: var(--metal-bg);
   background-size: 200% auto;
   color: var(--text-metal);
   padding: 6px 14px;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   border-radius: 30px;
   letter-spacing: 0.5px;
   z-index: 2;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
 }

 .blog-content {
   padding: 10px 15px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }

 .blog-meta {
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 13px;
   color: var(--text-muted);
   margin-bottom: 15px;
   font-weight: 600;
 }

 .blog-meta i {
   color: var(--accent);
 }

 .blog-card h3 {
   color: var(--text-main);
   font-size: 22px;
   margin-bottom: 15px;
   line-height: 1.4;
   transition: color 0.3s ease;
 }

 .blog-card:hover h3 {
   color: var(--accent);
 }

 .blog-card p {
   color: var(--text-muted);
   font-size: 15px;
   line-height: 1.7;
   margin-bottom: 25px;
   flex-grow: 1;
 }

 .read-more {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--accent);
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   transition: all 0.3s ease;
   margin-top: auto;
 }

 .read-more i {
   transition: transform 0.3s ease;
 }

 .read-more:hover {
   color: var(--text-main);
   text-shadow: 0 0 8px var(--accent-glow);
 }

 .read-more:hover i {
   transform: translateX(5px);
 }

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

 @media(max-width: 768px) {
   .blog-grid {
     grid-template-columns: 1fr;
   }

   .page-header h1 {
     font-size: 38px;
   }
 }