/* =====================================================================
   RENI UPVC — PROJECTS & INSTALLATIONS PAGE
   File: assets/css/projects-installations.css (loaded after style.css,
   only by projects-installations.html).

   Contents
     1. Motion tokens
     2. Layout: sections, photo cards, video cards, enquiry block
     3. Entrance animations (hero, headings, cards)
     4. Hover / focus states (cards, buttons, links, lightbox)
     5. Responsive
     6. Reduced motion

   Everything is scoped to body[data-page="projects-installations"], so no
   other page or shared style is affected. Entrance and hover effects use
   only opacity / transform / box-shadow / colour, so nothing shifts layout.
===================================================================== */

/* ---------------------------------
   1. MOTION TOKENS
   One set of durations and one easing curve for the whole page.
   --pi-enter matches the site's existing .reveal (0.7s).
--------------------------------- */
body[data-page="projects-installations"]{
  --pi-ease:cubic-bezier(.22,.61,.36,1);
  --pi-fast:.25s;     /* colour, underline, focus */
  --pi-base:.4s;      /* card hover, image zoom, shadow */
  --pi-enter:.7s;     /* scroll / page-load entrances */
  --pi-lift:4px;      /* hover lift distance */
  --pi-shadow:0 18px 34px rgba(26,33,41,0.13);
}

/* ---------------------------------
   2. LAYOUT
--------------------------------- */
body[data-page="projects-installations"] .proj-section{padding:96px 0;}
body[data-page="projects-installations"] .proj-section.alt{background:var(--paper);}

/* sub-headings: slim bronze accent that draws in under the divider line */
body[data-page="projects-installations"] .proj-subhead{position:relative; font-size:1.4rem; margin:44px 0 22px; padding-bottom:12px; border-bottom:1px solid var(--line);}
body[data-page="projects-installations"] .proj-subhead::after{content:""; position:absolute; left:0; bottom:-1px; width:56px; height:2px; background:var(--bronze); transform:scaleX(0); transform-origin:left center; transition:transform .8s var(--pi-ease) .25s;}
body[data-page="projects-installations"] .proj-subhead.in::after{transform:scaleX(1);}
body[data-page="projects-installations"] .section-head + .proj-subhead{margin-top:0;}
body[data-page="projects-installations"] .proj-grid + .proj-subhead{margin-top:64px;}

/* eyebrow line grows in with its heading */
body[data-page="projects-installations"] .section-head .eyebrow-tag::before{transform:scaleX(0); transform-origin:left center; transition:transform .6s var(--pi-ease) .2s;}
body[data-page="projects-installations"] .section-head.in .eyebrow-tag::before{transform:scaleX(1);}

/* photo cards: every card in a grid shares one crop ratio */
body[data-page="projects-installations"] .proj-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
body[data-page="projects-installations"] .proj-card{
  min-width:0; margin:0; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; cursor:pointer;
  transition:transform var(--pi-base) var(--pi-ease), box-shadow var(--pi-base) var(--pi-ease), border-color var(--pi-base) var(--pi-ease);
}
body[data-page="projects-installations"] .proj-media{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2);}
body[data-page="projects-installations"] .proj-grid.is-square .proj-media{aspect-ratio:1/1;}
body[data-page="projects-installations"] .proj-media img{width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--pi-ease);}
body[data-page="projects-installations"] .proj-media img.pos-top{object-position:center top;}
body[data-page="projects-installations"] .proj-media img.pos-left{object-position:28% center;}
/* soft dark wash at the base of the image so the zoom icon stays visible */
body[data-page="projects-installations"] .proj-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,33,41,0) 55%, rgba(26,33,41,0.28)); opacity:0; transition:opacity var(--pi-base) var(--pi-ease); pointer-events:none;}
body[data-page="projects-installations"] .proj-zoom{position:absolute; right:12px; bottom:12px; z-index:1; width:38px; height:38px; border-radius:50%; background:var(--white); color:var(--slate); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(6px); transition:opacity var(--pi-base) var(--pi-ease), transform var(--pi-base) var(--pi-ease);}
body[data-page="projects-installations"] .proj-zoom svg{width:20px; height:20px;}
body[data-page="projects-installations"] .proj-card figcaption{flex:1; padding:16px 18px 20px; border-top:2px solid transparent; transition:border-color var(--pi-base) var(--pi-ease);}
/* card titles are h4 (children of the h3 sub-headings), so the heading outline stays h1 > h2 > h3 > h4 */
body[data-page="projects-installations"] .proj-card h4{font-size:1rem; margin-bottom:6px; transition:color var(--pi-fast) ease;}
body[data-page="projects-installations"] .proj-card p{font-size:0.86rem;}
body[data-page="projects-installations"] .proj-card h4, body[data-page="projects-installations"] .proj-card p, body[data-page="projects-installations"] .vid-body h3, body[data-page="projects-installations"] .vid-body p, body[data-page="projects-installations"] .enquiry-details li{overflow-wrap:break-word;}

/* video cards: one frame ratio, video letterboxed inside it */
body[data-page="projects-installations"] .vid-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
body[data-page="projects-installations"] .vid-card{
  min-width:0; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  transition:box-shadow var(--pi-base) var(--pi-ease), border-color var(--pi-base) var(--pi-ease);
}
body[data-page="projects-installations"] .vid-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:#141A20;}
body[data-page="projects-installations"] .vid-media video{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#141A20;}
body[data-page="projects-installations"] .vid-body{flex:1; padding:18px 20px 22px; border-top:2px solid transparent; transition:border-color var(--pi-base) var(--pi-ease);}
body[data-page="projects-installations"] .vid-tag{display:inline-block; font-size:0.74rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--bronze-dark); margin-bottom:8px;}
body[data-page="projects-installations"] .vid-body h3{font-size:1.08rem; margin-bottom:8px; transition:color var(--pi-fast) ease;}
body[data-page="projects-installations"] .vid-body p{font-size:0.9rem;}

/* enquiry block */
body[data-page="projects-installations"] .proj-enquiry .content{max-width:640px;}
body[data-page="projects-installations"] .proj-enquiry .cta-actions{flex-wrap:wrap;}
body[data-page="projects-installations"] .enquiry-details{list-style:none; margin:28px 0 0; padding:20px 0 0; border-top:1px solid rgba(255,255,255,0.25); display:grid; gap:8px;}
body[data-page="projects-installations"] .enquiry-details li{color:rgba(255,255,255,0.86); font-size:0.92rem; line-height:1.6;}

/* ---------------------------------
   3. ENTRANCE ANIMATIONS
   Hero: pure CSS, runs once on load (works without JavaScript).
   Headings + cards: the site's existing .reveal class adds .in on scroll
   (main.js); cards use a keyframe so hover transforms stay independent.
--------------------------------- */
@keyframes piRise{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes piSettle{
  from{transform:scale(1.06);}
  to{transform:scale(1);}
}
@keyframes piFade{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes piPop{
  from{opacity:0; transform:scale(.97);}
  to{opacity:1; transform:scale(1);}
}

/* hero: background image settles, text rises in sequence */
body[data-page="projects-installations"] .page-hero img{animation:piSettle 1.6s var(--pi-ease) both;}
body[data-page="projects-installations"] .page-hero .breadcrumb{animation:piRise var(--pi-enter) var(--pi-ease) .1s both;}
body[data-page="projects-installations"] .page-hero h1{animation:piRise .8s var(--pi-ease) .2s both;}
body[data-page="projects-installations"] .page-hero p{animation:piRise .8s var(--pi-ease) .35s both;}

/* photo + video cards: fade and rise once, staggered by column (classes set by projects-installations.js) */
body[data-page="projects-installations"] .proj-card.reveal,
body[data-page="projects-installations"] .vid-card.reveal{opacity:0; transform:none;}
body[data-page="projects-installations"] .proj-card.reveal.in,
body[data-page="projects-installations"] .vid-card.reveal.in{opacity:1; animation:piRise var(--pi-enter) var(--pi-ease) backwards;}
body[data-page="projects-installations"] .pi-delay-0.reveal.in{animation-delay:0ms;}
body[data-page="projects-installations"] .pi-delay-1.reveal.in{animation-delay:90ms;}
body[data-page="projects-installations"] .pi-delay-2.reveal.in{animation-delay:180ms;}
body[data-page="projects-installations"] .pi-delay-3.reveal.in{animation-delay:270ms;}

/* lightbox (shared markup): gentle fade and scale when opened */
body[data-page="projects-installations"] .lightbox.open{animation:piFade .28s ease both;}
body[data-page="projects-installations"] .lightbox.open img{animation:piPop .35s var(--pi-ease) both;}

/* ---------------------------------
   4. HOVER / FOCUS STATES
   Pointer hover effects only on devices that really hover, so taps on
   phones never leave a card stuck in its hover state.
--------------------------------- */
@media (hover:hover) and (pointer:fine){
  body[data-page="projects-installations"] .proj-card:hover{transform:translateY(calc(var(--pi-lift) * -1)); border-color:var(--bronze); box-shadow:var(--pi-shadow);}
  body[data-page="projects-installations"] .proj-card:hover .proj-media img{transform:scale(1.05);}
  body[data-page="projects-installations"] .proj-card:hover .proj-media::after{opacity:1;}
  body[data-page="projects-installations"] .proj-card:hover .proj-zoom{opacity:1; transform:none;}
  body[data-page="projects-installations"] .proj-card:hover figcaption{border-top-color:var(--bronze);}
  body[data-page="projects-installations"] .proj-card:hover h4{color:var(--bronze-dark);}
  /* video cards do not move, so the player controls stay steady under the pointer */
  body[data-page="projects-installations"] .vid-card:hover{border-color:var(--bronze); box-shadow:var(--pi-shadow);}
  body[data-page="projects-installations"] .vid-card:hover .vid-body{border-top-color:var(--bronze);}
  body[data-page="projects-installations"] .vid-card:hover .vid-body h3{color:var(--bronze-dark);}
}

/* keyboard focus mirrors hover (shown for keyboard users only) */
body[data-page="projects-installations"] .proj-card:focus-visible{outline:2px solid var(--bronze); outline-offset:3px; transform:translateY(calc(var(--pi-lift) * -1)); border-color:var(--bronze); box-shadow:var(--pi-shadow);}
body[data-page="projects-installations"] .proj-card:focus-visible .proj-media img{transform:scale(1.05);}
body[data-page="projects-installations"] .proj-card:focus-visible .proj-media::after,
body[data-page="projects-installations"] .proj-card:focus-visible .proj-zoom{opacity:1; transform:none;}
body[data-page="projects-installations"] .proj-card:focus-visible figcaption{border-top-color:var(--bronze);}
body[data-page="projects-installations"] .vid-card:focus-within{border-color:var(--bronze); box-shadow:var(--pi-shadow);}
body[data-page="projects-installations"] .vid-card:focus-within .vid-body{border-top-color:var(--bronze);}

/* touch screens: keep the zoom hint visible instead of hover-only */
@media (hover:none){
  body[data-page="projects-installations"] .proj-zoom{opacity:1; transform:none;}
}

/* buttons: same press / lift language everywhere on this page */
body[data-page="projects-installations"] .btn{transition:transform var(--pi-fast) var(--pi-ease), background var(--pi-fast) ease, color var(--pi-fast) ease, border-color var(--pi-fast) ease, box-shadow var(--pi-fast) ease;}
body[data-page="projects-installations"] .btn:hover{box-shadow:0 10px 20px rgba(20,26,32,0.2);}
body[data-page="projects-installations"] .btn:active{transform:translateY(0) scale(.98); box-shadow:0 3px 8px rgba(20,26,32,0.18);}
body[data-page="projects-installations"] .btn:focus-visible{outline:2px solid var(--bronze); outline-offset:3px; box-shadow:0 10px 20px rgba(20,26,32,0.2);}
body[data-page="projects-installations"] .btn-light:focus-visible{outline-color:var(--white);}

/* navigation, breadcrumb, footer and lightbox controls */
body[data-page="projects-installations"] nav.desktop-nav a{transition:color var(--pi-fast) ease;}
body[data-page="projects-installations"] nav.desktop-nav a:hover{color:var(--slate);}
body[data-page="projects-installations"] nav.desktop-nav a:focus-visible::after{width:100%;}
body[data-page="projects-installations"] .mobile-menu .mnav-link{transition:color var(--pi-fast) ease, transform var(--pi-fast) var(--pi-ease);}
body[data-page="projects-installations"] .mobile-menu .mnav-link:hover,
body[data-page="projects-installations"] .mobile-menu .mnav-link:focus-visible{color:var(--bronze-dark);}
body[data-page="projects-installations"] .breadcrumb a{transition:color var(--pi-fast) ease;}
body[data-page="projects-installations"] .breadcrumb a:focus-visible{color:#fff; outline-color:#fff;}
body[data-page="projects-installations"] footer ul a{display:inline-block; transition:color var(--pi-fast) ease, transform var(--pi-fast) var(--pi-ease);}
body[data-page="projects-installations"] footer ul a:hover,
body[data-page="projects-installations"] footer ul a:focus-visible{color:var(--white); transform:translateX(3px);}
body[data-page="projects-installations"] .lightbox .lb-close{transition:transform var(--pi-fast) var(--pi-ease), opacity var(--pi-fast) ease; opacity:.85;}
body[data-page="projects-installations"] .lightbox .lb-close:hover,
body[data-page="projects-installations"] .lightbox .lb-close:focus-visible{opacity:1; transform:scale(1.12);}
body[data-page="projects-installations"] .lightbox .lb-close:focus-visible{outline:2px solid var(--white); outline-offset:4px;}

/* ---------------------------------
   5. RESPONSIVE
   Breakpoints (all page-scoped):
     > 1100  photos 4 across · videos 3 across
     <= 1100 photos 3 across
     <= 980  videos 2 across
     <= 760  photos 2 across
     <= 560  videos 1 across (centred, capped width so a clip never
             becomes taller than the screen)
     <= 340  photos 1 across
--------------------------------- */
@media (max-width:1100px){
  body[data-page="projects-installations"] .proj-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1024px){
  body[data-page="projects-installations"] .proj-section{padding-top:80px; padding-bottom:80px;}
}
@media (max-width:980px){
  body[data-page="projects-installations"] .vid-grid{grid-template-columns:repeat(2,1fr); gap:22px;}
}
@media (max-width:760px){
  body[data-page="projects-installations"] .proj-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
}
@media (max-width:640px){
  body[data-page="projects-installations"] .proj-section{padding-top:64px; padding-bottom:64px;}
  body[data-page="projects-installations"] .proj-subhead{font-size:1.25rem; margin-bottom:18px;}
  body[data-page="projects-installations"] .proj-grid + .proj-subhead{margin-top:48px;}
  body[data-page="projects-installations"] .proj-card figcaption{padding:14px 14px 16px;}
  body[data-page="projects-installations"] .proj-card p{font-size:0.82rem;}
}
@media (max-width:560px){
  body[data-page="projects-installations"] .vid-grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto;}
}
@media (max-width:480px){
  /* call-to-action buttons become full-width, thumb-sized targets */
  body[data-page="projects-installations"] .proj-enquiry .cta-actions{flex-direction:column; align-items:stretch;}
  body[data-page="projects-installations"] .proj-enquiry .cta-actions .btn{width:100%; min-height:48px;}
}
@media (max-width:420px){
  body[data-page="projects-installations"] .proj-grid{gap:12px;}
  body[data-page="projects-installations"] .proj-card figcaption{padding:12px 12px 14px;}
  body[data-page="projects-installations"] .proj-card h4{font-size:0.92rem;}
  body[data-page="projects-installations"] .proj-card p{font-size:0.78rem; line-height:1.5;}
}
@media (max-width:340px){
  body[data-page="projects-installations"] .proj-grid{grid-template-columns:1fr;}
}

/* phones held sideways: keep the hero within one screen so the title is visible */
@media (orientation:landscape) and (max-height:600px){
  body[data-page="projects-installations"] .page-hero{height:auto; min-height:max(320px, 88vh);}
  body[data-page="projects-installations"] .page-hero .content{padding-top:96px;}
}

/* touch screens: comfortable tap targets for the controls on this page */
@media (pointer:coarse){
  body[data-page="projects-installations"] .hamburger{min-width:44px; min-height:44px; align-items:center; justify-content:center;}
  body[data-page="projects-installations"] .btn{min-height:46px;}
  body[data-page="projects-installations"] .lightbox .lb-close{display:flex; align-items:center; justify-content:center; width:48px; height:48px; top:max(12px, env(safe-area-inset-top, 0px)); right:max(12px, env(safe-area-inset-right, 0px)); background:rgba(255,255,255,0.14); border-radius:50%; font-size:1.7rem; opacity:1;}
}

/* older browsers without aspect-ratio: padding-top fallback keeps the same frames */
@supports not (aspect-ratio:1/1){
  body[data-page="projects-installations"] .proj-media{height:0; padding-top:125%;}
  body[data-page="projects-installations"] .proj-grid.is-square .proj-media{padding-top:100%;}
  body[data-page="projects-installations"] .proj-media img{position:absolute; inset:0;}
  body[data-page="projects-installations"] .vid-media{height:0; padding-top:133.333%;}
}

/* ---------------------------------
   6. REDUCED MOTION
   Content is shown immediately and every transform / animation is off.
   Colour and shadow changes stay, so hover and focus remain visible.
--------------------------------- */
@media (prefers-reduced-motion: reduce){
  body[data-page="projects-installations"] *,
  body[data-page="projects-installations"] *::before,
  body[data-page="projects-installations"] *::after{animation:none !important;}
  body[data-page="projects-installations"] .proj-card.reveal,
  body[data-page="projects-installations"] .vid-card.reveal{opacity:1; transform:none;}
  body[data-page="projects-installations"] .proj-subhead::after,
  body[data-page="projects-installations"] .section-head .eyebrow-tag::before{transform:scaleX(1); transition:none;}
  body[data-page="projects-installations"] .proj-card,
  body[data-page="projects-installations"] .proj-media img,
  body[data-page="projects-installations"] .proj-media::after,
  body[data-page="projects-installations"] .proj-zoom,
  body[data-page="projects-installations"] .btn,
  body[data-page="projects-installations"] footer ul a,
  body[data-page="projects-installations"] .mobile-menu .mnav-link,
  body[data-page="projects-installations"] .lightbox .lb-close{transition:none;}
  body[data-page="projects-installations"] .proj-card:hover,
  body[data-page="projects-installations"] .proj-card:focus-visible,
  body[data-page="projects-installations"] .proj-card:hover .proj-media img,
  body[data-page="projects-installations"] .proj-card:focus-visible .proj-media img,
  body[data-page="projects-installations"] .btn:hover,
  body[data-page="projects-installations"] .btn:active,
  body[data-page="projects-installations"] footer ul a:hover,
  body[data-page="projects-installations"] footer ul a:focus-visible,
  body[data-page="projects-installations"] .lightbox .lb-close:hover{transform:none;}
}