/* ==========================================================================
   SECTION 07: FULL WIDTH LATEST POSTS CAROUSEL
   Center-Aligned Header + Floating Flank Navigation Arrows + Parallax Background
   ========================================================================== */

.ehs-posts-carousel-section {
  position: relative !important;
  width: 100% !important;
  padding: 110px 0 125px 0 !important;
  background: linear-gradient(135deg, #09131f 0%, #0d1e33 50%, #081220 100%) !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  /* TRUE CSS PARALLAX ENGINE */
  background-attachment: fixed !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Translucent Dark Gradient Overlay */
.ehs-posts-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(9, 19, 31, 0.94) 0%,
    rgba(13, 30, 51, 0.90) 50%,
    rgba(8, 18, 32, 0.95) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Distinct Diagonal Circuit Grid Mesh Overlay */
.ehs-posts-mesh-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(56, 189, 248, 0.22) 1.2px, transparent 0),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(-135deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 28px 28px, 56px 56px, 56px 56px !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* FULL-WIDTH CONTAINER LAYOUT */
.ehs-posts-fullwidth-wrap {
  width: 100% !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ==========================================================================
   CENTER-ALIGNED HEADER
   ========================================================================== */

.ehs-posts-header-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 5% !important;
  margin-bottom: 50px !important;
}

.ehs-posts-header-text {
  max-width: 840px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.ehs-posts-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(2, 132, 199, 0.22) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 14px !important;
}

.ehs-posts-badge svg {
  color: #38bdf8 !important;
}

.ehs-posts-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.6px !important;
  margin: 0 0 14px 0 !important;
  text-align: center !important;
}

.ehs-posts-sub {
  font-size: 16px !important;
  color: #94a3b8 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  text-align: center !important;
}

.ehs-posts-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 22px !important;
}

.ehs-posts-viewall-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 24px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.ehs-posts-viewall-btn:hover {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   CAROUSEL CONTAINER & FLOATING FLANK ARROWS
   ========================================================================== */

.ehs-posts-carousel-container {
  width: 100% !important;
  position: relative !important;
  padding: 0 0 !important;
}

/* Floating Arrows (Left & Right Flanks) */
.ehs-post-nav-btn {
  position: absolute !important;
  top: 48% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(0, 24, 51, 0.88) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ehs-post-prev {
  left: 20px !important;
}

.ehs-post-next {
  right: 20px !important;
}

.ehs-post-nav-btn:hover {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  transform: translateY(-50%) scale(1.12) !important;
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.5) !important;
}

/* Horizontal Track */
.ehs-posts-carousel-track {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 10px 5% 30px 5% !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ehs-posts-carousel-track::-webkit-scrollbar {
  display: none !important;
}

/* Post Cards */
.ehs-post-card {
  flex: 0 0 350px !important;
  max-width: 350px !important;
}

.ehs-post-card-inner {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.ehs-post-card:hover .ehs-post-card-inner {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35), 0 0 20px rgba(2, 132, 199, 0.25) !important;
}

/* Thumbnail Frame */
.ehs-post-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  background: #002244 !important;
}

.ehs-post-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ehs-post-card:hover .ehs-post-img {
  transform: scale(1.08) !important;
}

.ehs-post-placeholder {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #002244 0%, #0056b3 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.ehs-post-placeholder svg {
  color: #38bdf8 !important;
}

/* Category Tag */
.ehs-post-cat-pill {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: rgba(0, 34, 68, 0.85) !important;
  color: #38bdf8 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  z-index: 2 !important;
}

/* Card Body */
.ehs-post-body {
  padding: 22px 22px 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

.ehs-post-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.ehs-post-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.ehs-post-card-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #002244 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px 0 !important;
}

.ehs-post-card-title a {
  color: #002244 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.ehs-post-card-title a:hover {
  color: #0056b3 !important;
}

.ehs-post-excerpt {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 0 18px 0 !important;
  flex-grow: 1 !important;
}

/* Card Footer */
.ehs-post-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: auto !important;
}

.ehs-post-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0056b3 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.ehs-post-link:hover {
  color: #003366 !important;
}

.ehs-post-link .ehs-btn-arrow {
  transition: transform 0.2s ease !important;
}

.ehs-post-card:hover .ehs-post-link .ehs-btn-arrow {
  transform: translateX(4px) !important;
}

/* Responsive Rules */
@media (max-width: 991px) {
  .ehs-posts-title {
    font-size: 30px !important;
  }
}

@media (max-width: 640px) {
  .ehs-posts-carousel-section {
    padding: 70px 0 !important;
    background-attachment: scroll !important;
  }
  .ehs-post-card {
    flex: 0 0 290px !important;
    max-width: 290px !important;
  }
  .ehs-post-nav-btn {
    width: 42px !important;
    height: 42px !important;
  }
  .ehs-post-prev {
    left: 8px !important;
  }
  .ehs-post-next {
    right: 8px !important;
  }
}