/* ===========================================================================
   Category reference pages — img/reference/ui-use 1/reff layout all page
   ---------------------------------------------------------------------------
   The supplied boards are presentation-style index pages: a black canvas,
   one baked Topic lockup, then a two-column grid of angular 451x233 cards.
   Keep the card artwork authoritative; placeholders are intentional when a
   new button image has not been supplied yet.
   =========================================================================== */

#screen-cat > .wrap{
  max-width:1080px;
  padding-block:clamp(2.5rem,6vw,5.25rem) clamp(5rem,10vw,10rem);
  padding-top:max(calc(var(--nav-h) + env(safe-area-inset-top,0px)),clamp(2.5rem,6vw,5.25rem));
}

#screen-cat .category-intro{
  text-align:center;
}

/* The component styles below set display explicitly, so keep the DOM's
   hidden state authoritative when a baked Topic lockup is active. */
#screen-cat [hidden]{display:none !important}

#screen-cat .category-intro__topic{
  display:block;
  width:min(100%,765px);
  height:auto;
  margin:0 auto;
}

/* Fallback for a category without a Topic asset yet. */
#screen-cat .category-intro__logo{
  width:auto;
  height:clamp(150px,20vw,220px);
  margin:0 auto clamp(1.75rem,4vw,3rem);
}

#screen-cat .category-intro h1{
  font-size:clamp(2rem,5vw,4rem);
  line-height:.98;
}

#screen-cat .category-intro h1.sr-only{margin:-1px}

#screen-cat .category-intro__tagline,
#screen-cat .category-intro__description{
  display:none;
}

#screen-cat #works.project-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3.25vw,2.35rem) clamp(1.5rem,3.5vw,2.75rem);
  margin:clamp(3rem,7vw,5.25rem) 0 0;
}

#screen-cat .project-card{
  min-width:0;
  border-radius:0;
  transition:transform .3s ease,filter .3s ease;
}

#screen-cat .project-card--reference{
  overflow:visible;
  background:none;
}

#screen-cat .project-card__reference,
#screen-cat .project-card__placeholder{
  display:block;
  width:100%;
  aspect-ratio:451 / 233;
}

#screen-cat .project-card__reference{
  height:auto;
  object-fit:cover;
  border:0;
}

#screen-cat .project-card__placeholder{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  clip-path:polygon(
    18px 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    0 100%,
    0 18px
  );
  background:
    linear-gradient(180deg,#7b7d7f 0%,#77797b 30%,#434445 65%,#090909 100%);
}

#screen-cat .project-card__placeholder-title{
  position:absolute;
  inset:auto clamp(.75rem,1.7vw,1.15rem) clamp(.7rem,1.6vw,1rem);
  color:#fff;
  font-family:"DIN Pro Cond","DIN Pro","Prompt",sans-serif;
  font-size:clamp(.75rem,1.7vw,1.12rem);
  font-weight:900;
  line-height:1.08;
  text-align:left;
  text-transform:uppercase;
  text-wrap:balance;
}

#screen-cat .project-card:hover,
#screen-cat .project-card:focus-visible{
  transform:translateY(-4px);
  filter:drop-shadow(0 14px 24px rgba(255,255,255,.12));
}

#screen-cat .project-card:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}

@media (max-width:700px){
  #screen-cat > .wrap{
    padding-block:1.5rem 5rem;
    padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  }

  #screen-cat #works.project-grid{
    grid-template-columns:1fr;
    gap:2.25rem;
    margin-top:2.75rem;
  }

  #screen-cat .project-card__placeholder-title{
    font-size:clamp(.9rem,4vw,1.15rem);
  }
}

@media (prefers-reduced-motion:reduce){
  #screen-cat .project-card{transition:none}
}