/* v8.7 – brighter original portrait; keep white hero text readable on left. */
.hero { background-color: #182b33; }
.hero .hero-image {
  opacity: 1;
  background-image:
    linear-gradient(90deg,
      rgba(13, 29, 36, .94) 0%,
      rgba(13, 29, 36, .87) 22%,
      rgba(13, 29, 36, .60) 34%,
      rgba(13, 29, 36, .20) 47%,
      rgba(13, 29, 36, 0) 59%),
    url('/assets/portrait-wide.jpg');
  background-position: center, center 33%;
  background-size: cover, cover;
  background-repeat: no-repeat;
}
/* Smaller screens need a modest local darkening for readable white copy. */
@media (max-width: 920px) {
  .hero .hero-image {
    background-image:
      linear-gradient(90deg, rgba(13,29,36,.90) 0%, rgba(13,29,36,.70) 36%, rgba(13,29,36,.15) 76%),
      url('/assets/portrait-wide.jpg');
    background-position: center, 60% center;
  }
}
@media (max-width: 620px) {
  .hero .hero-image {
    background-image:
      linear-gradient(90deg, rgba(13,29,36,.86) 0%, rgba(13,29,36,.60) 45%, rgba(13,29,36,.25) 100%),
      url('/assets/portrait-wide.jpg');
    background-position: center, 61% center;
  }
}

/* v8.9 — resilience against unbroken content and oversized media.
   Applied globally: homepage, news, projects, details, gallery, videos and representation.
   This file is already referenced by the current index.php; no PHP replacement necessary. */

/* Grid and flex children must be allowed to shrink to their assigned column. */
.cards > *, .content-card, .feature, .gallery-card, .gallery-copy,
.video-showcase > *, .video-tile, .video-copy, .quote-grid > *,
.representation-hero > *, .representation-content > *,
.rep78-main > *, .rep78-contact, .rep78-intro,
.article-layout > *, .article-body, .page-banner .wrap {
  min-width: 0;
}

/* A long string without spaces must never force its card off the screen. */
.content-card, .content-card h2, .content-card p, .content-card .overline,
.feature, .feature h2, .feature h3, .feature p,
.gallery-card, .gallery-copy, .gallery-copy h2, .gallery-copy p,
.video-tile, .video-copy, .video-copy h2, .video-copy p,
.article-body, .sidebar, .page-banner, .page-banner h1,
.rep78-intro, .rep78-contact, .rep78-contact-lines,
.representation-card, .representation-details, .representation-intro {
  overflow-wrap: anywhere;
}

/* News cards: summaries stay within their own card and maintain a clean rhythm. */
.content-card {
  box-sizing: border-box;
  max-width: 100%;
}
.content-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  line-height: 1.65;
  max-width: 100%;
}
.content-card h2 {
  max-width: 100%;
}

/* Rich text can contain external tables, code or oversized images. */
.article-body img, .article-body video, .article-body iframe,
.article-body svg, .article-body embed, .article-body object {
  max-width: 100%;
}
.article-body pre, .article-body table {
  max-width: 100%;
  overflow-x: auto;
}
.article-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.article-body a { overflow-wrap: anywhere; }

/* Small screens: preserve card widths and wrap very long URLs/emails. */
@media (max-width: 700px) {
  .cards, .gallery-cards, .video-showcase { min-width: 0; }
  .content-card { min-width: 0; }
  .rep78-contact-lines a strong { overflow-wrap: anywhere; }
}