.nm-page-wrap {
  width: 100%;
}

/* =========================================
   Hero Card (Full‐Width) Styles – “Mock” Version
   ========================================= */

.nm-hero-card {
  display: flex;                    /* place thumb + content side by side */
  background: var(--primary-bg);    /* white or your primary background */
  border-radius: 8px;
  overflow: hidden;                 /* clip child corners inside the rounded card */
  margin-bottom: 3rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
}

/* When hovered, lift the card slightly */
.nm-hero-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

.nm-hero-card:hover .nm-hero-cta {
  background: var(--brand);
  color: #fff;
  transition: all 0.2s ease-in-out;
}

/* Remove any default link styling */
.nm-hero-card a {
  color: inherit;
  text-decoration: none;
  display: flex;       /* allow the image + content to be one clickable flex block */
  width: 100%;
}

/* Left half: the featured image */
.nm-hero-thumb {
  flex: 0 0 50%;       /* fixed 50% width */
  overflow: hidden;    /* crop to container */
  position: relative;
}

.nm-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop/fill exactly half the card */
  display: block;
}

/* Right half: text block */
.nm-hero-content {
  flex: 1;                      /* fill the remaining 50% */
  padding: 2rem;                /* ample spacing */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--primary-bg);
}

/* Title */
.nm-hero-title {
  margin: 0 0 1rem;
  font-size: 2.25rem;
  color: var(--headings);
  line-height: 1.2;
}

/* Excerpt text */
.nm-hero-excerpt {
  margin: 0 0 1.5rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}

/* “Read More” button (outlined pill) */
.nm-hero-cta {
  align-self: start;            /* left‐align the button */
  display: inline-block;
  color: var(--brand);
  font-size: 1rem;
  border: 1px solid var(--brand);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;         /* fully rounded pill */
  background: transparent;
  transition: all 0.2s ease-in-out;
  text-align: center;
  width: 100%;
}

/* Small media query: stack vertically on very narrow screens */
@media (max-width: 768px) {
  .nm-hero-card {
    flex-direction: column;
  }
  .nm-hero-thumb {
    flex: 0 0 auto;
    height: 250px;  /* adjust as needed for a portrait image zone */
  }
  .nm-hero-content {
    padding: 1.5rem;
  }
}

/* ==================================================
   2) Filter Controls (Type buttons + Search)
   ================================================== */
.nm-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
}

.nm-filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nm-filter-label {
  margin-right: 0.5rem;
  color: var(--text);
}

.nm-filter-btn {
  background: var(--primary-bg);
  border: 1px solid var(--brand);
  color: var(--brand);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.nm-filter-btn.active,
.nm-filter-btn:hover {
  background: var(--alt-brand);
  border-color: var(--alt-brand);
  color: var(--headings);
  transition: all 0.2s ease-in-out;
}

/* ----------------------------------------
   Search Input + Button (pill with inset button)
   ---------------------------------------- */

.nm-search-group {
  display: flex;
  align-items: center;
  width: 30%;
  margin-left: auto;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--primary-bg);
  overflow: hidden;
}

#nm-search-input {
  flex: 1;
  border: none; 
  background: transparent; 
  padding: 0.45rem 1rem; 
  font-size: 0.95rem;
  color: var(--text);
  outline: none;
}

#nm-search-btn {
  background: var(--alt-brand);
  color: var(--headings);
  border: none;  
  padding: 0.45rem 1.2rem;     
  font-size: 0.95rem;
  cursor: pointer;
  margin-right: 10px;  
  border-radius: 999px; 
  transition: all 0.2s ease-in-out;
}

#nm-search-btn:hover {
  background: var(--brand);
  color: var(--primary-bg);
  transition: all 0.2s ease-in-out;
}

.nm-search-group:focus-within {
  box-shadow: 0 0 0 2px rgba( var(--brand-rgb, 0,123,186), 0.2 );
}

/* ==================================================
   3) Category Section Titles & Grid
   ================================================== */
.nm-category-section {
  margin-bottom: 3rem;
}

.nm-category-title {
  font-size: 1.25rem;
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
  display: inline-block;
  margin-bottom: 1rem;
}

.nm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.nm-loading-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nm-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: nm-spin 1s linear infinite;
}

@keyframes nm-spin {
  to { transform: rotate(360deg); }
}

.nm-no-results {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  color: #555;
  padding: 1rem 0;
}

/* ==================================================
   4) Condensed Card (Grid) Styles (nm-condensed-card.php)
   ================================================== */
.nm-condensed-card {
  background: var(--primary-bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.nm-condensed-card a {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.nm-condensed-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.nm-condensed-content {
  padding: 0.75rem 1rem 1.25rem;
  flex-grow: 1;
}

.nm-condensed-title {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  color: var(--headings);
}

.nm-condensed-excerpt {
  flex-grow: 1;
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
}

.nm-condensed-cta {
  display: inline-block;
  color: var(--brand);
  font-size: 0.95rem;
  border: 1px solid var(--brand);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-align: center;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.nm-condensed-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}

.nm-condensed-card:hover .nm-condensed-cta {
  background: var(--brand);
  color: #fff;
  transition: all 0.2s ease-in-out;
}

.nm-grid-wrapper {
  position: relative;
  width: 100%;
  transition: opacity 0.3s ease;
}

.nm-grid-wrapper.nm-fade {
  opacity: 0.4;
  pointer-events: none;
}

.nm-page-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
  z-index: 2;
  &:hover {
    color: revert;
    background-color: revert;
    border-color: revert;
  }
  &:focus {
    color: revert;
    background-color: revert;
    border-color: revert;
  }
  &:active {
    color: revert;
    background-color: revert;
    border-color: revert;
  }
}

.nm-page-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.nm-page-arrow img {
  width: 100%;
  height: auto;
  display: block;
}

.nm-air-prev,
.nm-dron-prev,
.nm-related-prev,
.nm-newsletter-prev,
.nm-press-release-prev {
  left: -50px;
}
.nm-air-next,
.nm-dron-next,
.nm-related-next,
.nm-newsletter-next,
.nm-press-release-next {
  right: -50px;
}