/*
 * VicWide 2026 premium surface system
 * Kept independent of Tailwind so PHP templates and ad hoc sections share
 * the same architectural texture, framing and motion language.
 */

:root {
  --vwr-ink: #081923;
  --vwr-ink-soft: #0f2a3a;
  --vwr-orange: #f99026;
  --vwr-stone: #c9bba6;
  --vwr-paper: #fafaf7;
  --vwr-line-light: rgba(8, 25, 35, 0.1);
  --vwr-line-dark: rgba(255, 255, 255, 0.11);
}

.vwr-surface-dark,
.vwr-surface-light {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.vwr-surface-dark {
  background: linear-gradient(145deg, #081923 0%, #0f2a3a 52%, #102e41 100%);
  color: #fff;
}

.vwr-surface-light {
  background: var(--vwr-paper);
  color: var(--vwr-ink);
}

/* Grid/texture layer stays behind content without negative z-index paint bugs */
.vwr-surface-dark::before,
.vwr-surface-light::before,
.vwr-grid-dark::before,
.vwr-grid-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vwr-surface-dark > *,
.vwr-surface-light > * {
  position: relative;
  z-index: 1;
}

.vwr-surface-dark::before,
.vwr-grid-dark::before {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 86% 12%, rgba(249,144,38,.22), transparent 30rem);
  background-size: 34px 34px, 34px 34px, auto;
}

.vwr-surface-light::before,
.vwr-grid-light::before {
  opacity: 0.9;
  background-image:
    linear-gradient(rgba(8,25,35,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,25,35,.055) 1px, transparent 1px),
    radial-gradient(circle at 12% 15%, rgba(249,144,38,.11), transparent 27rem);
  background-size: 34px 34px, 34px 34px, auto;
}

/* Light architectural plan wash (services / paper surfaces) */
.vwr-plans-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vwr-paper);
  color: var(--vwr-ink);
}

.vwr-plans-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image:
    linear-gradient(180deg, rgba(250,250,247,.42) 0%, rgba(250,250,247,.18) 40%, rgba(250,250,247,.38) 100%),
    radial-gradient(ellipse at 50% 18%, rgba(250,250,247,.55), transparent 42%),
    url("/assets/images/background/architectural-plans-light.webp");
  background-position: center, center, center 18%;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}

.vwr-plans-light > * {
  position: relative;
  z-index: 1;
}

.vwr-grid-dark,
.vwr-grid-light {
  position: relative;
  isolation: isolate;
}

.vwr-blueprint {
  background-color: var(--vwr-ink);
  background-image:
    linear-gradient(90deg, rgba(8,25,35,.74), rgba(8,25,35,.74)),
    url("/assets/images/background/architectural-blueprint-dark.webp");
  background-position: center;
  background-size: cover;
}

.vwr-materials-panel {
  background-image:
    linear-gradient(90deg, rgba(8,25,35,.9) 0%, rgba(8,25,35,.72) 45%, rgba(8,25,35,.18) 100%),
    url("/assets/images/background/materials-detail.webp");
  background-position: center;
  background-size: cover;
}

.vwr-head {
  position: relative;
  display: inline-block;
}

.vwr-head::after {
  content: "";
  display: block;
  width: min(7rem, 55%);
  height: 2px;
  margin-top: .9rem;
  background: linear-gradient(90deg, var(--vwr-orange), rgba(249,144,38,0));
}

.vwr-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--vwr-orange);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.vwr-kicker::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

.vwr-frame {
  position: relative;
  isolation: isolate;
}

.vwr-frame::after {
  content: "";
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  border: 1px solid rgba(249,144,38,.75);
  pointer-events: none;
  z-index: -1;
  transition: transform .35s ease;
}

.group:hover .vwr-frame::after,
.vwr-frame:hover::after {
  transform: translate(4px, 4px);
}

.vwr-icon-chip {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: .45rem;
  border: 1px solid rgba(249,144,38,.28);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(8,25,35,.1);
}

.vwr-provenance {
  font-size: .72rem;
  line-height: 1.45;
  color: rgba(255,255,255,.58);
}

.vwr-surface-light .vwr-provenance {
  color: rgba(8,25,35,.58);
}

@media (prefers-reduced-motion: reduce) {
  .vwr-frame::after,
  .group:hover .vwr-frame::after,
  .vwr-frame:hover::after {
    transition: none;
    transform: none;
  }
}

@media (max-width: 640px) {
  .vwr-frame::after {
    inset: .6rem -.6rem -.6rem .6rem;
  }
}