/* ============================================================
   AREA — coverage pages (sectors, Ilfov, national, international)
   Extends blog.css + portofoliu.css.
   Images live in /assets/images/area/
============================================================ */

.area-coverage {
  margin: 2rem 0 2.4rem;
  padding: 1.1rem 1.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.area-coverage h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.area-coverage p { margin: 0; }

/* Footer strip linking every area page, present site-wide */
.area-strip {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.area-strip h5 {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.area-strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
}

.area-strip-links a,
.area-strip-current {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.area-strip-links a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.area-strip-current {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Area hero images ----------
   Replace the placeholder gradient by dropping the matching file into
   /assets/images/area/ — filenames listed in that folder's README.
   The gradient is a fallback so the page never looks broken.

   NOTE ON SCOPING: .project-hero-img, .related-img and .blog-card-img
   are SHARED container classes — the same three are reused on
   portfolio pages (paired with .portfolio-img--N, styled in style.css)
   and on blog pages (paired with .blog-img--N, styled in blog.css).
   area.css is linked on every page (blog, blog posts, portofoliu,
   project pages, area pages), and it loads AFTER style.css/blog.css.
   A previous version of this rule targeted the plain container
   classes with no scoping, which meant it wasn't just styling area
   pages — it repainted every portfolio and blog thumbnail on the
   site with this flat gradient too, since same specificity + later
   in the cascade wins. The [class*="area-img--"] attribute selector
   below scopes the fallback to elements that actually carry an
   area-img--* modifier, so it never touches .portfolio-img--N or
   .blog-img--N elements elsewhere.

   NOTE ON OVERRIDE: each .area-img--sector-N rule below is paired
   with all three container classes (".project-hero-img.area-img--
   sector-1", etc.) so its specificity (two classes) matches the
   fallback's specificity (one class + one attribute selector) —
   equal specificity means the rule declared LATER in the file wins,
   which is why the per-area rules are listed after the fallback and
   correctly override just the background-image once a real photo
   file exists. (An earlier version used a single class for the
   per-area rules, which was LOWER specificity than the fallback and
   could never win regardless of order — the same bug this scoping
   fix also avoids reintroducing.) */
.project-hero-img[class*="area-img--"],
.related-img[class*="area-img--"],
.blog-card-img[class*="area-img--"] {
  background-image: linear-gradient(135deg, #12202f 0%, #1b2f45 55%, #24384f 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.project-hero-img.area-img--sector-1,
.related-img.area-img--sector-1,
.blog-card-img.area-img--sector-1 {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/sector-1.jpg');
}

.project-hero-img.area-img--sector-2,
.related-img.area-img--sector-2,
.blog-card-img.area-img--sector-2 {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/sector-2.jpg');
}

.project-hero-img.area-img--sector-3,
.related-img.area-img--sector-3,
.blog-card-img.area-img--sector-3 {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/sector-3.jpg') ;
}

.project-hero-img.area-img--sector-4,
.related-img.area-img--sector-4,
.blog-card-img.area-img--sector-4 {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/sector-4.jpg') ;
}

.project-hero-img.area-img--sector-5,
.related-img.area-img--sector-5,
.blog-card-img.area-img--sector-5 {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/sector-5.jpg') ;
}

.project-hero-img.area-img--sector-6,
.related-img.area-img--sector-6,
.blog-card-img.area-img--sector-6 {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/sector-6.jpg') ;
}

.project-hero-img.area-img--ilfov,
.related-img.area-img--ilfov,
.blog-card-img.area-img--ilfov {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/ilfov.jpg') ;
}

.project-hero-img.area-img--national,
.related-img.area-img--national,
.blog-card-img.area-img--national {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/national.jpg') ;
}

.project-hero-img.area-img--international,
.related-img.area-img--international,
.blog-card-img.area-img--international {
  background-image: linear-gradient(rgba(6, 12, 20, 0.35), rgba(6, 12, 20, 0.35)), url('../assets/images/area/international.jpg') ;
}