/* ==========================================================================
   NOIRX TECH — PAGE STYLES
   File: css/tech.css
   Purpose: Styles specific to pages/noirx-tech.html.
   Loaded after main.css.

   Sections:
   1. Hero (split layout)
   2. Services List
   3. Image Gallery
   4. Process Steps
   5. Why Noirx Tech (image + text split)
   6. CTA Band
   ========================================================================== */


/* ==========================================================================
   1. HERO — SPLIT LAYOUT
   Left: text content. Right: large background image.
   ========================================================================== */
.hero--split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 split */
  position: relative;
  overflow: hidden;
}

/* Left panel: text */
.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 72px 80px;
  position: relative;
  z-index: 2;
}

/* Right panel: background image */
.hero__right {
  position: relative;
  overflow: hidden;
}

/* The actual background image.
   The hero-tech.png golden particle image is already dark on black,
   so we use filter:none by default. The inline style on the element
   also sets filter:none explicitly, but this rule is the fallback.
   If using a regular photo instead, set filter: brightness(0.55) saturate(0.65); */
.hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: none;             /* Golden particle image needs no darkening filter */
  transition: filter 0.45s ease;
}

body.theme-light .hero__image {
  filter: none;             /* Still no filter — image handles its own darkness */
}

/* Left-edge gradient fade — blends image into the text panel */
.hero__image-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-bg) 0%,
    rgba(5,5,5,0.80) 15%,
    rgba(5,5,5,0.20) 42%,
    transparent 65%
  );
}

/* Hero heading */
.hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}

/* Small tag above heading */
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 32px;
}

.hero__tag::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-gold);
}

/* Hero body text */
.hero__body {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--color-text-muted);
  max-width: 420px;
  margin-bottom: 52px;
  font-weight: 300;
}

/* Button row */
.hero__btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ==========================================================================
   2. SERVICES LIST
   Each service is a horizontal row with: number | name + description | features
   ========================================================================== */
.services-section {
  padding: 130px 72px;
}

/* Stack rows with a tiny gap between them (creates divider line effect) */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* One service row: 3 columns */
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr; /* number | info | features */
  background: var(--color-bg-3);
  transition: background 0.3s ease;
  align-items: stretch;
}

.service-row:hover {
  background: var(--color-bg-card);
}

/* Left cell: large italic number */
.service-row__num {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  border-right: 1px solid var(--color-border);
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: rgba(240, 192, 64, 0.2);
  font-style: italic;
}

/* Middle cell: service name + description */
.service-row__info {
  padding: 48px 56px;
  border-right: 1px solid var(--color-border);
}

.service-row__name {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 12px;
  line-height: 1.1;
}

.service-row__desc {
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--color-text-muted);
}

/* Right cell: bullet list of specific features */
.service-row__features {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* Individual feature item */
.service-row__feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.72rem;
  color: rgba(248, 246, 240, 0.6);
}

/* Gold star bullet */
.service-row__feat::before {
  content: '✦';
  color: var(--color-gold);
  font-size: 0.5rem;
  margin-top: 3px;
  flex-shrink: 0;
}


/* ==========================================================================
   3. IMAGE GALLERY
   A CSS grid of photos showcasing different tech areas.
   ========================================================================== */
.gallery-section {
  padding: 0 72px 130px;
}

/* Gallery heading */
.gallery-section__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  margin-bottom: 48px;
}

/* 3-column, 2-row grid. First image spans both rows. */
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 3px;
}

/* Each cell in the gallery */
.gallery-item {
  overflow: hidden;
  position: relative;
}

/* First item spans both rows (tall image on the left) */
.gallery-item:first-child {
  grid-row: 1 / 3;
}

/* The image itself */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* DARK THEME: was 0.45 — raised to 0.62 so details are clearly visible  */
  filter: brightness(0.62) saturate(0.7);
  transition: transform 0.7s ease, filter 0.7s ease;
}

/* LIGHT THEME: vivid and bright — nearly full colour                       */
body.theme-light .gallery-item img {
  filter: brightness(0.88) saturate(0.95);
}

.gallery-item:hover img {
  transform: scale(1.05);
  /* Hover: slightly brighter than resting state                            */
  filter: brightness(0.72) saturate(0.75);
}

body.theme-light .gallery-item:hover img {
  filter: brightness(0.95) saturate(1.0);
}

/* Small label overlay at bottom-left of each image */
.gallery-item__label {
  position: absolute;
  bottom: 20px;
  left: 24px;
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240, 192, 64, 0.7);
  pointer-events: none;
}


/* ==========================================================================
   4. PROCESS STEPS
   Four-column grid: Discover | Design | Build | Support
   ========================================================================== */
.process-section {
  padding: 100px 72px;
  background: var(--color-bg-2);
}

/* Four equal columns */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 64px;
}

/* Individual step card */
.process-step {
  padding: 48px 36px;
  background: var(--color-bg-3);
  position: relative;
  overflow: hidden;
}

/* Animated underline that appears on hover */
.process-step::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.process-step:hover::after {
  transform: scaleX(1);
}

/* Large faint italic number behind content */
.process-step__num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: rgba(240, 192, 64, 0.1);
  line-height: 1;
  margin-bottom: 24px;
  font-style: italic;
}

/* Step title */
.process-step__title {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 12px;
  font-weight: 500;
}

/* Step description */
.process-step__desc {
  font-size: 0.72rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}


/* ==========================================================================
   5. WHY NOIRX TECH — IMAGE + TEXT SPLIT
   ========================================================================== */
.why-section {
  padding: 130px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

/* Image with an offset gold border accent */
.why-section__img-wrap {
  position: relative;
}

.why-section__img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  /* DARK THEME: was 0.45 — raised to 0.60 for clearly visible detail      */
  filter: brightness(0.60) saturate(0.70);
  display: block;
  transition: filter 0.45s ease;
}

/* LIGHT THEME: near full colour                                            */
body.theme-light .why-section__img {
  filter: brightness(0.90) saturate(1.0);
}

/* Decorative offset gold border behind the image */
.why-section__img-accent {
  position: absolute;
  top: -20px;
  left: -20px;
  right: 20px;
  bottom: 20px;
  border: 1px solid var(--color-border-med);
  z-index: -1;
  pointer-events: none;
}

/* Body text */
.why-section__body {
  font-size: 0.85rem;
  line-height: 2;
  color: var(--color-text-muted);
  margin-bottom: 48px;
}

/* List of bullet points */
.why-section__points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.why-point {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Gold star bullet */
.why-point__icon {
  color: var(--color-gold);
  font-size: 0.5rem;
  margin-top: 5px;
  flex-shrink: 0;
}

/* Point heading */
.why-point__title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}

/* Point body */
.why-point__desc {
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}


/* ==========================================================================
   6. CTA BAND
   Centered call to action at the bottom.
   ========================================================================== */
.cta-band {
  padding: 100px 72px;
  text-align: center;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(240, 192, 64, 0.06) 0%,
    transparent 70%
  );
}

.cta-band p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 48px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   RESPONSIVE — TECH PAGE MOBILE
   ========================================================================== */
@media (max-width: 900px) {

  .hero--split {
    grid-template-columns: 1fr;
  }

  .hero__left {
    padding: 140px 24px 60px;
  }

  .hero__right {
    height: 280px;
  }

  .services-section,
  .gallery-section,
  .process-section,
  .why-section,
  .cta-band {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Stack service rows vertically */
  .service-row {
    grid-template-columns: 1fr;
  }

  .service-row__num {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 20px;
  }

  /* Stack gallery into 1 column */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gallery-item:first-child {
    grid-row: auto;
  }

  .gallery-item {
    height: 220px;
  }

  /* 2-column process on mobile */
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Stack why section */
  .why-section {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .why-section__img {
    height: 300px;
  }

}


/* ==========================================================================
   MICRO-INTERACTIONS — added per brief
   These small hover/focus effects make the page feel polished and alive
   without being distracting.
   ========================================================================== */

/* Service rows: left gold border slides in on hover */
.service-row {
  border-left: 3px solid transparent;
  transition: background 0.3s ease, border-color 0.4s ease;
}

.service-row:hover {
  border-left-color: var(--color-gold);
}

/* Process steps: heading brightens on hover */
.process-step:hover .process-step__title {
  color: var(--color-gold);
  transition: color 0.3s ease;
}

/* Why points: icon pulses on hover */
.why-point:hover .why-point__icon {
  animation: iconPulse 0.6s ease;
}

@keyframes iconPulse {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.6); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Gallery items: gold label brightens on hover */
.gallery-item:hover .gallery-item__label {
  color: var(--color-gold);
  transition: color 0.3s ease;
}


/* ==========================================================================
   LIGHT THEME FIXES — Tech page
   When body.theme-light is active, ensure text inside dark cards
   is still readable. Cards use --color-bg-3 which in light mode is
   a warm tan (#EAE7DE) — text must be dark.
   ========================================================================== */

/* Service rows in light mode */
body.theme-light .service-row__desc,
body.theme-light .service-row__feat {
  color: var(--color-text-muted);  /* warm dark muted — readable on tan bg */
}

/* Process steps in light mode */
body.theme-light .process-step__desc {
  color: var(--color-text-muted);
}

/* Why section points in light mode */
body.theme-light .why-point__desc {
  color: var(--color-text-muted);
}

/* Gallery labels in light mode: use deep amber instead of bright gold */
body.theme-light .gallery-item__label {
  color: var(--color-gold);  /* resolves to deep amber in light mode */
}


/* ==========================================================================
   FULL-PAGE CANVAS Z-INDEX SAFETY
   The binary animation canvas sits at z-index:0 (fixed, full page).
   All visible page sections must sit above it.
   The site-nav is already at z-index:200 (in main.css).
   ========================================================================== */

/* Ensure all page sections render above the fixed canvas */
.hero--split,
.services-section,
.gallery-section,
.process-section,
.why-section,
.cta-band,
.site-footer {
  position: relative;
  z-index: 1;
}

/* The binary canvas gives sections a "digital glow" backdrop.
   Add a very subtle dark wash to sections so text stays readable
   even with characters drifting underneath.                              */
.services-section,
.process-section,
.why-section,
.cta-band {
  /* Tiny semi-transparent background so the canvas chars don't
     clash with section text. The section bg covers most of it.          */
  isolation: isolate;
}