/* Production CSS for grande-maree hero and article
   - Uses image-set with WebP preferred and JPEG fallback
   - Responsive fallbacks: smaller image on narrow viewports
   - Place this file in your site and reference it from the page head
*/

.hero-cover {
  height: 60vh;
  min-height: 360px;
  position: relative;
  background-color: #06202a; /* neutral base while images load */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Prefer WebP, fallback to JPEG. Favor browsers that support image-set. */
  background-image: -webkit-image-set(
    url('./AdobeStock_549180191_Editorial_Use_Only.webp') 1x,
    url('./AdobeStock_549180191_Editorial_Use_Only-800.webp') 0.5x,
    url('./AdobeStock_549180191_Editorial_Use_Only.jpeg') 1x
  );
  background-image: image-set(
    url('./AdobeStock_549180191_Editorial_Use_Only.webp') type('image/webp') 1x,
    url('./AdobeStock_549180191_Editorial_Use_Only-800.webp') type('image/webp') 0.5x,
    url('./AdobeStock_549180191_Editorial_Use_Only.jpeg') type('image/jpeg') 1x
  );
}

.hero-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.hero-content { position: relative; z-index: 10; display:flex; align-items:center; justify-content:center; height:100%; }

/* Responsive: use the smaller image on narrow screens to save bandwidth */
@media (max-width: 900px) {
  .hero-cover {
    background-image: -webkit-image-set(
      url('./AdobeStock_549180191_Editorial_Use_Only-800.webp') 1x,
      url('./AdobeStock_549180191_Editorial_Use_Only.jpeg') 1x
    );
    background-image: image-set(
      url('./AdobeStock_549180191_Editorial_Use_Only-800.webp') type('image/webp') 1x,
      url('./AdobeStock_549180191_Editorial_Use_Only.jpeg') type('image/jpeg') 1x
    );
  }
}

/* Production-ready article container */
.article-container { max-width: 64rem; margin: 0 auto; padding: 3rem 1.5rem; }

.info-box { border-left: 4px solid #1e40af; padding: 1rem; background: rgba(255,255,255,0.06); border-radius: 0.5rem; }

/* Small utility to visually indicate the current menu item */
.nav-active { color: #1e3a8a; font-weight: 700; }