/* @override 
	http://localhost:8080/css/pages.css */

/*
  Shared patterns for interior content pages (About, IOR/EOR, Services,
  Sectors, News, Contact) — the homepage has its own bespoke sections in
  sections.css, but every other page is built from these primitives so new
  pages stay consistent without re-inventing layout each time.
*/

/* ---------- Hero motif (abstract decorative graphic, page-hero right side) ----------
   A brand-consistent stand-in for stock photography: a dot-textured orb, a
   slow-turning dashed ring, a central icon tile and 1-2 satellite icons
   relevant to the page topic. Pure CSS + Lucide icons, no external images. */

.hero-motif {
  position: relative;
  width: 19rem;
  height: 19rem;
  flex: none;
}

@media (max-width: 1100px) {
  .hero-motif {
    width: 15rem;
    height: 15rem;
  }
}

.hero-motif__dots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle, black 55%, transparent 100%);
  mask-image: radial-gradient(circle, black 55%, transparent 100%);
}

.hero-motif__ring {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  animation: df-spin 50s linear infinite;
}

.hero-motif__ring--reverse {
  inset: 20%;
  border-color: rgba(59, 91, 219, 0.3);
  animation-duration: 36s;
  animation-direction: reverse;
}

.hero-motif__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 1.625rem;
  background: var(--gradient-brand-135);
  display: grid;
  place-items: center;
  box-shadow: 0 20px 50px rgba(59, 91, 219, 0.35);
}

.hero-motif__core::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gradient-brand-135);
  animation: df-radar-pulse 2.8s ease-out infinite;
  z-index: -1;
}

.hero-motif__core svg {
  width: 42px;
  height: 42px;
  color: var(--color-white);
}

/* Small glowing dots that travel the rings. */

.hero-motif__orbit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  animation: df-spin 9s linear infinite;
}

.hero-motif__orbit--reverse {
  inset: 20%;
  animation-duration: 13s;
  animation-direction: reverse;
}

.hero-motif__blip {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #DCE4FB;
  box-shadow: 0 0 10px 3px rgba(255, 125, 191, 0.75);
}

.hero-motif__orbit--reverse .hero-motif__blip {
  background: #DCE4F5;
  box-shadow: 0 0 10px 3px rgba(16, 152, 173, 0.65);
}

.hero-motif__node {
  position: absolute;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
}

.hero-motif__node svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent-pink-on-dark);
}

.hero-motif__node--tl { top: 2%; left: 6%; }
.hero-motif__node--tr { top: 6%; right: 0; }
.hero-motif__node--br { bottom: 4%; right: 10%; }
.hero-motif__node--bl { bottom: 0; left: 0; }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-body-on-dark);
}

.breadcrumbs a {
  color: var(--color-body-on-dark);
}

.breadcrumbs a:hover {
  color: var(--color-white);
}

.breadcrumbs__sep {
  opacity: 0.5;
}

.breadcrumbs[data-on-light] {
  color: var(--color-body);
}

.breadcrumbs[data-on-light] a {
  color: var(--color-body);
}

.breadcrumbs[data-on-light] a:hover {
  color: var(--color-eyebrow);
}

/* ---------- Page hero (title band for interior pages) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 9.5rem 2.5rem 4rem;
  background: linear-gradient(160deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 62%, var(--bg-dark-3) 100%);
  color: var(--color-ink-on-dark);
}

.page-hero__glow {
  position: absolute;
  inset: -30% -6% auto auto;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 91, 219, 0.18), transparent 70%);
  pointer-events: none;
}

.page-hero__inner {
  /*
    max-width/margin/padding-inline come from the .container class, added
    alongside this in markup, so the hero content lines up with the nav and
    every other section's content width instead of running its own,
    slightly wider box.
  */
  position: relative;
}

.page-hero__inner--with-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-14);
}

@media (max-width: 900px) {
  .page-hero__inner--with-visual {
    display: block;
  }
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  font-weight: 600;
  margin: 0 0 1rem;
  max-width: 34rem;
  text-wrap: balance;
}

.page-hero__lede {
  margin: 0;
  font-size: var(--text-xl-alt);
  line-height: 1.62;
  max-width: 42rem;
  color: var(--color-body-on-dark);
  text-wrap: pretty;
}

.page-hero--compact {
  padding: 8.5rem 2.5rem 3rem;
}

.page-hero__ctas {
  margin-top: 2rem;
}

@media (max-width: 720px) {
  .page-hero {
    padding: 7.5rem 1.25rem 3rem;
  }
}

/* ---------- Sample-content notice (flags invented placeholder articles) ---------- */

.sample-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--text-sm);
  color: var(--color-body-on-dark-alt);
}

.sample-notice svg {
  flex: none;
  width: 15px;
  height: 15px;
}

/* ---------- Article featured image ---------- */

.article-hero-image {
  max-width: 60rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 auto 2.5rem 0;
  aspect-ratio: 21 / 9;
}

.article-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Prose (long-form article/body copy) ---------- */

.prose {
  max-width: 44rem;
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose p {
  font-size: var(--text-xl-alt);
  line-height: 1.7;
  color: var(--color-body);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-top: 2.5rem;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-top: 2rem;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.625rem;
  padding-left: 1.25rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  font-size: var(--text-xl-alt);
  line-height: 1.62;
  color: var(--color-body);
}

.prose a {
  text-decoration: underline;
  text-decoration-color: rgba(59, 91, 219, 0.35);
  text-underline-offset: 3px;
}

.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

.prose blockquote {
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--color-pink);
  background: var(--bg-card-tint);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--text-2xl);
  line-height: 1.55;
  color: var(--color-ink-secondary);
}

/* ---------- Content layout helpers ---------- */

.content-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-14);
  align-items: start;
}

@media (max-width: 960px) {
  .content-split {
    grid-template-columns: 1fr;
  }
}

.side-card {
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  background: var(--bg-lilac);
  border: 1px solid var(--border-card);
}

.side-card__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-ink);
}

.side-card__body {
  margin: 0 0 1.25rem;
  font-size: var(--text-base-alt);
  line-height: 1.6;
  color: var(--color-body);
}

.side-card__body:last-child {
  margin-bottom: 0;
}

.side-card + .side-card {
  margin-top: 1.25rem;
}

/* ---------- Section intro (single-column eyebrow + heading + lede) ---------- */

.section-intro {
  max-width: 46rem;
  margin-bottom: 2.75rem;
}

.section-intro .section-heading {
  margin-bottom: 1.25rem;
}

.section--tint {
  background: var(--bg-lilac);
}

/* ---------- Feature list (icon + text row, used on service pages) ---------- */

.feature-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.feature-list--flush {
  margin-top: 0;
}

.feature-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feature-row__icon {
  flex: none;
}

.feature-row__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: var(--text-lg-alt);
  font-weight: 600;
  color: var(--color-ink);
}

.feature-row__body {
  margin: 0;
  font-size: var(--text-base-alt);
  line-height: 1.6;
  color: var(--color-body);
}

/* ---------- Contact details ---------- */

.contact-detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--bg-card-tint);
  border: 1px solid var(--border-card);
}

.contact-detail__icon {
  flex: none;
}

.contact-detail__label {
  margin: 0 0 0.25rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest-alt);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.contact-detail__value {
  margin: 0;
  font-size: var(--text-xl-alt);
  line-height: 1.5;
  color: var(--color-ink);
}

.contact-detail__value a {
  color: var(--color-ink);
}

.contact-detail__value a:hover {
  color: var(--color-eyebrow);
}

.contact-map {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-card);
  aspect-ratio: 16 / 11;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-map {
  position: relative;
}

.contact-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
  background: var(--bg-lilac);
  color: var(--color-body);
  font-size: var(--text-base);
}

.contact-map__placeholder[hidden] {
  display: none;
}

/* ---------- News listing ---------- */

.news-meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-body);
}

.news-meta-row .tag {
  background: var(--bg-lilac);
  color: var(--color-eyebrow);
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-card-alt);
  font-size: var(--text-base-alt);
  color: var(--color-body);
}

.article-byline strong {
  color: var(--color-ink);
}

/* ---------- Simple CTA banner (reused on every interior page) ---------- */

.page-cta {
  background: linear-gradient(120deg, var(--bg-contact-1) 0%, var(--bg-contact-2) 52%, var(--bg-contact-3) 100%);
  color: var(--color-white);
}

.page-cta__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.page-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  margin: 0 0 0.375rem;
}

.page-cta__body {
  margin: 0;
  font-size: var(--text-lg-alt);
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
}