/* Selected-work composition.
 * Desktop uses two independent vertical columns so a tall project on one side
 * does not force dead space into the other side. Tablet/mobile returns to a
 * simple reading-order stack.
 */

.work-grid--portfolio,
.work-column,
.work-grid--portfolio .project,
.work-grid--portfolio .project__copy,
.work-grid--portfolio .project__header-row,
.work-grid--portfolio .project__meta,
.work-grid--portfolio .project__meta div,
.work-grid--portfolio .control-states,
.work-grid--portfolio figure {
  min-width: 0;
  max-width: 100%;
}

.work-column {
  min-width: 0;
}

@media (min-width: 60rem) {
  .work-grid--portfolio {
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
    align-items: start;
  }

  .work-grid--portfolio .work-column {
    display: grid;
    align-content: start;
    gap: var(--space-md);
  }

  .work-grid--portfolio .project--featured {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 59.99rem) {
  .work-grid--portfolio {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-grid--portfolio .work-column {
    display: contents;
  }

  .work-grid--portfolio .project {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .work-grid--portfolio .project__header-row {
    align-items: flex-start;
  }

  .work-grid--portfolio .project__eyeline,
  .work-grid--portfolio .status-badge,
  .work-grid--portfolio .control-state,
  .work-grid--portfolio .project p,
  .work-grid--portfolio .project dd,
  .work-grid--portfolio .project li,
  .work-grid--portfolio .project__link {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .work-grid--portfolio .project__meta {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .work-grid--portfolio .control-state {
    flex-wrap: wrap;
  }

  .work-grid--portfolio .project__actions {
    max-width: 100%;
  }

  .work-grid--portfolio figure,
  .work-grid--portfolio figure img {
    width: 100%;
    max-width: 100%;
  }

  .work-grid--portfolio .project--security {
    order: 1;
  }

  .work-grid--portfolio .project--pawsuite {
    order: 2;
  }

  .work-grid--portfolio .project--ticket-trove {
    order: 3;
  }

  .work-grid--portfolio .project--afyabridge-product {
    order: 4;
  }

  .work-grid--portfolio .project--featured {
    grid-column: auto;
    grid-row: auto;
  }
}