/* --------------------------------------------------------------------------
   project.css – single interior-design project page.
   Opt in with $page['css'] = ['service', 'project'] (service.css carries
   .wf_eyebrow, .wf_cta, .wf_showcase, .wf_gallery and .wf_cta_banner).
   Nothing here restyles a component from the original site assets.
   -------------------------------------------------------------------------- */

/* --- Hero -----------------------------------------------------------------
   Full-bleed photo with the project title and its key figures sitting on it. */
/* main gets 11.1rem / 25.3rem of top padding for the fixed header; the hero
   is full-bleed, so it takes that clearance over – same trick the original
   assets use with main:has(.wf_hero). */
main:has(.wf_prj_hero){padding-top:0}
.wf_prj_hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
    display:flex;align-items:flex-end;padding:11.1rem 0 0;min-height:100vh;min-height:100dvh;
    opacity:0;animation:cubicReveal2 1.2s cubic-bezier(.77,0,.175,1) forwards}
.wf_prj_hero_bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.wf_prj_hero::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,#000000a6,#00000040 35%,#000000e6)}
.wf_prj_hero_inner{width:100%;max-width:151.5rem;margin-inline:auto;padding:6rem 1.4rem 4rem;
    opacity:0;animation:fadeUpActive 1s cubic-bezier(.77,0,.175,1) .3s forwards}

@media (prefers-reduced-motion:reduce){
.wf_prj_hero,.wf_prj_hero_inner{opacity:1;animation:none}
}
.wf_prj_hero .wf_breadcrumbs{margin-bottom:2.4rem}
/* the hero eyebrow uses .wf_eyebrow--badge from service.css */
.wf_prj_hero h1{font-size:3rem;font-weight:300;margin-bottom:1.2rem}
.wf_prj_hero h1 strong{font-weight:500}
.wf_prj_hero_sub{font-size:1.6rem;font-weight:300;color:#ffffffd9;margin-bottom:3.2rem;
    max-width:62rem}
.wf_prj_hero_meta{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem;
    border-top:.1rem solid #ffffff40;padding-top:2.8rem}
.wf_prj_hero_meta li span{display:block;font-size:1.1rem;letter-spacing:.2rem;
    text-transform:uppercase;color:#ffffff8c;margin-bottom:.6rem}
.wf_prj_hero_meta li strong{font-size:1.8rem;font-weight:500}

@media (min-width:425px){
.wf_prj_hero_inner{padding-inline:2.4rem}
}

@media (min-width:768px){
.wf_prj_hero h1{font-size:4.8rem}
.wf_prj_hero_meta{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1024px){
.wf_prj_hero{padding-top:25.3rem}
.wf_prj_hero_inner{padding:8rem 2.4rem 6rem}
.wf_prj_hero_sub{font-size:2.1rem;line-height:3.2rem}
.wf_prj_hero_meta{gap:4rem;padding-top:4rem}
.wf_prj_hero_meta li strong{font-size:2.4rem}
}

@media (min-width:1600px){
.wf_prj_hero_inner{padding-inline:0}
}

/* --- Заданието: centred story with a spec table underneath ---------------- */
.wf_prj_brief{margin:6rem auto;text-align:center}
.wf_prj_brief_text{max-width:86rem;margin-inline:auto}
.wf_prj_brief h2{font-size:2.4rem;font-weight:300;margin-bottom:2rem}
.wf_prj_brief h2 strong{font-weight:500}
.wf_prj_brief p{font-size:1.4rem;line-height:2.4rem;font-weight:300;color:#000000b3}
.wf_prj_brief p+p{margin-top:1.6rem}
.wf_prj_specs{margin-top:4rem;display:grid;grid-template-columns:repeat(2,1fr);
    border-top:.1rem solid var(--wf-cg3);border-left:.1rem solid var(--wf-cg3)}
.wf_prj_specs div{display:flex;flex-direction:column;justify-content:center;gap:.8rem;
    padding:2rem 1.2rem;border-right:.1rem solid var(--wf-cg3);
    border-bottom:.1rem solid var(--wf-cg3)}
.wf_prj_specs dt{font-size:1.1rem;letter-spacing:.2rem;text-transform:uppercase;
    color:var(--wf-cp);font-weight:500}
.wf_prj_specs dd{font-size:1.4rem;line-height:2.2rem;font-weight:500}

@media (min-width:768px){
.wf_prj_specs{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1024px){
.wf_prj_brief{margin:12rem auto}
.wf_prj_brief h2{font-size:3.6rem;margin-bottom:3.2rem}
.wf_prj_brief p{font-size:1.8rem;line-height:2.8rem}
.wf_prj_brief p+p{margin-top:2.4rem}
.wf_prj_specs{margin-top:6.4rem}
.wf_prj_specs div{padding:3.2rem 2rem}
.wf_prj_specs dt{font-size:1.2rem}
.wf_prj_specs dd{font-size:1.8rem;line-height:2.6rem}
}

/* --- Image grid: bento ---------------------------------------------------- */
.wf_prj_gallery{margin:6rem auto}
.wf_prj_grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:14rem;gap:1rem}
.wf_prj_grid[data-popup] figure{cursor:pointer}
.wf_prj_more{display:inline-flex;margin:2.4rem auto 0}
.wf_prj_more_wrap{display:flex;justify-content:center}
.wf_prj_grid figure{position:relative;overflow:hidden;border-radius:1rem}
.wf_prj_grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.wf_prj_grid figure:nth-child(4){grid-column:span 2}
.wf_prj_grid img{width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.645,.045,.355,1),opacity .8s ease}
.wf_prj_grid figure:hover img{transform:scale(1.05)}
.wf_prj_grid figure::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;
    pointer-events:none;background:linear-gradient(180deg,#0000,#000000a6)}
.wf_prj_grid figcaption{position:absolute;z-index:2;left:1.6rem;bottom:1.2rem;color:#fff;
    font-size:1.1rem;letter-spacing:.2rem;text-transform:uppercase}

@media (min-width:768px){
.wf_prj_grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:18rem;gap:1.2rem}
.wf_prj_grid figure:nth-child(2){grid-column:span 2}
.wf_prj_grid figure:nth-child(4){grid-column:span 1}
}

@media (min-width:1024px){
.wf_prj_gallery{margin:12rem auto}
.wf_prj_grid{grid-auto-rows:24rem}
.wf_prj_more{margin-top:3.2rem}
.wf_prj_grid figcaption{left:2rem;bottom:1.6rem}
}

/* --- Преди / След --------------------------------------------------------- */
.wf_prj_ba{margin:6rem auto}
.wf_prj_ba_pair{display:grid;grid-template-columns:1fr;gap:2rem}
.wf_prj_ba figure{position:relative;border-radius:1rem;overflow:hidden;height:30rem}
.wf_prj_ba img{width:100%;height:100%;object-fit:cover}
.wf_prj_ba figcaption{position:absolute;top:1.6rem;left:1.6rem;background-color:#fff;
    border-radius:.5rem;padding:.6rem 1.6rem;font-size:1.2rem;letter-spacing:.2rem;
    text-transform:uppercase;font-weight:500}
.wf_prj_ba .is-after figcaption{background-color:#141414;color:#fff}

@media (min-width:768px){
.wf_prj_ba_pair{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:1024px){
.wf_prj_ba{margin:12rem auto}
.wf_prj_ba_pair{gap:2.4rem}
.wf_prj_ba figure{height:48rem}
}

/* --- Материали ------------------------------------------------------------ */
.wf_prj_materials{margin:6rem auto}
.wf_prj_materials_list{display:grid;grid-template-columns:1fr;gap:0}
.wf_prj_materials_list div{padding:1.8rem 0;border-bottom:.1rem solid var(--wf-cg3)}
.wf_prj_materials_list div:first-child{border-top:.1rem solid var(--wf-cg3)}
.wf_prj_materials_list dt{font-size:1.4rem;font-weight:500;text-transform:uppercase;
    letter-spacing:.1rem;margin-bottom:.6rem}
.wf_prj_materials_list dd{font-size:1.4rem;line-height:2.4rem;font-weight:300;color:#000000b3}

@media (min-width:768px){
.wf_prj_materials_list{grid-template-columns:repeat(2,1fr);column-gap:6rem}
.wf_prj_materials_list div:nth-child(2){border-top:.1rem solid var(--wf-cg3)}
}

@media (min-width:1024px){
.wf_prj_materials{margin:12rem auto}
.wf_prj_materials_list dt,.wf_prj_materials_list dd{font-size:1.6rem}
}

/* --- Отзив от клиента ----------------------------------------------------- */
.wf_prj_quote{margin:6rem auto;text-align:center}
.wf_prj_quote svg{width:6.4rem;height:6.4rem;opacity:.2;margin-bottom:2.4rem}
.wf_prj_quote blockquote{font-size:2.1rem;line-height:3.2rem;font-weight:300;
    max-width:92rem;margin:0 auto 2.4rem}
.wf_prj_quote strong{display:block;font-size:1.6rem;font-weight:500}
.wf_prj_quote span{font-size:1.4rem;font-weight:300;color:#000000b3}

@media (min-width:1024px){
.wf_prj_quote{margin:12rem auto}
.wf_prj_quote svg{width:9.6rem;height:9.6rem}
.wf_prj_quote blockquote{font-size:3.2rem;line-height:4.6rem;margin-bottom:3.2rem}
}