/* CMV_37.0.6_TEST — PORTFOLIO RELEASE COMMAND RAIL
 * Base: 37.0.5. Archive-style status / selector / memo structure.
 * Scoped, non-animated 37.1_TEST fluid Portfolio field/grid rules.
 * Release copy, cards, IDs, preview data, and JavaScript are retained.
 */

/* Let the existing stacked layout flow through the new semantic wrappers. */
#portfolio .cmv376-portfolio-header,
#portfolio .cmv376-portfolio-heading,
#portfolio .cmv376-portfolio-rail {
  display: contents;
}

#portfolio .cmv376-portfolio-heading > small {
  display: block;
  color: var(--red);
  font-size: 10px;
  letter-spacing: .45em;
  margin-bottom: 24px;
}

#portfolio .cmv376-portfolio-memo {
  width: min(100%, 640px);
  margin: 0 0 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.10);
  text-align: right;
}

#portfolio .cmv376-portfolio-memo em {
  color: var(--red);
  font-size: 9px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .34em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

@media (min-width: 1180px) {
  #portfolio {
    --cmv371-gutter: clamp(42px, 3.4vw, 118px);
    --cmv371-field: clamp(1180px, 93vw, 2560px);
    --cmv371-card-wide: 380px;
    --cmv371-gap: clamp(12px, 1.05vw, 22px);

    /* Apply layout to both states; retain the base .screen page animation. */
    padding-left: var(--cmv371-gutter) !important;
    padding-right: var(--cmv371-gutter) !important;
  }

  #portfolio .soon-panel {
    display: block !important;
    width: 100% !important;
    max-width: var(--cmv371-field) !important;
    margin-inline: auto !important;
  }

  #portfolio .cmv376-portfolio-header {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(410px, 670px);
    gap: 38px;
    align-items: start;
  }

  #portfolio .cmv376-portfolio-heading {
    display: block;
    min-width: 0;
  }

  #portfolio .cmv376-portfolio-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 670px;
    min-width: 0;
    margin-top: 36px;
    gap: 16px;
    justify-self: end;
    justify-items: end;
    align-content: start;
  }

  #portfolio .portfolio-release-status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    width: 410px;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 16px 24px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.30);
    box-shadow: none;
    color: #111;
  }

  #portfolio .portfolio-release-status span,
  #portfolio .portfolio-release-status strong {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .48em;
  }

  #portfolio .portfolio-release-status span {
    color: inherit;
  }

  #portfolio .portfolio-release-status strong {
    color: var(--red);
  }

  #portfolio .portfolio-release-status::after {
    content: "";
    flex: 0 0 58px;
    height: 1px;
    background: var(--red);
  }

  #portfolio #portfolioViewControls {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: right !important;
  }

  #portfolio .portfolio-view-toggle {
    display: flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  #portfolio .portfolio-view-btn {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 20px !important;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .28em;
  }

  #portfolio .cmv376-portfolio-memo {
    width: max-content;
    max-width: 100%;
    margin: 0;
    justify-self: end;
  }

  #portfolio #portfolioGrid.portfolio-view-list,
  #portfolio #portfolioGrid.portfolio-view-wide,
  #portfolio #portfolioGrid.portfolio-view-tile,
  #portfolio #portfolioGrid.portfolio-view-grid,
  #portfolio #portfolioGrid.portfolio-view-large {
    width: 100% !important;
    max-width: none !important;
    margin: 58px 0 0 !important;
  }

  #portfolio #portfolioGrid.portfolio-view-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--cmv371-card-wide), 1fr)) !important;
    gap: var(--cmv371-gap) !important;
  }

  /* The production Tiles class is singular, despite the reference's typo. */
  #portfolio #portfolioGrid.portfolio-view-tile {
    grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 15vw, 300px), 1fr)) !important;
    gap: var(--cmv371-gap) !important;
  }

  body.theme-night #portfolio .portfolio-release-status {
    color: #f3f3f0;
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }

  body.theme-beige #portfolio .portfolio-release-status {
    color: #2b2118;
    border-color: rgba(74,49,29,.12);
    background: rgba(255,248,235,.35);
  }
}

@media (min-width: 1180px) and (max-width: 1599px) {
  #portfolio .cmv376-portfolio-header {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  #portfolio .cmv376-portfolio-rail {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  #portfolio .cmv376-portfolio-heading > small {
    font-size: 7px;
    letter-spacing: .16em;
    margin-bottom: 18px;
  }

  #portfolio .cmv376-portfolio-memo {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
  }

  #portfolio .cmv376-portfolio-memo em {
    font-size: 6px;
    letter-spacing: .20em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio.screen {
    transition: none !important;
  }
}