/* ==========================================================================
   NEELACHANDRA INTERIORS — PAGE-SCOPED STYLES
   --------------------------------------------------------------------------
   Every rule in this file MUST be nested under a page wrapper class so that
   nothing leaks into other pages sharing header.php / footer.php.
   Wrapper classes are emitted by header.php on <main class="nc-page …">:

     .neelachandra-interiors-home
     .neelachandra-interiors-about
     .neelachandra-interiors-portfolio
     .neelachandra-interiors-contact

   Universal styling belongs in css/style.css, never here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared by all pages — the page wrapper itself
   -------------------------------------------------------------------------- */

/* The wrapper must never constrain width; the .nc-container inside each
   section owns all horizontal sizing. */
.nc-page {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  zoom: normal;
  transform: none;
}

/* Honeypot field used by contact-form.php. Removed from the visual and
   accessibility trees without display:none, which some bots detect. */
.nc-trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Error variant of the server-rendered form banner. */
.form-note--error {
  background: var(--nc-error-container);
  color: var(--nc-on-error-container);
  border-left-color: var(--nc-error);
}

/* --------------------------------------------------------------------------
   1. HOME — .neelachandra-interiors-home
   -------------------------------------------------------------------------- */

/* The hero is the only full-bleed element on the site: it must escape the
   1440px container and fill the viewport edge to edge. */
.neelachandra-interiors-home .hero {
  width: 100%;
  max-width: none;
}

/* HERO OVERLAY - WHITE ------------------------------------------------------
   The homepage hero overlay is WHITE, as requested, replacing the dark
   rgba(39,24,18,0.52) scrim from style.css.

   ⚠️ THIS IS A COUPLED CHANGE, NOT A ONE-LINER. Every piece of type in the hero
   was white-on-dark. Painting the overlay white without inverting the ink would
   have left white text on a near-white field: invisible. Four things had to move
   together, and they must stay together:
     1. this overlay,
     2. all hero type, inverted to the dark on-surface ink (below),
     3. the ghost button, now dark-outlined,
     4. the navbar ink: index.php's $nav_scheme changed 'dark' to 'light'.
   If you ever restore the dark scrim, all four must go back.

   The base .hero also carries background-color: var(--nc-inverse-surface) as the
   pre-load colour. That is overridden here too, otherwise the hero flashes
   charcoal before the image paints, then turns white.

   0.72 was chosen by eye against the photograph: enough to lift the image into
   a pale field that dark type sits on cleanly, while the room is still legible.
   This is a flat fill, NOT a gradient, per the anti-slop rules. */
.neelachandra-interiors-home .hero {
  background-color: var(--nc-surface);
}

.neelachandra-interiors-home .hero__scrim {
  background: rgba(255, 255, 255, 0.72);
}

/* HERO TYPE - DARK ON THE WHITE OVERLAY.
   These selectors are 2-3 classes deep, so they override the Tailwind
   `text-inverse-on-surface` utilities already in the markup without
   !important. Hierarchy is carried by the existing token ramp (on-surface for
   headings, on-surface-variant for supporting text) rather than by opacity,
   which is what the rest of the site does on light backgrounds. */
.neelachandra-interiors-home .hero__content,
.neelachandra-interiors-home .hero__content h1,
.neelachandra-interiors-home .hero__content .numeral-xl,
.neelachandra-interiors-home .hero__content .subheader-lg {
  color: var(--nc-on-surface);
}

/* Eyebrow takes the accent, as it does in every light section on the site. */
.neelachandra-interiors-home .hero__content .eyebrow {
  color: var(--nc-primary);
}

.neelachandra-interiors-home .hero__content > .nc-container p.body-lg {
  color: var(--nc-on-surface-variant);
}

.neelachandra-interiors-home .hero__content .stat-cell .label-caps {
  color: var(--nc-primary);
}

.neelachandra-interiors-home .hero__content .stat-cell .body-md {
  color: var(--nc-on-surface-variant);
}

/* Ghost button: was white-outlined for the dark scrim, now dark-outlined. */
.neelachandra-interiors-home .hero__content .btn-ghost-light {
  color: var(--nc-on-surface);
  border-color: var(--nc-on-surface);
}

.neelachandra-interiors-home .hero__content .btn-ghost-light:hover,
.neelachandra-interiors-home .hero__content .btn-ghost-light:focus-visible {
  background-color: var(--nc-on-surface);
  border-color: var(--nc-on-surface);
  color: var(--nc-surface);
}

/* Credential strip hairlines. .stat-cell in style.css draws them in
   rgba(255,237,231,.24), a light-on-dark hairline that was correct against the
   old dark scrim and is invisible against the white overlay. Repointed at the
   standard outline-variant token used by every other light section. */
.neelachandra-interiors-home .hero__content .stat-cell {
  border-top-color: var(--nc-outline-variant);
}

@media (min-width: 768px) {
  .neelachandra-interiors-home .hero__content .stat-cell {
    border-left-color: var(--nc-outline-variant);
  }
}

.neelachandra-interiors-home .stat-cell:first-child {
  border-left-color: transparent;
}

/* Process band sits on the inverse (charcoal) surface, so its hairlines and
   numerals need the light-on-dark treatment. Scoped here rather than set with
   inline styles on every step. */
.neelachandra-interiors-home #process .process-step {
  border-top-color: rgba(255, 237, 231, 0.18);
}

.neelachandra-interiors-home #process .process-step:last-child {
  border-bottom: 1px solid rgba(255, 237, 231, 0.18);
}

.neelachandra-interiors-home #process .process-step__num {
  color: rgba(255, 181, 154, 0.5);
}

.neelachandra-interiors-home #process .process-step:hover .process-step__num {
  color: var(--nc-primary-container);
}

.neelachandra-interiors-home #process .step-meta {
  color: var(--nc-inverse-primary);
}

/* Keep the philosophy figure from exceeding its 7-column track on very wide
   viewports without introducing a narrower max-width on the section itself. */
.neelachandra-interiors-home #philosophy figure {
  width: 100%;
}

/* ANSWER-FIRST / KEY-FACTS BLOCK (#quick-answer) --------------------------
   A definition list styled as a rule-separated table. Two columns on desktop
   so eight facts read as a scannable spec sheet rather than a long ladder;
   stacked on mobile because a 4-col grid cannot carry two label/value pairs
   side by side without truncating the values.

   0px radius, no shadow, 1px rules only — consistent with the design system.
   The 8px baseline is respected: 16px / 24px / 48px spacing only. */
.neelachandra-interiors-home .nc-answer-first strong {
  font-weight: 500;
  color: var(--nc-primary);
}

.neelachandra-interiors-home .nc-facts {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--nc-outline-variant);
}

.neelachandra-interiors-home .nc-fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--nc-outline-variant);
}

@media (min-width: 768px) {
  .neelachandra-interiors-home .nc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .neelachandra-interiors-home .nc-fact {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

.neelachandra-interiors-home .nc-fact dt {
  margin: 0;
}

.neelachandra-interiors-home .nc-fact dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. ABOUT — .neelachandra-interiors-about
   -------------------------------------------------------------------------- */
.neelachandra-interiors-about .nc-list--light > li {
  border-bottom-color: rgba(255, 237, 231, 0.18);
}

/* The about page used to repaint .elevated-flat white here. Removed: the base
   .elevated-flat rule in css/style.css now carries the single light surface, so
   this override was a no-op that only invited the tint back. */

/* --------------------------------------------------------------------------
   3. PORTFOLIO — REMOVED

   portfolio.php has been DELETED (its ten projects were invented; the interiors
   practice has just started and has no completed work to show). The three rules
   that lived here scoped .filter-chip and .project-card__caption under
   .neelachandra-interiors-portfolio, a page-scope class that no page now emits,
   so they were dead weight.

   The underlying .project-card / .filter-chip components still exist in
   css/style.css - see the scope note there. Nothing renders them at present.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. SERVICES — .neelachandra-interiors-services
   -------------------------------------------------------------------------- */

/* Each discipline is a full editorial block separated by a hairline, with
   generous vertical rhythm. The last block closes with a rule so the section
   does not end on an open edge. */
.neelachandra-interiors-services .service-block {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .neelachandra-interiors-services .service-block {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.neelachandra-interiors-services .service-block:last-child {
  border-bottom: 1px solid var(--nc-outline-variant);
}

/* Index strip links sit on a hairline and align with the grid. */
.neelachandra-interiors-services .service-index-item .link-arrow {
  display: flex;
  align-items: center;
  width: 100%;
}

.neelachandra-interiors-services .service-index-item .material-symbols-outlined {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   5. PROCESS — .neelachandra-interiors-process
   -------------------------------------------------------------------------- */

.neelachandra-interiors-process .stage-block {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .neelachandra-interiors-process .stage-block {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.neelachandra-interiors-process .stage-block:last-child {
  border-bottom: 1px solid var(--nc-outline-variant);
}

/* The quality-gate list sits on the inverse band, so bold leaders take the
   light accent rather than the default charcoal. */
.neelachandra-interiors-process #quality-gates strong {
  color: var(--nc-inverse-primary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. CONTACT — .neelachandra-interiors-contact
   -------------------------------------------------------------------------- */
.neelachandra-interiors-contact .discipline {
  border-bottom-color: var(--nc-outline-variant);
}

.neelachandra-interiors-contact .elevated-flat {
  height: 100%;
}