/*
 * GR Improvements Inc. — Visual Asset System (VAS)
 * assets/gri-vas.css
 *
 * Replaces: gri-image-slots.css
 * See:      assets/VAS-DOCUMENTATION.md for full architecture guide.
 *
 * Philosophy: the frontend knows how to display an asset because of its
 * TYPE, not because of its filename.  Every decorative image slot is
 * described by an Asset Profile that bundles crop behavior, overlay
 * intensity, fallback, and lazy-loading policy in one place.
 *
 * ─── REVIEW-ASSET METADATA BAND ────────────────────────────────────────────
 * AI-generated images may ship with a bottom metadata band (ID, dimensions,
 * description).  All profiles use object-position: center top by default.
 * Combined with object-fit: cover on a container whose aspect ratio is
 * wider than the image, the bottom band is cropped out of view — review
 * assets display correctly in production before clean exports are available.
 *
 * ─── DECORATIVE vs PORTFOLIO ────────────────────────────────────────────────
 * DECORATIVE (this file): AI-generated imagery for heroes, thumbnails,
 *   atmospheric backgrounds.  Must never be presented as project proof.
 *
 * PORTFOLIO: real project photos only.  CMS-managed, permission_granted=1,
 *   approved=1.  Never sourced from assets/generated/.
 * ──────────────────────────────────────────────────────────────────────────*/


/* ══════════════════════════════════════════════════════════════════════════
   BASE — shared by all VAS asset <img> elements
   Use class="vas-img vas-img--{type}" on every decorative asset image.
   Combined with onerror="this.remove()", this prevents broken icons:
   the element removes itself, revealing the CSS gradient fallback.
══════════════════════════════════════════════════════════════════════════ */
.vas-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /*
   * Default crop: anchor image to top → metadata band at bottom is cropped.
   * Individual profiles override this where the visual calls for it.
   */
  object-position: center top;

  /*
   * Suppress alt text and browser broken-image icon when src is missing.
   * Works in all major browsers: Chrome, Safari, Firefox, Edge.
   */
  color: transparent;
}

/* Overlay base — all decorative overlay divs get this */
.vas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   REVIEW-VERSION SUPPORT (data-review="true")

   Images marked data-review="true" are review exports from the AI generator.
   They contain a bottom metadata strip. All VAS profiles already use
   object-position: center top, which clips the bottom of wide/landscape
   containers automatically — no extra CSS is needed for those slots.

   data-review="true" functions as an AUDIT MARKER:
   • the validator lists review-version assets so the owner knows what still
     needs a clean export.
   • It is harmless when a clean export replaces the file — the attribute
     may stay in HTML indefinitely without visual consequence.

   For portrait containers (PANEL_IMAGE): keep the primary subject in the
   top 80% of the generated image; the strip will sit below the visible area.

   MULTIPLE HERO ASPECT RATIOS (1920×1080, 2560×1080, 3440×1440, etc.):
   object-fit: cover + object-position: center top handles all of these.
   No additional rules are needed — images are never distorted.
   Prefer wider exports for widescreen displays.

   See assets/generated/README.md for full guidance.
══════════════════════════════════════════════════════════════════════════ */
.vas-img[data-review="true"] {
  /* Inherits object-position: center top from .vas-img (already correct for
     metadata-band cropping in landscape containers).
     This rule exists as explicit documentation of the review-mode contract. */
  object-position: center top;
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: HOME_HERO_DESKTOP
   Usage: index.html — full-width hero section background
   Recommended export: 2560 × 1080 px  (+ ~120 px metadata band = 2560 × 1200)
   Crop: center top (desktop + mobile) — protects top content, clips bottom band
══════════════════════════════════════════════════════════════════════════ */
.vas-img--home-hero {
  object-position: center top;
  /* Inherits position, inset, size, object-fit, color from .vas-img */
}

/* Left-to-right gradient: heavy on the copy side, transparent on the right.
   Always present — white text is readable regardless of whether the image loads. */
.vas-overlay--hero {
  background: linear-gradient(
    108deg,
    rgba(15, 45, 61, 0.96) 0%,
    rgba(15, 45, 61, 0.88) 35%,
    rgba(26, 61, 80, 0.70) 60%,
    rgba(38, 122, 148, 0.35) 100%
  );
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: SERVICE_HERO
   Usage: kitchen-remodeling.html, bathroom-renovation.html, basement-finishing.html,
          painting.html, doors-windows.html, general-repairs.html — page hero bg
   Recommended export: 2400 × 1000 px  (+ ~100 px metadata band = 2400 × 1100)
   Crop: center top — clips metadata band, shows subject from top down
══════════════════════════════════════════════════════════════════════════ */
.vas-img--service-hero {
  object-position: center top;
}

/* Left column stays near-opaque so headline + paragraph always read on dark navy.
   Right side lightens for depth and the teal polygon panel takes over visually. */
.vas-overlay--svc-hero {
  background: linear-gradient(
    105deg,
    rgba(11, 30, 40, 0.97) 0%,
    rgba(11, 30, 40, 0.96) 40%,
    rgba(15, 45, 61, 0.82) 65%,
    rgba(26, 61, 80, 0.50) 100%
  );
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: PANEL_IMAGE
   Usage: index.html — hero right-panel, Our-Work satisfaction panel
   Recommended export: 1600 × 1200 px  (+ ~120 px metadata band = 1600 × 1320)
   Crop: center 20% — shows slightly above center; clips metadata band at bottom
══════════════════════════════════════════════════════════════════════════ */
.vas-img--panel {
  object-position: center 20%;
  border-radius: inherit; /* picks up the rounded-2xl from the wrapping div */
}

/* Bottom-heavy dark gradient keeps any overlaid text/credential card readable */
.vas-overlay--panel {
  background: linear-gradient(
    to bottom,
    rgba(26, 61, 80, 0.25) 0%,
    rgba(15, 45, 61, 0.80) 100%
  );
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: SERVICE_THUMBNAIL
   Usage: index.html — service section card thumbnails (×6)
   Recommended export: 1200 × 600 px  (+ ~80 px metadata band = 1200 × 680)
   Crop: center top — clips metadata band; wide container ensures bottom is clipped
   Fallback: teal gradient shows when asset is absent
══════════════════════════════════════════════════════════════════════════ */

/* Wrapper — replaces .svc-thumb from gri-image-slots.css */
.vas-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: linear-gradient(135deg, #1E5068 0%, #2E8FA5 55%, #4AACBE 100%);
  flex-shrink: 0;
}

.vas-img--service-thumb {
  object-position: center top;
}

/* Light bottom fade — teal wash ties thumbnail into card background */
.vas-overlay--thumb {
  background: linear-gradient(
    to top,
    rgba(15, 45, 61, 0.45) 0%,
    rgba(15, 45, 61, 0.05) 60%,
    transparent 100%
  );
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: TRUST_BACKGROUND
   Usage: index.html — dark trust-bar section (bg-t900)
   Recommended export: 1920 × 700 px  (+ ~70 px metadata band = 1920 × 770)
   Crop: center top (very wide container → most of bottom always clipped)
   Rendering: 13% opacity + luminosity blend — depth without distraction
   Fallback: bg-t900 (#0F2D3D) shows through
══════════════════════════════════════════════════════════════════════════ */
.vas-img--trust-bg {
  object-position: center top;
  opacity: 0.13;
  mix-blend-mode: luminosity;
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: CTA_BACKGROUND
   Usage: index.html — final CTA band (bg-t800)
   Recommended export: 1920 × 450 px  (+ ~45 px metadata band = 1920 × 495)
   Crop: center top (extremely wide container → virtually entire image shown)
   Rendering: 9% opacity + luminosity blend — barely-there texture
   Fallback: bg-t800 + existing diagonal stripe shows through
══════════════════════════════════════════════════════════════════════════ */
.vas-img--cta-bg {
  object-position: center top;
  opacity: 0.09;
  mix-blend-mode: luminosity;
}


/* ══════════════════════════════════════════════════════════════════════════
   ASSET PROFILE: OUR_WORK_HERO
   Usage: our-work.html — full-width hero section background
   Recommended export: 1920 × 900 px  (+ ~90 px metadata band = 1920 × 990)
   Crop: center top — clips metadata band, shows portfolio-evoking content
══════════════════════════════════════════════════════════════════════════ */
.vas-img--ourwork-hero {
  object-position: center top;
}


/* ══════════════════════════════════════════════════════════════════════════
   PROJECT CARD IMAGE SLOT
   Usage: our-work.html — static project article cards
   Replaces: .project-img-slot from gri-image-slots.css

   IMPORTANT — PORTFOLIO RULE:
     Only real, CMS-approved project photos may appear in this slot.
     permission_granted = 1  AND  approved = 1  required.
     AI-generated images must NEVER be placed here.
     Drop the <img> entirely to show the teal-textured fallback.
══════════════════════════════════════════════════════════════════════════ */
.vas-project-slot {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;

  /* Diagonal texture over dark teal gradient — looks intentional when empty */
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 0px,
      transparent 50%
    ),
    linear-gradient(135deg, #0F2D3D 0%, #1A3D50 40%, #267A94 100%);
  background-size: 24px 24px, auto;
}

.vas-project-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  color: transparent;
}

/* Bottom gradient keeps overlaid caption readable */
.vas-overlay--project {
  background: linear-gradient(
    to top,
    rgba(15, 45, 61, 0.70) 0%,
    rgba(15, 45, 61, 0.15) 45%,
    transparent 100%
  );
}


/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT SHIFT PREVENTION
   Containers establish their height before images load so there is no
   Cumulative Layout Shift (CLS) when assets arrive.

   Hero sections: py-20 / py-28 establishes height → no extra needed.
   Thumbnails:    aspect-ratio: 16/8 on .vas-thumb-wrap → browser reserves space.
   Project slots: fixed height: 200px on .vas-project-slot → no shift.
   Panel slot:    min-height is set inline on the wrapping div → no shift.
══════════════════════════════════════════════════════════════════════════ */

/* Service-page hero right-side panel (responsive min-height) */
.svc-hero-panel-slot {
  min-height: 260px;
}
@media (min-width: 1024px) {
  .svc-hero-panel-slot {
    min-height: 420px;
  }
}