/* ==========================================================================
   single-project.css (SINGLE PROJECT ONLY)
   - Scoped to: body.single-project (and also .post-type-project fallback)
   ========================================================================== */

:root{
  --hero-max: 1960px;
  --hero-gutter: 1.25rem;
  --hero-vpad: 2rem;

  --header-align: 0px;
}

/* Use both selectors to be safe across themes */
.single-project,
.post-type-project{
  /* (no styles needed here, just a scope anchor) */
}

/* =========================
   HERO (FULL BLEED) - PROJECT ONLY
   ========================= */

.single-project .onepage-hero,
.post-type-project .onepage-hero{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 0;

  --hero-left: max(
    var(--hero-gutter),
    calc((100vw - min(100vw, var(--hero-max))) / 2 + var(--hero-gutter))
  );
}

.single-project .onepage-hero__titlebar,
.post-type-project .onepage-hero__titlebar{
  border-bottom: 1px solid #1c1f2a;
  background: #fff;
}

.single-project .onepage-hero__titleinner,
.post-type-project .onepage-hero__titleinner{
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 2rem var(--hero-gutter);
}

.single-project .onepage-title,
.post-type-project .onepage-title{
  margin: 0;
  text-align: left;
}

.single-project .onepage-hero__grid,
.post-type-project .onepage-hero__grid{
  display: grid;
  grid-template-columns: clamp(520px, 50vw, 820px) 1fr;
  min-height: 68vh;
  align-items: stretch;
}

.single-project .onepage-hero__content,
.post-type-project .onepage-hero__content{
  padding-top: var(--header-align);
  padding-left: var(--hero-left);
  padding-right: var(--hero-gutter);
  padding-bottom: 3rem;
  background: #fff;
  border-right: 1px solid #1c1f2a;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.single-project .onepage-hero__middle,
.post-type-project .onepage-hero__middle{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

/* .single-project .onepage-hero__bottom,
.post-type-project .onepage-hero__bottom{
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
} */

.project-card__tax {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.project-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
  margin-right: 0.25rem;
}


/* Container */
.single-project .onepage-hero__bottom,
.post-type-project .onepage-hero__bottom {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* Base Tag Style */
.onepage-hero__tag, .onepage-hero__tag--year  {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px; /* pill shape */
  text-decoration: none;
  background: rgba(0, 0, 0, 0.06);
  color: #222;
  transition: all 0.25s ease;
}

span.onepage-hero__meta {
    font-size: 0.75em;
}
/* Hover effect */
.onepage-hero__tag:hover {
  background: #fabf24;
  color: #fff;
  transform: translateY(-2px);
}

/* Year Tag (subtle highlight difference) 
.onepage-hero__tag--year {
  background: #111;
  color: #fff;
  font-weight: 600;
} */

/* Optional: WP tag variation */
.onepage-hero__tag--wp {
  background: rgba(0, 0, 0, 0.08);
}



.single-project .onepage-hero__media,
.post-type-project .onepage-hero__media{
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.single-project .onepage-hero__image,
.post-type-project .onepage-hero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 921px){
  :root{
    --hero-gutter: 1.5rem;
    --header-align: 0px;
  }

  .single-project .onepage-hero__grid,
  .post-type-project .onepage-hero__grid{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .single-project .onepage-hero__media,
  .post-type-project .onepage-hero__media{
    order: 1;
    height: 50vh;
  }

  .single-project .onepage-hero__content,
  .post-type-project .onepage-hero__content{
    order: 2;
    border-right: none;
    border-bottom: 1px solid #1c1f2a;
    padding: 2rem var(--hero-gutter);
  }
}

/* =========================
   PROJECT LAYOUT + ID BAR + PAGINATION (PROJECT ONLY)
   ========================= */

.single-project div#projects,
.post-type-project div#projects{
  margin: 0 auto;
  max-width: 1200px;
}

.single-project span.onepage-hero__meta,
.post-type-project span.onepage-hero__meta{
  margin: 10px 0;
}

.single-project .entry-content > .wp-block-columns,
.post-type-project .entry-content > .wp-block-columns{
  padding: 0;
}

/* Project ID bar */
.single-project .project-id--bar,
.post-type-project .project-id--bar{
  padding: 22px 0;
}

.single-project .project-id__bar,
.post-type-project .project-id__bar{
  padding: 140px 18px 16px;
}

.single-project .project-id__row,
.post-type-project .project-id__row{
  display: grid;
  grid-template-columns: 2.2fr 1.6fr 1.8fr 1.2fr 1.1fr 0.9fr;
  column-gap: 24px;
  align-items: center;
}

.single-project .project-id__row--labels .project-id__cell,
.post-type-project .project-id__row--labels .project-id__cell{
  font-size: 12px;
  opacity: 0.75;
}

.single-project .project-id__rule,
.post-type-project .project-id__rule{
  border-top: 1px solid #1c1f2a;
  margin: 10px 0;
}

.single-project .project-id__row--values .project-id__cell,
.post-type-project .project-id__row--values .project-id__cell{
  font-size: 13px;
  font-weight: 500;
}

.single-project .project-id__cell a,
.post-type-project .project-id__cell a{
  text-decoration: underline;
}

/* Pagination */
.single-project .project-pagination__inner,
.post-type-project .project-pagination__inner{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.single-project .project-pagination__prev,
.single-project .project-pagination__next,
.post-type-project .project-pagination__prev,
.post-type-project .project-pagination__next{
  flex: 1;
}

.single-project .project-pagination__next,
.post-type-project .project-pagination__next{
  text-align: right;
}

.single-project .project-pagination__label,
.post-type-project .project-pagination__label{
  display: block;
  font-size: 12px;
  opacity: 0.7;
}

@media (max-width: 900px){
  /* hide labels row on mobile */
  .single-project .project-id__row--labels,
  .post-type-project .project-id__row--labels{
    display: none;
  }

  /* hide the horizontal rule line on mobile */
  .single-project .project-id__rule,
  .post-type-project .project-id__rule{
    display: none;
  }

  /* stack cells vertically */
  .single-project .project-id__row--values,
  .post-type-project .project-id__row--values{
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding-left: 10px;
  }

  /* each cell = 2 columns (field | value) */
  .single-project .project-id__row--values .project-id__cell,
  .post-type-project .project-id__row--values .project-id__cell{
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 12px;
    align-items: start;
  }

  /* field label (left column) */
  .single-project .project-id__row--values .project-id__cell::before,
  .post-type-project .project-id__row--values .project-id__cell::before{
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
  }

  .single-project .project-id__bar, .post-type-project .project-id__bar {
    padding: 40px 18px 16px;
}

.project-id__value {
  display: inline;          /* keep text inline */
  line-height: 1.25;        /* give sup room */
}

.project-id__value sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

}



/* Project card hover (project only) */
.single-project a.project-card__link:not(.custom-logo-link),
.single-project a.project-card__link:not(.custom-logo-link):hover,
.single-project a.project-card__link:not(.custom-logo-link):focus-visible,
.post-type-project a.project-card__link:not(.custom-logo-link),
.post-type-project a.project-card__link:not(.custom-logo-link):hover,
.post-type-project a.project-card__link:not(.custom-logo-link):focus-visible{
  background-image: none !important;
  background-size: 0 0 !important;
  background-position: 0 0 !important;
}

.single-project .project-card__link:hover .project-card__title,
.single-project .project-card__link:focus-visible .project-card__title,
.single-project .project-card:hover .project-card__title,
.post-type-project .project-card__link:hover .project-card__title,
.post-type-project .project-card__link:focus-visible .project-card__title,
.post-type-project .project-card:hover .project-card__title{
  background-size: 100% 100%;
  background-position: 0 0;
}
.full-bleed {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
}