/* Mission 21.4: final hierarchy for the resource catalog and detail surfaces. */

.resource-catalog-actions {
  align-items: center;
}

.resource-primary-action {
  font-weight: var(--typography-weight-bold);
}

.resource-admin-action {
  white-space: nowrap;
}

.resource-admin-section {
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  border-top: var(--border-width-default) solid var(--color-line);
}

.resource-admin-section > .resource-section-heading {
  align-items: flex-end;
}

.resource-identity-summary {
  border-color: color-mix(in srgb, var(--color-brand) 24%, var(--color-line));
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand));
}

.resource-identity-summary h2 {
  margin: 0;
}

.resource-identity-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resource-identity-grid dd {
  font-weight: var(--typography-weight-bold);
}

.resource-detail-edit-actions {
  justify-content: flex-end;
}

.resource-detail-back-actions {
  flex-shrink: 0;
}

@media (min-width: 1100px) {
  .resource-types-section .resource-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 320px));
    justify-content: start;
  }
}

@media (max-width: 900px) {
  .resource-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .resource-page-header .resource-catalog-actions {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .resource-page-header .resource-catalog-actions .resource-primary-action {
    width: 100%;
  }

  .resource-page-header .resource-catalog-actions .resource-admin-action {
    width: auto;
    min-height: 44px;
    justify-self: start;
    border-color: transparent;
    padding-inline: 0;
    background: transparent;
    text-align: left;
  }

  .resource-admin-section {
    padding-top: var(--space-5);
  }

  .resource-identity-summary {
    gap: var(--space-4);
  }

  .resource-detail-edit-actions {
    width: 100%;
  }

  .resource-detail-edit-actions .button {
    width: 100%;
    min-height: var(--control-height-default);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .resource-identity-grid {
    grid-template-columns: 1fr;
  }
}