/* CHANAWAY5000 | Work page | consolidated launch stylesheet
   Works with the Sprint 1 work.php and existing shared site CSS. */

/* Shared typography and section basics */
.work-hero, .work-selected, .work-independent, .work-nhl32 { position:relative; }
.work-hero *, .work-selected *, .work-independent *, .work-nhl32 * { box-sizing:border-box; }
.work-kicker { margin:0 0 24px; color:#626262; font:800 12px/1.3 "Barlow",sans-serif; letter-spacing:.075em; text-transform:uppercase; }
.work-hero h1, .work-heading, .work-project h3, .work-independent h2, .work-nhl32 h2 { font-family:"aBlackLives","Arial Black",sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; }
.work-hero .blue, .work-heading .blue, .work-independent h2 span, .work-nhl32 h2 span { color:#0866f5; }

/* Hero */
.work-hero { min-height:550px; overflow:hidden; background:#fff; isolation:isolate; }
.work-hero-photo { position:absolute; inset:0; z-index:-2; background:url("../images/work/work_hero_desktop.webp") center/cover no-repeat; }
.work-hero-fade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#fff 0%,#fff 25%,rgba(255,255,255,.97) 36%,rgba(255,255,255,.72) 49%,rgba(255,255,255,.08) 73%,transparent 100%); }
.work-hero-inner { display:flex; align-items:center; min-height:550px; padding-top:65px; padding-bottom:65px; }
.work-hero-content { width:100%; max-width:620px; }
.work-hero h1 { margin:0 0 24px; color:#080808; font-size:clamp(58px,6.6vw,100px); line-height:.98; }
.work-hero-copy { max-width:480px; margin:0; color:#555; font:400 clamp(18px,1.6vw,22px)/1.4 "Barlow",sans-serif; }

/* Selected Work */
.work-selected { padding:100px 0 115px; background:#f4f4f4; }
.work-heading { margin:0 0 30px; color:#080808; font-size:clamp(50px,6vw,90px); line-height:1; }
.work-section-intro { max-width:640px; margin:0 0 65px; color:#555; font:400 20px/1.55 "Barlow",sans-serif; }
.work-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:42px; row-gap:72px; align-items:stretch; }
.work-project { display:flex; flex-direction:column; min-width:0; align-items:stretch; }
.work-project-image { display:block; width:100%; aspect-ratio:2/1; margin:0 0 22px; overflow:hidden; background:#e3e3e3; color:inherit; text-decoration:none; }
.work-project-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.work-project-image:hover img, .work-project-image:focus-visible img { transform:scale(1.035); }
.work-project-number { margin:0 0 12px; color:#0866f5; font:800 12px/1.3 "Barlow",sans-serif; }
.work-project h3 { margin:0 0 12px; color:#080808; font-size:clamp(28px,3vw,43px); line-height:1.08; }
.work-project-title-link { color:inherit; text-decoration:none; }
.work-project-title-link:hover, .work-project-title-link:focus-visible { color:#0866f5; }
.work-project > p { max-width:500px; margin:0 0 20px; color:#555; font:400 17px/1.55 "Barlow",sans-serif; }
.work-project-link, .work-nhl32-link { display:inline-flex; align-items:center; gap:10px; width:fit-content; color:#080808; text-decoration:none; font:800 12px/1.4 "Barlow",sans-serif; letter-spacing:.04em; }
.work-project-link { margin-top:auto; padding-top:10px; }
.work-project-link:hover, .work-nhl32-link:hover { color:#0866f5; }
.work-project-image:focus-visible, .work-project-title-link:focus-visible, .work-project-link:focus-visible, .work-nhl32-link:focus-visible { outline:3px solid #0866f5; outline-offset:4px; }

/* Independent Spirit */
.work-independent { display:flex; align-items:center; min-height:640px; overflow:hidden; isolation:isolate; background:#171717 url("../images/work/independent-fullbleed.webp") center 48%/cover no-repeat; color:#fff; }
.work-independent-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.72) 52%,rgba(0,0,0,.38)); }
.work-independent-inner { width:100%; max-width:1200px; margin-inline:auto; padding:110px 24px 115px; }
.work-independent .work-kicker { color:#ddd; }
.work-independent h2 { max-width:1050px; margin:0 0 35px; font-size:clamp(54px,7.5vw,110px); line-height:1; }
.work-independent-inner > p:last-child { max-width:620px; margin:0; color:#eee; font:400 21px/1.55 "Barlow",sans-serif; }

/* NHL32 */
.work-nhl32 { padding:115px 0 125px; background:#fff; }
.work-nhl32-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; gap:65px; }
.work-nhl32-label { margin:0 0 24px; color:#666; font:800 12px/1.3 "Barlow",sans-serif; letter-spacing:.075em; }
.work-nhl32 h2 { margin:0; color:#080808; font-size:clamp(45px,5vw,74px); line-height:1.05; }
.work-nhl32-copy p { margin:0 0 24px; color:#555; font:400 18px/1.6 "Barlow",sans-serif; }
.work-nhl32-copy .work-build-detail { margin-bottom:0; color:#777; font-size:12px; font-weight:800; }
.work-nhl32-link { margin-top:26px; }

/* Tablet */
@media (max-width:900px) {
  .work-hero, .work-hero-inner { min-height:510px; }
  .work-hero h1 { font-size:clamp(58px,8vw,82px); }
  .work-selected { padding:85px 0 95px; }
  .work-project-grid { column-gap:28px; row-gap:60px; }
  .work-independent { min-height:520px; }
  .work-nhl32-layout { grid-template-columns:1fr; gap:35px; }
}

/* Mobile */
@media (max-width:600px) {
  .work-hero { display:flex; flex-direction:column; min-height:0; }
  .work-hero-inner { order:1; min-height:0; padding-top:65px; padding-bottom:45px; }
  .work-hero-photo { position:relative; order:2; inset:auto; width:100%; aspect-ratio:3/2; background-image:url("../images/work/work_hero_mobile.webp"); background-position:center; }
  .work-hero-fade { display:none; }
  .work-hero h1 { font-size:clamp(58px,12.5vw,80px); }
  .work-hero-copy { font-size:18px; }
  .work-selected { padding:75px 0 85px; }
  .work-heading { font-size:clamp(43px,10vw,65px); }
  .work-section-intro { margin-bottom:45px; font-size:18px; }
  .work-project-grid { grid-template-columns:1fr; row-gap:50px; }
  .work-project-image { aspect-ratio:16/9; }
  .work-project h3 { font-size:34px; }
  .work-independent { min-height:480px; }
  .work-independent-overlay { background:rgba(0,0,0,.72); }
  .work-independent-inner { padding-top:75px; padding-bottom:80px; }
  .work-independent h2 { font-size:clamp(43px,10vw,65px); }
  .work-independent-inner > p:last-child { font-size:18px; }
  .work-nhl32 { padding:75px 0 85px; }
  .work-nhl32 h2 { font-size:clamp(40px,9vw,60px); }
}
@media (prefers-reduced-motion:reduce) { .work-project-image img { transition:none; } }

/* WORK HERO: Align desktop content with About and Contact */
@media (min-width: 901px) {
    .work-hero-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}