﻿/*
  R3 PAGE MODULE
  ==============
  Existing R3 and vessel-detail rules remain in legacy.css during migration.
  Add future R3-only rules here, scoped with body.r3-page.
*/

body.r3-page {
  --page-accent: var(--color-r3-red);
}


/* =========================================================
   V100 — PROJECTS WITHOUT INTRO COPY
   Heading and carousel retain one measured standard corridor.
========================================================= */
body.r3-refit-page .r3-refit-projects--intro-free {
  --r3-refit-projects-w: calc(
    var(--r3-project-heading-w)
    + var(--r3-project-heading-gap)
    + var(--r3-project-card-w)
  );
  width: var(--r3-refit-projects-w) !important;
  min-width: var(--r3-refit-projects-w) !important;
  grid-template-columns:
    var(--r3-project-heading-w)
    var(--r3-project-heading-gap)
    var(--r3-project-card-w) !important;
}

body.r3-refit-page .r3-refit-projects--intro-free .r3-refit-projects__heading {
  grid-column: 1 !important;
}

body.r3-refit-page .r3-refit-projects--intro-free .r3-project-carousel {
  grid-column: 3 !important;
}

@media (max-width: 1100px) {
  body.r3-refit-page .r3-refit-projects--intro-free {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: var(--r3-project-heading-w) 18px minmax(0, 1fr) !important;
  }

  body.r3-refit-page .r3-refit-projects--intro-free .r3-project-carousel {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* R3 category/home brand returns to its category landing. */
.r3-subnav__brand {
  display: inline-flex;
  text-decoration: none;
  transform-origin: center;
  transition: transform .30s var(--ease-standard), filter .30s var(--ease-standard);
}

.r3-subnav__brand:hover,
.r3-subnav__brand:focus-visible {
  transform: scale(1.045);
  filter: brightness(1.08);
  outline: none;
}


/* V101 — intro copy is removed, but the Projects → carousel corridor and terminal tail remain intentional. */
body.r3-refit-page .r3-refit-projects--intro-free {
  --r3-project-heading-to-carousel-gap: calc(var(--r3-project-heading-gap) * 2);
  --r3-refit-projects-w: calc(
    var(--r3-project-heading-w)
    + var(--r3-project-heading-to-carousel-gap)
    + var(--r3-project-card-w)
  );
  grid-template-columns:
    var(--r3-project-heading-w)
    var(--r3-project-heading-to-carousel-gap)
    var(--r3-project-card-w) !important;
}

@media (max-width: 1100px) {
  body.r3-refit-page .r3-refit-projects--intro-free {
    grid-template-columns: var(--r3-project-heading-w) 32px minmax(0, 1fr) !important;
  }
}


/* =========================================================
   V102 — R3 PROJECTS GEOMETRY / PRELOAD SAFETY
   Intro copy is intentionally absent; the original visual breathing remains.
========================================================= */
body.r3-refit-page {
  /* Carousel is shifted right by reopening the removed intro corridor. */
  --r3-project-carousel-gap: clamp(192px, 13vw, 310px);
  /* Footer begins sooner after the carousel, using a standard controlled tail. */
  --r3-refit-tail-space: clamp(120px, 10vw, 220px);
}

body.r3-refit-page .r3-refit-projects__heading {
  grid-column: 1 !important;
}

body.r3-refit-page .r3-project-carousel {
  grid-column: 5 !important;
}

/* The next/previous previews always retain a loaded visual surface while the
   incoming asset is decoded, so the right blurred slot cannot flash blank. */
body.r3-refit-page .r3-project-carousel__card {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(7,10,28,.80));
}

body.r3-refit-page .r3-project-carousel__card img {
  background: inherit;
}

@media (max-width: 1100px) {
  body.r3-refit-page {
    --r3-project-carousel-gap: 0px;
    --r3-refit-tail-space: 76px;
  }
}