/* ============================================================
   0_project.css — Individual project page styles
   ============================================================ */


/* #region |||||||||| PROJECT HEADER ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .project-breadcrumb a {
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
    color: var(--C-COL);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity var(--T-BASE), color var(--T-BASE);
    display: inline-block;
    margin-bottom: var(--S-LG);
  }
  .project-breadcrumb a:hover { opacity: 1; color: var(--C-RUB); }

  .project-header__cat {
    color: var(--C-RUB);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--S-SM);
    display: block;
  }

/* #endregion */


/* #region |||||||||| HERO IMAGE ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .project-hero-img {
    width: 100%;
    max-width: var(--L-CWID);
    margin: 0 auto;
  }

  .project-hero-img img,
  .project-hero-img__placeholder {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--R-XL);
    display: block;
    background: var(--C-BON-D);
  }

/* #endregion */


/* #region |||||||||| PROJECT META SIDEBAR ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .project-meta {
    position: sticky;
    top: calc(var(--L-NAV-H) + var(--S-LG));
    align-self: start;
  }

  .project-meta__list {
    display: flex;
    flex-direction: column;
    gap: var(--S-LG);
    list-style: none;
  }

  .project-meta__item { border-left: 2px solid var(--C-RUB); padding-left: var(--S-MD); }

  .project-meta__label {
    display: block;
    color: var(--C-RUB);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--S-XS);
  }

  .project-meta__value { font-family: var(--F-BDY); font-size: var(--T-SM); opacity: 0.8; }

/* #endregion */


/* #region |||||||||| PROJECT CONTENT ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .project-content h2 { margin-bottom: var(--S-MD); }

/* #endregion */


/* #region |||||||||| GALLERY ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .project-gallery { display: flex; flex-direction: column; gap: var(--G-CRD); }

  .project-gallery__row { gap: var(--G-CRD); }

  .project-gallery__item { border-radius: var(--R-LG); overflow: hidden; }

  .project-gallery__placeholder,
  .project-gallery__item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--C-BON-D);
  }

  .project-gallery__item--full .project-gallery__placeholder,
  .project-gallery__item--full img { aspect-ratio: 16 / 7; }

/* #endregion */


/* #region |||||||||| PROJECT NAV ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .project-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--C-BON-D);
    flex-wrap: wrap;
    gap: var(--S-MD);
  }

  .project-nav__back {
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
    color: var(--C-COL);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity var(--T-BASE), color var(--T-BASE);
  }
  .project-nav__back:hover { opacity: 1; color: var(--C-RUB); }

  .project-nav__next {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--S-XS);
    color: var(--C-COL);
    transition: color var(--T-BASE);
  }
  .project-nav__next:hover { color: var(--C-RUB); }

  .project-nav__next-label { color: var(--C-RUB); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

  .project-nav__next-title { font-family: var(--F-HDG); font-size: var(--T-LG); }

/* #endregion */


/* #region |||||||||| RESPONSIVE ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  @media (max-width: 900px) {
    .project-meta { position: static; }
  }

/* #endregion */