/* ============================================
   Granite Elite Intel — Page-Specific Styles
   Unique layouts and overrides for each page
   ============================================ */

/* ============ IMAGE SYSTEM ============ */

/* Hero background image */
.hero__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 6, 8, 0.85) 0%,
    rgba(17, 21, 27, 0.7) 40%,
    rgba(17, 21, 27, 0.8) 100%
  );
  z-index: 1;
}

/* Card header images */
.card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6);
  width: calc(100% + var(--space-8) * 2);
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card:hover .card__image img {
  transform: scale(1.05);
}

.card__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(17, 21, 27, 0.8) 0%, transparent 100%);
  pointer-events: none;
}

/* Case study card images */
.case-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.case-card:hover .case-card__image img {
  transform: scale(1.05);
}

.case-card__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(17, 21, 27, 0.9) 0%, transparent 100%);
  pointer-events: none;
}

/* Insight card images */
.insight-card__image {
  position: relative;
  width: calc(100% + var(--space-8) * 2);
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.insight-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.insight-card:hover .insight-card__image img {
  transform: scale(1.05);
}

/* Section feature image */
.section-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: var(--border-subtle);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-image img {
  width: 100%;
  height: auto;
  display: block;
}

.section-image--rounded {
  border-radius: var(--radius-2xl);
}

/* Sector card images */
.sector-card__image {
  position: relative;
  width: calc(100% + var(--space-8) * 2);
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-4);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sector-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.sector-card:hover .sector-card__image img {
  transform: scale(1.05);
}

/* Article hero image */
.article__hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-10);
  border: var(--border-subtle);
}

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

/* Image with caption */
.image-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-3);
  font-style: italic;
}


/* ============ HOME PAGE ============ */

/* Home hero — extra dramatic */
.home-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.home-hero .hero__content h1 {
  font-size: var(--text-5xl);
  max-width: 14ch;
}

.home-hero .hero__content p {
  font-size: var(--text-xl);
}

/* Animated gradient mesh for home hero */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-mesh__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: orbFloat 20s ease-in-out infinite;
}

.hero-mesh__orb--1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 87, 184, 0.12);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.hero-mesh__orb--2 {
  width: 400px;
  height: 400px;
  background: rgba(0, 87, 184, 0.06);
  bottom: -10%;
  left: -10%;
  animation-delay: -7s;
}

.hero-mesh__orb--3 {
  width: 300px;
  height: 300px;
  background: rgba(0, 61, 130, 0.08);
  top: 40%;
  right: 30%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(40px, 30px) scale(1.02); }
}

/* Services overview section (home) */
.home-services {
  position: relative;
}

.home-services .grid {
  position: relative;
  z-index: 1;
}

/* Sectors strip (home) */
.sectors-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.sectors-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-silver);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.sectors-strip__item:hover {
  border-color: rgba(0, 87, 184, 0.2);
  color: var(--color-white);
  background: rgba(0, 87, 184, 0.05);
}

.sectors-strip__icon {
  width: 20px;
  height: 20px;
  stroke: var(--color-blue);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}


/* ============ ABOUT PAGE ============ */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.value-card {
  padding: var(--space-8);
  background: var(--color-bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}

.value-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(0, 87, 184, 0.1);
}

.value-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-blue);
  fill: none;
  stroke-width: 1.5;
}

.value-card h4 {
  margin-bottom: var(--space-3);
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ============ SERVICES OVERVIEW PAGE ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-8);
}

.services-grid .card {
  padding: var(--space-10);
}


/* ============ SERVICE DETAIL PAGES ============ */
.service-detail__header {
  margin-bottom: var(--space-12);
}

.service-detail__intro {
  font-size: var(--text-lg);
  color: var(--color-silver-light);
  max-width: 75ch;
  margin-bottom: var(--space-10);
  line-height: var(--leading-relaxed);
}

.service-detail__services {
  margin-bottom: var(--space-16);
}

.service-detail__who {
  background: var(--color-bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

.service-detail__who h3 {
  margin-bottom: var(--space-6);
}

.service-detail__who ul {
  list-style: none;
}

.service-detail__who li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.service-detail__who li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue);
  opacity: 0.6;
}


/* ============ SECTORS PAGE ============ */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}


/* ============ SECTOR DETAIL PAGES ============ */
.sector-detail__challenges {
  margin-bottom: var(--space-12);
}

.sector-detail__challenges ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.sector-detail__challenges li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.sector-detail__challenges li svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-blue);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}

.sector-detail__services {
  margin-bottom: var(--space-12);
}


/* ============ CASE STUDIES PAGE ============ */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-8);
}


/* ============ INSIGHTS PAGE ============ */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-8);
}

/* Article page */
.article {
  max-width: 800px;
  margin: 0 auto;
}

.article__header {
  margin-bottom: var(--space-12);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
}

.article__body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.article__body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}

.article__body h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.article__body p {
  margin-bottom: var(--space-6);
  max-width: none;
}

.article__body ul,
.article__body ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.article__body ul {
  list-style: none;
}

.article__body ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.article__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue);
}

.article__related {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: var(--border-subtle);
}


/* ============ CONTACT PAGE ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-form-wrapper {
  background: var(--gradient-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}

.contact-info {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

.contact-info-card {
  background: var(--gradient-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  margin-bottom: var(--space-6);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: rgba(0, 87, 184, 0.1);
  flex-shrink: 0;
}

.contact-info-item__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-blue);
  fill: none;
  stroke-width: 1.5;
}

.contact-info-item h4 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.contact-info-item p,
.contact-info-item a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.contact-info-item a:hover {
  color: var(--color-accent);
}

/* Security notice */
.security-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(0, 87, 184, 0.06);
  border: 1px solid rgba(0, 87, 184, 0.12);
  border-radius: var(--radius-lg);
}

.security-notice svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-blue);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
  margin-top: 2px;
}

.security-notice p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}